Promise card
A promise, the keys that call it and who carries it: a product's guarantee with its bird, a shortcut and what it does — a calm card with key-caps by default, a combo card whose keys light one by one in the arcade flavour.
Web uniquement — React, depuis @krizaka/ui/promise-card. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A product's guarantee stated once, with the bird of the flock that keeps it (“Your data never leaves home”).
- A keyboard shortcut taught where it matters, with what it does (
keys={["⌘", "K"]}). - On a told page, a chapter's special move (
variant="arcade").
Quand ne pas l’utiliser
- A rule told by a bird inside a card or a section.À la place : Mascot quote
- A list of shortcuts in a menu or a help panel.À la place : Kbd
- An argument with its reasons and a link.À la place : Argument card
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { PromiseCard } from "@krizaka/ui/promise-card";Exemples
A guarantee
A product's promise with the bird that keeps it.
Our promise
Your documents never leave your servers.
Kept byThe owl · reads, and keeps it in the house
Arcade flavour
The special move of a told page: the input, then the move lands.
Special move
90 % to the creator. On every sale.
In the cornerThe flamingo · gets paid
Props
A promise, the keys that call it and who carries it.
| Prop | Type | Défaut | Description |
|---|---|---|---|
labelrequis | ReactNode | — | What kind of promise (“Our promise”, “Shortcut”, arcade “Special move”). |
promiserequis | ReactNode | — | The promise itself, in a few words. |
bearer | ReactNode | — | Who carries it: a bird of the flock (Mascot, 48 px), an avatar. Decorative. |
bearerLabel | ReactNode | — | Above the bearer's name (“In the corner”, “Kept by”). |
bearerName | ReactNode | — | The bearer's name and role. |
brand | string | — | A brand scope (orazaka → .brand-orazaka). |
keys | readonly string[] | — | The keys that call it, in order (["⌘", "K"]); in a stage they light one by one before the promise lands. Decorative. |
variant | StoryVariant | default | default: a calm card with its keys as key-caps. arcade: the combo card — the keys pressed one by one, a flash. |
Accessibilité
- The keys and the bearer's picture are hidden from assistive technology; the label, the promise and the bearer's name are read.
- In a stage the keys light once and the promise lands; never under
prefers-reduced-motion.
Bonnes pratiques
- One promise per card, in a few words: something the product is held to, not a slogan.
- The bearer keeps its role: the owl reads, the falcon watches, the duck builds, the flamingo gets paid, the pigeon delivers, the lovebird introduces.
- The keys are decorative: never the only way to learn the shortcut — say it in the promise or beside it.
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub