Card

Card는 관련 콘텐츠를 묶어 표시하는 컨테이너 컴포넌트입니다. 헤더, 콘텐츠, 푸터 구조로 정보를 정리하며, 이미지와 액션을 포함한 다양한 레이아웃을 지원합니다.

Variants

Sizes

Orientations

Pure

React

Playground

Preview

D24px

Card Title

Card description goes here.

This is the main content area of the card. It can contain any content.

Variant

Size

Radius

Direction

Options

<Card>
  <Card.Header>
    <Card.Title icon={<Layers />}>Card Title</Card.Title>
    <Card.Description>Card description goes here.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p className="text-sm text-text-muted">
      This is the main content area of the card. It can contain any content.
    </p>
  </Card.Content>
  <Card.Footer>
    <Button size="sm" variant="ghost" className="ml-auto" rightIcon={<ChevronRight />}>
      Learn more
    </Button>
  </Card.Footer>
</Card>

Variants

3가지 variant로 카드의 시각적 강조도를 조절할 수 있습니다.

Default

그림자로 부각되는 스타일

메인 UI

Outline

보더만 있는 플랫 스타일

리스트, 그리드

Ghost

배경, 보더 없는 최소 스타일

그룹 내부

Sizes

sm

가로16px

상단20px

내부 하단12px

마지막 하단20px

default

가로24px

상단24px

내부 하단16px

마지막 하단24px

lg

가로32px

상단32px

내부 하단16px

마지막 하단32px

Size	가로 패딩	상단 패딩	내부 하단	마지막 하단	미리보기
`sm`	16px	20px	12px	20px	Title Content
`default`	24px	24px	16px	24px	Title Content
`lg`	32px	32px	16px	32px	Title Content

반응형: default, lg 사이즈는 모바일(640px 미만)에서 패딩이 한 단계 자동 축소됩니다. sm 사이즈는 고정값입니다.

Features

Orientation

수직/수평 레이아웃을 전환할 수 있습니다. 수평 레이아웃에서는 이미지가 왼쪽에 배치됩니다.

Vertical (Default)

Image Area

Vertical Card

Image on top, content below.

<Card>
  <Card.Image src="/placeholder.jpg" alt="Preview" />
  <Card.Header>
    <Card.Title>Vertical Card</Card.Title>
    <Card.Description>Image on top, content below.</Card.Description>
  </Card.Header>
</Card>

Horizontal

Horizontal Card

Image on left, content on right.

<Card direction="horizontal">
  <Card.Image src="/placeholder.jpg" alt="Preview" />
  <Card.Header>
    <Card.Title>Horizontal Card</Card.Title>
    <Card.Description>Image on left, content on right.</Card.Description>
  </Card.Header>
</Card>

Header Action

Notifications

You have 3 unread messages.

<Card>
  <Card.Header>
    <Card.Title>Notifications</Card.Title>
    <Card.Description>You have 3 unread messages.</Card.Description>
    <Card.Action>
      <DropdownMenu>
        <DropdownMenu.Trigger asChild>
          <IconButton variant="ghost" size="sm">
            <MoreHorizontal />
          </IconButton>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content align="end">
          <DropdownMenu.Item>Edit</DropdownMenu.Item>
          <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item>Delete</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </Card.Action>
  </Card.Header>
</Card>

Image Overlay

Tropical Beach

Discover the most beautiful beaches.

<Card variant="outline">
  <Card.Image
    src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=300&fit=crop"
    alt="Beach"
    overlay
    className="h-48"
  />
  <Card.Header>
    <Card.Title>Tropical Beach</Card.Title>
    <Card.Description>Discover the most beautiful beaches.</Card.Description>
  </Card.Header>
</Card>

Customization

overlayOpacity와 overlayClassName으로 이미지 오버레이를 커스터마이즈할 수 있습니다.

투명도 조절

라이트 (30%)

기본값 (60%)

다크 (80%)

<Card.Image overlay overlayOpacity={30} />  {/* 라이트 */}
<Card.Image overlay />                      {/* 기본값 60% */}
<Card.Image overlay overlayOpacity={80} />  {/* 다크 */}

전체 커스터마이즈

{/* Change gradient direction */}
<Card.Image overlay overlayClassName="from-black/60 bg-gradient-to-b" />

{/* Color overlay */}
<Card.Image overlay overlayClassName="from-blue-900/50" />

Tip: overlayClassName을 지정하면 overlayOpacity보다 우선 적용됩니다. 그라디언트 방향이나 색상을 자유롭게 변경할 수 있습니다.

API

Component Structure

Card— Radix Slot

.ImageProps.HeaderProps.TitleProps.DescriptionProps.ActionProps.ContentProps.FooterProps

.ImageProps카드 이미지 (overlay 지원)

.HeaderProps헤더 영역

.TitleProps타이틀 (icon prop 지원)

.DescriptionProps보조 텍스트

.ActionProps액션 요소 (헤더 우측 상단)

.ContentProps메인 콘텐츠 영역

.FooterProps푸터 영역

Props

Card

variant"default"

"default" | "outline" | "ghost"

카드의 시각적 스타일

size"default"

"sm" | "default" | "lg"

콘텐츠 패딩 스케일 (반응형 지원)

radius"xl"

"sm" | "base" | "md" | "lg" | "xl" | "2xl"

모서리 반경 (2/4/6/8/12/16px)

direction"vertical"

"vertical" | "horizontal"

레이아웃 방향

interactivefalse

boolean

호버 시 그림자 강화, 리프트 효과 (클릭 가능한 카드용)

asChildfalse

boolean

Slot 패턴으로 자식 요소로 렌더링

Name	Type	Default	Description
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`	카드의 시각적 스타일
`size`	`"sm" \| "default" \| "lg"`	`"default"`	콘텐츠 패딩 스케일 (반응형 지원)
`radius`	`"sm" \| "base" \| "md" \| "lg" \| "xl" \| "2xl"`	`"xl"`	모서리 반경 (2/4/6/8/12/16px)
`direction`	`"vertical" \| "horizontal"`	`"vertical"`	레이아웃 방향
`interactive`	`boolean`	`false`	호버 시 그림자 강화, 리프트 효과 (클릭 가능한 카드용)
`asChild`	`boolean`	`false`	Slot 패턴으로 자식 요소로 렌더링

Card.Title

iconundefined

React.ReactNode

타이틀 앞에 표시할 아이콘

Name	Type	Default	Description
`icon`	`React.ReactNode`	`undefined`	타이틀 앞에 표시할 아이콘

Card.Image

overlayfalse

boolean

그라디언트 오버레이 표시

overlayOpacity60

number

오버레이 투명도 (10~90)

overlayClassNameundefined

string

오버레이 커스텀 클래스 (overlayOpacity보다 우선 적용)

alt""

string

이미지 대체 텍스트

Name	Type	Default	Description
`overlay`	`boolean`	`false`	그라디언트 오버레이 표시
`overlayOpacity`	`number`	`60`	오버레이 투명도 (10~90)
`overlayClassName`	`string`	`undefined`	오버레이 커스텀 클래스 (overlayOpacity보다 우선 적용)
`alt`	`string`	`""`	이미지 대체 텍스트

Card.Header / Card.Content / Card.Footer / Card.Action / Card.Description

표준 HTMLDivAttributes (Card.Description은 HTMLParagraphAttributes)를 상속합니다. 카드의 size 컨텍스트에 따라 패딩이 자동 조정됩니다.

Anatomy

Card Title

⋯

Short description text here

Cancel

Confirm

Padding X24px

Padding top24px

Radius12px(xl)

Root

Card

Image

Card.Image

Header

Card.Header

Icon

Card.Title icon

Title

Card.Title

Action

Card.Action

Content

Card.Content

Footer

Card.Footer

Best Practices

✓

권장

✓관련 콘텐츠는 하나의 카드로 묶기
✓같은 섹션 내에서 variant와 size를 일관되게 사용하기
✓클릭 가능한 카드에는 interactive prop 사용하기
✓이미지에는 alt 속성 반드시 설정하기

지양

✗카드 안에 카드를 중첩하지 않기
✗하나의 카드에 콘텐츠를 과도하게 넣지 않기
✗interactive 카드 안에 버튼이나 링크를 배치하지 않기 (클릭 충돌)
✗레이아웃 목적만으로 카드를 사용하지 않기

Accessibility

시맨틱스

asChild링크 카드에는 <a>를 사용

h3Card.Title은 h3 요소로 출력

ARIA / WCAG

Card.Title 아이콘에 aria-hidden="true"
Card.Image에 alt 속성 지원
제목 계층(h3)을 올바르게 사용
DOM 순서와 시각적 순서가 일치

Card

Playground

Card Title

Variants

Default

Outline

Ghost

Sizes

Title

Title

Title

Features

Orientation

Vertical (Default)

Vertical Card

Horizontal

Horizontal Card

Header Action

Notifications

Image Overlay

Tropical Beach

Customization

투명도 조절

전체 커스터마이즈

API

Component Structure

Props

Card

Card.Title

Card.Image

Card.Header / Card.Content / Card.Footer / Card.Action / Card.Description

Anatomy

Best Practices

권장

지양

Accessibility

시맨틱스

ARIA / WCAG

Related

Badge

Button

Avatar

MetricCard