Hero Split

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

{{ 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

Landing builder

Launch a precise product site

Use shortcodes to compose the page.

Get started

Theme kit

Launch checklist

Static output, bundled assets, and focused sections.

shortcodes

Full-width sections

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.