Save time, Enter your VIN number.
COMPONENTS · CARD
DESCRIPTION
A card is a container that groups related content and actions into a single, identifiable unit.
PLAYGROUND MODE
A flexible container composed from a checkbox, title, and content area — description, pills, or an input — with an optional image and footer slots for arbitrary actions.
CONTENT TYPES
The content area under the title switches between a supporting description, a wrapped row of Pills, or a read-only text area with a character counter.
Save time, Enter your VIN number.
IMAGE
Image position is independent of content — Left switches the card to a horizontal layout.
Save time, Enter your VIN number.
Save time, Enter your VIN number.
Save time, Enter your VIN number.
Save time, Enter your VIN number.
FOOTER
The footer holds one or two generic "Slot" placeholders, meant to be swapped for real actions (buttons, links) per use case. This is how Slot behaves: it's an optional placeholder component — replace it with any component, or hide it if not needed.
Save time, Enter your VIN number.
Save time, Enter your VIN number.
STATES
Save time, Enter your VIN number.
Save time, Enter your VIN number.
Save time, Enter your VIN number.
TOKENS & TYPOGRAPHY
COMPONENT STRUCTURE