Lists
Lists are continuous, vertical indexes of text or images.
Simple text list
Options
- Single-line item
- Single-line item
- Single-line item
<div class="listpane">
<h4 class="list-header">Options</h4>
<ul class="lists">
<li class="list-item">Single-line item</li>
<li class="list-item">Single-line item</li>
<li class="list-item">Single-line item</li>
</ul>
</div>
Stacked list with avatar
Options
-
Avatar name
-
Avatar name
-
Avatar name
<div class="listpane">
<h4 class="list-header">Options</h4>
<ul class="lists">
<li class="list-item list-inline">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
</div>
<p>Avatar name</p>
</li>
<li class="list-item list-inline">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=5" class="img-responsive img-round" alt="avatar">
</div>
<p>Avatar name</p>
</li>
<li class="list-item list-inline">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=6" class="img-responsive img-round" alt="avatar">
</div>
<p>Avatar name</p>
</li>
</ul>
</div>
Stacked list with avatar and icon
Options
-
Avatar name
-
Avatar name
-
Avatar name
<div class="listpane">
<h4 class="list-header">Options</h4>
<ul class="lists">
<li class="list-item list-inline">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
</div>
<p>Avatar name</p>
<button class="btn btn-lg icon-lg btn-icon-solid btn-normal"><i class="fa fa-trash"></i></button>
</li>
</ul>
</div>
Scrollable list
Options
-
Avatar name
-
Avatar name
-
Avatar name
-
Avatar name
-
Avatar name
-
Avatar name
<div class="listpane scrollable-list">
<h4 class="list-header">Options</h4>
<ul class="lists">
<li class="list-item list-inline">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
</div>
<p>Avatar name</p>
</li>
</ul>
</div>