Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

Unordered List

To use basic Unordered list, you need to add class "list-group" to the ul tag and class "list-group-item". Note: To use numbered list, you need to use an ol tag and everything else remains the same as below

<ul class="list-group">
<h5>Unordered List</h5>
<li class="list-group-item">An item</li>...
</ul>
                        

Horizontal List

To use Horizontal list, you just need to copy and paste the below code. Note: You can use class "item-active" for active item styles.

<ul class="list-group flex-row  group-spaced">
<h5>Unordered List</h5>
<li class="list-group-item">An item</li>
<li class="list-group-item item-active">An item</li>...
</ul>

Stacked List

To use Stack list, you need to add class "group-stack" & "item-stack" to each item.

<ul class="list-group flex-row group-stack">
<h5>Unordered List</h5>
<li class="list-group-item item-stack">An item</li>
<li class="list-group-item item-stack item-active">
An item</li>...
</ul>

Stacked Notification List

Copy & paste the below code to use Stacked Notification List

<ul class="list-group group-stack flex-column">
<h5>Stacked List Notification</h5>
<li class="list-group-item item-stack">
<div class="item-text flex-column">
<h5 class="item-heading">Heading</h5>
<p class="para-s">Description text</p>
</div>
</li> </ul>

Stacked Notification List With Avatars

Copy & paste the below code to use Stacked Notification List with Avatars

<ul class="list-group group-stack flex-column">
<h5>Stacked List Notification with avatars</h5>
<li class="list-group-item item-stack group-avatar flex-row">
<div class="avatar-m av-round">
<img src="/CSS/Components/assets/alien-1.png">
</div>
<div class="item-text flex-column">
<h5 class="item-heading">Heading</h5>
<p class="para-s">Description text</p>
</div>
</li>...</ul>