Public pages

Hero

The display type for public pages: the big words at the top of the landing page (size L), and the opening of each section on it (size M).

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`title`Required	`React.ReactNode`
`titleAccent`	`React.ReactNode`
`kicker`	`React.ReactNode`
`kickerTone`	`'positive'`	Green kicker (the landing page).
`lede`	`React.ReactNode`
`note`	`React.ReactNode`
`size`	`'M' \| 'L'`
`headingLevel`	`number`
`id`	`string`
`className`	`string`
`children`	`React.ReactNode`

Guidelines

The display type for public pages: the big words at the top of the landing page (size L), and the opening of each section on it (size M).

Provide: title, titleAccent (the second line, in accent-content, so the color theme shows in the words), and optionally kicker (who it is for, on a small solid chip), lede, note, and the actions as children (Buttons and Links). Size L uses an h1; give sections size: 'M' and headingLevel: 2.

Left aligned, always. The title sits on the left; the lede, actions and note sit on the right, along the bottom of the title. One column below 1024px.
Big and tight: 52 to 120px at L, 34 to 60px at M, weight 800. Never a gradient on the text; the accent line is a solid color.
It sits on the Backdrop glow, so only the title, the accent line, heading-colored text and the kicker chip go in it. Keep the lede short: two to four lines.
Two actions at most, the black primary first.
Copy: sentence case, no exclamation points. The promise is "Make more. Manage less."