Card

The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.

Web + MobileStableMise en page

Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.

Pourquoi il est là. Used by Orochia, Orazaka, krizaka.com.

Quand l’utiliser

To present one item of a collection: a video, a creator, a guide, a plan.
As a link to the item (asChild + interactive): the whole card is one target.
To group a few figures under a title (Card.Stat).

Quand ne pas l’utiliser

To frame a whole page section: use the page layout, not a card around everything.
For a single key figure without a frame.À la place : Stat
For a message about the page.À la place : Alert

Installation

Installer

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

Styles

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

Importer

import { Card } from "@krizaka/ui/card";

Exemples

Media card

An image, badges on the media, a title, a description and a footer.

12:04

Night ride across the city

Ten minutes of neon, rain and empty avenues, filmed in one take.

1.2k views2 days ago

Media fallback

No image: the fallback on the accent gradient.

Untitled draft

Processing — the cover arrives with the first frame.

Interactive link

asChild + <a>: the whole card is a link, with the spotlight and the lift.

Getting started

Install the preset, import the primitives, ship both themes.

Read the guide →

Stat card

Figures put forward with Card.Stat, tone="elevated".

This month

Revenue

€4,812

Supporters

318

Updated 5 minutes ago

Reveal grid

Cards entering in cascade with reveal and MotionObserver.

Enter

Step 1 of the signature.

Reveal

Step 2 of the signature.

Open

Step 3 of the signature.

Lift

Step 4 of the signature.

Glow

Step 5 of the signature.

Roll

Step 6 of the signature.

Props

CardRoot

Prop	Type	Défaut	Description
`asChild`	`boolean`	—	Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged.
`interactive`	`boolean`	—	The spotlight that follows the pointer and the lift on hover: for a card that is a link.
`radius`	`"md" \| "lg" \| "xl"`	`xl`	md · lg · xl.
`reveal`	`number`	—	Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most).
`tone`	`"default" \| "elevated" \| "glass"`	`default`	default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).

CardMedia

Prop	Type	Défaut	Description
`aspect`	`"auto" \| "square" \| "video" \| "portrait"`	`video`	The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's).

CardImage

The image of a media, or its fallback when there is none. alt is empty by default: the title names the card.

Prop	Type	Défaut	Description
`fallback`	`ReactNode`	—	Shown when there is no image: an icon, an illustration (decorative).
`loading`	`"eager" \| "lazy"`	`lazy`	When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards of a page — the image that is the largest contentful paint must not wait (add `fetchPriority="high"`).
`src`	`string \| null`	—	The image's URL; `null` or nothing shows the `fallback`.

CardOverlay

What sits on the media (badges, a caption). scrim and fg-on-media are invariant: nothing to do for light.

Prop	Type	Défaut	Description
`corner`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`top-left`	The corner of the media it sits in.

CardBody

Prop	Type	Défaut	Description
`padding`	`"none" \| "sm" \| "md" \| "lg"`	`md`	none · sm · md · lg.

CardTitle

Prop	Type	Défaut	Description
`as`	`"h2" \| "h3" \| "h4"`	`h3`	The heading level, to fit the page's outline.

CardStat

A figure put forward: the label in capitals, the value in tabular digits.

Prop	Type	Défaut	Description
`label`requis	`ReactNode`	—	What the figure is, in small capitals above it (the figure is the children).

Accessibilité

Card.Title is a heading (h3 by default, as to change the level) so cards are reachable by heading.
A card that is a link is named by its content: keep the title first.
The image fallback is decorative and hidden from assistive technology.

Clavier

Touches	Action
`Tab / Enter`	An `asChild` link card is one focusable link that Enter follows.

Bonnes pratiques

Build product cards from these parts and override any of them with className — never fork the card.
Keep one primary target per card: either the whole card is a link, or it holds buttons — not both.
Give Card.Media a fixed aspect so a grid stays aligned while images load.
Card.Image loads lazily; pass loading="eager" (and fetchPriority="high") to the first cards of a page, above the fold.
reveal={index} with one MotionObserver per page for the entrance; it is shown at once under reduced motion.

Notes

Anatomy

Card.Root · Card.Media · Card.Image · Card.Overlay · Card.Body · Card.Title · Card.Description · Card.Stat · Card.Footer

Card.Root is the frame: tone (default, elevated, glass), radius, and interactive for a card that is a link — the spotlight follows the pointer, the card lifts on hover. With asChild it renders your <a> or <article>.
Card.Media holds the image at a fixed aspect (video, square, portrait, auto); Card.Image falls back to fallback when there is no src.
Card.Overlay sits on the media in a corner — badges and durations use tone="scrim", identical in both themes.
Card.Body carries the title, the description, the stats and the footer.

Products build their own cards from these parts and override any of them through className — never a fork.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub