Simple Card
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. Inside, it supports a free slot, allowing teams to place any component (text, media, actions, or custom blocks) depending on the product need.
The main purpose of the Simple Card is to offer consistency in how content blocks are visually organized while remaining highly adaptable.
When to use it (and when not to)
Section titled “When to use it (and when not to)”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
Section titled “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
Section titled “Properties”Anatomy
Section titled “Anatomy”Simple card
Width: 363
Border color:
color-border-contrast-default#d4d2d1color-border-contrast-default#e4e4e4 Stroke alignment: Outside
Border weight: 1
Border radius:
radius-2xs1pxradius-2xs1pxBackdrop
Depends on: Backdrop
Device: Desktop
Slot
Depends on: slot
Slot 2
Depends on: slot
Boolean properties
Section titled “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
The semantic mode supports two brand variants:
- Toyota
- Lexus
Layout and spacing
Section titled “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
Section titled “Styling tokens”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-border-contrast-default | Border color | Simple card |
color-border-contrast-default | Border color | Simple card |
Spacing
Section titled “Spacing”| Name | Applied as | Applied to |
|---|---|---|
radius-2xs | Border radius | Simple card |
radius-2xs | Border radius | Simple card |
Text Styles
Section titled “Text Styles”No Text styles were detected based on this specification’s settings.
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”- 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 Dev
Section titled “For Dev”- Use semantic HTML inside the card slot content (headings, lists, links, buttons).
- If the slot content contains interactive controls, keep tab order logical and visible focus states intact.
- Do not add interaction roles to the card container unless the card itself becomes an interactive pattern.
- Preserve tokenized styling values rather than hard-coded border or radius values.
Usage guidelines
Section titled “Usage guidelines”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.
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.