Card

제목·부제목·본문·푸터가 배치된 Box입니다. Box의 prop은 전부 그대로 통과하므로, 카드는 자신이 곧 박스인 것과 같은 축으로 스타일링됩니다.

import { Card } from 'neba';

<Card title="Starter" subtitle="프로젝트 하나" footer={<Button>선택</Button>}>
  본문
</Card>;

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'outline'	표면의 무게. 채움 / 하이라인 / 없음
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	모서리 반경, 안쪽 여백, 헤더와 본문의 타입 스케일
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 표면은 흰색이므로 하이라인과 구분선에만 나타납니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. variant가 text면 무시됩니다
title	ReactNode	—	제목. 문서 개요에 넣어야 하면 실제 heading을 넘기세요 (title={<h2>…</h2>})
subtitle	ReactNode	—	제목 아래 한 줄. 한 단계 작고 muted
headerAction	ReactNode	—	헤더 행 끝에 고정되는 내용. 메뉴 버튼이나 상태 칩
footer	ReactNode	—	아래 영역. 줄바꿈되는 행으로 배치됩니다
dividers	boolean	false	섹션 사이를 공백 대신 하이라인으로 나눕니다. 선은 시트의 양 끝까지 닿습니다
children	ReactNode	—	카드 본문

Box의 prop을 모두 받습니다. padded만 예외로, 카드가 섹션별로 여백을 다시 배분하기 때문에 제외되어 있습니다.

예시

섹션

섹션은 <Card.Header> 같은 합성 컴포넌트가 아니라 prop입니다. 배치는 이미 정해져 있고, 호출하는 쪽이 정하고 싶은 것은 순서가 아니라 각 자리에 무엇이 들어가는가이기 때문입니다. 넘기지 않은 슬롯은 렌더링되지 않습니다.

import { Button, Card } from 'neba';

export default function CardSections() {
  return (
    <Card
      className="w-full max-w-md"
      title="Title"
      subtitle="Subtitle"
      headerAction={
        <Button size="xs" variant="text" color="secondary" aria-label="More">
          ⋯
        </Button>
      }
      footer={
        <>
          <Button size="sm" variant="text" color="secondary">
            Cancel
          </Button>
          <Button size="sm" className="ml-auto">
            Confirm
          </Button>
        </>
      }
    >
      The body. A slot you do not pass is not rendered, so a card with only a title has no empty
      header sitting above it.
    </Card>
  );
}

구분선

dividers를 켜면 섹션 사이가 공백 대신 하이라인으로 나뉩니다. 선이 시트의 양 끝까지 닿아야 하므로, 여백이 카드에서 각 섹션으로 옮겨 갑니다.

import { Card } from 'neba';

export default function CardDividers() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      <Card title="Without" subtitle="separated by space" footer="Footer">
        Body
      </Card>
      <Card dividers title="With" subtitle="separated by a hairline" footer="Footer">
        Body
      </Card>
    </div>
  );
}

크기

size는 시트의 반경과 여백, 그리고 헤더와 본문의 타입 스케일을 함께 정합니다. 제목은 본문보다 한 단계 위, 부제목은 한 단계 아래입니다.

import { Card } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function CardSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {SIZES.map((size) => (
        <Card key={size} size={size} dividers title={`size ${size}`} subtitle="Subtitle">
          Body copy sits one step below the title.
        </Card>
      ))}
    </div>
  );
}

컨트롤을 담기

카드는 박스이므로, 담긴 컨트롤은 유리 위에 놓입니다. 제목을 문서 개요에 넣어야 한다면 실제 heading을 넘기세요 — title={<h2>…</h2>}. 넘긴 heading은 브라우저 기본 크기 대신 카드의 타입 스케일을 물려받습니다.

import { Button, Card, TextField } from 'neba';

export default function CardForm() {
  return (
    <Card
      className="w-full max-w-md"
      size="lg"
      dividers
      title={<h2>Invite a teammate</h2>}
      subtitle="They will get an email with a link."
      footer={
        <>
          <Button variant="text" color="secondary">
            Cancel
          </Button>
          <Button className="ml-auto">Send invite</Button>
        </>
      }
    >
      <div className="flex flex-col gap-3">
        <TextField label="Email" placeholder="[email protected]" fullWidth />
        <TextField label="Note" multiline rows={2} placeholder="Optional" fullWidth />
      </div>
    </Card>
  );
}