Scale — Hero

Install

Examples

Default

Framed here for the docs — in production the hero spans the viewport (90vh tall).

Build faster with Scale

A design system that helps individuals and organisations scale.

Guidelines

Usage

the top section of a landing page, product introductions, and conversion-focused entry points. Slot a heading and subtext; set the CTAs via primary-* / secondary-*.

Do

Lead with one clear value statement in heading — a line, not a paragraph.
Use one hero per page, at the very top.
Provide both image-src and image-src-dark when using a background image so it matches the theme.

Don’t

Don’t combine the CTA buttons and the email form — pick one conversion goal.
Don’t put body copy in subtext; details belong in the sections below.
Don’t use a hero mid-page for feature highlights — that’s Section Feature.

Accessibility

Headings: the hero imposes no heading level — on a landing page, slot the page’s h1 into heading.
CTAs: primary-href / secondary-href render real link-buttons (note: they open in a new tab via target="_blank").
Image: the background image takes image-alt — pass an empty value if it’s purely atmospheric, and mind text contrast over it (a gradient overlay is built in).
Form: show-form renders a labelled email Input plus a submit Button.

Properties

Section Feature — feature spotlights for further down the page.
Section Signup — standalone email capture.
Badge — the version chip above the heading.

Hero