---
title: "Hero"
description: "Landing-page hero — a full-width banner or an inset card."
---

# 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

```mdx
<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

```mdx
<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"
```

</Hero>
```

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`](/guides/theming), which
are separate tokens because the panel is an inverted surface and cannot be
derived from the page background. Buttons use the accent tokens.