Data display

Card

A surface for grouping related content, with header, content, footer and media parts in four variants.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { Card, CardHeader, CardContent, CardFooter, CardMedia } from "@/components/ui/card";

Group a chart, a form section or a settings block so it reads as one unit.
Use elevated for a card that should lift off the page, such as a featured plan.
Use outline when a card needs more weight than the hairline default, for example a selected option.
Use media for content led by an image or preview, such as templates or articles.

Do not nest cards inside cards; use spacing or a divider inside one card instead.
For a single KPI number with a trend, use StatCard.

default has a hairline border, elevated a shadow, outline a 2px border.

variant="media" clips its children so CardMedia meets the rounded corners. Put an image inside CardMedia.

A settings block: fields in CardContent, save and cancel in CardFooter.

The container. Extends native div attributes.

Prop	Type	Default	Description
variant	"default" \| "elevated" \| "outline" \| "media"	"default"	default: 1px border. elevated: shadow, no visible border. outline: 2px border. media: clips children so CardMedia meets the rounded corners.
className	string	-	Merged with the variant classes.

Title row with optional description and a right-aligned action. Does not spread other div props.

Prop	Type	Default	Description
title	React.ReactNode	-	Required. Rendered in an <h3>.
description	React.ReactNode	-	Supporting text under the title.
action	React.ReactNode	-	Element on the right, such as a ghost Button or a menu trigger.
className	string	-	Extra classes for the header row.

Padded body (p-5). Extends native div attributes.

Right-aligned action strip with a top border. Extends native div attributes.

16:9 media strip with a muted background. Place it first inside a Card with variant="media". Extends native div attributes.

The class-variance-authority function behind Card, for styling another element like a card.

Prop	Type	Default	Description
variant	"default" \| "elevated" \| "outline" \| "media"	"default"	Same variants as Card.

Card is a plain div with no role. CardHeader renders its title as an <h3>, so check that the heading level fits the surrounding page outline.
If the whole card should be clickable, put a real link or button inside it rather than adding onClick to the div.
Content inside CardMedia is decorative unless you give images a meaningful alt text.