Product grid
A simple product grid that works well after a features section
Landing page kit
Tight cards are enough when the page already established the main product story.
$100.00
/ month
Docs launch kit
Tight cards are enough when the page already established the main product story.
$100.00
/ month
Section starter pack
Tight cards are enough when the page already established the main product story.
$100.00
/ month
Conversion toolkit
Tight cards are enough when the page already established the main product story.
$100.00
/ month
---
import Products1Block from "@/components/blocks/products-1.astro"
import placeholderImage from "@/assets/placeholder.webp"
---
<Products1Block
badge="Product grid"
title="A simple product grid that works well after a features section"
products={[
{
image: {
src: placeholderImage,
alt: "Landing page kit image placeholder",
},
title: "Landing page kit",
description:
"Tight cards are enough when the page already established the main product story.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
image: {
src: placeholderImage,
alt: "Docs launch kit image placeholder",
},
title: "Docs launch kit",
description:
"Tight cards are enough when the page already established the main product story.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
image: {
src: placeholderImage,
alt: "Section starter pack image placeholder",
},
title: "Section starter pack",
description:
"Tight cards are enough when the page already established the main product story.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
image: {
src: placeholderImage,
alt: "Conversion toolkit image placeholder",
},
title: "Conversion toolkit",
description:
"Tight cards are enough when the page already established the main product story.",
price: { value: 100, currency: "USD", unit: "month" },
},
]}
/> Collection
A compact list layout for product overviews
Marketing pages
Describe the collection first, then let subpages or product cards handle the deeper details.
$100.00
/ month
Documentation templates
Describe the collection first, then let subpages or product cards handle the deeper details.
$100.00
/ month
Conversion flows
Describe the collection first, then let subpages or product cards handle the deeper details.
$100.00
/ month
Onboarding bundle
Describe the collection first, then let subpages or product cards handle the deeper details.
$100.00
/ month
---
import Products2Block from "@/components/blocks/products-2.astro"
---
<Products2Block
badge="Collection"
title="A compact list layout for product overviews"
products={[
{
title: "Marketing pages",
description:
"Describe the collection first, then let subpages or product cards handle the deeper details.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
title: "Documentation templates",
description:
"Describe the collection first, then let subpages or product cards handle the deeper details.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
title: "Conversion flows",
description:
"Describe the collection first, then let subpages or product cards handle the deeper details.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
title: "Onboarding bundle",
description:
"Describe the collection first, then let subpages or product cards handle the deeper details.",
price: { value: 100, currency: "USD", unit: "month" },
},
]}
/> Pricing
Minimal cards with prominent pricing
$49.00
Hero set
Use compact cards when the products are really grouped content patterns.
$79.00
Article set
Use compact cards when the products are really grouped content patterns.
$99.00
Pricing set
Use compact cards when the products are really grouped content patterns.
---
import Products3Block from "@/components/blocks/products-3.astro"
---
<Products3Block
badge="Pricing"
title="Minimal cards with prominent pricing"
products={[
{
title: "Hero set",
description:
"Use compact cards when the products are really grouped content patterns.",
price: { value: 49, currency: "USD" },
},
{
title: "Article set",
description:
"Use compact cards when the products are really grouped content patterns.",
price: { value: 79, currency: "USD" },
},
{
title: "Pricing set",
description:
"Use compact cards when the products are really grouped content patterns.",
price: { value: 99, currency: "USD" },
},
]}
/>A product row with room for a collection-wide action
Each card can link to a deeper product page or serve as a compact collection overview.
Launch page bundle
Each card can link to a deeper product page or serve as a compact collection overview.
$100.00
/ month
Editorial bundle
Each card can link to a deeper product page or serve as a compact collection overview.
$100.00
/ month
Onboarding bundle
Each card can link to a deeper product page or serve as a compact collection overview.
$100.00
/ month
---
import Products4Block from "@/components/blocks/products-4.astro"
import placeholderImage from "@/assets/placeholder.webp"
---
<Products4Block
title="A product row with room for a collection-wide action"
description="Each card can link to a deeper product page or serve as a compact collection overview."
buttons={[
{
label: "View all products",
href: "/blocks/product/",
variant: "default",
},
{
label: "Compare plans",
href: "/blocks/pricing/",
variant: "outline",
},
]}
products={[
{
image: {
src: placeholderImage,
alt: "Launch page bundle image placeholder",
},
title: "Launch page bundle",
description:
"Each card can link to a deeper product page or serve as a compact collection overview.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
image: {
src: placeholderImage,
alt: "Editorial bundle image placeholder",
},
title: "Editorial bundle",
description:
"Each card can link to a deeper product page or serve as a compact collection overview.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
image: {
src: placeholderImage,
alt: "Onboarding bundle image placeholder",
},
title: "Onboarding bundle",
description:
"Each card can link to a deeper product page or serve as a compact collection overview.",
price: { value: 100, currency: "USD", unit: "month" },
},
]}
/> Landing page kit
Tall product cards with hover zoom, ideal for visual product showcases.
$100.00
/ month
Docs launch kit
Tall product cards with hover zoom, ideal for visual product showcases.
$100.00
/ month
Section starter pack
Tall product cards with hover zoom, ideal for visual product showcases.
$100.00
/ month
Conversion toolkit
Tall product cards with hover zoom, ideal for visual product showcases.
$100.00
/ month
---
import Products5Block from "@/components/blocks/products-5.astro"
import placeholderImage from "@/assets/placeholder.webp"
---
<Products5Block
badge="Featured"
title="Image-centric product grid with hover effects"
buttons={[
{
label: "Featured product",
href: "/blocks/product/",
variant: "default",
},
]}
products={[
{
image: {
src: placeholderImage,
alt: "Landing page kit image placeholder",
},
title: "Landing page kit",
description:
"Tall product cards with hover zoom, ideal for visual product showcases.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
image: {
src: placeholderImage,
alt: "Docs launch kit image placeholder",
},
title: "Docs launch kit",
description:
"Tall product cards with hover zoom, ideal for visual product showcases.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
image: {
src: placeholderImage,
alt: "Section starter pack image placeholder",
},
title: "Section starter pack",
description:
"Tall product cards with hover zoom, ideal for visual product showcases.",
price: { value: 100, currency: "USD", unit: "month" },
},
{
image: {
src: placeholderImage,
alt: "Conversion toolkit image placeholder",
},
title: "Conversion toolkit",
description:
"Tall product cards with hover zoom, ideal for visual product showcases.",
price: { value: 100, currency: "USD", unit: "month" },
},
]}
/>