---
title: "List"
url: "https://developer.incode.com/design-and-ux/list/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# List

The List component shows a numbered sequence of steps with clear progress indicators. Each row is independently styled as done, active, or pending, giving users a clear view of where they are in a flow.

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

<div class="dh-var-grid"><div class="dh-var" style="background:#189f6008"><div class="dh-var-stage"><span class="dh-pz-list"><span class="dh-pz-list-row"><span class="dh-pz-list-num is-done">✓</span><span class="dh-pz-list-text">Position document in frame</span></span></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#189f6014;color:#189f60">Done</span><code>.gc-list-row__num--check</code><p>Completed step. The number is replaced by a checkmark in brand success color.</p></div></div><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><span class="dh-pz-list"><span class="dh-pz-list-row"><span class="dh-pz-list-num">1</span><span class="dh-pz-list-text">Hold steady while scanning</span></span></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Active</span><code>.gc-list-row (default)</code><p>Current step in progress. The number is displayed normally in the active color.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-list"><span class="dh-pz-list-row"><span class="dh-pz-list-num is-pending">1</span><span class="dh-pz-list-text is-muted">Confirm captured image</span></span></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#9ca3af14;color:#9ca3af">Pending</span><code>.gc-list-row__num--pending</code><p>Upcoming step. Number and text are muted to reduce visual weight.</p></div></div></div>

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

## All three states together

A typical 3-step list showing steps 1 done, step 2 active, step 3 pending.

<div class="dh-stage"><span class="dh-pz-list"><span class="dh-pz-list-row"><span class="dh-pz-list-num is-done">✓</span><span class="dh-pz-list-text">Position document in frame</span></span><span class="dh-pz-list-row"><span class="dh-pz-list-num">2</span><span class="dh-pz-list-text">Hold steady while scanning</span></span><span class="dh-pz-list-row"><span class="dh-pz-list-num is-pending">3</span><span class="dh-pz-list-text is-muted">Confirm captured image</span></span></span></div>

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

```dh-comp-tokens
--list-num-done | Done step indicator bg | Component
--list-num-active | Active step indicator bg | Component
--list-num-pending | Pending step indicator bg | Component
--list-text-active | Active step text color | Component
--list-text-muted | Pending step text color | Component
--list-connector | Vertical connector line | Component
```

> 📘 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.