Item

The general-purpose row: something on the left, a title and description in the middle, actions on the right. Render it as a <div> for a plain row or an <a> when the whole row is a link.

Muted and outlined rows

For a list the reader moves a cursor through, or selects from, use hui-listbox instead — an item row has no cursor, no selection and no keyboard model.

.hui-item

A row of media, content and actions. Only a link or button item responds to the pointer; add --muted or --outline for nova’s variants.

<a class="hui-item hui-item--muted" href="…">
  <div class="hui-item__media"><svg>…</svg></div>
  <div class="hui-item__content">
    <div class="hui-item__title">…</div>
    <p class="hui-item__description">…</p>
  </div>
  <div class="hui-item__actions">…</div>
</a>

.hui-item--muted

A quiet fill: --hui-muted at half strength.

.hui-item--outline

A hairline border, for a set of options.

.hui-item__actions

Controls or values at the end of the row.

.hui-item__content

The title and description, taking the row’s free width.

.hui-item__description

Muted supporting text.

.hui-item__footer

A full-width line under the rest of the row.

.hui-item__media

An icon or thumbnail at the start of the row.

.hui-item__title

The row title.