# Hero Split

> Render a split hero with copy and a proof panel.

Canonical HTML: https://press.varavel.com/docs/shortcodes/hero-split/
Markdown: https://press.varavel.com/docs/shortcodes/hero-split/index.md

`hero_split` renders a two-column hero with messaging on one side and a visual or proof panel on the other.

## When to Use

Use it when the first viewport needs both positioning and evidence. It works well for product launches, platform pages, and pages with strong proof points.

## Usage

```markdown
{{/* hero_split(
title="Launch a precise product site",
description="Use shortcodes to compose the page.",
action_1_text="Get started",
action_1_url="/docs",
panel_title="Launch checklist"
) */}}
```

## Live Example

{{ hero_split(
container="md",
eyebrow="Landing builder",
title="Launch a precise product site",
description="Use shortcodes to compose the page.",
action_1_text="Get started",
action_1_url="/docs",
panel_label="Theme kit",
panel_title="Launch checklist",
panel_desc="Static output, bundled assets, and focused sections.",
metric_1_value="20",
metric_1_label="shortcodes",
check_1="Full-width sections",
check_2="Centered containers"
) }}

## Parameters

| Parameter        | Description                                             |
| ---------------- | ------------------------------------------------------- |
| `container`      | Inner content width for the split hero.                 |
| `eyebrow`        | Small label above the heading.                          |
| `title`          | Main hero heading. Supports HTML.                       |
| `description`    | Supporting hero copy. Supports HTML.                    |
| `action_1_text`  | Primary action label.                                   |
| `action_1_url`   | Primary action URL.                                     |
| `action_2_text`  | Optional secondary action label.                        |
| `action_2_url`   | Optional secondary action URL.                          |
| `caption`        | Small note below the actions.                           |
| `image_src`      | Optional image URL for the visual panel.                |
| `image_alt`      | Alt text for `image_src`.                               |
| `panel_label`    | Small label inside the proof panel.                     |
| `panel_title`    | Proof panel heading.                                    |
| `panel_desc`     | Proof panel supporting copy.                            |
| `metric_N_value` | Metric value for panel metric `N`.                      |
| `metric_N_label` | Metric label for panel metric `N`.                      |
| `check_N`        | Checklist item inside the proof panel.                  |
| `bg`             | Full-width section background token.                    |
| `reverse`        | Set to `true` to put the visual panel first on desktop. |
| `class`          | Additional CSS classes on the outer section.            |