Skip to content

Simple Card

A Simple Card is a lightweight, flexible container used to group related information or UI elements.

Ready to use

Design Develop Accessibility

A Simple Card is a lightweight, flexible container used to group related information or UI elements. It provides basic structure, spacing, and a visual surface without imposing any specific content layout, which makes it a useful base for composing richer patterns.

Anatomy

Section titled “Anatomy”
  1. Container
  2. Backdrop
  3. Content slot

When to use it

Section titled “When to use it”

Use the Simple Card when:

  • You need a neutral, reusable container for grouping content.
  • The inner content varies across contexts (text-only, text plus media, controls).
  • You want to maintain consistent spacing and visual hierarchy across surfaces.
  • You’re building more complex patterns composed of multiple elements.

Avoid the Simple Card when:

  • A dedicated component already exists for the intended pattern (Product Card, Profile Card, Tile).
  • The content needs complex responsive behaviour better served by a custom layout primitive.
  • The card would only be decorative with no functional purpose.

Properties

Section titled “Properties”

Image

A boolean that toggles a media slot at the top of the card. Use it when the visual anchors the content; leave it off for text-only groupings.

Backdrop

A boolean controlling whether the card sits on its own backdrop surface. Enable it on dense pages where the card needs to read as a distinct group; disable it inside surfaces that already provide separation.

Content slot

The main slot — flexible enough to hold headings, lists, buttons, and other components. The card supplies the spacing and shell; the slot supplies the meaning.

Secondary slot

Optional second slot beneath the primary content, used for supporting actions or metadata. Toggle it via the boolean property when the pattern calls for two stacked sections.

Mode

Toyota and Lexus brand modes resolve automatically through the active data-brand. Layout, padding, and structure stay identical between modes.

Platform considerations

Section titled “Platform considerations”

Desktop

Cards sit comfortably in multi-column grids. Keep padding consistent across cards in the same group so the rhythm of the page holds.

Tablet

The card hugs the content vertically and stretches horizontally to fill its column. Avoid forcing fixed widths — let the surrounding layout decide.

Mobile

Cards typically span the full container width. Keep the inner content focused so the card doesn’t grow tall enough to need its own scroll.

Best practices

Section titled “Best practices”

Use the card as a quiet container — the content carries the meaning.

Do

Keep the content inside focused and concise, use the card to maintain consistent padding and visual rhythm across the interface, combine it with other design system components to build richer patterns, and make sure semantic HTML inside the slot carries the meaning.

Don't

Don’t overload the card with too many elements or dense layouts, don’t rely on the card alone to convey interactivity (it isn’t clickable by default), don’t mix unrelated content blocks in the same card, don’t override spacing or elevation excessively (use design tokens), and don’t nest cards unless absolutely necessary.

Content guidelines

Section titled “Content guidelines”

The Simple Card carries no copy of its own — its job is to hold content together. Make sure each card has a single, identifiable purpose so the grouping reads as one idea. When several cards sit side by side, keep their titles and supporting content in parallel structure so the eye can compare them at a glance.