List

wu-list styles a <ul> or <ol> of rows. Each row can hold leading content (an avatar), a body that grows, and trailing content (a badge or a button). Add role="list" to keep the list semantics without markers.

Class	Effect
`wu-list`	Root. No markers, no padding
`wu-list-item`	Part. Row of leading content, body and trailing content
`wu-list-body`	Part. Grows between leading and trailing content
`wu-list-title`	Part. Row title
`wu-list-text`	Part. Muted secondary text
`divided`	Lines between rows
`sm`	Less padding per row

Default

Overview
Members
Billing

<ul class="wu-list" role="list">
  <li class="wu-list-item">Overview</li>
  <li class="wu-list-item">Members</li>
  <li class="wu-list-item">Billing</li>
</ul>

Rows with parts

AL

Ana Lopez

[email protected]

Owner
BO

Ben Okafor

[email protected]

<ul class="wu-list divided" role="list">
  <li class="wu-list-item">
    <span class="wu-avatar blue" role="img" aria-label="Ana Lopez">AL</span>
    <div class="wu-list-body">
      <p class="wu-list-title">Ana Lopez</p>
      <p class="wu-list-text">[email protected]</p>
    </div>
    <span class="wu-badge brand">Owner</span>
  </li>
  <li class="wu-list-item">
    <span class="wu-avatar green" role="img" aria-label="Ben Okafor">BO</span>
    <div class="wu-list-body">
      <p class="wu-list-title">Ben Okafor</p>
      <p class="wu-list-text">[email protected]</p>
    </div>
    <button class="wu-btn sm" type="button">Remove</button>
  </li>
</ul>

Compact

Create the project
Invite the team
Connect the repository

<ol class="wu-list divided sm" role="list">
  <li class="wu-list-item">Create the project</li>
  <li class="wu-list-item">Invite the team</li>
  <li class="wu-list-item">Connect the repository</li>
</ol>

Right to left

Leading content sits at the right and trailing content at the left.

سع

سارة علي

[email protected]

المالك

<ul class="wu-list divided" role="list">
  <li class="wu-list-item">
    <span class="wu-avatar blue" role="img" aria-label="سارة علي">سع</span>
    <div class="wu-list-body">
      <p class="wu-list-title">سارة علي</p>
      <p class="wu-list-text">[email protected]</p>
    </div>
    <span class="wu-badge brand">المالك</span>
  </li>
</ul>

Load only the list

@use "@wovenui/components/list";

The list needs no other component. The example above also uses the avatar, badge and button.