Skip to content
StrataKit Docs

Card

Cards are used to display content and actions about a single subject.

Useful links:

StrataKit MUI modifications

Section titled “StrataKit MUI modifications”
  • Card is rendered as an <article> element by default.
  • CardHeader’s title is rendered as <h2> by default.
  • CardActionArea has been redesigned to not wrap the entire card content. Instead, it should be used in the card’s heading or title area.

Examples

Section titled “Examples”

CardActions

Section titled “CardActions”

CardHeader

Section titled “CardHeader”

✅ Do

Section titled “✅ Do”
  • Use a heading element to provide a clear title for the card’s content.
  • Use CardActionArea inside the heading if the entire card should be clickable.
  • Use CardActions when the card has multiple actions.

🚫 Don’t

Section titled “🚫 Don’t”
  • Don’t use a Card to group unrelated content or actions.
  • Don’t wrap the entire contents of the card in a CardActionArea.