Components
Versus card
An arcade « character select » card: two subjects face to face, a bird as each fighter, stat bars from real data, and a « VS » between them.
import { VersusCard } from "@krizaka/ui/versus-card";Web only — React, from @krizaka/ui/versus-card. 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 tool sites (krizaka/krizaka-ui#548): Java's two-release face-off, the component and its alternative on ui.krizaka.com.
When to use
- To compare two releases of a tool, or a component and its alternative, on measured figures.
- To open a changelog or a « why this one » page with a playful, honest face-off.
When not to use
- A feature-by-feature table of three subjects or more.Use instead: Comparison table
- One subject and its numbers.Use instead: Stat
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { VersusCard } from "@krizaka/ui/versus-card";Examples
Two releases
Two releases of a package compared on bundle size and coverage.
A component and its alternative
Two ways to build a dialog, compared on measured figures.
Props
An arcade versus card: two subjects face to face, a bird each, stat bars from real data, a « VS » between them.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | The accessible name of the match: Krizaka UI 2.7 versus 2.6. |
leftrequired | Fighter | — | The subject on the left. |
rightrequired | Fighter | — | The subject on the right (its bird faces left). |
source | ReactNode | — | Where the figures come from, under the card. |
vs | ReactNode | VS | The mark between them. |
Accessibility
- A named section; each fighter's stats are a description list, so every figure is text. The bars repeat the numbers and are hidden from assistive technology.
- The birds are decoration; the « VS » is real text.
- On a phone the fighters stack with the mark between them; nothing moves.
Best practices
- Every bar is a real figure: pass the value, its maximum and the text the reader reads (
4.1 kB), and say where the figures come from insource. - The same stats, in the same order, on both sides: the card compares, it does not decide who wins.
- Choose the birds by the brand reference (the duck builds, the owl reads, the pigeon delivers), not by looks.
- Name the match for assistive technology with
label:Krizaka UI 2.7 versus 2.6.
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