Card

Data Display

A container component for grouping related content. Use cards to organize information into distinct, scannable sections.

Import

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

Usage

Basic Card

Simple card with header and content

Card Title

Card description text

Card content goes here. Use cards to group related information.

Elevated Card

Card with shadow for visual lift

Elevated Card

This card has a shadow

Elevated cards appear to float above the page, useful for important content.

Card with Footer

Card with action buttons

Sonance VP66

In-Wall Speaker

Premium in-wall speaker with exceptional sound quality and invisible design.

Product Card Grid

Cards used in a grid layout

VP66

In-Wall

$899

C6R

In-Ceiling

$649

API Reference

variant"default"
"default" | "elevated"

Visual style of the card

children*—
ReactNode

Card content

Related Components

AccordionDivider