Foundations / Sheet & Heading
Sheet & Heading
The paper everything sits on, and the lettering that labels it.
Server or clientWCAG AASince v0.1
Status timeline
A sheet of paper, taped on. Everything inside is printed on paper.
import { Sheet, Heading, Lettering } from "@plop-ui/react";
<Heading level={2}>Status timeline</Heading>
<Sheet tape="periwinkle">…</Sheet>
<Lettering amp={2}>Hand-lettered label</Lettering>Change every prop live in the playground.
Props
Sheet
| Prop | Type | Default | What it does |
|---|---|---|---|
| children | ReactNode | none | — |
| tape | "none" | "periwinkle" | "mint" | "mustard" | "bubblegum" | mustard | Color of the two tape strips holding it down, or `none`. |
| tilt | number | 0 | A slight rotation in degrees. |
Also takes every attribute of <div> (277 more, e.g. onClick, className, aria-*).
Heading
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | — |
| className | string | none | — |
| id | string | none | — |
| level | 2 | 3 | 4 | 1 | 2 | h1–h4. |
| scribble | boolean | true for h1/h2 | Tomato scribble underline. |
| writeOn | boolean | true for h1/h2 | Letters write on when the heading scrolls into view. |
Lettering
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | The text to letter. Anything that isn't a string or number renders untouched. |
| amp | number | 2 | How wobbly: roughly the max tilt in degrees. |
| className | string | none | — |
| writeOn | boolean | false | Letters start hidden and write on when `data-in` is set on this element (see Heading). |
Use it well
DoUse lettering for short labels and headings.
Don'tLetter whole paragraphs. Body text stays upright and readable.
Accessibility
- Lettering gives screen readers the plain text once; the jittered letters are hidden.
- Headings render fully written on the server and write on only after JavaScript loads.