Component

Card

관련된 정보와 작업을 하나의 영역으로 묶습니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

surface의 표현 방식과 elevation

Root 내부 패딩

Card.Footer 표시

Code

import { Card, Badge, Button } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Card padding={"md"} variant={"raised"}>
      <Card.Header>
        <Card.Title>프로젝트 상태</Card.Title>
        <Card.Description>최근 동기화 정보를 확인합니다.</Card.Description>
      </Card.Header>
      <Card.Content>
        <Badge color="success" variant="secondary">
          정상
        </Badge>
      </Card.Content>
      {(<Card.Footer>
          <Button variant="outline">세부 정보</Button>
        </Card.Footer>)}
    </Card>))
}

Props

import {
  Card,
  CardRoot,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@amineslab/ui'

`Card`

HTML <div> 요소의 표준 속성을 그대로 받습니다.

Name	Type	Default	Description
`variant`	`'raised' \| 'flat' \| 'muted' \| 'soft'`	`'raised'`	면의 표현 방식과 elevation을 정합니다.
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Header·Content·Footer의 기본 여백입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Variants

surface variant는 정보 위계와 배경 관계를 표현합니다.

raised

surface 변형

flat

surface 변형

muted

surface 변형

soft

surface 변형

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Card } from '@amineslab/ui'

function ExampleRow({ className, stretch = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    stretch?: boolean;
}) {
    return (<div {...props} className={cn('flex flex-wrap justify-center gap-3', stretch ? 'items-stretch' : 'items-center', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleRow stretch>
          {(['raised', 'flat', 'muted', 'soft'] as const).map((variant) => (<Card key={variant} variant={variant}>
              <Card.Header>
                <Card.Title>{variant}</Card.Title>
              </Card.Header>
              <Card.Content>surface 변형</Card.Content>
            </Card>))}
        </ExampleRow>))
}

사용 기준

권장하는 사용

독립적인 정보 그룹에만 Card를 사용합니다.

피해야 할 사용

페이지의 모든 문단을 카드로 감싸지 마세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.