Card

Basic Template

This is a Basic Template

Footer


export default function DefaultCard() {
    return (
        <Card.Root>
            <Card.Header>Basic Template</Card.Header>
            <Card.Body>This is a Basic Template</Card.Body>
            <Card.Footer style={{ display: 'flex', justifyContent: 'center' }}>Footer</Card.Footer>
        </Card.Root>
    );
}

Examples

Simple Usage

기본적인 Card 사용법입니다.

Simple Card

This is a simple card with header and body content.

Footer content

import { Card } from '@vapor-ui/core';

export default function CardBasic() {
    return (
        <Card.Root>
            <Card.Header>Simple Card</Card.Header>
            <Card.Body>This is a simple card with header and body content.</Card.Body>
            <Card.Footer>Footer content</Card.Footer>
        </Card.Root>
    );
}

Layout

Card의 레이아웃은 Header, Body, Footer를 조합하여 다양한 구성으로 제공합니다.

Body Only

Body

Footer

Header

Body

import { Card } from '@vapor-ui/core';

export default function CardLayout() {
    return (
        <div className="flex gap-4 items-start">
            <Card.Root>
                <Card.Body>Body Only</Card.Body>
            </Card.Root>

            <Card.Root>
                <Card.Body>Body</Card.Body>
                <Card.Footer>Footer</Card.Footer>
            </Card.Root>

            <Card.Root>
                <Card.Header>Header</Card.Header>
                <Card.Body>Body</Card.Body>
            </Card.Root>
        </div>
    );
}

Props Table

Card.Root

Card의 메인 컨테이너 컴포넌트입니다. 카드의 전체 레이아웃과 구조를 제공하며, 하위 컴포넌트들을 위한 컨테이너 역할을 합니다. 이 컴포넌트는 div 요소를 기반으로 합니다.

Prop	Default	Type
render?	div	ReactElementfunction
className?	undefined	string
children?	undefined	ReactNode

Card.Header

Card의 헤더 영역을 표시하는 컴포넌트입니다. 제목, 부제목, 메타 정보 등을 배치하는 데 사용됩니다. 자동으로 하단 경계선이 적용됩니다. 이 컴포넌트는 div 요소를 기반으로 합니다.

Prop	Default	Type
render?	div	ReactElementfunction
className?	undefined	string
children?	undefined	ReactNode

Card.Body

Card의 주요 콘텐츠 영역을 표시하는 컴포넌트입니다. 텍스트, 이미지, 설명 등 카드의 핵심 내용을 담는 데 사용됩니다. 이 컴포넌트는 div 요소를 기반으로 합니다.

Prop	Default	Type
render?	div	ReactElementfunction
className?	undefined	string
children?	undefined	ReactNode

Card.Footer

Card의 하단 영역을 표시하는 컴포넌트입니다. 액션 버튼, 링크, 추가 메타 정보 등을 배치하는 데 사용됩니다. 자동으로 상단 경계선이 적용됩니다. 이 컴포넌트는 div 요소를 기반으로 합니다.

Prop	Default	Type
render?	div	ReactElementfunction
className?	undefined	string
children?	undefined	ReactNode

On this page