Card

Usage

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kanzo-tech/ui";

Anatomy

Card
├── CardHeader
│   ├── CardTitle
│   └── CardDescription
├── CardContent
└── CardFooter

Variants

The variants live on CardMedia, not on Card. That is why they were hard to find: the card itself is just a surface, and what changes is how the media slot at its top behaves.

PreviewCode

Plain

No media. A surface with content on it.

Forty-four contracts, five halls, one board.

Icon

Sizes the glyph and keeps the card's padding.

For a card that is about a thing with a type.

Image

Bleeds to the edges and clips to the radius.

Actions

CardAction and CardFooter both hold controls, and both exist because "an action on a card" means two different placements: CardAction sits in the header opposite the title — for a badge, a menu, a single icon button — while CardFooter sits at the bottom, for the actions the card is for.

A dashboard number

A card that holds one figure — a label, a delta, a sparkline, a status tint, a whole-card link — is Stat. StatRoot is this Card, so everything here, asChild included, holds there too.

API Reference

Card

No props of its own. Extends React.ComponentProps<typeof ark.article> — it renders <article>, and asChild swaps that for an <a> when the whole card is a link. It owns the --space padding variable the parts read, so retuning the card's rhythm is one class on the root.

CardMedia

Mirrored to data-variant, which is how Card knows to drop its own top padding for image.

CardHeader

Both are shorthands: they render a CardTitle and a CardDescription for you. A lone string child is treated as the title. Extends React.ComponentProps<typeof ark.div>.

Other parts

CardTitle renders <h3> — asChild for another level, so a card contributes to the document outline at the right depth. CardDescription, CardAction, CardContent and CardFooter render a div and take that element's props.