Card

A compound card component for grouping related content with header, body, and footer sections.

Default

A basic card with header, content, and footer.

Notifications

Manage your notification preferences.

You have 3 unread messages.

Content Only

A simple card with just a content section.

A minimal card with only content — no header or footer.

Small Size

The sm size variant reduces internal padding and gap spacing.

Compact Card

Uses smaller padding.

Ideal for dashboard widgets.

Installation

npx visor add card

This copies two files into your project:

components/ui/card/card.tsx — the component
components/ui/card/card.module.css — the styles

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description text.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Body content here.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

API Reference

CardProps

No props data available for “card”.

The component also accepts all standard <div> HTML attributes.

Sub-components

Component	Element	Purpose
`Card`	`<div>`	Root container with border and background surface.
`CardHeader`	`<div>`	Top section with grid layout for title and description.
`CardTitle`	`<div>`	Primary heading text.
`CardDescription`	`<div>`	Secondary descriptive text in muted color.
`CardContent`	`<div>`	Main body area with horizontal padding.
`CardFooter`	`<div>`	Bottom section with flex layout for actions.

Accessibility

Card is a presentational container — it does not add any ARIA roles by default.
Use semantic heading elements inside CardTitle when appropriate for document outline.
Interactive cards should wrap the entire card in an anchor or button as needed.

On this page