Mascot quote
A rule, a promise or a decision told by a bird: the sentence in a speech bubble, the bird under its tail and who speaks — inline in a card, callout alone in a section.
Web only — React, from @krizaka/ui/mascot-quote. Beta: its API may still change in a minor version.
When to use
- To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers, the lovebird introduces).
- A promise that deserves its own moment in a section (
callout).
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { MascotQuote } from "@krizaka/ui/mascot-quote";Examples
Inline
The falcon's rule, small, beside a paragraph or inside a card.
Nothing crosses the walls: no prompt, no file, no metric.
Callout
The owl's promise, alone in a section, the bird alive.
Every personal record stays in Québec, and you can read who touched it — Law 25, by design.
Props
A sentence told by a bird: a speech bubble, the bird under its tail, who speaks. The bird is decorative.
| Prop | Type | Default | Description |
|---|---|---|---|
birdrequired | "falcon" | "owl" | "duck" | "flamingo" | "pigeon" | "lovebird" | — | The bird that speaks — the one whose idea it is. |
childrenrequired | ReactNode | — | The sentence: the rule, the promise. |
labelrequired | ReactNode | — | Who speaks, under the bubble: The falcon's rule. |
animated | boolean | — | The bird's idle loop (it pauses off screen and stops under reduced motion). Defaults to true for a callout. |
mood | "success" | "error" | "empty" | "welcome" | "thinking" | thinking | Its mood. |
variant | "inline" | "callout" | inline | inline inside a card (small, the bird answers the pointer); callout alone in a section (larger, the bird alive). |
Accessibility
- A
figurewith ablockquoteand itsfigcaption: read as a quote and who says it. - The bird is decorative (
aria-hidden); its idle loop pauses off screen and stops underprefers-reduced-motion.
Best practices
- One bird per idea, the same bird for the same idea everywhere.
- One sentence, said as a rule: short, in the present tense.
- The label says who speaks (
The falcon's rule): words as props.
Related components
Generated from the code of @krizaka/ui 2.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Link card
An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.
Page
The frame of every page: one width (--kz-page-max), one pair of gutters, one vertical rhythm — Page, Section (full-bleed, its heading, a hairline or the brand's backdrop as transition) and SectionHeading, with Facts and Ticks.