Skip to content

Model Card

A Model Card is a card surface for presenting a vehicle model with rested, hover, and selected states, plus an optional stack of inner item rows for related sub-choices like a powertrain selector.

Quarantine

DesignDevelopAccessibility

A Model Card presents a single vehicle model on a card surface with rested, hover, and selected states. It has two layouts: a compact form (image, label, title) used in selection lists, and an extended form (compact content plus a stack of inner item rows) used when the model has been chosen and the user is picking a related sub-option such as a powertrain.

Anatomy

Section titled “Anatomy”
  1. Model card
  2. Car
  3. Label
  4. Car name

When to use it

Section titled “When to use it”

Use a Model Card when:

  • The user is browsing or comparing vehicle models and the surface needs to read as a selectable tile.
  • You need a uniform layout that holds a vehicle image, a brand label, a model name, and optionally a stack of related sub-choices.
  • The picker is the primary action on the surface — the card itself, or one of its inner items, is interactive.

Avoid the Model Card when:

  • You need a generic content container with no selection behaviour — use the Simple Card instead.
  • The selection is a single binary choice — reach for a Radio or Chip.
  • The card would only label content without enabling a selection — use a Tag or Badge.

Properties

Section titled “Properties”

Layout

Two layouts share the same surface and token group. Compact carries the image, brand label, and model name only — used in selection lists where the whole card is the choice. Extended adds a section heading and a vertical stack of inner item rows — used once a model has been chosen and the user is picking a sub-option.

State

Rested, Hover, and Active are the three visual states, applied to both the card surface and each inner item. Active reads as the selected state — wired off aria-checked when the surface itself is the interactive, or aria-current when the surface is a container around inner interactives.

Inner item

A row primitive sized for a 20px icon plus a short label, with its own rested / hover / active states keyed off aria-checked. Items are grouped into their own role="radiogroup" inside the extended card; the card’s selected state and the item’s selected state move independently.

Mode

Toyota and Lexus brand modes resolve automatically through the active data-brand. The shared layout, padding, and structure stay identical between modes; tokens drive the brand-specific colour and stroke shifts (Lexus thickens the hover and active borders).

Platform considerations

Section titled “Platform considerations”

Desktop

Model Cards sit comfortably in multi-column grids. Keep cards inside the same group aligned so the brand label, model name, and image baselines scan as a single row. Pointer hover gives the user a clear pre-selection cue before they commit to a card.

Tablet

The card hugs the content vertically and stretches to fill its column. Single-column layouts are common; let the surrounding grid decide width rather than forcing a fixed pixel size on the card.

Mobile

Cards span the full container width. Hover doesn’t apply on touch — make sure the rested → active state transition is clear so a tap visibly changes the surface. Keep the inner item list short enough that the extended card doesn’t grow past a screen height.

Best practices

Section titled “Best practices”

Treat the Model Card as a picker tile — the surface is a container for a model, and the affordance to choose lives in the ARIA pattern, not in extra decoration.

Do

Wrap a set of cards in a role="radiogroup" with a descriptive aria-label, use the compact layout when the card itself is the choice and the extended layout when the card holds further sub-choices, and express the “selected model” visual on the extended card through aria-current="true" rather than nesting interactives.

Don't

Don’t nest a <button> inside a card that is already a <button> — switch to the extended layout’s <div> container instead. Don’t invent additional visual states beyond rested, hover, and active. Don’t override the active border colour; the contrast shift signals selection. Don’t use the card for non-selection content — use the Simple Card.

Content guidelines

Section titled “Content guidelines”

Lead with the brand label, then the model name — the eye scans the brand first, then anchors on the model. Keep model names verbatim from the canonical product list so brand consistency holds across surfaces. The inner-item label is a short fuel-type or trim noun (“Electric”, “Hybrid”, “Plug-in”), never a full sentence; pair it with a 20px icon that reinforces the category. When the model is unavailable, disable the card rather than hiding it — the user still benefits from seeing the gap in the line-up.