Card

Stablev1.0.0

관련된 정보를 그룹화해서 보여주는 컨테이너.

Account

Make changes to your account here.

Name

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

<Card>
  <CardHeader>
    <CardTitle>Account</CardTitle>
    <CardDescription>Make changes to your account here.</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>...</CardFooter>
</Card>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/card.json

Composition

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

Accessibility

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1

Notes

•카드 자체는 의미 없는 컨테이너 — 안의 콘텐츠가 의미를 가져야 함.