// Generated by scripts/generate-showcase.mjs. Do not edit directly. page SplitHeroDetail { layout = "showcase" state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? "" state playground_eyebrowIcon = ctx.url.searchParams.get("pg_eyebrowIcon") ?? "icon-[lucide--sparkles]" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Split Hero example" state playground_highlight = ctx.url.searchParams.get("pg_highlight") ?? "" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default split hero for a modern application." state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "Split Hero" state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#split-hero-demo" state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? "" state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "Split Hero" state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#split-hero-demo" state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? "" state playground_visualPosition = ctx.url.searchParams.get("pg_visualPosition") ?? "right" state playground_reverse = (ctx.url.searchParams.get("pg_reverse") ?? "false") === "true" state playground_ratio = ctx.url.searchParams.get("pg_ratio") ?? "balanced" state playground_align = ctx.url.searchParams.get("pg_align") ?? "start" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" state playground_fullBleed = (ctx.url.searchParams.get("pg_fullBleed") ?? "true") === "true" state playground_backgroundImage = ctx.url.searchParams.get("pg_backgroundImage") ?? "" state playground_visualImage = ctx.url.searchParams.get("pg_visualImage") ?? "" state playground_visualAlt = ctx.url.searchParams.get("pg_visualAlt") ?? "" state playground_visualIcon = ctx.url.searchParams.get("pg_visualIcon") ?? "" state playground_visualEyebrow = ctx.url.searchParams.get("pg_visualEyebrow") ?? "" state playground_visualTitle = ctx.url.searchParams.get("pg_visualTitle") ?? "Split Hero example" state playground_visualDescription = ctx.url.searchParams.get("pg_visualDescription") ?? "A polished default split hero for a modern application." state playground_visualItems = JSON.parse(ctx.url.searchParams.get("pg_visualItems") ?? "[{\"id\":\"split-hero-0-1\",\"key\":\"split-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\":\"#split-hero-demo\",\"actionHref\":\"#split-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\":\"split-hero-0-2\",\"key\":\"split-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\":\"#split-hero-demo\",\"actionHref\":\"#split-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\"]}]") state playground_visualStyle = ctx.url.searchParams.get("pg_visualStyle") ?? "panel" state playground_trustItems = JSON.parse(ctx.url.searchParams.get("pg_trustItems") ?? "[{\"id\":\"split-hero-0-1\",\"key\":\"split-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\":\"#split-hero-demo\",\"actionHref\":\"#split-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\":\"split-hero-0-2\",\"key\":\"split-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\":\"#split-hero-demo\",\"actionHref\":\"#split-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\"]}]") state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Split Hero" description = "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel." } view {
Marketing component

Split Hero

Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.

31 props4 slots0 outputsTheme readyResponsive
Interactive playground

Configure Split Hero

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

Live preview
Composable visual panel

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

Component code
<SplitHero
  title="Split Hero example"
  description="A polished default split hero for a modern application."
  primaryLabel="Split Hero"
  primaryHref="#split-hero-demo"
  secondaryLabel="Split Hero"
  secondaryHref="#split-hero-demo"
  align="start"
  visualTitle="Split Hero example"
  visualDescription="A polished default split hero for a modern application."
  visualItems='[
    {
      "id": "split-hero-0-1",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-0-2",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-0-1",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-0-2",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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="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>
</SplitHero>
Component props31 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Balanced content and visual

Explain a product, department, or service with a balanced two-column introduction.

01
Live preview
Composable visual panel

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

Component usage.wrn
<SplitHero
  eyebrow="Balanced layout"
  title="Combine detailed content"
  highlight="with a strong visual panel"
  description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling."
  primaryLabel="View public services"
  primaryHref="#services"
  primaryIcon="icon-[lucide--arrow-right]"
  secondaryLabel="Contact department"
  secondaryHref="#contact"
  secondaryIcon="icon-[lucide--phone]"
  align="start"
  maxWidth="wide"
  visualTitle="Split Hero example"
  visualDescription="A polished default split hero for a modern application."
  visualItems='[
    {
      "id": "split-hero-0-1",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-0-2",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-0-1",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-0-2",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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="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>
</SplitHero>
Compact

Visual-first introduction

Reverse the layout when the screenshot, map, or media needs first visual priority.

02
Live preview
Composable visual panel

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

Component usage.wrn
<SplitHero
  eyebrow="Visual first"
  title="Show the interface before the explanation"
  description="Place the visual on the left and use a compact content column."
  primaryLabel="Compact example"
  primaryHref="#split-hero-demo"
  secondaryLabel="Compact example"
  secondaryHref="#split-hero-demo"
  visualPosition="left"
  reverse="true"
  ratio="visual"
  align="center"
  size="sm"
  variant="soft"
  visualTitle="Compact Split Hero"
  visualDescription="A compact configuration for dashboards and dense product surfaces."
  visualItems='[
    {
      "id": "split-hero-1-1",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-1-2",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-1-1",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-1-2",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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="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>
</SplitHero>
Advanced

Structured service overview

Use structured visual items for capabilities, facts, or proof points.

03
Live preview
Component usage.wrn
<SplitHero
  eyebrow="Department overview"
  title="One service, clearly explained"
  description="Pair narrative content with structured supporting information."
  primaryLabel="Advanced example"
  primaryHref="#split-hero-demo"
  secondaryLabel="Advanced example"
  secondaryHref="#split-hero-demo"
  ratio="content"
  align="end"
  size="lg"
  variant="gradient"
  visualTitle="Service highlights"
  visualDescription="A consistent, responsive supporting panel."
  visualItems='[
    {
      "label": "Online access",
      "value": "24/7",
      "icon": "icon-[lucide--globe-2]"
    },
    {
      "label": "Response tracking",
      "value": "Live",
      "icon": "icon-[lucide--activity]"
    },
    {
      "label": "Languages",
      "value": "3",
      "icon": "icon-[lucide--languages]"
    }
  ]'
  trustItems='[
    {
      "id": "split-hero-2-1",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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": "split-hero-2-2",
      "key": "split-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": "#split-hero-demo",
      "actionHref": "#split-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"
      ]
    }
  ]'>
  <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>
</SplitHero>
Component API

Props and configuration

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

PropTypeDefaultRequired
eyebrowstring""No
eyebrowIconstring"icon-[lucide--sparkles]"No
titlestring"A better digital experience"No
highlightstring""No
descriptionstring""No
primaryLabelstring""No
primaryHrefstring""No
primaryIconstring""No
secondaryLabelstring""No
secondaryHrefstring""No
secondaryIconstring""No
visualPositionstring"right"No
reversebooleanfalseNo
ratiostring"balanced"No
alignstring"left"No
sizestring"default"No
colorstring"primary"No
variantstring"default"No
maxWidthstring"xl"No
fullBleedbooleantrueNo
backgroundImagestring""No
visualImagestring""No
visualAltstring""No
visualIconstring""No
visualEyebrowstring""No
visualTitlestring""No
visualDescriptionstring""No
visualItemsunknown[][]No
visualStylestring"panel"No
trustItemsunknown[][]No
classstring""No
} }