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 only — React, from @krizaka/ui/card-grid. Beta: its API may still change in a minor version.
When to use
- 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.
When not to use
- For a sequence the reader follows in order.Use instead: Stepper
- For rows of data to compare or sort.Use instead: Data table
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { CardGrid } from "@krizaka/ui/card-grid";Examples
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 | Default | Description |
|---|---|---|---|
childrenrequired | 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. |
Accessibility
- 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.
Best practices
- 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.
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
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.