Card

import { Button } from "@/components/ui/button"
import {
  Card,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/card.json

사용법

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

구성

다음 조합으로 Card:

Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

예제

Size

size="sm" prop으로 Card를 작은 크기로 설정합니다. 작은 크기는 더 좁은 간격을 사용합니다.

import { Button } from "@/components/ui/button"
import {
  Card,

Image

Add an image before the card header to create a card with an image.

추천

디지털정부 정책 설명회

공공서비스 개선 사례와 디지털정부 추진 방향을 안내합니다.

행사 자세히 보기

복사

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {

코드 보기

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

API 참조

Card

The Card component is the root container for card content.

CardHeader

The CardHeader component is used for a title, description, and optional action.

CardTitle

The CardTitle component is used for the card title.

CardDescription

The CardDescription component is used for helper text under the title.

CardAction

The CardAction component places content in the top-right of the header (for example, a button or a badge).

CardContent

The CardContent component is used for the main card body.

CardFooter

The CardFooter component is used for actions and secondary content at the bottom of the card.