Card

제목과 부제목, 본문, 푸터 자리가 배치된 Box입니다. 같은 형태의 내용을 반복해서 보여 줄 때 씁니다.

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	—	카드 본문
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="grow"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요

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

예시

title · subtitle · headerAction · footer

섹션은 서브컴포넌트가 아니라 prop입니다. 넘기지 않은 slot은 렌더링되지 않습니다. headerAction은 제목 줄 오른쪽 끝의 컨트롤 자리입니다.

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

섹션 사이를 공백 대신 선으로 나눕니다. 선이 sheet 양끝까지 닿아야 하므로 여백이 Card에서 각 섹션으로 옮겨 갑니다.

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

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

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>
  );
}

컨트롤 담기

title에 title={<h2>…</h2>}처럼 실제 heading을 넘기면 문서 개요에 들어갑니다. 넘긴 heading은 브라우저 기본 크기 대신 Card의 타입 스케일을 물려받습니다.

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>
  );
}