# ProfileHeader

> The top of a profile — cover, avatar, name, stats and actions.

- **Level**: organism · **Status**: experimental (R15: may change or be removed; J-11) · **Role**: content
- **Import**: `import { ProfileHeader } from "@rrios-forge/ui/organisms/profile-header";`
- **Source**: `packages/ui/src/organisms/profile-header`

Profile surface: a 4:1 cover band, an avatar overlapping its bottom edge, an identity block (name/handle/pronouns/bio), an optional stats row and an actions slot. cover is a ReactNode slot so the consumer supplies its own image element (next/image, <img>, a gradient). Patterns consulted: Patterns/Information Architecture · MetadataAndActions, Patterns/Visual Priority · ActionHierarchy.

## Use it for

- Media viewer / composer / profile → `MediaLightbox` / `Composer` / `ProfileHeader`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `overlap` | — | `true` `false` | `false` | ProfileHeader avatar overlaps the cover (ADR-039). |

## Stories

- [Maya Okafor](/?path=/story/components-organisms-profileheader--playground) · frame: `/iframe.html?id=components-organisms-profileheader--playground&viewMode=story`
- [No cover · no stats](/?path=/story/components-organisms-profileheader--no-cover) · frame: `/iframe.html?id=components-organisms-profileheader--no-cover&viewMode=story`

## Decisions that name it

- ADR-021 — ProfileHeader organism and the `cover` slot contract
- ADR-034 — Accessible names come from a labels provider

## 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).