Lists
Lists can be used at many places like navigation bar, stacked notifications, article pages, etc.
Examples
Horizontal Stacked List
- this is a list normal
- this is a list normal
- this is a list normal
<ul class="w-72">
<li class="text-lg p-4 m-1">
<i class="text-grey-500 btn-icon fas fa-shopping-cart"></i>
this is a list normal
</li>
<li class="text-lg p-4 m-1">this is a list normal</li>
<li class="text-lg p-4 m-1">this is a list normal</li>
</ul>
Vertical Stacked List
- Some this is a list normal
- this is a list normal
- this is a list normal
<ul class="flex flex-row">
<li class="text-lg p-4 m-1">
<i class="text-grey-500 btn-icon fas fa-shopping-cart"></i>
Some this is a list normal
</li>
<li class="text-lg p-4 m-1">this is a list normal</li>
<li class="text-lg p-4 m-1">this is a list normal</li>
</ul>
Notification Stacked List
-
Bella
This is some text hdjsbdjbs sjndjsd jnjsnd sdjnsjdnsdjsdjnsdknsd
-
Bella
This is some text hdjsbdjbs sjndjsd jnjsnd sdjnsjdnsdjsdjnsdknsd
<ul>
<li class="flex text-lg p-5 m-1 bg-teal-100">
<div class="avatar avatar-sm">
<img src="components/images/avatar-img.jpeg" alt="avatar-img"
class="img-round img-responsive" />
</div>
<div class="ml-5 flex flex-col text-overflow-truncate">
<h5 class="text-xl font-semibold">Bella</h5>
<p class="subtitle2 font-light text-md">
This is some text hdjsbdjbs sjndjsd jnjsnd sdjnsjdnsdjsdjnsdknsd
</p>
</div>
</li>
<li class="flex text-lg p-5 m-1 bg-teal-100">
<div class="avatar avatar-sm">
<img src="components/images/avatar-img.jpeg" alt="avatar-img"
class="img-round img-responsive" />
</div>
<div class="ml-5 flex flex-col text-overflow-truncate">
<h5 class="text-xl font-semibold">Bella</h5>
<p class="subtitle2 font-light text-md">
This is some text hdjsbdjbs sjndjsd jnjsnd sdjnsjdnsdjsdjnsdknsd
</p>
</div>
</li>
</ul>