---
title: "Card List"
url: "https://developer.incode.com/design-and-ux/card-list/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# 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.

<div class="dh-rule"><span>Anatomy</span><i></i></div>

<div class="dh-stage"><span class="dh-pz-cardlist"><span class="dh-pz-carditem"><em></em><span>ID Capture</span><i></i></span><span class="dh-pz-carditem is-selected"><em></em><span>Face Capture</span><i></i></span><span class="dh-pz-carditem"><em></em><span>Face Match</span><i></i></span></span></div>

<div class="dh-rule"><span>States</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-carditem" style="min-width:200px"><em></em><span>ID Capture</span><i></i></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">Default</span><code>.card-item</code><p>A selectable verification step: icon, label, and a chevron affordance.</p></div></div><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><span class="dh-pz-carditem is-selected" style="min-width:200px"><em></em><span>Face Capture</span><i></i></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Selected</span><code>.card-item.is-selected</code><p>Brand border and tinted surface confirm the choice.</p></div></div></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--gc-card-surface | Item background | Component
--gc-card-border | Item border color | Component
--gc-card-text | Item label color | Component
--gc-card-icon-surface | Icon container background | Component
--gc-card-tag-surface | Badge background | Component
--gc-card-tag-text | Badge text color | Component
--radius-card | Card corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.