Card

Data display · src/components/Card/Card.tsx

A block of related content, optionally the whole thing being one control.

interactive changes the element to a button and demotes the title and description to spans. That is not cosmetic: a heading inside a button is announced as part of the button's name, so a screen reader reads the title twice and the outline gains a heading nobody can navigate to.

It also sets text-align: left inline, because a button centres its text and a card does not.

Import

import { Card } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
meta	React.ReactNode | React.ReactNode[]	A tick and a short line above the title. An array joins with a middle dot.
eyebrow	React.ReactNode | React.ReactNode[]	Older name for meta.
title	React.ReactNode
description	React.ReactNode
media	React.ReactNode	An image or figure above the body.
footer	React.ReactNode
variant	'default' | 'quiet' | 'raised' | 'outline'	quiet has no box at all - one of the three square-by-rule surfaces.
interactive	boolean	The whole card is one control. Renders a button and drops the inner headings.
padding	'default' | 'tight'
wash	boolean | 'brand'
className	string
style	React.CSSProperties
children	React.ReactNode
onClick	(event: React.MouseEvent) => void