Hero with Code Aside

The classic "developer-first marketing" hero: headline + lede + CTA on one side, ready-to-paste install command on the other. Combines <x-wirekit::hero>'s aside slot with <x-wirekit::code-block>.

Recipe

composer require pushery/wirekit
php artisan wirekit:install

<x-wirekit::hero>
    <x-slot:eyebrow>
        <x-wirekit::badge intent="info">New</x-wirekit::badge>
    </x-slot:eyebrow>
    <x-slot:title>Laravel UI components, two commands away.</x-slot:title>
    <x-slot:lede>Components themed by your design tokens and fonts served from your own domain.</x-slot:lede>
    <x-slot:actions>
        <x-wirekit::button>Get Started</x-wirekit::button>
        <x-wirekit::button intent="neutral" surface="outline">View on GitHub</x-wirekit::button>
    </x-slot:actions>
    <x-slot:aside>
        <x-wirekit::code-block language="bash" filename="Install" :copy="true">composer require pushery/wirekit
php artisan wirekit:install</x-wirekit::code-block>
    </x-slot:aside>
</x-wirekit::hero>

Variations

• Code → terminal screencast: Replace the code-block with a <video> or animated GIF for a "show, don't tell" install flow.
• Code → live preview iframe: For component libraries showcasing themselves, embed an actual live preview of one of the components instead of installation code.
• layout="lead" for copy-heavy heroes: Switch from default balanced (50/50) to lead (60/40) when the headline + lede dominate the message and the aside is supportive.

Components Used

• Hero — eyebrow, title, lede, actions, aside slots; layout prop
• Badge — version pill in eyebrow
• Code Block — :copy="true" announces "Code copied to clipboard" to screen readers
• Button — primary + outline variants for CTA pair

See Also

• Hero component docs — all four layout values
• Code Block accessibility — copy button live region