Card

Make simple Cards clickable by wrapping the title in CardActionArea.

For different configurations, see Examples.

Use cases

Make sure the Card is suitable for your use case. There may be other, more appropriate components available.

Use case	Card	Tabs	Dialog
Introduce a single subject, as one of a set displayed as a list or grid	✅	❌	❌
Divide a single subject into subsections to be switched between	❌	✅	❌
Present additional actions for a subject that require immediate attention	❌	❌	✅

StrataKit MUI modifications

• Card is rendered as an <article> element by default. This programmatically indicates the bounds of the Card’s contents.
• CardHeader’s title is rendered as an <h2> by default.
• CardActionArea has been redesigned to no longer wrap the entire card content. Instead, it should be used in the Card’s title.

Examples

Actions

Add multiple actions, at the foot of the Card, with the CardActions component.

Caution

Cards with CardActions must not include CardActionArea, which is better suited when the entire Card is actionable.

Menu and metadata

Add metadata and a Menu to CardHeader using the subheader and action props.

Heading levels

Use slotProps to give the CardHeader’s title an appropriate heading level. The second level (<h2>) is the default.

<CardHeader
  title={
    <CardActionArea render={<a href="#" />} nativeButton={false}>
      Stadium
    </CardActionArea>
  }
  slotProps={{
    title: { render: <h3 /> },
  }}
/>

✅ Do

• Choose an appropriate heading level for the CardHeader title.
• Organize multiple Cards into an unordered list, where each list item contains a single Card.
• Use CardActionArea when there is only a single action and the entire card should be clickable.
• Use CardActions when the Card has multiple actions.

🚫 Don’t

• Don’t use a Card to group unrelated content or actions.
• Don’t use Card just to highlight some content belonging to a larger subject.
• Don’t wrap the entire contents of the Card in a CardActionArea. Typically, it should be passed into the CardHeader’s title.