# Hero — split

> A landing page hero with text on one side and media on the other. The text comes first in reading order on every screen size.

Facade UI item `hero-split` (block, section).
Docs page: https://facadeui.dev/components/hero-split · Registry JSON: https://facadeui.dev/r/hero-split.json

## Install

```bash
npx shadcn@latest add @facade/hero-split
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/hero-split.json`. The CLI also installs what it needs: @facade/container, @facade/cta-group, @facade/eyebrow, @facade/heading, @facade/section, @facade/types, @facade/utils.

Files: `components/sections/hero-split.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/hero-split-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { HeroSplit } from "@/components/sections/hero-split"

import { ACTIONS, MediaPlaceholder } from "./content"

export function Demo() {
  return (
    <HeroSplit
      eyebrow="Sections"
      title="Build the page, not the primitives"
      description="Every section takes typed content and slots, so assembling a landing page is composition rather than another round of copy-paste."
      actions={ACTIONS}
      note="Works in any React 19 project."
      media={<MediaPlaceholder label="Product screenshot" />}
      headingLevel={1}
      spacing="md"
    />
  )
}
```

## Props

### HeroSplitProps

Extends StackSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `string` |  |  |
| `description` | `string` |  |  |
| `eyebrow` | `ReactNode` |  |  |
| `actions` | `CtaItem[]` |  |  |
| `link` | `LinkComponent` |  |  |
| `note` | `ReactNode` |  |  |
| `banner` | `ReactNode` |  |  |
| `media` | `ReactNode` |  | The right-hand column. Pass `<Image />`, a video, or anything else. |
| `children` | `ReactNode` |  | Extra content under the buttons, such as a logo strip or a stat row. |
| `reverse` | `boolean` | `false` | Puts the media on the left from `lg` up. Does not change DOM order. |
| `headingLevel` | `HeadingLevel` | `1` |  |
| `size` | `"md" \| "lg"` | `"lg"` |  |
| `as` | `"section" \| "div"` | `"div"` |  |
| `spacing` | `"sm" \| "md" \| "lg" \| "none"` | `"lg"` |  |
| `className` | `string` |  |  |
| `id` | `string` |  |  |