Card

The Open UI Kit Card groups related content and actions in a flexible surface with product-ready spacing, border radius, elevation, and typography.

Introduction

Cards are useful for compact summaries, selectable objects, resource previews, and small workflows. Open UI Kit provides flexible card primitives with component defaults that match the rest of the system.

Workspace healthUpdated 2 minutes ago

Review open findings, ownership gaps, and configuration drift for this workspace.

Import

import {
  Card,
  CardActionArea,
  CardActions,
  CardContent,
  CardDescription,
  CardHeader,
  CardSubheader,
} from '@open-ui-kit/core';

Composition

Build cards from familiar primitives: CardHeader, CardContent, and CardActions. Use CardDescription and CardSubheader for Open UI Kit text styling inside custom card layouts.

Marketing strategyMarch 26, 2025

Collect campaign notes, owners, and next steps in one compact surface.

Release checklist3 items remaining

Track sign-offs before the release moves into the production window.

Clickable cards

Wrap a card in CardActionArea when the whole surface should act as one action. Keep secondary buttons out of clickable card bodies to avoid nested interactive controls.

Dense content

Use cards for grouped product objects such as jobs, templates, workspaces, and reports. Keep headings short and put supporting metadata in the subheader or content area.

Deployment window

Start

Tonight at 22:00 UTC

Owner

Platform operations

Impact

Admin settings remain read-only while changes are applied.

Disabled appearance

Cards do not have a dedicated disabled prop. When a card represents unavailable content, make that state explicit in surrounding logic and apply a muted style.

Audit exportUnavailable

Exports unlock after the first scan completes for this workspace.

Props

Card primitives support the underlying card props.

Component	Base props	Description
`Card`	`CardProps`	Root card surface.
`CardHeader`	`CardHeaderProps`	Header area with title, subheader, avatar, and action slots.
`CardContent`	`CardContentProps`	Main content area.
`CardActions`	`CardActionsProps`	Action row for buttons and controls.
`CardActionArea`	`CardActionAreaProps`	Makes the card surface interactive.
`CardDescription`	`TypographyProps`	Body text with Open UI Kit card description styling.
`CardSubheader`	`TypographyProps`	Compact supporting text with Open UI Kit card subheader styling.

Accessibility

Use CardActionArea only when the entire card represents a single action. If the card includes multiple actions, use visible buttons in CardActions instead. Headings should describe the card clearly so lists of cards are easy to scan.

Usage guidance

Keep card content focused on one object or decision.
Use CardActions for explicit commands.
Avoid nesting cards inside cards.
Use sx for layout sizing, but keep visual overrides minimal.
For unavailable cards, pair muted styling with clear text explaining the state.