Skip to content

1. Default — theme tokens drive everything

Headline and this subheadline follow the section text color. Buttons use the theme button styles; min-height, padding and button gap come from theme spacing tokens.

2. Dark section variant — text stays legible

The section text color comes from the Dark section palette, so this copy is light-on-dark with no per-element color fields.

3. Custom headline color + custom width

Content column is constrained to a custom 700px. The headline is a custom amber; this subheadline still uses the section text color.

4. Animation — line by line reveal

Scroll into view: the headline reveals first, then this subheadline, then the buttons — using the shared reveal island and theme stagger.

Compassionate, 5. New options — accent headline, icons, one corner, accent bar

The section behind shows through (Background None), so the text uses the page colors.

QA placeholder

6. Split hero at a 900px content width

Text and image together span 900px, centred.

QA placeholder