---
title: Hero Sections
description: Eye-catching page headers that introduce your product. Choose from centered, split-with-image, or with-screenshot variants.
visibility: guest
draft: false
---

# Hero Sections

Eye-catching page headers that introduce your product. Choose from centered, split-with-image, or with-screenshot variants.

**Composed from:** `aspect-ratio`, `badge`, `button`, `container`, `heading`, `row`, `section`, `stack`, `text`.

## Centered Hero

The most versatile hero — works for any landing page. Headline, description, and CTA buttons centered on the page. Defaults to a single hero with an optional eyebrow badge for product-stage signaling.

:::preview{title="Hero — Centered" wide}
<x-wirekit::section padding="2xl">
    <x-wirekit::container max="md">
        <x-wirekit::stack gap="lg" align="center" style="text-align: center;">
            <x-wirekit::badge intent="info">New in v2.0</x-wirekit::badge>
            <x-wirekit::heading level="1" size="3xl" tracking="tight">Ship the admin surface, not the design system</x-wirekit::heading>
            <x-wirekit::text size="lg" intent="muted" style="max-width: 36rem;">A component library for Laravel teams who would rather build the product than re-solve tables, forms and overlays. Accessible by default, themed by CSS variables, no build step of its own.</x-wirekit::text>
            <x-wirekit::row gap="sm" justify="center">
                <x-wirekit::button size="lg">Get Started</x-wirekit::button>
                <x-wirekit::button size="lg" intent="neutral" surface="outline">View Components</x-wirekit::button>
            </x-wirekit::row>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## Split with Image

Two-column layout — text on the left, image / illustration on the right. Best when you have a hero asset (product screenshot, brand illustration) worth showing alongside the headline.

:::preview{title="Hero — Split with Image" wide}
<x-wirekit::section padding="2xl">
    <x-wirekit::container max="xl">
        <x-wirekit::row align="center" gap="xl" wrap>
            <x-wirekit::stack gap="md" style="flex: 1 1 18rem; min-width: 0;">
                <x-wirekit::heading level="1" size="3xl" tracking="tight">A headline beside your hero image</x-wirekit::heading>
                <x-wirekit::text size="lg" intent="muted">A short supporting sentence for the split-with-image layout, next to a product shot or illustration.</x-wirekit::text>
                <x-wirekit::row gap="sm">
                    <x-wirekit::button size="lg">Start Building</x-wirekit::button>
                    <x-wirekit::button size="lg" intent="neutral" surface="ghost">Learn More</x-wirekit::button>
                </x-wirekit::row>
            </x-wirekit::stack>
            <div style="flex: 1 1 18rem; min-width: 0;">
                <x-wirekit::aspect-ratio ratio="4/3">
                    <img src="/placeholder/640x480?bg=e0e7ff&fg=4338ca&label=Hero+illustration+%2F+product+shot" alt="Hero illustration / product shot" style="width: 100%; height: 100%; border-radius: var(--radius-wk-xl); object-fit: cover;" />
                </x-wirekit::aspect-ratio>
            </div>
        </x-wirekit::row>
    </x-wirekit::container>
</x-wirekit::section>
:::

## With App Screenshot

Full-width hero with a floating screenshot below the headline. Best when the product itself is the strongest visual — let the dashboard speak for the headline.

:::preview{title="Hero — With Screenshot" wide}
<x-wirekit::section padding="2xl">
    <x-wirekit::container max="xl">
        <x-wirekit::stack gap="2xl" align="center">
            <x-wirekit::stack gap="lg" align="center" style="text-align: center; max-width: 36rem;">
                <x-wirekit::heading level="1" size="3xl" tracking="tight">A headline above your screenshot</x-wirekit::heading>
                <x-wirekit::text size="lg" intent="muted">A short supporting line above a product screenshot.</x-wirekit::text>
                <x-wirekit::button size="lg">Get Started Free</x-wirekit::button>
            </x-wirekit::stack>
            <div style="width: 100%; max-width: 56rem;">
                <x-wirekit::aspect-ratio ratio="16/9">
                    <img src="/placeholder/896x504?bg=ccfbf1&fg=0f766e&label=Application+dashboard+screenshot" alt="Application dashboard screenshot" style="width: 100%; height: 100%; border-radius: var(--radius-wk-xl); object-fit: cover; box-shadow: var(--shadow-wk-xl);" />
                </x-wirekit::aspect-ratio>
            </div>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## Related

- [CTA Sections](/blueprints/partials/cta) — call-to-action blocks