컨테이너 / card
Card
콘텐츠를 담는 elevated 표면 컨테이너.
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
콘텐츠를 담는 elevated 표면 컨테이너.
Workbench 불러오는 중…
Component intent의도와 경계 읽기
border-subtle 테두리 · radius-lg · shadow-xs 로 배경에서 한 겹 떠 보이는 그릇. title/body 슬롯 prop 으로 간단한 카드를 바로 구성하거나, children 으로 임의 콘텐츠를 담는다. interactive 를 주면 cursor pointer 와 hover lift(translateY + shadow-md)가 붙어 클릭 가능한 카드처럼 보인다.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
슬롯 prop 로 구성
import { Card } from "@axe/ui";<Card interactive title="딜 파이프라인" body="이번 분기 신규 소싱 12건, IC 상정 3건." onClick={openPipeline}/>children 조합
import { Card, MetricCard } from "@axe/ui";<Card title="포트폴리오 요약"> <MetricCard label="TVPI" value="1.8x" /></Card>CSS-only (비-React)
<div class="axe-card axe-card--interactive"> <div class="axe-card__title">딜 파이프라인</div> <div class="axe-card__body">이번 분기 신규 소싱 12건.</div></div>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
interactive | boolean | — | — | hover lift(-2px translateY + shadow-md)와 cursor pointer 를 부여하는 시각 변형. 실제 클릭 시맨틱은 주지 않는다(a11y 참고). |
title | React.ReactNode | — | — | 제목 슬롯. 있을 때만 `.axe-card__title`(display 폰트) 렌더. HTMLAttributes 의 title 속성은 이 prop 으로 대체됨. |
body | React.ReactNode | — | — | 본문 슬롯. 있을 때만 `.axe-card__body`(secondary 텍스트) 렌더. |
children | React.ReactNode | — | — | title/body 슬롯 아래에 이어 붙는 자유 콘텐츠. |
...rest | Omit<React.HTMLAttributes<HTMLDivElement>, "title"> | — | — | className 은 병합, 나머지는 루트 div 로 전파(onClick 등). |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-card | stable | 카드 루트 div — elevated 배경·subtle 테두리·radius-lg·padding·shadow-xs. |
.axe-card--interactive | stable | 클릭 가능 변형 — cursor pointer + hover 시 lift(테두리 강조·translateY·shadow-md). |
.axe-card__title | stable | 제목 슬롯 — display 폰트·lg·semibold. |
.axe-card__body | stable | 본문 슬롯 — secondary 색·sm. |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
ARIA
시맨틱 없는 컨테이너 <div> — role 을 자동 부여하지 않는다.
Notes
interactive 는 순수 시각 힌트다 — tabIndex·role·키보드 핸들러를 붙이지 않는다. 카드 전체를 실제로 조작 가능하게 하려면 소비자가 role="button"+tabIndex+onKeyDown 을 rest 로 넘기거나(권장) 내부에 <a>/<button> 을 두어야 한다.
06 · Judgment