Card

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

Usage & Examples

This is a simple card with default props.

default-card.tsx

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

Card props API
				Default	Description
`actionButtonClassName`	`string`	No	props	`—`	Custom class name for each action button.
`actionButtons`	`ActionButton[]`	No	props	`[]`	List of action buttons to render in the footer.
`actionsClassName`	`string`	No	props	`—`	Custom class name for the actions wrapper.
`align`	`"left" \| "right" \| "center"`	No	props	`"center"`	Alignment of card content ('left' \| 'right' \| 'center').
`aria-atomic`	`boolean`	No	aria	`—`	Marks the card as atomic for live region updates.
`aria-controls`	`string`	No	aria	`—`	Indicates the controlled element id if the card acts as a controller.
`aria-current`	`boolean \| "page" \| "step" \| "location" \| "date" \| "time"`	No	aria	`—`	Indicates current item state when the card is used in navigation-like UIs.
`aria-describedby`	`string`	No	aria	`—`	Optional ARIA description reference ID.
`aria-expanded`	`boolean`	No	aria	`—`	Indicates expanded state if the card controls collapsible content.
`aria-label`	`string`	No	aria	`—`	Optional ARIA label for the card.
`aria-labelledby`	`string`	No	aria	`—`	Optional ARIA label reference ID for accessibility.
`aria-live`	`"off" \| "polite" \| "assertive"`	No	aria	`—`	Live-region politeness, usually only useful for dynamic card content.