Skip to content

FeatureHero

Gradient identity banner for a feature home page. Carries the feature’s own two colours (the same gradient shown on the global home screen), a frosted icon tile, an uppercase eyebrow, a title, a subtitle, a trailing actions slot, and an optional inline stat strip. See docs/home-page-design-principles.md.

Optional trailing action area (buttons, chips) aligned to the hero edge.

When true, renders a tighter hero (less vertical padding).

Optional uppercase, letter-spaced section label above the title.

Gradient end colour (CSS colour, e.g. #38bdf8).

Gradient start colour (CSS colour, e.g. #0ea5e9).

Material icon shown in the frosted leading tile.

Optional inline stat strip rendered beneath a hairline divider.

Optional calm one-liner describing the feature.

Hero title (rendered in the display font, white).

Captures additional attributes (e.g. class) on the root element.