Navigation: [/sitemap.md](/sitemap.md)

---
type: block
category: "products"
title: "Products 4"
description: "Each card can link to a deeper product page or serve as a compact collection overview."
---

```astro live props={{ name: 'products-4' }}
---
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" },
    },
  ]}
/>
```