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";

Simple card with header and content

Card description text

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

Card with shadow for visual lift

This card has a shadow

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

Card with action buttons

In-Wall Speaker

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

Cards used in a grid layout

In-Wall

$899

In-Ceiling

$649

Prop	Type	Default	Description
`variant`	`"default" \| "elevated"`	"default"	Visual style of the card
`children*`	`ReactNode`	—	Card content