Components / data-display

Card

Container that groups related content and actions about one subject.

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

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

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

<Card />

• Compound component: Card, CardMedia, CardContent, CardTitle, CardDescription, CardFooter. Hover and Focused apply only with interactive; put a link in CardTitle and it stretches over the whole card as one tab stop.
• Compose with: button.
• Storybook: Data display/Card.

Props

Other props

States. Compound component: Card, CardMedia, CardContent, CardTitle, CardDescription, CardFooter. Hover and Focused apply only with interactive; put a link in CardTitle and it stretches over the whole card as one tab stop.

Native attributes such as className, id and data-* are forwarded to the root element.

Parts

<CardContent><CardTitle>Plan</CardTitle><CardDescription>Billed monthly.</CardDescription></CardContent>

<CardTitle as="h2">Team plan</CardTitle>

<CardDescription>Up to 10 seats.</CardDescription>

<CardMedia height={120}><img src="/cover.png" alt="" /></CardMedia>

<CardFooter><Button size="sm">Open</Button></CardFooter>

Use it when

• Group related content and actions about one subject

Do not use it when

• Tabular data (use Table)
• Simple rows (use List Item)
• A selectable option, such as a plan picker (use Radio Card)

Rules for agents

• For a clickable card, set interactive and put the card's one link inside CardTitle
• An interactive card contains no other buttons or links
• At most one primary Button in CardFooter
• Put CardTitle, CardDescription and CardFooter inside CardContent: CardContent owns the padding, and a CardFooter placed beside it sits flush against the card edge
• A Card is 320px wide by default (the Figma size). In a page column, a grid cell or a stack, pass fullWidth so it fills its container; do not override the width with a className

Avoid

• Nesting a Card inside another Card
• Making a card clickable while it also holds its own buttons or links
• Long paragraphs or complex forms inside a card
• Mixing card variants within one group of related cards
• Signalling that a card is clickable by hover shadow alone
• Using Card as the layout wrapper for everything on a page
• Overriding the Card width with a className or a wrapper rule (use fullWidth)

Writing the content

• Titles are short and specific, 2-6 words
• Body text is 1-3 short lines; link to the full content for more
• Keep content across a row of cards similar in length and structure
• Use sentence case

Keyboard

• If the whole card is a link, one Tab stop on the title link

Accessibility

• Avoid nesting interactive elements inside a fully clickable card

Colour tokens it reads

Related

• List Item
• Table
• Radio Card

data-display 9 Figma variants Try it in the live demo