Bird plate

The flock as a naturalist's plate: each bird a numbered figure, a hairline from the drawing to its caption, and the caption is its promise as the film says it.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaBlocks

import { BirdPlate } from "@krizaka/ui/bird-plate";

Plate I · The flockfive promises, as the film says them

fig. 1 · the falcon keeps watch: security comes first.
fig. 2 · the owl reads every page and knows every face.
fig. 3 · the duck builds, line by line, in the open.
fig. 4 · the flamingo answers, and the payment follows.
fig. 5 · the pigeon delivers, every time.

Web only — React, from @krizaka/ui/bird-plate. Beta: its API may still change in a minor version.

Mobile · ✗ to build. An app's welcome or empty state can carry its bird as a plate; it comes with the native paper roles. issue #421

Why it is here. The Cahier (ADR-004): the flock and each product's bird with its promise on www.krizaka.com, then /story and the product sites.

When to use

The promises of the family on a home or a story page: the five birds of the film, numbered.
The subject of a page, one bird large with its promise (layout="single"): the owl on a reading product.

When not to use

A rule said in a sentence inside a card or a section.Use instead: Mascot quote
A bird reacting to a state (a wait, an error, an empty list).Use instead: Mascot state

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { BirdPlate } from "@krizaka/ui/bird-plate";

Examples

The flock

Plate I: the five birds of the film, each numbered with its promise.

Plate I · The flockfive promises, as the film says them

fig. 1 · the falcon keeps watch: security comes first.
fig. 2 · the owl reads every page and knows every face.
fig. 3 · the duck builds, line by line, in the open.
fig. 4 · the flamingo answers, and the payment follows.
fig. 5 · the pigeon delivers, every time.

One bird

layout="single": one bird, large, its caption beside it.

fig. 2 · the owl reads every page and knows every face.

Props

A naturalist's plate of the flock: numbered figures, a leader line from each bird to its caption, its promise.

Prop	Type	Default	Description
`figures`required	`readonly PlateFigure[]`	—	The figures, in order: each is numbered `fig. n`.
`animated`	`boolean`	`false`	The birds' idle loops (they pause off screen and stop under reduced motion).
`figureLabel`	`string`	`fig.`	The word before the number.
`layout`	`"grid" \| "single"`	`grid`	`grid` — the figures side by side (two to five); `single` — one large figure, its caption beside it.
`separator`	`string`	`·`	The separator between the figure number and its label.
`start`	`number`	`1`	The first figure's number (a page that continues a plate).
`subtitle`	`ReactNode`	—	One line under the title.
`title`	`ReactNode`	—	The plate's title: `Plate I · The flock`.

Accessibility

The plate is a figure with its title as figcaption; the figures are an ordered list, each caption real text.
The birds are decorative (aria-hidden): the caption says who they are and what they promise.
With animated, the loops pause off screen and stop under prefers-reduced-motion.

Best practices

One bird per subject, its promise word for word as the film says it (the brand reference, §2): never a new promise line.
Keep the birds' own colours (tone="own") on a plate; brand only when the plate sits in a product's world.
Number from where the page left off (start): a story that continues Plate I starts at fig. 6.
The birds stay still by default; turn animated on for one plate per page at most.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub