Card

@hua-labs/ui

v1.1.0

헤더, 콘텐츠, 푸터 섹션이 있는 관련 콘텐츠 그룹화를 위한 유연한 컨테이너 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

변형

Default

기본 스타일

Outline

2px 보더

Elevated

그림자 강조

전체 구조

알림 설정

알림 수신 방법을 선택하세요.

푸시 알림

실시간 알림 수신

이메일 알림

중요 알림만 이메일로

다양한 사용 예시

프로필

계정 정보 관리

설정

앱 환경설정

Props

이름	타입	기본값	설명
`variant`	`"default" \| "outline" \| "elevated"`	`"default"`	카드의 시각적 스타일
`shadow`	`"none" \| "sm" \| "md" \| "lg"`	-	Shadow size (use none to disable)
`padding`	`"none" \| "sm" \| "md" \| "lg"`	`"none"`	Padding size
`hoverable`	`boolean`	`false`	Enable hover effect
`animated`	`boolean`	`false`	프리셋 진입 애니메이션 활성화
`children*`	`React.ReactNode`	-	카드 내용

하위 컴포넌트

CardHeader

카드 헤더 콘텐츠용 컨테이너. 보통 CardTitle과 CardDescription을 포함합니다.

CardTitle

h3 요소로 렌더링. 카드의 주요 제목입니다.

CardDescription

제목 아래의 설명 텍스트입니다.

CardContent

카드의 메인 콘텐츠 영역입니다.

CardFooter

푸터 영역. 보통 버튼 같은 액션에 사용됩니다.

코드 예시

기본 사용법tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@hua-labs/ui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Main content of the card.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

변형tsx

<Card variant="default">Default style</Card>
<Card variant="outline">Outline style - transparent bg, 2px border</Card>
<Card variant="elevated">Elevated style - with shadow</Card>

Simple Cardtsx

<Card className="p-6">
  <h3 className="text-lg font-semibold">Simple Card</h3>
  <p className="text-muted-foreground">No sub-components needed.</p>
</Card>

접근성

•시맨틱 구조: CardTitle이 h3로 렌더링되어 적절한 제목 계층 구조 유지
•포커스 관리: 카드 내부의 인터랙티브 요소들이 키보드 접근 가능
•색상 대비: 모든 텍스트가 WCAG AA 대비 요구 사항 충족

Pressable Container