Skip to Content
ComponentsFoundationCard

Card

관련 정보를 하나의 박스 형태로 묶어 표시하는 컨테이너 컴포넌트

개요

Card 컴포넌트는 제목, 콘텐츠, 보조 정보, 액션 버튼 등을 하나의 카드 형태로 구성하여 정보를 시각적으로 그룹화합니다. Composable 구조로 필요한 영역만 조합하여 사용할 수 있습니다.

주요 특징

  • ✅ 타이틀 영역: 제목과 설명을 표시하는 헤더 영역
  • ✅ 콘텐츠 영역: 텍스트, 수치, 설명 등 주요 정보 표시
  • ✅ 보조 정보 표시: Badge, Tag, 아이콘 등 상태 표시
  • ✅ 액션 영역: 상세보기, 편집, 삭제 등 버튼 영역
  • ✅ 구분 레이아웃: 헤더/콘텐츠/푸터 시각적 구분
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

기본 상태

Card Title
Card description goes here.

Card content goes here.

타이틀 영역

Card 상단에 제목(Title)과 설명(Description)을 표시할 수 있습니다.

캠페인 관리
진행 중인 캠페인 현황을 확인합니다.

콘텐츠 영역

주요 정보 텍스트, 수치, 설명 등 콘텐츠 영역을 표시할 수 있습니다.

월간 실적
2025년 1월 기준
총 발송 건수12,345
성공률98.5%

보조 정보 표시

상태 Badge, Tag, 아이콘 등 보조 정보를 함께 표시할 수 있습니다. CardAction을 사용하여 헤더 우측에 Badge를 배치할 수 있습니다.

캠페인 A
SMS 마케팅 캠페인
진행중
캠페인 B
이메일 캠페인
종료

액션 영역

상세보기, 편집, 삭제 등 액션 버튼 영역을 제공할 수 있습니다. 헤더 우측에는 CardAction, 하단에는 CardFooter를 사용합니다.

고객 정보
홍길동 (VIP)

최근 구매: 2025.01.15

구분 레이아웃

타이틀 / 콘텐츠 / 액션 영역은 border-b, border-t 클래스를 사용하여 시각적으로 구분할 수 있습니다.

알림 설정
알림 수신 방법을 설정합니다.

SMS, 이메일, 푸시 알림을 개별적으로 설정할 수 있습니다.

API Reference

컴포넌트 구조

컴포넌트HTML 요소Description
Card<div>최상위 카드 컨테이너
CardHeader<div>제목 + 설명 + 액션 그룹
CardTitle<div>카드 제목
CardDescription<div>카드 설명
CardAction<div>헤더 우측 액션 영역
CardContent<div>주요 콘텐츠 영역
CardFooter<div>하단 액션 버튼 영역

Card Props

PropTypeDefaultDescription
size"default" | "sm""default"카드 크기
classNamestring-추가 CSS 클래스

기본 사용법

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction,
} from "@vortex/ui-foundation"
 
<Card>
  <CardHeader>
    <CardTitle>제목</CardTitle>
    <CardDescription>설명</CardDescription>
    <CardAction>
      <Badge>상태</Badge>
    </CardAction>
  </CardHeader>
  <CardContent>콘텐츠</CardContent>
  <CardFooter>
    <Button>액션</Button>
  </CardFooter>
</Card>

접근성

권장 사항

  • ✅ 의미 있는 제목으로 카드의 목적을 명확히 전달
  • ✅ 액션 버튼에 명확한 레이블 제공
  • ❌ 카드 전체를 클릭 가능하게 만들 때 중첩 인터랙션 주의

관련 컴포넌트

Last updated on
ButtonCarousel