Components / Layout

Hero

A page-level hero: eyebrow, display-font title, lede, actions and media, left-aligned or centred.

@ruckc/truss-ui Layout

Import

import { Hero } from '@ruckc/truss-ui';

Playground

API

The element to render.

Prop	Type	Default	Description
eyebrow snippet	Snippet	—	Small overline above the title.
title required snippet	Snippet	—	The heading content. Rendered in the display font.
lede snippet	Snippet	—	The supporting paragraph under the title.
actions snippet	Snippet	—	Calls to action under the lede (usually Buttons).
media snippet	Snippet	—	An image or other visual: beside the text on wide screens, below it on narrow ones or when centred.
align	'start' | 'center'	'start'	Text alignment. `center` stacks the media under the text.
level	1 | 2 | 3 | 4 | 5 | 6	1	Heading level, 1 to 6.
as	string	'section'	The element to render.