Stuck
Any block stuck into the notebook: a figure, a specimen tag, a card or a taped photo, held by tape, a pin, photo corners or a lifted edge, slightly tilted from data, on the hard paper shadow of the Cahier.
import { Stuck } from "@krizaka/ui/stuck";Web only — React, from @krizaka/ui/stuck. Beta: its API may still change in a minor version.
- Mobile · ✗ to build. It comes with the native paper roles of the Cahier. issue #421
Why it is here. The Cahier (ADR-004, krizaka-ui#554): the products' cards and figures stuck into the notebook on www.krizaka.com's #products.
When to use
- A card, a figure or a specimen tag that should look kept in the notebook, on the pages of the Cahier (www.krizaka.com's products).
- A block that needs a margin doodle beside it:
Stuckhangs it in the margin.
When not to use
- A photograph with its print border and caption.Use instead: Taped photo
- Interactive chrome: a form, a table, a dialog. Tilted controls are harder to aim at.Use instead: Card
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Stuck } from "@krizaka/ui/stuck";Examples
A tag, pinned
A specimen tag pinned to the page, its lean read from its slug.
A card, taped
A card held by one strip of tape, with a doodle in the margin.
The four ways it is held
Tape, a pin, photo corners and a lifted edge.
Props
A block stuck into the notebook: held by tape, a pin, photo corners or glue; tilted from data; a hard paper shadow.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | What is stuck: a figure, a SpecimenTag, a card, a TapedPhoto. |
as | "aside" | "div" | "li" | div | The element of the wrapper. A figure goes inside, never here. |
doodle | ReactNode | — | Margin doodles (Doodle) drawn beside the block; they leave with the margin on a narrow screen. |
hold | StuckHold | tape | How it is held: tape (one strip), tape-corners (two opposite corners), pin (a drawing pin), corner (photo
corners) or glue (a slightly lifted edge). |
seed | string | — | Where the tilt comes from when tilt is not given: the same string always leans the same way (±2°). |
tilt | number | — | The tilt in degrees (negative leans left). Without it, the tilt comes from seed. |
Accessibility
- A plain wrapper: it adds no role and no name; what it holds keeps its own semantics.
- The tape, the pin, the corners and the shadow are decoration (pseudo-elements,
aria-hidden). - The tilt is a transform: nothing moves and nothing animates, under
prefers-reduced-motionas well.
Best practices
- Hold by what the block is: tape for a figure, a pin for a tag, corners for a print, glue for a note.
- Give a
seed(the block's slug): its lean is the same on the server, on the client and in every screenshot. - One lean per page, small (±2°); do not stick two neighbours at the same angle with the same hold.
- Keep the content first: the hold never covers text.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub