Section Heading
The eyebrow pill → title → subcopy rhythm above every marketing band, with the house entrance stagger.
The eyebrow pill → title → subcopy rhythm that sits above every marketing band. This exact block was hand-rolled in Yunxin's landing, Yunxin's Fellows page and YunUI's own showcase site — three copies, each re-deriving the same stagger delays. It lives here so every surface inherits one rhythm.
Import
1import { SectionHeading, Eyebrow } from "@yuhuanowo/yunui/patterns";Basic
Basic
Care, in the details.
Not the most components — the most considered ones.
Left-aligned, no badge
align="left" for in-page sections; omit badge for a bare heading. Set animate={false} when the heading is already on screen at load.
Left-aligned
Recent releases
Everything shipped in the last quarter.
Eyebrow on its own
The pill is exported separately — it also appears above a hero title, inside a CTA band, or as a standalone chip.
Eyebrow
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "center" | "left" | center | Horizontal alignment. |
| animate | boolean | true | Play the entrance animation, staggering badge → title → subtitle. Turn it off for headings that are already visible on load. |
| badge | ReactNode | — | Eyebrow label above the title. Omit for a bare heading. |
| icon | ReactNode | — | Glyph inside the eyebrow pill. |
| subtitle | ReactNode | — | Supporting line under the title. |
| title* | ReactNode | — | The section title. |
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | The label text. |
| icon | ReactNode | — | Small leading glyph, e.g. a lucide icon at `w-4 h-4`. |