Card

The Card component is a flexible container for displaying information, media, and actions in a consistent layout.

Usage

Default Card

This is a simple card with default props.

<Card title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />

Props

Data table
	Type	Description
actionButtons	ActionButton[]	List of action buttons to render in the footer.
align	"left" \| "right" \| "center"	Alignment of card content ('left' \| 'right' \| 'center').
aria-atomic	boolean	Marks the card as atomic for live region updates.
aria-controls	string	Indicates the controlled element id if the card acts as a controller.
aria-current	boolean \| "page" \| "step" \| "location" \| "date" \| "time"	Indicates current item state when the card is used in navigation-like UIs.
aria-describedby	string	Optional ARIA description reference ID.
aria-expanded	boolean	Indicates expanded state if the card controls collapsible content.
aria-label	string	Optional ARIA label for the card.
aria-labelledby	string	Optional ARIA label reference ID for accessibility.
aria-live	"off" \| "polite" \| "assertive"	Live-region politeness, usually only useful for dynamic card content.
bodyClassName	string	Custom class name for the body section.
border	BorderType	Optional border width for the card ('none' \| 'xs' \| 'small' \| 'medium' \| 'large' \| 'xl').
cardIcon	IconType	Optional icon to display beside the title.
children	ReactNode	Optional custom children passed into the body.
className	string	Custom class name for the card container.
data-testid	string	Optional test ID for test targeting.
description	string	Optional description displayed in the body.
descriptionId	string	Optional override for the generated description id.
disabled	boolean	Indicates disabled state for the card.
footerClassName	string	Custom class name for the footer section.
headerClassName	string	Custom class name for the header section.
headerId	string	Optional override for the generated header id.
id	string	Optional id for the card root.
imageAlt	string	Image alt text. Use empty string for decorative images.
imageClassName	string	Custom class name for the image element.
imageDecorative	boolean	Marks the image as decorative and forces empty alt text.
imageFill	boolean	Use fill layout for the image (next/image: fill; core: ratio-box render)
imageHeight	number	Explicit height for the image (forwarded to next/image or <img>)
imageUrl	CardImageSource	Image URL or static asset used as the card's visual. Can be a string or an object with { src, width, height }.
imageWidth	number	Explicit width for the image (forwarded to next/image or <img>)
layout	OrientationType	Layout orientation of the card ('horizontal' \| 'vertical').
loading	boolean	Whether the card is in a loading state (shows skeleton).
outline	boolean	Outlines card instead of solid fill.
renderContent	(() => ReactNode)	Custom render function for the body/content section.
renderFooter	(() => ReactNode)	Custom render function for the footer section.
renderHeader	(() => ReactNode)	Custom render function for the header section.
role	AriaRole	Optional role override. Defaults to region when labeled.
rounding	RoundingType	Optional rounding style for the card ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
selectable	boolean	Marks the card as selectable.
selected	boolean	Indicates selected state for selectable cards.
shadow	ShadowType	Optional shadow style for the card ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
size	SizeType	Card size ('xs' \| 'small' \| 'medium' \| 'large' \| 'xl').
state	StateType	State of the card ('success' \| 'error' \| 'warning' \| 'disabled' \| '').
tabIndex	number	Optional tabindex for keyboard navigation scenarios.
theme	ThemeType	Theme style to apply to the card ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').
title	string	Optional card title displayed in the header.
useIconButtons	boolean	Whether to render action buttons as icon buttons.