List

A structured settings-style list with labels, values, and optional interactive rows.

Preview

Display Name John Doe
Email john@example.com
Manage Account →

Usage

<ul class="glass-list">
  <li class="glass-list-item">
    <span class="item-label">Display Name</span>
    <span class="item-value">John Doe</span>
  </li>
  <li class="glass-list-item">
    <span class="item-label">Email</span>
    <span class="item-value">john@example.com</span>
  </li>
  <li class="glass-list-item interactive">
    <span class="item-label">Manage Account</span>
    <span class="item-value">→</span>
  </li>
</ul>

Structure

Element / Class	Purpose
`.glass-list`	Outer `<ul>` wrapper with glass material, no list-style
`.glass-list-item`	Each row with flex layout and bottom border
`.item-label`	Left-aligned label text (`font-weight: 500`)
`.item-value`	Right-aligned value text (secondary color, `0.9rem`)
`.interactive`	Makes the row hoverable/pressable

Behavior

Items are separated by 1px solid var(--glass-border); last item has no border
.interactive rows brighten on hover and darken on press