Menu
Home Get started
Utilities
Colors Typography Border Display Flex Grid Image Position Shadow Text-Align Widths and Heights
Components
Breadcrumb Button Card Calendar Chip Expansion-Panel Form Icon Icon-Button List Navbar Table Tabs Toast Tooltip

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
  • Bars Solid Icon First Item
  • Bars Solid Icon Second Item
  • Bars Solid Icon 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 Bars Solid Icon
  • Second Item Bars Solid Icon
  • Third Item Bars Solid Icon 
<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-Button

Next: Components

Navbar →