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

Contract

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

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

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 Reference

Card

Prop	Default	Type	Description
variant	"elevated"	"elevated" | "outlined"	Visual variant style.
interactive	false	boolean	Enables hover/press interactions.
state	"default"	"default" | "hover" | "pressed" | "disabled"	Visual state.

CardHeader

Header layout section.

CardHeaderMain

Main header content wrapper.

CardTitle

Title heading element.

CardDescription

Secondary description text.

CardContent

Main card body content.

CardFooter

Footer section (typically for actions).

CardAction

Action button in header.