Design system
Design system / Components / Heroes

Hero patterns for editorial pages.

Four reusable hero layouts distilled from the Cabana 7 set. Same prop contract, swappable per page.

PaperReceiptsActions
01 / HeroSplit

Text + media, two columns.

The default. Use when the page has a single artifact worth showing alongside the headline (a portrait, a screenshot, a cover image).

HeroSplit·mediaSide: right·mediaSide: left (toggle)
Profile · 2026

Design leadership for operational systems.

Tre Stewart — 15+ years building scalable systems, design operations, and internal products for high-growth companies.

Currently at Alaska Airlines · Open to leadership conversations
Image
02 / HeroSplitGrid

Text + media grid.

Use when the proof IS the artifacts — case-study landing pages, portfolio indexes, project archives. Defaults to a 2×2 grid; supports 2 or 3 columns.

HeroSplitGrid·mediaCount: 2 | 3 | 4
Selected work

Projects with proof attached.

Each case study traces back to specific verified signals with sources, attribution, and outcomes.

Image
Image
Image
Image
03 / HeroCenter

Centered, text-only.

Use for manifesto pages, about pages, single-claim landings. No media — the headline does the lifting.

HeroCenter
About Ledger

Records the invisible work.

A professional development tool that captures the work that disappears — and turns it into outputs you can defend.

Private by default. Yours always.
04 / HeroCenterStacked

Centered text, full-bleed media below.

Use for editorial features, case-study covers, and single-story pages where the image is the second read.

HeroCenterStacked·mediaRatio: 16/9 (default)
Case study · Goodwill Bank

From passive newcomer to executive presenter.

A five-month coaching arc with external validation from the partnered PM.

Image