# Hero

> The opening section of a landing or welcome page, with its headline and main action.

- **Level**: organism · **Status**: stable · **Role**: content
- **Import**: `import { Hero } from "@rrios-forge/ui/organisms/hero";`
- **Source**: `packages/ui/src/organisms/hero`

The canonical landing-page hero — display heading, description, primary + secondary CTAs, optional trust line and media slot. The `prominent` emphasis renders a soft radial gradient using existing feedback-surface tokens; the gradient collapses cleanly under high-contrast theme.

## Use it for

- Marketing / onboarding hero → `Hero`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `prominence` | — | `subtle` `default` `featured` | `subtle` | How a surface stands among its siblings. |
| `material` | — | `solid` `vibrant` | `vibrant` | The layer's material (ADR-022, ADR-027). |
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `layout` | — | `stacked` `split` `centered` | `stacked` | Arrangement of a composite. |
| `align` | — | `start` `center` | `start` | Distribution along the main axis. |

## Stories

- [Stacked](/?path=/story/components-organisms-hero--stacked) · frame: `/iframe.html?id=components-organisms-hero--stacked&viewMode=story`
- [Split](/?path=/story/components-organisms-hero--split) · frame: `/iframe.html?id=components-organisms-hero--split&viewMode=story`
- [Centered](/?path=/story/components-organisms-hero--centered) · frame: `/iframe.html?id=components-organisms-hero--centered&viewMode=story`
- [Subtle (page section)](/?path=/story/components-organisms-hero--subtle-section) · frame: `/iframe.html?id=components-organisms-hero--subtle-section&viewMode=story`
- [Sizes](/?path=/story/components-organisms-hero--sizes) · frame: `/iframe.html?id=components-organisms-hero--sizes&viewMode=story`

## Decisions that name it

- ADR-021 — ProfileHeader organism and the `cover` slot contract
- ADR-027 — Vibrant is the system's material, not one of its members

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).