Components

CardRow

A hairline-divided list row for use inside Card — entry lists, task lists, settings rows. The first row's top border removes itself automatically.

CardRow is a bare <li> inside a <ul class="card"> — the divider styling comes entirely from the .card > li descendant selector, so there is no class of CardRow’s own.

Basic

Rows

Renew passport
Dentist checkup
Rotate mattress

Markup

<ul class="card" style="max-width: 22rem;">
  <li>Renew passport</li>
  <li>Dentist checkup</li>
  <li>Rotate mattress</li>
</ul>

Clickable

Wrap the row’s content in a real <button> or <a> when the row navigates or opens something — an accessible clickable row, not a <li> with a click handler and no keyboard support. It fills the row edge-to-edge and picks up a hover fill on its own; no --clickable modifier to remember.

Clickable rows

Markup

<ul class="card" style="max-width: 22rem;">
  <li><button>Tax return 2025.pdf</button></li>
  <li><button>Warranty card.pdf</button></li>
</ul>

With content on both ends

The row is a flex container — a leading icon, a two-line middle column, and a trailing mono value is the most common shape (see the Loop and Archive patterns for it in context).

Leading icon, trailing meta

Dishwasher manual

PDF · 2.1MB

2h

Markup

<ul class="card" style="max-width: 24rem;">
  <li>
    <span class="avatar" data-square>
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5V8Z" /><path d="M3 8l9 5 9-5M12 13v8" /></svg>
    </span>
    <div style="flex:1; min-width:0;">
      <div style="font-weight: 550;">Dishwasher manual</div>
      <div class="type-label" style="margin-top: 2px;">PDF · 2.1MB</div>
    </div>
    <span class="type-mono" style="color: var(--gl-color-text-tertiary);">2h</span>
  </li>
</ul>

API

Element / attribute	Values	Notes
`li`		Required — a direct child of `ul.card`. No class of its own.
`li > button` / `li > a`		Wrap the row's content to make it clickable, in place of an `onClick` prop.