Card grid
A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.
Web uniquement — React, depuis @krizaka/ui/card-grid. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Entry points of a hub (
LinkCard), the reasons of a product page (ArgumentCard), plans, products. - Any set of peer cards that should read as one group with one rhythm.
Quand ne pas l’utiliser
- For a sequence the reader follows in order.À la place : Stepper
- For rows of data to compare or sort.À la place : Data table
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { CardGrid } from "@krizaka/ui/card-grid";Exemples
Two halves
fit="fit": two cards share the whole width.
A list of sections
as="ul", six links that rise staggered by column on a real page.
Props
A responsive grid of cards: equal rows, a staggered reveal, the pointer's light.
| Prop | Type | Défaut | Description |
|---|---|---|---|
childrenrequis | ReactNode | — | The cards: one cell each. |
align | "stretch" | "start" | stretch | stretch gives the cells of a row one height; start lets each card keep its own (cards that open a panel). |
as | "div" | "ol" | "ul" | div | ul when the cards are a list (each cell an li). |
columns | number | 3 | The columns the stagger counts (the delay restarts on every row). |
fit | "fit" | "fill" | fill | fill keeps empty tracks (a lone card keeps its width); fit stretches the cards of a short row across the width. |
light | boolean | true | The light that follows the pointer over the cards ([data-kz-light]). |
min | number | 300 | The narrowest a column may be, in pixels: the grid fits as many columns as the width allows. |
reveal | boolean | true | The cards rise once into place ([data-reveal], MotionObserver), staggered by column. false on the first screen. |
Accessibilité
- The grid adds no role;
as="ul"makes it a list (each cell anli). - The pointer's light is decorative and never runs on touch screens or under
prefers-reduced-motion. - Revealed cells are only hidden visually until they enter the viewport; under reduced motion they never move.
Bonnes pratiques
- Set
minto the narrowest a card still reads well; the grid does the rest at every width. fit="fit"for two or three cards that should share the whole width;fillkeeps a lone card at its size.- Keep
revealon below the first screen, off on it;columnsmakes the stagger restart on each row. as="ul"when the cards are a list of links.
Composants liés
Générée depuis le code de @krizaka/ui 2.8.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Call-to-action panel
The invitation at the end of a section or a page: a title, why it matters, the ways to answer — in the hue of the page.
Code block
A code sample: its language and file name, the code highlighted on the tokens (it scrolls sideways, never shrinks) and a copy button that says it copied — CodeTabs puts several build tools side by side.