Examples

This section illustrates how the components and interaction patterns described in this stylebook are used together in real checkout flows.

Card selection

Cards are used consistently to present selectable payment methods. Each card includes an icon, title, and optional description.

Expanded card

When a card is selected, the card expands to reveal its content.

Selection in lists

Only one item can be selected at a time. The selected item is clearly distinguishable using borders and icons.

Complex selection in lists

More complex selection lists use the same card and selection patterns.

Validation success

Success states are communicated using multiple cues: border and icon. No additional text is required.

Validation error

Error states are communicated using multiple cues: border, icon, and explanatory text.