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

Design Develop Accessibility

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. Card surface
  2. Vehicle image
  3. Brand label
  4. Model name
  5. Section heading
  6. Inner item

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.