List

Rows of items with optional icon, text, meta and action; rows match table row height.

CSS only components/list.css

Rows with links and controls

Nona Design3 open invoicesCZK 12 400
Payment e-mailsWhen a client pays

<ul class="dsgn-list" aria-label="Clients" style="max-inline-size: 32rem">
  <li><a class="dsgn-list-item" href="#list"><span class="dsgn-avatar" data-intent="accent" aria-hidden="true">ND</span><span class="dsgn-list-item-content"><span class="dsgn-list-item-title">Nona Design</span><span class="dsgn-list-item-text">3 open invoices</span></span><span class="dsgn-list-item-meta">CZK 12 400</span><span class="dsgn-icon" aria-hidden="true">chevron_right</span></a></li>
  <li><div class="dsgn-list-item"><span class="dsgn-icon" aria-hidden="true">notifications</span><span class="dsgn-list-item-content"><span class="dsgn-list-item-title">Payment e-mails</span><span class="dsgn-list-item-text">When a client pays</span></span><input type="checkbox" role="switch" class="dsgn-switch" checked aria-label="Payment e-mails"></div></li>
</ul>

Usage

Row padding = row-pad-y × inset, so a one-line row is exactly a table row (line-height + 2 × row-pad-y) even with an avatar or a button in it. A whole-row link or button gets hover, pressed and an inset focus ring; never nest another interactive element inside a whole-row link — use a static row instead. data-variant="plain" drops the surface and outer border (inside a Card or Drawer).

Details

Classes: .dsgn-list .dsgn-list-item .dsgn-avatar .dsgn-button .dsgn-icon-button .dsgn-icon .dsgn-list-item-content .dsgn-list-item-title .dsgn-list-item-text .dsgn-list-item-meta
Tokens used: --dsgn-border --dsgn-control-font-size --dsgn-control-line-height --dsgn-control-pad-y --dsgn-control-subtle --dsgn-control-text --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-weight-medium --dsgn-inset --dsgn-line-container --dsgn-line-height-body-s --dsgn-line-separator --dsgn-neutral-subtle --dsgn-neutral-subtle-hover --dsgn-radius-l --dsgn-row-pad-y --dsgn-shadow-raised --dsgn-space-12 --dsgn-surface-raised --dsgn-text --dsgn-text-muted
In Figma: List · List item
Import alone: dsgn.systems/components/list.css