List

A list component with optional header and support for aligning items to any end. Use the provided classes or take control of the entire content.

  • Default
  • Inverse
  • This is an optional list header
  • This item has a text
  • This item has an icon and text
  • This item has text and an icon to the side
  • This item is active
  • This is a disabled item
<ul class="lui-list">
  <li class="lui-list__header">
    <span class="lui-list__text">This is an optional list header</span>
  </li>
  <li class="lui-list__item">
    <span class="lui-list__text">This item has a text</span>
  </li>
  <li class="lui-list__item">
    <span class="lui-list__aside  lui-icon  lui-icon--star"></span>
    <span class="lui-list__text">This item has an icon and text</span>
  </li>
  <li class="lui-list__item">
    <span class="lui-list__text">This item has text and an icon to the side</span>
    <span class="lui-list__aside">
      <span class="lui-icon  lui-icon--star"></span>
    </span>
  </li>
  <li class="lui-list__item  lui-active">
    <span class="lui-list__text">This item is active</span>
  </li>
  <li class="lui-list__item  lui-disabled">
    <span class="lui-list__text">This is a disabled item</span>
  </li>
  <li class="lui-list__item">
    <!-- Empty item using all available space -->
  </li>
</ul>
  • This is an optional list header
  • This item has a text
  • This item has an icon and text
  • This item has text and an icon to the side
  • This item is active
  • This is a disabled item
<ul class="lui-list  lui-list--inverse">
  <li class="lui-list__header">
    <span class="lui-list__text">This is an optional list header</span>
  </li>
  <li class="lui-list__item">
    <span class="lui-list__text">This item has a text</span>
  </li>
  <li class="lui-list__item">
    <span class="lui-list__aside  lui-icon  lui-icon--star"></span>
    <span class="lui-list__text">This item has an icon and text</span>
  </li>
  <li class="lui-list__item">
    <span class="lui-list__text">This item has text and an icon to the side</span>
    <span class="lui-list__aside">
      <span class="lui-icon  lui-icon--star"></span>
    </span>
  </li>
  <li class="lui-list__item  lui-active">
    <span class="lui-list__text">This item is active</span>
  </li>
  <li class="lui-list__item  lui-disabled">
    <span class="lui-list__text">This is a disabled item</span>
  </li>
  <li class="lui-list__item">
    <!-- Empty item using all available space -->
  </li>
</ul>