Skip to content

Simple Card

Back to What's New

Header slot
Body slot

The Simple Card is now available — a lightweight, flexible container used to group related information or UI elements without imposing any specific content layout. It’s the building block underneath the more opinionated cards (Product Card, Profile Card, Tile) and a good default whenever a surface needs structure, spacing, and a visual edge but no extra behaviour.

Use a Simple Card when you need a neutral, reusable container for grouping content; when the content inside varies across contexts (text-only, text plus media, embedded controls); or when you’re composing a more complex pattern from multiple elements. Skip it if a dedicated card already covers the pattern, if the content needs complex responsive behaviour better handled by a layout component, or if the card would only add visual decoration without functional purpose.

The card itself is non-interactive, so accessibility responsibility sits with whatever lives inside the slot — semantic HTML, focus order, contrast. The Accessibility tab on the doc page lays out the contract for both designers and developers.

See the Simple Card documentation for anatomy, mode variants, and styling tokens.