Lists
v1.0.0
Lists are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Default
- First Item
- Second Item
- Third Item
<ul class="list">
<li class="list-item">
<span class="list-item-text">First Item</span>
</li>
<li class="list-item">
<span class="list-item-text">Second Item</span>
</li>
<li class="list-item">
<span class="list-item-text">Third Item</span>
</li>
</ul>
Two Lines
- First LineSecond Line
- First LineSecond Line
- First LineSecond Line
<ul class="list">
<li class="list-item">
<span class="list-item-text">
<span>First Line</span>
<small class="text-muted">Second Line</small>
</span>
</li>
<li class="list-item">
<span class="list-item-text">
<span>First Line</span>
<small class="text-muted">Second Line</small>
</span>
</li>
<li class="list-item">
<span class="list-item-text">
<span>First Line</span>
<small class="text-muted">Second Line</small>
</span>
</li>
</ul>
Hover
- First Item
- Second Item
- Third Item
<ul class="list">
<li class="list-item has-hover">
<span class="list-item-text">First Item</span>
</li>
<li class="list-item has-hover">
<span class="list-item-text">Second Item</span>
</li>
<li class="list-item has-hover">
<span class="list-item-text">Third Item</span>
</li>
</ul>
Leading Icon
- First Item
- Second Item
- Third Item
<ul class="list">
<li class="list-item">
<i class="icon">
<svg ... />
</i>
<span class="list-item-text">First Item</span>
</li>
<li class="list-item">
<i class="icon">
<svg ... />
</i>
<span class="list-item-text">Second Item</span>
</li>
<li class="list-item">
<i class="icon">
<svg ... />
</i>
<span class="list-item-text">Third Item</span>
</li>
</ul>
Trailing Icon
- First Item
- Second Item
- Third Item
<ul class="list">
<li class="list-item">
<span class="list-item-text">First Item</span>
<i class="icon">
<svg ... />
</i>
</li>
<li class="list-item">
<span class="list-item-text">Second Item</span>
<i class="icon">
<svg ... />
</i>
</li>
<li class="list-item">
<span class="list-item-text">Third Item</span>
<i class="icon">
<svg ... />
</i>
</li>
</ul> Previous: Components
← Icon-ButtonNext: Components
Navbar →