Skip to content
Data display

Data display

Every component, with its variants, sizes and states. Change the appearance here and every sample follows.

Card

The container for one subject, with an optional head.

Variants

Recent orders

A card holds one subject: a list, a chart, a form section.

Padded

Recent orders

OrderCustomerStatus
#10482Maya OkaforPaid€184.50
#10481Tomás ReyesPending€62.00
#10480Ines DuarteRefunded€129.90
Flush
<section class="or-card">
  <div class="or-card__head">
    <h3>Recent orders</h3>
    <a class="or-btn or-btn--ghost or-btn--sm" href="orders.html">View all</a>
  </div>
  <div class="or-card__body">…</div>
  <!-- or-card__body--flush when the body is a table that runs to the edges -->
</section>
<section className="or-card">
  <div className="or-card__head">
    <h3>Recent orders</h3>
    <a className="or-btn or-btn--ghost or-btn--sm" href="orders.html">View all</a>
  </div>
  <div className="or-card__body">…</div>
  {/* or-card__body--flush when the body is a table that runs to the edges */}
</section>
<section class="or-card">
  <div class="or-card__head">
    <h3>Recent orders</h3>
    <a class="or-btn or-btn--ghost or-btn--sm" href="orders.html">View all</a>
  </div>
  <div class="or-card__body">…</div>
  <!-- or-card__body--flush when the body is a table that runs to the edges -->
</section>
<section className="or-card">
  <div className="or-card__head">
    <h3>Recent orders</h3>
    <a className="or-btn or-btn--ghost or-btn--sm" href="orders.html">View all</a>
  </div>
  <div className="or-card__body">…</div>
  {/* or-card__body--flush when the body is a table that runs to the edges */}
</section>
<section class="or-card">
  <div class="or-card__head">
    <h3>Recent orders</h3>
    <a class="or-btn or-btn--ghost or-btn--sm" href="orders.html">View all</a>
  </div>
  <div class="or-card__body">…</div>
  <!-- or-card__body--flush when the body is a table that runs to the edges -->
</section>

Stat

One figure, what it measures, and how it moved.

Used in the demo at /

States

Revenue€48,290.00+12.4%
Filled
Revenue
Loading
<div class="or-card">
  <div class="or-stat">
    <span class="or-stat__label">Revenue</span>
    <span class="or-stat__value">€48,290.00</span>
    <span class="or-stat__foot"><span class="or-delta or-delta--up">+12.4%</span></span>
  </div>
</div>
<div className="or-card">
  <div className="or-stat">
    <span className="or-stat__label">Revenue</span>
    <span className="or-stat__value">€48,290.00</span>
    <span className="or-stat__foot"><span className="or-delta or-delta--up">+12.4%</span></span>
  </div>
</div>
<div class="or-card">
  <div class="or-stat">
    <span class="or-stat__label">Revenue</span>
    <span class="or-stat__value">€48,290.00</span>
    <span class="or-stat__foot"><span class="or-delta or-delta--up">+12.4%</span></span>
  </div>
</div>
<div className="or-card">
  <div className="or-stat">
    <span className="or-stat__label">Revenue</span>
    <span className="or-stat__value">€48,290.00</span>
    <span className="or-stat__foot"><span className="or-delta or-delta--up">+12.4%</span></span>
  </div>
</div>
<div class="or-card">
  <div class="or-stat">
    <span class="or-stat__label">Revenue</span>
    <span class="or-stat__value">€48,290.00</span>
    <span class="or-stat__foot"><span class="or-delta or-delta--up">+12.4%</span></span>
  </div>
</div>

Table

Sortable headers, selectable rows, and numbers aligned on the decimal.

Used in the demo at /orders

States

OrderCustomerStatus
#10482Maya OkaforPaid€184.50
#10481Tomás ReyesPending€62.00
#10480Ines DuarteRefunded€129.90
Enabled
OrderCustomerStatus
#10482Maya OkaforPaid€184.50
#10481Tomás ReyesPending€62.00
#10480Ines DuarteRefunded€129.90
Selected
<div class="or-tablewrap">
  <table class="or-table">
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col" class="or-num" aria-sort="descending">
          <button type="button" class="or-table__sort">Total</button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr aria-selected="true"><td>#10482</td><td class="or-num">€184.50</td></tr>
    </tbody>
  </table>
</div>
<SelectAll rows={rows} selection={selection} />
<SortHeader field="totalCents" label={t('table.total')} query={table.query} onSort={table.sortBy} numeric />
<SelectAll :rows="rows" :selected="selection.selected.value" @toggle="selection.toggleAll(rows)" />
<SortHeader field="totalCents" :label="t('table.total')" :query="table.query.value" numeric @sort="table.sortBy" />
{/* Sorting is a link to the same list, sorted: the server renders it. */}
<th scope="col" aria-sort={sort} className="or-num">
  <Link className="or-table__sort" href={hrefFor(path, nextSort(query, 'totalCents'), {}, keep)}>
    {t('table.total')}
    <Icon name={ARROW[sort]} size={16} />
  </Link>
</th>
<TableSelectAll :rows="rows" :selected="selection.selected.value" @toggle="selection.toggleAll(rows)" />
<TableSortHeader field="totalCents" :label="t('table.total')" :query="table.query.value" numeric @sort="table.sortBy" />

Timeline

What one account did, newest first, as an ordered list.

Used in the demo at /customers

Variants

  1. Placed order #10482Feb 18, 2026, 10:24 AM
  2. Opened the spring newsletterFeb 11, 2026, 4:02 PM
  3. Created an accountNov 3, 2025, 9:15 AM
History
<ol class="or-timeline">
  <li class="or-timeline__item">
    <span class="or-timeline__mark" aria-hidden="true">
      <svg class="or-i or-i-16" aria-hidden="true"><use href="#or-i-shopping-cart"></use></svg>
    </span>
    <div class="or-timeline__body">
      <span>Placed order #10482</span>
      <span class="or-timeline__when">18 Feb 2026, 10:24</span>
    </div>
  </li>
</ol>
<ol className="or-timeline">
  <li className="or-timeline__item">
    <span className="or-timeline__mark" aria-hidden="true">
      <Icon name="shopping-cart" size={16} />
    </span>
    <div className="or-timeline__body">
      <span>Placed order #10482</span>
      <span className="or-timeline__when">18 Feb 2026, 10:24</span>
    </div>
  </li>
</ol>
<ol class="or-timeline">
  <li class="or-timeline__item">
    <span class="or-timeline__mark" aria-hidden="true">
      <Icon name="shopping-cart" :size="16" />
    </span>
    <div class="or-timeline__body">
      <span>Placed order #10482</span>
      <span class="or-timeline__when">18 Feb 2026, 10:24</span>
    </div>
  </li>
</ol>
<ol className="or-timeline">
  <li className="or-timeline__item">
    <span className="or-timeline__mark" aria-hidden="true">
      <Icon name="shopping-cart" size={16} />
    </span>
    <div className="or-timeline__body">
      <span>Placed order #10482</span>
      <span className="or-timeline__when">18 Feb 2026, 10:24</span>
    </div>
  </li>
</ol>
<ol class="or-timeline">
  <li class="or-timeline__item">
    <span class="or-timeline__mark" aria-hidden="true">
      <Icon name="shopping-cart" :size="16" />
    </span>
    <div class="or-timeline__body">
      <span>Placed order #10482</span>
      <span class="or-timeline__when">18 Feb 2026, 10:24</span>
    </div>
  </li>
</ol>

Description list

Label and value pairs, paired in the markup and not only in the layout.

Used in the demo at /customers

Variants

Email
maya@example.com
Country
Portugal
Lifetime spend
€2,489.00
Label and value
<dl class="or-facts">
  <div class="or-facts__row">
    <dt>Email</dt>
    <dd><a href="mailto:maya@example.com">maya@example.com</a></dd>
  </div>
</dl>
<dl className="or-facts">
  <div className="or-facts__row">
    <dt>Email</dt>
    <dd><a href="mailto:maya@example.com">maya@example.com</a></dd>
  </div>
</dl>
<dl class="or-facts">
  <div class="or-facts__row">
    <dt>Email</dt>
    <dd><a href="mailto:maya@example.com">maya@example.com</a></dd>
  </div>
</dl>
<dl className="or-facts">
  <div className="or-facts__row">
    <dt>Email</dt>
    <dd><a href="mailto:maya@example.com">maya@example.com</a></dd>
  </div>
</dl>
<dl class="or-facts">
  <div class="or-facts__row">
    <dt>Email</dt>
    <dd><a href="mailto:maya@example.com">maya@example.com</a></dd>
  </div>
</dl>