Skip to main content
WireKit

Hero Sections

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

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

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.

Hero — Centered
New in v2.0

Your product headline goes here

One or two sentences on what your product does and who it's for. Keep it concrete and specific. 

<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">Your product headline goes here</x-wirekit::heading>
            <x-wirekit::text size="lg" variant="muted" style="max-width: 36rem;">One or two sentences on what your product does and who it's for. Keep it concrete and specific.</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.

Hero — Split with Image

A headline beside your hero image

A short supporting sentence for the split-with-image layout, next to a product shot or illustration.

Hero illustration / product shot 
<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" variant="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.

Hero — With Screenshot

A headline above your screenshot

A short supporting line above a product screenshot.

Application dashboard screenshot 
<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" variant="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>