---
title: Hero with Code Aside
description: Marketing hero with copy on the left and an installable code snippet on the right.
visibility: guest
draft: false
---

# 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

:::preview{title="Hero with installable code aside" wide}
<x-wirekit::container max="xl">
    <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, fonts served from your own domain, and an MIT license.</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>
</x-wirekit::container>
:::

:::source{language="blade"}
<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](/components/hero) — `eyebrow`, `title`, `lede`, `actions`, `aside` slots; `layout` prop
- [Badge](/components/badge) — version pill in eyebrow
- [Code Block](/components/code-block) — `:copy="true"` announces "Code copied to clipboard" to screen readers
- [Button](/components/button) — primary + outline variants for CTA pair

## See Also

- [Hero component docs](/components/hero) — all four `layout` values
- [Code Block accessibility](/components/code-block#accessibility) — copy button live region