Headline

Pro New

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.

Preview

Installation

npx @lumioui/cli add pro/headline

Usage

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

Also exported: HeadlineMuted, HeadlineMark, HeadlineInline, HeadlineStat, BackdropWord.

Examples

Stat sentence

A health app's day written as one sentence, in green.

API reference

HeadlineMuted

Prop Type Default
children React.ReactNode —

HeadlineMark

Prop Type Default
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 Default
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 | ((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 Default
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 Default
size HeadlineSize

Type size. Default "lg".

 168
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 Default
word* string

The word — short and loud ("RUN", "July", "Calm").

 —
size number

Font size in pt. Default 168.

 168
tone "ink" | "accent"

"ink" (default) is a faint ink; "accent" a faint accent.

 "ink"
position "top" | "center" | "bottom"

Where the word sits in its stage. Default "top".

 "top"
offset number

Push the word off the stage edge (pt, negative pulls it up/out).

 0
className string —