Card

관련 콘텐츠를 그룹화하여 표시하는 컨테이너 컴포넌트

Basic Usage

기본적인 카드 구조입니다.

Card Title

Card description goes here.

Card content goes here. You can put any content inside.

tsx

<Card className="w-[350px]">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here. You can put any content inside.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

With Action

헤더에 액션 버튼을 추가할 수 있습니다.

Notifications

You have 3 unread messages.

Your recent notifications will appear here.

tsx

<Card className="w-[350px]">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
    <CardAction>
      <Button variant="outline" size="sm">View All</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>Your recent notifications will appear here.</p>
  </CardContent>
</Card>

Simple Card

헤더 없이 콘텐츠만 있는 간단한 카드입니다.

This is a simple card with just content.

tsx

<Card className="w-[350px]">
  <CardContent className="pt-6">
    <p>This is a simple card with just content.</p>
  </CardContent>
</Card>

Card with Footer Actions

푸터에 여러 액션 버튼을 배치할 수 있습니다.

Create Project

Deploy your new project in one-click.

Fill in the project details to get started.

tsx

<Card className="w-[350px]">
  <CardHeader>
    <CardTitle>Create Project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Fill in the project details to get started.</p>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>

Usage

tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@gpters-internal/ui';

function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Title</CardTitle>
        <CardDescription>Description</CardDescription>
      </CardHeader>
      <CardContent>
        Content goes here.
      </CardContent>
      <CardFooter>
        Footer content
      </CardFooter>
    </Card>
  );
}