Card

카드 컴포넌트는 콘텐츠를 그룹화하고 시각적으로 구분하는 컨테이너입니다.

기본 사용법

카드 제목

카드 내용

import { Card } from '@aift/ui/Card';

export default function Preview() {
  return (
    <div className="max-w-md">
      <Card size="3">
        <h3 className="font-semibold mb-2">카드 제목</h3>
        <p className="text-sm text-alias-label-neutral">카드 내용</p>
      </Card>
    </div>
  );
}

import { Card } from '@aift/ui/Card';export default function Preview() {  return (    <div className="max-w-md">      <Card size="3">        <h3 className="font-semibold mb-2">카드 제목</h3>        <p className="text-sm text-alias-label-neutral">카드 내용</p>      </Card>    </div>  );}

Variants

카드의 스타일을 결정합니다.

Surface Card

Surface variant의 카드입니다.

Classic Card

Classic variant의 카드입니다.

Ghost Card

Ghost variant의 카드입니다.

import { Card } from '@aift/ui/Card';

export default function Variants() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Card size="3" variant="surface" className="p-4">
        <h4 className="font-semibold mb-2">Surface Card</h4>
        <p className="text-sm text-alias-label-neutral">Surface variant의 카드입니다.</p>
      </Card>
      <Card size="3" variant="classic" className="p-4">
        <h4 className="font-semibold mb-2">Classic Card</h4>
        <p className="text-sm text-alias-label-neutral">Classic variant의 카드입니다.</p>
      </Card>
      <Card size="3" variant="ghost" className="p-4">
        <h4 className="font-semibold mb-2">Ghost Card</h4>
        <p className="text-sm text-alias-label-neutral">Ghost variant의 카드입니다.</p>
      </Card>
    </div>
  );
}

import { Card } from '@aift/ui/Card';export default function Variants() {  return (    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">      <Card size="3" variant="surface" className="p-4">        <h4 className="font-semibold mb-2">Surface Card</h4>        <p className="text-sm text-alias-label-neutral">Surface variant의 카드입니다.</p>      </Card>      <Card size="3" variant="classic" className="p-4">        <h4 className="font-semibold mb-2">Classic Card</h4>        <p className="text-sm text-alias-label-neutral">Classic variant의 카드입니다.</p>      </Card>      <Card size="3" variant="ghost" className="p-4">        <h4 className="font-semibold mb-2">Ghost Card</h4>        <p className="text-sm text-alias-label-neutral">Ghost variant의 카드입니다.</p>      </Card>    </div>  );}

Sizes

카드의 패딩 크기를 결정합니다.

Size 1 - 작은 패딩

Size 2 - 작은 패딩

Size 3 - 중간 패딩

Size 4 - 큰 패딩

Size 5 - 매우 큰 패딩

import { Card } from '@aift/ui/Card';

export default function Sizes() {
  return (
    <div className="space-y-4">
      <Card size="1" variant="surface">Size 1 - 작은 패딩</Card>
      <Card size="2" variant="surface">Size 2 - 작은 패딩</Card>
      <Card size="3" variant="surface">Size 3 - 중간 패딩</Card>
      <Card size="4" variant="surface">Size 4 - 큰 패딩</Card>
      <Card size="5" variant="surface">Size 5 - 매우 큰 패딩</Card>
    </div>
  );
}

import { Card } from '@aift/ui/Card';export default function Sizes() {  return (    <div className="space-y-4">      <Card size="1" variant="surface">Size 1 - 작은 패딩</Card>      <Card size="2" variant="surface">Size 2 - 작은 패딩</Card>      <Card size="3" variant="surface">Size 3 - 중간 패딩</Card>      <Card size="4" variant="surface">Size 4 - 큰 패딩</Card>      <Card size="5" variant="surface">Size 5 - 매우 큰 패딩</Card>    </div>  );}

Colors

카드의 색상을 결정합니다.

Primary Card

Primary 색상의 카드입니다.

Positive Card

Positive 색상의 카드입니다.

Cautionary Card

Cautionary 색상의 카드입니다.

Destructive Card

Destructive 색상의 카드입니다.

import { Card } from '@aift/ui/Card';

export default function Colors() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <Card size="3" color="primary" variant="surface" className="p-4">
        <h4 className="font-semibold mb-2">Primary Card</h4>
        <p className="text-sm">Primary 색상의 카드입니다.</p>
      </Card>
      <Card size="3" color="positive" variant="surface" className="p-4">
        <h4 className="font-semibold mb-2">Positive Card</h4>
        <p className="text-sm">Positive 색상의 카드입니다.</p>
      </Card>
      <Card size="3" color="cautionary" variant="surface" className="p-4">
        <h4 className="font-semibold mb-2">Cautionary Card</h4>
        <p className="text-sm">Cautionary 색상의 카드입니다.</p>
      </Card>
      <Card size="3" color="destructive" variant="surface" className="p-4">
        <h4 className="font-semibold mb-2">Destructive Card</h4>
        <p className="text-sm">Destructive 색상의 카드입니다.</p>
      </Card>
    </div>
  );
}

import { Card } from '@aift/ui/Card';export default function Colors() {  return (    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">      <Card size="3" color="primary" variant="surface" className="p-4">        <h4 className="font-semibold mb-2">Primary Card</h4>        <p className="text-sm">Primary 색상의 카드입니다.</p>      </Card>      <Card size="3" color="positive" variant="surface" className="p-4">        <h4 className="font-semibold mb-2">Positive Card</h4>        <p className="text-sm">Positive 색상의 카드입니다.</p>      </Card>      <Card size="3" color="cautionary" variant="surface" className="p-4">        <h4 className="font-semibold mb-2">Cautionary Card</h4>        <p className="text-sm">Cautionary 색상의 카드입니다.</p>      </Card>      <Card size="3" color="destructive" variant="surface" className="p-4">        <h4 className="font-semibold mb-2">Destructive Card</h4>        <p className="text-sm">Destructive 색상의 카드입니다.</p>      </Card>    </div>  );}

Props

Prop	Type	Default	Description
variant	`'surface' \| 'classic' \| 'ghost'`	`'surface'`	카드의 스타일
size	`'1' \| '2' \| '3' \| '4' \| '5'`	`'1'`	카드의 패딩 크기
color	`'primary' \| 'positive' \| 'cautionary' \| 'destructive' \| 'info' \| 'default'`	`'default'`	카드의 색상
radius	`'none' \| 'small' \| 'medium' \| 'large' \| 'full'`	`'medium'`	카드의 모서리 둥글기
shadow	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	카드의 그림자 크기
asChild	`boolean`	`false`	자식 요소를 카드로 사용

Card

Card

기본 사용법

카드 제목

Variants

Surface Card

Classic Card

Ghost Card

Sizes

Colors

Primary Card

Positive Card

Cautionary Card

Destructive Card

Props

On this page