List

Rows with icons, descriptions, metadata, and actions. Used for settings lists, notification feeds, and sidebar navigation. Default rows are 48px (two lines); --compact reduces to 32px and --spacious expands to 64px.

Divided list

index.htmlhtml
<ul class="ln-list ln-list--divided">
  <li class="ln-list__item">
    <div class="ln-list__content">
      <span class="ln-list__title">Account settings</span>
      <span class="ln-list__description">Manage your profile, email, and password.</span>
    </div>
  </li>
  <li class="ln-list__item">
    <div class="ln-list__content">
      <span class="ln-list__title">Notifications</span>
      <span class="ln-list__description">Choose which updates you receive.</span>
    </div>
  </li>
  <li class="ln-list__item">
    <div class="ln-list__content">
      <span class="ln-list__title">Billing</span>
      <span class="ln-list__description">View invoices and update payment method.</span>
    </div>
  </li>
</ul>
  • Account settingsManage your profile, email, and password.
  • NotificationsChoose which updates you receive.
  • BillingView invoices and update payment method.

Bordered interactive list

index.htmlhtml
<ul class="ln-list ln-list--bordered ln-list--interactive">
  <li class="ln-list__item">
    <div class="ln-list__content">
      <span class="ln-list__title">Design tokens</span>
    </div>
    <span class="ln-list__meta">12 items</span>
  </li>
  <li class="ln-list__item">
    <div class="ln-list__content">
      <span class="ln-list__title">Layout blocks</span>
    </div>
    <span class="ln-list__meta">5 items</span>
  </li>
  <li class="ln-list__item">
    <div class="ln-list__content">
      <span class="ln-list__title">Content blocks</span>
    </div>
    <span class="ln-list__meta">10 items</span>
  </li>
</ul>
  • Design tokens
    12 items
  • Layout blocks
    5 items
  • Content blocks
    10 items

Reference

ClassDescriptionResponsive
.ln-listUnstyled list containerNo
.ln-list__itemList row with flex layoutNo
.ln-list__iconLeading icon slotNo
.ln-list__mediaLeading media slot (avatar, thumbnail)No
.ln-list__contentTitle and description wrapperNo
.ln-list__titlePrimary textNo
.ln-list__descriptionSecondary muted textNo
.ln-list__metaTrailing metadataNo
.ln-list__actionTrailing action slotNo
.ln-list--dividedBorder between itemsNo
.ln-list--borderedOutlined container with internal dividersNo
.ln-list--interactiveHover highlight on itemsNo
.ln-list--compactReduced item height (32px)No
.ln-list--spaciousIncreased item height (64px)No