# Headline

Headline written as a sentence you can put things inside: a quiet second tone, one keyword in a highlight box, an icon or character in the line and live stats with their glyphs, plus a giant faded word behind the hero. Words switch on in reading order, resolving from a soft blur on the web.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/headline
```

## Import

```tsx
import { HeadlineMuted, HeadlineMark, HeadlineInline, HeadlineStat, Headline, BackdropWord } from "@/components/ui/headline/headline";
```

## Variants

- `stats` — Stat sentence: `npx @lumioui/cli add pro/headline-stats`

## Props

### HeadlineMuted

| Prop | Type | Notes |
| --- | --- | --- |
| `children?` | `React.ReactNode` | — |

### HeadlineMark

| Prop | Type | Notes |
| --- | --- | --- |
| `children?` | `React.ReactNode` | The keyword (one or a few words — they stay together in the box). |
| `tone?` | `"accent" | "ink"` | "accent" (default) fills with the surface accent; "ink" with the ink. |
| `tilt?` | `boolean` | Lean the box slightly, like a sticker. Default false. |

### HeadlineInline

| Prop | Type | Notes |
| --- | --- | --- |
| `icon?` | `IconName` | Draw this icon at the type's size. |
| `look?` | `"bare" | "disc" | "ink"` | "bare" (default) draws the glyph in the accent ink; "disc" sets it in an  accent disc; "ink" in an ink disc. |
| `children?` | `React.ReactNode | ((size: number) => React.ReactNode)` | Any node (a character, an avatar, a flag) or a function of the slot size. |
| `label?` | `string` | Words a screen reader hears in its place. Default nothing. |

### HeadlineStat

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `number` | The live figure — it rolls to each new value. |
| `format?` | `(n: number) => string` | Format the figure. Default rounds and locale-formats. |
| `icon?` | `IconName` | Glyph before the figure. |
| `tone?` | `"accent" | "ink"` | "accent" (default) sets the figure in the accent ink; "ink" in the ink. |

### Headline

| Prop | Type | Notes |
| --- | --- | --- |
| `size?` | `HeadlineSize` | Type size. Default "lg". |
| `align?` | `"left" | "center"` | Line alignment. Default "left". |
| `ignite?` | `boolean` | Play the entrance on mount (re-key to replay). Default false. |
| `delay?` | `number` | Wait before the first word (ms) — sequence it after a hero lands. |
| `onDone?` | `() => void` | Fires once the last word has switched on. |
| `label?` | `string` | Override what screen readers hear. Default the sentence. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | Words, plus Headline.Muted / Mark / Inline / Stat parts. |

### BackdropWord

| Prop | Type | Notes |
| --- | --- | --- |
| `word` | `string` | The word — short and loud ("RUN", "July", "Calm"). |
| `size?` | `number` | Font size in pt. Default 168. |
| `tone?` | `"ink" | "accent"` | "ink" (default) is a faint ink; "accent" a faint accent. |
| `position?` | `"top" | "center" | "bottom"` | Where the word sits in its stage. Default "top". |
| `offset?` | `number` | Push the word off the stage edge (pt, negative pulls it up/out). |
| `className?` | `string` | — |

## Icons rendered

- `footprints` — /icons.html?i=footprints
- `moon` — /icons.html?i=moon

Source: https://lumioui.com/components/headline