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

---
type: block
category: "header"
title: "Header 4"
description: "Header 4 block example."
---

```astro live props={{ name: 'header-4' }}
---
import Header4Block from "@/components/blocks/header-4.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Header4Block
  logo={{
    label: "Acme Inc",
    href: "/",
  }}
  navigation={[
    {
      label: "Products",
      href: "#",
      description: "Plan, launch, and measure product work from one place.",
      image: { src: placeholderImage, alt: "Product navigation preview" },
      links: [
        {
          label: "Analytics",
          href: "#",
          description: "Track funnels, cohorts, and conversion paths.",
          icon: "chart-no-axes-column",
        },
        {
          label: "Automation",
          href: "#",
          description: "Trigger workflows from product and customer events.",
          icon: "workflow",
        },
        {
          label: "Integrations",
          href: "#",
          description: "Connect the tools your team already uses.",
          icon: "plug",
        },
      ],
    },
    {
      label: "Solutions",
      href: "#",
      description: "Focused workflows for teams that need more context.",
      links: [
        {
          label: "Marketing",
          href: "#",
          description: "Launch campaigns with shared assets and reporting.",
          icon: "megaphone",
        },
        {
          label: "Operations",
          href: "#",
          description: "Coordinate approvals, handoffs, and recurring work.",
          icon: "settings-2",
        },
      ],
    },
    { label: "Pricing", href: "#" },
    { label: "Customers", href: "#" },
  ]}
  buttons={[
    { label: "Sign in", href: "#", variant: "ghost" },
    { label: "Start trial", href: "#", variant: "default" },
  ]}
/>
```