Data List

Default

Name: John Doe
Email: john@example.com
Role: Administrator

Base

Class	Description
`.ui-data-list`	Base class

Size

Class	Value
`.ui-data-list--sm`	sm
`.ui-data-list--lg`	lg

Layout

Class	Value
`.ui-data-list--horizontal`	horizontal

Style

Class	Value
`.ui-data-list--divided`	divided
`.ui-data-list--striped`	striped

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-data-list-gap`	`calc(var(--ui-unit) * 2)`	Gap between children
`--ui-data-list-item-gap`	`calc(var(--ui-unit) * 1)`	Item gap between children
`--ui-data-list-label-color`	`var(--ui-color-text-muted)`	Label text color
`--ui-data-list-value-color`	`var(--ui-color-text)`	Value display text color

Horizontal Layout

Status: Active
Created: Dec 8, 2025
Updated: Dec 8, 2025

<!-- Side-by-side label and value -->
<dl class="ui-data-list ui-data-list--horizontal">
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Status</dt>
    <dd class="ui-data-list__value">Active</dd>
  </div>
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Created</dt>
    <dd class="ui-data-list__value">Dec 8, 2025</dd>
  </div>
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Updated</dt>
    <dd class="ui-data-list__value">Dec 8, 2025</dd>
  </div>
</dl>

Divided

Order ID: #12345
Total: $99.00
Payment: Credit Card

<!-- With separator lines between items -->
<dl class="ui-data-list ui-data-list--divided">
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Order ID</dt>
    <dd class="ui-data-list__value">#12345</dd>
  </div>
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Total</dt>
    <dd class="ui-data-list__value">$99.00</dd>
  </div>
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Payment</dt>
    <dd class="ui-data-list__value">Credit Card</dd>
  </div>
</dl>

Striped

CPU: Intel i7
Memory: 16 GB
Storage: 512 GB SSD
Display: 14" Retina

<!-- Alternating background for readability -->
<dl class="ui-data-list ui-data-list--striped">
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">CPU</dt>
    <dd class="ui-data-list__value">Intel i7</dd>
  </div>
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Memory</dt>
    <dd class="ui-data-list__value">16 GB</dd>
  </div>
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Storage</dt>
    <dd class="ui-data-list__value">512 GB SSD</dd>
  </div>
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Display</dt>
    <dd class="ui-data-list__value">14" Retina</dd>
  </div>
</dl>

Sizes

Small: Compact display

Default: Standard display

Large: Spacious display

<dl class="ui-data-list ui-data-list--sm">
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Small</dt>
    <dd class="ui-data-list__value">Compact display</dd>
  </div>
</dl>
<dl class="ui-data-list">
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Default</dt>
    <dd class="ui-data-list__value">Standard display</dd>
  </div>
</dl>
<dl class="ui-data-list ui-data-list--lg">
  <div class="ui-data-list__item">
    <dt class="ui-data-list__label">Large</dt>
    <dd class="ui-data-list__value">Spacious display</dd>
  </div>
</dl>