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>