Hero

A landing-page header. Two variants: the default full-width banner, and a card that sits inset in the content with room for a code sample.

Default

<Hero>

# Build with the Acme API

Everything you need to move money programmatically.

[Get started](/quickstart)

</Hero>

A centred banner with a soft gradient. Set background="none" to drop the gradient, which is useful when the page already has a custom background.

Card variant

<Hero variant="card" eyebrow="Acme API">

# Move money anywhere in the world.

One API for cross-border payouts and instant settlement.

[Get your API keys](/authentication) [Read the quickstart](/quickstart)

```bash
curl https://api.acme.com/v1/transfers \
-H "Api-Key: $ACME_API_KEY"

```

An inset panel on an inverted surface — it stays dark on a light page. Content sits on the left; a code fence inside the hero becomes a second column beside it, collapsing underneath below 900px.

Attribute	Description
variant	card for the inset panel. Omit for the default banner
eyebrow	Small uppercase label above the headline
background	none to drop the default banner's gradient

The first link is the primary action; any further links render outlined. Write them on one line — they are grouped into an action row automatically.

Theming

The card draws from hero-card-bg and hero-card-fg, which are separate tokens because the panel is an inverted surface and cannot be derived from the page background. Buttons use the accent tokens.