# Split hero

> An asymmetric hero with a headline, supporting copy and actions in one top-aligned column, beside a compact four-row facts panel. An overrunning rule ties the two sides together.

Canonical: https://patternpaste.com/pattern/split-hero.html
Section: Hero
Access: Free, and free to keep.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, column, columns, group, heading, paragraph
Keywords: hero, split, columns, landing

## Variations (2)

### Split hero (the default)

Identical markup in every theme.

### Folio

This variation states its own colours and states its own type: identical in every theme.

The Folio set’s About opener: a paper band, Ada’s line in Helvetica at full size over a darkroom rule, her portrait with a mono frame caption and four ruled facts beneath, a square darkroom button and an underlined link.


---

## The signature moment: scale collision

A large headline meets four short, numbered facts. A structural rule extends to 80% of the band, crossing the gap between the 62% introduction and the 34% facts column.

The introduction starts level with the facts panel. Its paragraph and actions stay directly under its heading, so a taller facts panel cannot leave an empty pocket above the headline. The facts use explicit row gaps rather than accumulating paragraph and separator margins.

## What to change first

1. Replace the headline and short supporting paragraph.
2. Replace the four facts and their labels.
3. Update both action labels and their links.

## What it inherits from your theme

Every typeface, heading leading, the xx-large heading rung, medium body rung, spacing rhythm and button shape. Base and contrast colour chains end in the core white and black presets. Eyebrows use the optional label role; the outlined action uses the link role.

## What it decides for itself

A full-width band with a 1240px inner measure, a 62/34 split, an 80% rule and top alignment. Fluid horizontal panel padding preserves room for the facts on narrow screens. The facts panel has an opaque base ground and a currentColor border.

## Display type

The h1 follows the xx-large theme ladder with a 2.75–4.5rem fallback. Body copy follows medium with a 1.6 line-height. Compact fact copy is 15–16px; numbered uppercase labels are 15–16px with tracking.

## Responsive behaviour

Core columns stack below 782px. The headline, paragraph and actions form one uninterrupted column before the facts. There are no fixed section heights or bottom-alignment offsets.

## Contrast

Body text targets 4.5:1 and the large heading 3:1. Text sits on base with contrast ink; rules use contrast or currentColor. The verification sheet measures the three authoring themes.

## Blocks and editing

Core blocks only. No companion plugin, script, custom CSS or fixed font is needed.