List

Lists display a collection of related items in a structured layout.

Usage

Use .List on a <ul> or <ol> element with .List-Item children.

<ul class="List">
  <li class="List-Item">
    <span class="List-Item-Title">Jane Smith</span>
    <span class="List-Item-Meta">Administrator</span>
    <div class="List-Item-Actions">
      <button class="IconButton edit" aria-label="Edit"></button>
    </div>
  </li>
</ul>

Variants

• .compact: Reduces padding for a denser list.
• .grid: Displays items in a responsive multi-column grid.
• .definition: Displays label/value pairs in a definition grid layout.

Example

Grid Columns

When using .grid, add a column count modifier:

• .cols-2, .cols-3, .cols-4, .cols-5

<ul class="List grid cols-4">…</ul>

Use .full on a .List-Item to make it span the full row width.

<li class="List-Item full">…</li>

Active State

Add data-active to a .List-Item to highlight it as selected.

<li class="List-Item" data-active>Jane Smith</li>

Structure

• .List-Item: Individual list row.
• .List-Item-Title: Primary label for the item.
• .List-Item-Meta: Secondary or supporting text.
• .List-Item-Actions: Container for action buttons, aligned to the right.