List

A structured content list with media, body, and secondary columns. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• list, list-row, list-content, list-media, list-media--icon, list-media--image, list-title, list-description
• list-col-wrap

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<ul class="list">
  <li class="list-row">
    <div class="list-content">
      <h3 class="list-title">First project</h3>
      <p class="list-description">Updated today.</p>
    </div>
  </li>
</ul>

Variants and composition

list-media can be an icon or image. list-col-wrap puts secondary content below the primary row; title and description live in list-content.

Behavior and accessibility

Retain ul/ol and li for actual lists. Let long content wrap in list-content and use list-col-wrap when secondary content needs a separate row.

Text regions use overflow-wrap:anywhere, and growing row content has a flex:1 1 12ch basis so names can wrap rather than force the entire page wider. Keep actions and media bounded and test unusually long labels.

Reference

See the interactive Storybook specimen ↗. Continue to Listbox or return to the Official preset overview.