Card
@sushindustries/uiTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.
Composing it
Cards read best inside .card-grid, which sizes columns to
clamp(260px, 30vw, 320px) and lets them wrap - a single CardCardTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.@sushindustries/ui · layout outside
a grid works fine on its own, but a row of them without the grid class
will not line up. Image cards crop to 16:9 automatically, so uploads of
different sizes still produce a level row.
The heading level is not decorative
as exists because a card sits at different depths in different pages'
outlines - getting it wrong is invisible visually, and flagged by every
outline-based accessibility check.
// A grid of cards under a page's own h1
<Card title="Accordion" />
// One card standing in for a whole section's own heading
<Card as="h2" title="Featured" />When not to use it
title is required - a tile that is only an image or only an icon with
no heading belongs in a different component. CardCardTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.@sushindustries/ui · layout assumes a heading is
always present, because the outline argument above depends on one
existing.