Simple Card

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

Design

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.

When to use it

Use a Simple Card:

• When you need a neutral, reusable container for grouping content.
• When the content inside varies across contexts (for example text-only, text plus media, or controls).
• When you want to maintain consistent spacing and visual hierarchy across surfaces.
• When you are building more complex patterns composed of multiple elements.

Avoid using when:

• There is a dedicated component for the intended pattern (for example Product Card, Profile Card, or Tile).
• The content requires complex responsive behavior and should use custom layout components instead.
• The card would be used only for decoration with no functional purpose.

Quick accessibility summary

Because the Simple Card is a non-interactive container, it does not require specific ARIA attributes. Accessibility depends on the content within each slot.

• Use semantic HTML elements inside (for example headings, lists, buttons, and links).
• If the card contains interactive elements, ensure they follow proper focus order and keyboard navigation.
• Maintain sufficient color contrast for any text or interactive components inside the card.
• Avoid using the card solely for visual grouping if it creates redundant or confusing structure for screen readers.

Properties

Anatomy

Simple card

Width: 363

Border color:

color-border-contrast-default#d4d2d1

color-border-contrast-default#e4e4e4

Stroke alignment: Outside

Border weight: 1

Border radius:

radius-2xs1px

 

radius-2xs1px

 

Backdrop

Depends on: Backdrop

Device: Desktop

Slot

Depends on: slot

Slot 2

Depends on: slot

Boolean properties

Image

Property

Property type: Boolean

Default: true

Associated layers: -

Backdrop

Property

Property type: Boolean

Default: true

Associated layers: Backdrop

Slot 2

Property

Property type: Boolean

Default: true

Associated layers: slot

Modes

The semantic mode supports two brand variants:

• Toyota
• Lexus

Layout and spacing

Toyota layout values from the Figma spec:

• Direction: Vertical
• Alignment: Top left
• Vertical resizing: Hug
• Horizontal resizing: Fixed
• Item spacing: 24
• Padding: 16

Styling tokens

Colors

Name	Applied as	Applied to
color-border-contrast-default	Border color	Simple card
color-border-contrast-default	Border color	Simple card

Spacing

Name	Applied as	Applied to
radius-2xs	Border radius	Simple card
radius-2xs	Border radius	Simple card

Text Styles

No Text styles were detected based on this specification’s settings.

Usage guidelines

Do

Guidance on how to use a component.

• 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.
• Ensure the card hierarchy works with surrounding elements (titles, sections, lists, and similar structures).
• Use appropriate semantic HTML inside the slot so the content is meaningful.

Don’t

Guidance on what to avoid when using a component.

• Do not overload the card with too many elements or dense layouts.
• Do not rely on the card alone to convey interactivity, because it is not clickable by default.
• Do not mix unrelated content blocks inside the same card.
• Do not override spacing or elevation excessively, and use design tokens instead.
• Do not use multiple nested cards unless absolutely necessary.

Develop

Styles

One slot

<div class="tng-simple-card">
  <div class="tng-slot is-primary"></div>
</div>

Two slots

<div class="tng-simple-card">
  <div class="tng-slot is-primary"></div>
  <div class="tng-slot is-primary"></div>
</div>

Accessibility

For designers

• Because Simple Card is not interactive by itself, ensure any interactive content inside follows focus and keyboard standards.
• Ensure text and interactive elements inserted in slots always meet WCAG AA contrast requirements.
• Use semantic tokens for border and radius so behavior stays consistent across brands and themes.

For developers

1. Use semantic HTML inside the card slot content (headings, lists, links, buttons).
2. If the slot content contains interactive controls, keep tab order logical and visible focus states intact.
3. Do not add interaction roles to the card container unless the card itself becomes an interactive pattern.
4. Preserve tokenized styling values rather than hard-coded border or radius values.