Design
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”- Model card
- Car
- Label
- 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 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 a 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.