Marketing component

Hero

Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.

38 props6 slots0 outputsTheme readyResponsive

Interactive playground

Configure Hero

Change any prop and inspect the server-rendered component immediately.

Live preview

Hero example

A polished default hero for a modern application.

Primary workflow

Additional option

Hero Hero Hero

Primary workflow Additional option

Composable visual panel

Add a screenshot, product preview, media block, chart, form, or illustration.

Hero example

A polished default hero for a modern application.

Primary workflow A clean default configuration for everyday product interfaces.

primary

Additional option A clean default configuration for everyday product interfaces.

secondary

Component code

<Hero
  title="Hero example"
  description="A polished default hero for a modern application."
  align="start"
  visualTitle="Hero example"
  visualDescription="A polished default hero for a modern application."
  visualItems='[
    {
      "id": "hero-0-1",
      "key": "hero-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-0-2",
      "key": "hero-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  primaryLabel="Hero"
  primaryHref="#hero-demo"
  secondaryLabel="Hero"
  secondaryHref="#hero-demo"
  tertiaryLabel="Hero"
  tertiaryHref="#hero-demo"
  badges='[
    {
      "id": "hero-0-1",
      "key": "hero-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-0-2",
      "key": "hero-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  trustItems='[
    {
      "id": "hero-0-1",
      "key": "hero-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-0-2",
      "key": "hero-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'>
  <div data-slot="eyebrow">
    <div class="showcase-slot">eyebrow slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
  <div data-slot="trust">
    <div class="showcase-slot">trust slot</div>
  </div>
  <div data-slot="visual">
    <div class="showcase-slot">visual slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Hero>

Component props38 controls

eyebrowstringeyebrow Iconstringiconstringtitlestringhighlightstringdescriptionstringalignstringsizestringcolorstringvariantstringlayoutstringvisual Positionstringvisual Stylestringshow Decorationsbooleanfull Bleedbooleanvisual Eyebrowstringvisual Titlestringvisual Descriptionstringvisual Iconstringvisual Imagestringvisual Altstringvisual Itemsunknown[]

[
  {
    "id": "hero-0-1",
    "key": "hero-0-1",
    "value": "primary",
    "label": "Primary workflow",
    "title": "Primary workflow",
    "description": "A clean default configuration for everyday product interfaces.",
    "text": "A configurable sample message.",
    "href": "#hero-demo",
    "actionHref": "#hero-demo",
    "actionLabel": "View details",
    "icon": "icon-[lucide--sparkles]",
    "iconClass": "icon-[lucide--sparkles]",
    "variant": "primary",
    "status": "Active",
    "time": "09:30",
    "current": true,
    "selected": true,
    "checked": true,
    "disabled": false,
    "outgoing": false,
    "open": true,
    "number": 1,
    "count": 16,
    "percentage": 72,
    "color": "#7c3aed",
    "target": "_self",
    "ariaLabel": "Open primary workflow 1",
    "items": [
      {
        "label": "Nested option A",
        "value": "nested-a"
      },
      {
        "label": "Nested option B",
        "value": "nested-b"
      }
    ],
    "links": [
      {
        "label": "Documentation",
        "href": "#documentation"
      },
      {
        "label": "API reference",
        "href": "#api-reference"
      }
    ],
    "values": [
      "Included",
      "Standard"
    ]
  },
  {
    "id": "hero-0-2",
    "key": "hero-0-2",
    "value": "secondary",
    "label": "Additional option",
    "title": "Supporting example",
    "description": "A clean default configuration for everyday product interfaces.",
    "text": "Another configurable message.",
    "href": "#hero-demo",
    "actionHref": "#hero-demo",
    "actionLabel": "View details",
    "icon": "icon-[lucide--sparkles]",
    "iconClass": "icon-[lucide--sparkles]",
    "variant": "primary",
    "status": "Active",
    "time": "09:30",
    "current": false,
    "selected": false,
    "checked": false,
    "disabled": false,
    "outgoing": true,
    "open": true,
    "number": 2,
    "count": 32,
    "percentage": 72,
    "color": "#7c3aed",
    "target": "_self",
    "ariaLabel": "Open primary workflow 2",
    "items": [
      {
        "label": "Nested option A",
        "value": "nested-a"
      },
      {
        "label": "Nested option B",
        "value": "nested-b"
      }
    ],
    "links": [
      {
        "label": "Documentation",
        "href": "#documentation"
      },
      {
        "label": "API reference",
        "href": "#api-reference"
      }
    ],
    "values": [
      "Included",
      "Standard"
    ]
  }
]

primary Labelstringprimary Hrefstringprimary Iconstringprimary Targetstringsecondary Labelstringsecondary Hrefstringsecondary Iconstringsecondary Targetstringtertiary Labelstringtertiary Hrefstringtertiary Iconstringtertiary Targetstringbadgesunknown[]

trust Itemsunknown[]

max Widthstringclassstring

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Split hero with visual

Lead a landing page with clear content and a flexible visual slot.

Live preview

Reusable public UI

Build polished pages with consistent hero layouts

Create strong first impressions for public portals, product pages, and service overviews.

Primary workflow

Additional option

Explore components Read documentation Hero

Primary workflow Additional option

Composable visual panel

Add a screenshot, product preview, media block, chart, form, or illustration.

Hero example

A polished default hero for a modern application.

Primary workflow A clean default configuration for everyday product interfaces.

primary

Additional option A clean default configuration for everyday product interfaces.

secondary

Component usage.wrn

<Hero
  eyebrow="Reusable public UI"
  eyebrowIcon="icon-[lucide--sparkles]"
  title="Build polished pages"
  highlight="with consistent hero layouts"
  description="Create strong first impressions for public portals, product pages, and service overviews."
  align="start"
  variant="gradient"
  visualStyle="card"
  visualTitle="Hero example"
  visualDescription="A polished default hero for a modern application."
  visualItems='[
    {
      "id": "hero-0-1",
      "key": "hero-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-0-2",
      "key": "hero-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  primaryLabel="Explore components"
  primaryHref="#components"
  primaryIcon="icon-[lucide--arrow-right]"
  secondaryLabel="Read documentation"
  secondaryHref="#docs"
  secondaryIcon="icon-[lucide--book-open]"
  tertiaryLabel="Hero"
  tertiaryHref="#hero-demo"
  badges='[
    {
      "id": "hero-0-1",
      "key": "hero-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-0-2",
      "key": "hero-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  trustItems='[
    {
      "id": "hero-0-1",
      "key": "hero-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-0-2",
      "key": "hero-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  maxWidth="wide">
  <div data-slot="eyebrow">
    <div class="showcase-slot">eyebrow slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
  <div data-slot="trust">
    <div class="showcase-slot">trust slot</div>
  </div>
  <div data-slot="visual">
    <div class="showcase-visual-panel">
      <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
      <strong>Composable visual panel</strong>
      <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
    </div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Hero>

Compact

Centered campaign hero

Use a stacked, centered layout for announcements, campaigns, and simple conversion pages.

Live preview

Public campaign

Safer communities start with trusted information

Find verified guidance, public notices, and citizen services in one place.

Secondary workflow

Additional option

Browse services Compact example Compact example

Secondary workflow Additional option

Compact Hero

A compact configuration for dashboards and dense product surfaces.

Secondary workflow A compact configuration designed for dense application layouts.

primary

Additional option A compact configuration designed for dense application layouts.

secondary

Component usage.wrn

<Hero
  eyebrow="Public campaign"
  icon="icon-[lucide--arrow-right]"
  title="Safer communities start with trusted information"
  description="Find verified guidance, public notices, and citizen services in one place."
  align="center"
  variant="soft"
  layout="stacked"
  visualTitle="Compact Hero"
  visualDescription="A compact configuration for dashboards and dense product surfaces."
  visualItems='[
    {
      "id": "hero-1-1",
      "key": "hero-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-1-2",
      "key": "hero-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  primaryLabel="Browse services"
  primaryHref="#services"
  secondaryLabel="Compact example"
  secondaryHref="#hero-demo"
  tertiaryLabel="Compact example"
  tertiaryHref="#hero-demo"
  badges='[
    {
      "id": "hero-1-1",
      "key": "hero-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-1-2",
      "key": "hero-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  trustItems='[
    {
      "id": "hero-1-1",
      "key": "hero-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "hero-1-2",
      "key": "hero-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'>
  <div data-slot="eyebrow">
    <div class="showcase-slot">eyebrow slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
  <div data-slot="trust">
    <div class="showcase-slot">trust slot</div>
  </div>
  <div data-slot="visual">
    <div class="showcase-slot">visual slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Hero>

Advanced

Hero with badges and trust

Add product proof, audience badges, and supporting trust information.

Live preview

Developer platform

Ship reliable interfaces faster without duplicating design work

Reusable components, server rendering, themes, accessibility, and responsive behavior.

SSR first

Theme aware

Accessible

Advanced example Advanced example Advanced example

108 UI components Light and dark themes Mobile ready

Composable visual panel

Add a screenshot, product preview, media block, chart, form, or illustration.

Advanced Hero

A richer configuration demonstrating additional content and hierarchy.

Advanced workflow A richer configuration with more supporting information and actions.

primary

Additional option A richer configuration with more supporting information and actions.

secondary

Component usage.wrn

<Hero
  eyebrow="Developer platform"
  icon="icon-[lucide--trash-2]"
  title="Ship reliable interfaces faster"
  highlight="without duplicating design work"
  description="Reusable components, server rendering, themes, accessibility, and responsive behavior."
  align="end"
  size="lg"
  variant="raised"
  visualPosition="left"
  visualStyle="soft"
  visualTitle="Advanced Hero"
  visualDescription="A richer configuration demonstrating additional content and hierarchy."
  visualItems='[
    {
      "id": "hero-2-1",
      "key": "hero-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "hero-2-2",
      "key": "hero-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#hero-demo",
      "actionHref": "#hero-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
  primaryLabel="Advanced example"
  primaryHref="#hero-demo"
  secondaryLabel="Advanced example"
  secondaryHref="#hero-demo"
  tertiaryLabel="Advanced example"
  tertiaryHref="#hero-demo"
  badges='[
    "SSR first",
    "Theme aware",
    "Accessible"
  ]'
  trustItems='[
    "108 UI components",
    "Light and dark themes",
    "Mobile ready"
  ]'>
  <div data-slot="eyebrow">
    <div class="showcase-slot">eyebrow slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
  <div data-slot="trust">
    <div class="showcase-slot">trust slot</div>
  </div>
  <div data-slot="visual">
    <div class="showcase-visual-panel">
      <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
      <strong>Composable visual panel</strong>
      <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
    </div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Hero>

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`eyebrow`	string	`""`	No
`eyebrowIcon`	string	`""`	No
`icon`	string	`""`	No
`title`	string	`"Build something remarkable"`	No
`highlight`	string	`""`	No
`description`	string	`""`	No
`align`	string	`"left"`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"default"`	No
`layout`	string	`"split"`	No
`visualPosition`	string	`"right"`	No
`visualStyle`	string	`"plain"`	No
`showDecorations`	boolean	`true`	No
`fullBleed`	boolean	`true`	No
`visualEyebrow`	string	`""`	No
`visualTitle`	string	`""`	No
`visualDescription`	string	`""`	No
`visualIcon`	string	`""`	No
`visualImage`	string	`""`	No
`visualAlt`	string	`""`	No
`visualItems`	unknown[]	`[]`	No
`primaryLabel`	string	`""`	No
`primaryHref`	string	`""`	No
`primaryIcon`	string	`""`	No
`primaryTarget`	string	`""`	No
`secondaryLabel`	string	`""`	No
`secondaryHref`	string	`""`	No
`secondaryIcon`	string	`""`	No
`secondaryTarget`	string	`""`	No
`tertiaryLabel`	string	`""`	No
`tertiaryHref`	string	`""`	No
`tertiaryIcon`	string	`""`	No
`tertiaryTarget`	string	`""`	No
`badges`	unknown[]	`[]`	No
`trustItems`	unknown[]	`[]`	No
`maxWidth`	string	`"xl"`	No
`class`	string	`""`	No