Card

A card frames content that belongs together and separates it from the rest of the page. Its header names the subject with a title and a description, its content holds the details, and its footer holds the actions that follow from them.

UsageCopy Anchor Link

import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@biem/ui/components/ui/card";

export function CardDefault() {
	return (
		<div className="w-full max-w-sm">
			<Card>
				<CardHeader>
					<CardTitle>Transfer 4821</CardTitle>
					<CardDescription>From the warehouse to the store</CardDescription>
				</CardHeader>
				<CardContent>
					<p>The warehouse ships 12 cases on Monday, and the store receives them on Tuesday.</p>
				</CardContent>
			</Card>
		</div>
	);
}

ExamplesCopy Anchor Link

SmallCopy Anchor Link

A dashboard often shows many cards at once, each with a single figure or status. With size set to "sm", a card claims less room around its content, so more cards fit on one screen and users compare them at a glance.

Default SizeCopy Anchor Link

Most cards need no size of their own, whether they summarize a delivery or present the figures of a store. The value "default" of size applies whenever no other value is set, so cards keep the same spacing across every product and their details remain easy to read.

With ActionCopy Anchor Link

A card often leads to one next step for its whole subject, such as assigning a task or opening the full report. Placed in CardAction, that step stays with the subject it concerns, so users can act without first reading through the details.

With FooterCopy Anchor Link

Some cards end in a decision, such as approving a delivery or confirming a stock count. In CardFooter, the actions for that decision follow the content and stand apart from it, so users take in the details first and then act on them.

With ImageCopy Anchor Link

Certain subjects are recognized faster by a picture than by a name, such as a product or a store front. An image placed before the header becomes the first thing users see, so they recognize the subject before they read its title.

PreviewCode

Shelf check

Aisle 4 on Monday at 7:40

API ReferenceCopy Anchor Link

CardCopy Anchor Link

CardHeaderCopy Anchor Link

CardHeader groups the title, the description and the action at the top of the card. It renders a div and has no props of its own.

CardTitleCopy Anchor Link

CardTitle names the subject of the card. It renders a div and has no props of its own.

CardDescriptionCopy Anchor Link

CardDescription adds supporting text below the title. It renders a div and has no props of its own.

CardActionCopy Anchor Link

CardAction holds an action in the top right corner of the header. It renders a div and has no props of its own.

CardContentCopy Anchor Link

CardContent holds the details of the card. It renders a div and has no props of its own.

CardFooterCopy Anchor Link

CardFooter closes the card with a row that a border and a background of its own set apart from the content. It renders a div and has no props of its own.