# SectionHeader

> Sub-section title within a page body.

- **Level**: molecule · **Status**: stable · **Role**: surface
- **Import**: `import { SectionHeader } from "@rrios-forge/ui/molecules/section-header";`
- **Source**: `packages/ui/src/molecules/section-header`

Standard header for sections within pages, cards and forms. Composes Heading + Description, with optional eyebrow, badge and action slots. Two alignments (start | between) × three sizes. Promotes the inline pattern helper into a real molecule. Patterns consulted: Patterns/Information Architecture · SectionAnatomy + MetadataAndActions, Patterns/Visual Priority · PriorityStack.

## Use it for

- Page header / section title → `PageHeader` / `SectionHeader`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `align` | — | `start` `between` | `start` | Distribution along the main axis. |
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-molecules-sectionheader--playground) · frame: `/iframe.html?id=components-molecules-sectionheader--playground&viewMode=story`
- [Sizes](/?path=/story/components-molecules-sectionheader--sizes) · frame: `/iframe.html?id=components-molecules-sectionheader--sizes&viewMode=story`
- [With badge](/?path=/story/components-molecules-sectionheader--with-badge) · frame: `/iframe.html?id=components-molecules-sectionheader--with-badge&viewMode=story`
- [With action](/?path=/story/components-molecules-sectionheader--with-action) · frame: `/iframe.html?id=components-molecules-sectionheader--with-action&viewMode=story`
- [In card](/?path=/story/components-molecules-sectionheader--in-card) · frame: `/iframe.html?id=components-molecules-sectionheader--in-card&viewMode=story`
- [In form section](/?path=/story/components-molecules-sectionheader--in-form-section) · frame: `/iframe.html?id=components-molecules-sectionheader--in-form-section&viewMode=story`

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