Skip to Content
ComponentsFoundationLayoutCard

Card

콘텐츠를 담는 카드 컨테이너 컴포넌트입니다.

개요

Card는 관련된 정보를 시각적으로 그룹화하는 컨테이너 컴포넌트입니다. 헤더, 본문, 푸터 영역을 포함할 수 있으며, 다양한 스타일을 지원합니다.

주요 특징:

  • 헤더/본문/푸터 구조
  • 이미지 카드
  • 호버 효과
  • 그림자 스타일

사용 사례:

  • 제품 카드
  • 프로필 카드
  • 대시보드 위젯
  • 콘텐츠 그룹

설치

npx @vortex/cli add card --package foundation

기본 사용법

import {
  Card,
  CardHeader,
  CardContent,
  CardFooter,
} from "@vortex/ui-foundation";
 
export default function Example() {
  return (
    <Card>
      <CardHeader>
        <h3>Card Title</h3>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

Variants (변형)

기본 카드

<Card>
  <CardContent>
    <p>기본 카드</p>
  </CardContent>
</Card>

헤더가 있는 카드

<Card>
  <CardHeader>
    <h3>제목</h3>
    <p className="text-sm text-gray-600">부제목</p>
  </CardHeader>
  <CardContent>
    <p>내용</p>
  </CardContent>
</Card>

이미지 카드

<Card>
  <img src="/image.jpg" alt="Image" className="w-full rounded-t-lg" />
  <CardContent>
    <h3>이미지 카드</h3>
    <p>설명 텍스트</p>
  </CardContent>
</Card>

호버 효과

<Card className="hover:shadow-lg transition-shadow cursor-pointer">
  <CardContent>
    <p>호버 시 그림자 효과</p>
  </CardContent>
</Card>

Props API

PropTypeDefaultDescription
classNamestring-추가 CSS 클래스
childrenReactNode-카드 내용

접근성

Card 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

  • role="article" (독립적인 콘텐츠일 경우)

예제

예제 1: 제품 카드

export default function ProductCard() {
  return (
    <Card>
      <img src="/product.jpg" alt="Product" className="w-full rounded-t-lg" />
      <CardContent>
        <h3 className="font-bold">제품명</h3>
        <p className="text-sm text-gray-600 mt-sm">설명 텍스트</p>
        <p className="text-lg font-bold mt-md">₩99,000</p>
      </CardContent>
      <CardFooter>
        <Button className="w-full">장바구니</Button>
      </CardFooter>
    </Card>
  );
}

관련 컴포넌트

Last updated on
InputContainer