Card

Card (카드)

헤더, 콘텐츠, 푸터를 갖춘 카드를 표시하는 컴포넌트예요. 정보를 묶어서 깔끔하게 보여주고 싶을 때 쓰면 좋아요.

출처: 문서

본문

설치 (Installation)

CLI Manual

npx shadcn@latest add card

아래 코드를 프로젝트에 복사해서 붙여넣어요.

import 경로를 프로젝트 설정에 맞게 수정해요.

사용법 (Usage)

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

예시 (Examples)

변경 내역 (Changelog)

2024-11-03 제목과 설명의 접근성 개선

접근성을 개선하기 위해 CardTitle과 CardDescription 컴포넌트가 h3와 p 대신 div를 사용하도록 변경했어요.

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

더 알아보기 (Learn more)

Card · shadcn/ui