Card

Card groups related information and actions inside one bounded surface. Its optional slots provide a predictable structure for a heading, description, body, action, and footer.

Use a card when several pieces of content belong to one object or task. Do not use cards only to decorate unrelated page sections.

Live previewInteractive / Local

Production cluster

Live status for the primary deployment target.

Region: us-east-1
Health: Operational

Installation

Sourcebash

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/card.json

Usage

Sourcetsx

import {
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle
} from "@/components/ui/argv/card"

<Card>
    <CardHeader>
        <CardTitle>Build artifact</CardTitle>
        <CardDescription>argv-2026.07.16</CardDescription>
        <CardAction>Signed</CardAction>
    </CardHeader>
    <CardContent>Signed bundle ready for deployment.</CardContent>
    <CardFooter>3 targets</CardFooter>
</Card>

Composition

Use the following composition as a starting point. Every slot is optional, so omit sections that do not help explain or operate on the card's subject.

Sourcetext

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

CardHeader provides the grid that aligns CardAction beside the title and description. CardContent holds the primary details, while CardFooter is intended for actions or secondary metadata.

Size

Set size="sm" on Card when the surrounding interface needs a denser surface. The size is inherited by the card's slots, so do not set it separately on the header, content, or footer.

Sourcetsx

<Card size="sm">
    <CardHeader>
        <CardTitle>Preview deployment</CardTitle>
        <CardDescription>Ready for review.</CardDescription>
    </CardHeader>
    <CardFooter>Updated 2 minutes ago</CardFooter>
</Card>

API Reference

Card

The root container for all card sections. It renders a div and forwards native div props.

Prop	Type	Default
`size`	`"default"` \| `"sm"`	`"default"`
`className`	`string`	-

CardHeader

Arranges the title, description, and optional action. It renders a div.

Prop	Type	Default
`className`	`string`	-

CardTitle

Provides the card heading and renders an h3.

Prop	Type	Default
`className`	`string`	-

CardDescription

Provides supporting text beneath the title and renders a p.

Prop	Type	Default
`className`	`string`	-

CardAction

Places a compact action or status at the end of the header. It renders a div.

Prop	Type	Default
`className`	`string`	-

CardContent

Contains the card's primary information and renders a div.

Prop	Type	Default
`className`	`string`	-

CardFooter

Contains actions or secondary information at the bottom of the card and renders a div.

Prop	Type	Default
`className`	`string`	-

Accessibility

Cards do not add a landmark or interactive role. Use semantic elements inside the content and keep the title’s heading level consistent with the surrounding page structure.

Avoid making the entire surface clickable when the card also contains nested buttons or links. Give each interactive control a clear, independent focus target.