Card List

Card Lists present a set of selectable verification steps or modules. Each item has an icon, a label, and an optional badge. Used as the main navigation surface at the start of a verification session.

Anatomy

ID CaptureFace CaptureFace Match

States

ID Capture

Default.card-item

A selectable verification step: icon, label, and a chevron affordance.

Face Capture

Selected.card-item.is-selected

Brand border and tinted surface confirm the choice.

Tokens

TokenRoleLayer

--gc-card-surfaceItem backgroundComponent

--gc-card-borderItem border colorComponent

--gc-card-textItem label colorComponent

--gc-card-icon-surfaceIcon container backgroundComponent

--gc-card-tag-surfaceBadge backgroundComponent

--gc-card-tag-textBadge text colorComponent

--radius-cardCard corner radiusSemantic

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.