Card

Import

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

Preview

<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>

Props

Card.Root

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	카드 루트 요소에 적용할 추가 CSS 클래스를 지정합니다.
`children`	`React.ReactNode`	`-`	카드에 표시할 콘텐츠입니다.

Card.Header

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	헤더 요소에 적용할 추가 CSS 클래스를 지정합니다.
`children`	`React.ReactNode`	`-`	헤더에 표시할 콘텐츠입니다.

Card.Body

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	바디 요소에 적용할 추가 CSS 클래스를 지정합니다.
`children`	`React.ReactNode`	`-`	바디에 표시할 콘텐츠입니다.

Card.Footer

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	푸터 요소에 적용할 추가 CSS 클래스를 지정합니다.
`children`	`React.ReactNode`	`-`	푸터에 표시할 콘텐츠입니다.

Accessibility Table

Card WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor Card은 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.

개발 시 준수해야 할 내용을 명시합니다.

Props	Description
aria-label	Card.Title 컴포넌트를 이용하지 않을 시, 직접 aria-label을 넣어주어야 합니다.
import Card from '@vapor-ui/core'; const Example = () => { return ( <Card aria-label="Custom Card Title"> <Card.Body> <p>This is the body of the card.</p> </Card.Body> <Card.Footer> <button>Action</button> </Card.Footer> </Card> ); }; export default Example;

Props

Description

aria-label

Card.Title 컴포넌트를 이용하지 않을 시, 직접 aria-label을 넣어주어야 합니다.

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

const Example = () => {
    return (
        <Card aria-label="Custom Card Title">
            <Card.Body>
                <p>This is the body of the card.</p>
            </Card.Body>
            <Card.Footer>
                <button>Action</button>
            </Card.Footer>
        </Card>
    );
};

export default Example;

컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.

Accessibility	Description
aria-labelledby	Card.Title 요소에 연결됩니다.
aria-describedby	Card.Body 요소에 연결됩니다.

On this page