Card

A raised field that groups content: a project, an invoice, a stat.

import { Card } from '@zitdevs/ui';

Examples

Tones

Each tone sets the text colour its field needs, so content inside reads on any of them.

Raised

A card in the raised tone.

Surface

A card in the surface tone.

Primary

A card in the primary tone.

Inverse

A card in the inverse tone.

<Card>…</Card>
<Card tone="surface">…</Card>
<Card tone="primary">…</Card>
<Card tone="inverse">…</Card>

Padding

0, 16, 24 (the default) or 32px.

Small

Medium

Large

A card that is a link

asChild renders the card’s one child with the card’s look — a router’s link here — and the child keeps its own content. interactive adds the hover lift and the focus ring.

Payments APIOpenStripe and Azul, with daily reconciliation and signed webhooks.

import Link from 'next/link';

<Card asChild interactive>
  <Link href="/projects/42">
    <span className="text-card font-bold text-ink">Payments API</span>
    <span className="mt-2 block text-sm text-muted">
      Stripe and Azul, with daily reconciliation.
    </span>
  </Link>
</Card>;

asChild also changes the element without a link: <Card asChild><article>…</article></Card>, or an <li> in a list of cards.

Props

Prop	Type	Default	Notes
tone	'raised' | 'surface' | 'primary' | 'inverse'	'raised'	The field, and the text colour on it.
padding	'none' | 'sm' | 'md' | 'lg'	'md'	0, 16, 24 or 32px.
interactive	boolean	false	Hover lift and focus ring: for a card that is a link or a control as a whole.
asChild	boolean	false	Renders its one child with the card’s classes; the child keeps its content.
children	ReactNode	—	The content, or with asChild the one element to render as.
ref	Ref<HTMLElement>	—	The <div>, or the child.
className	string	—	Placement and size.
anything else	<div> attributes	—	On the root.

Exported types: CardProps, CardTone, CardPadding.

Accessibility

• A plain container: no role and no landmark. Give it an element that says what it is through asChild (<article>, <li>) when the content calls for one.
• A card that is a link is one link: its whole content is the link’s name, so keep it short — a title and a line. Do not nest another link or a button inside it.
• Never make a card clickable with a handler on a <div>: render a link or a button with asChild, which the keyboard and assistive technology can reach.
• Every tone’s text reaches 4.5:1 on its field.

Without JavaScript

A container, or a link through asChild: it needs none, and renders as a Server Component.

Theming

surface-raised, surface, primary-soft and surface-inverse (the fields), border-subtle and primary-soft-active (the edges), body and on-inverse-quiet (the text), primary-line and primary-inverse (the edge on hover), the focus ring.