Card

NewDesign system

RefineUI is now available

Ship product UI with tokens, React, and Web Kit parity.

󰽳

Utilities, React components, and shared foundations for building consistent web applications.

P

Pelagornis Inc · 7 hours ago

Learn moreGet started

계약

Overview

Machine-readable contract from Component Spec.

component: cardexport: Cardversion: 1attributes: data-refineui=card

Anatomy

Part	data-refineui
root	card
action	card-action
content	card-content
description	card-description
footer	card-footer
header	card-header
header_main	card-header-main
title	card-title

Variants

Axis	Values
variant	elevated, outlined

States

Scope	Category	Values
component	component	data-state: default, hover, pressed, disabled
component	environment	forced-colors, dir
card	component	data-state: default, hover, pressed, disabled

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import {
  Card,
  CardHeader,
  CardHeaderMain,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction
} from "@refineui/react";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card body content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

<Card variant="outlined" interactive state="hover">
  <CardContent>
    Interactive card with outlined variant
  </CardContent>
</Card>

API 레퍼런스

Card

Prop	Default	Type	Description
variant	"elevated"	"elevated" | "outlined"	시각적 변형 스타일.
interactive	false	boolean	호버/프레스 인터랙션을 활성화합니다.
state	"default"	"default" | "hover" | "pressed" | "disabled"	시각 상태.

CardHeader

헤더 레이아웃 섹션.

CardHeaderMain

메인 헤더 콘텐츠 래퍼.

CardTitle

제목 헤딩 요소.

CardDescription

보조 설명 텍스트.

CardContent

카드 본문 콘텐츠.

CardFooter

푸터 섹션(보통 액션용).

CardAction

헤더의 액션 버튼.