List
Lists can be used to display information in points not in a single paragraph, like notifications etc.
Simple List
Simple list are of two types either ordered list or unordered list.
- This is first point
- This is second point
- This is third point
- This is first point
- This is second point
- This is third point
- This is first point
- This is second point
- This is third point
<ol class="list-decimal">
<li>This is first point</li>
<li>This is second point</li>
<li>This is third point</li>
</ol>
<ol class="list-decimal" reversed>
<li>This is first point</li>
<li>This is second point</li>
<li>This is third point</li>
</ol>
<ol class="list-roman">
<li>This is first point</li>
<li>This is second point</li>
<li>This is third point</li>
</ol>
- This is first point
- This is second point
- This is third point
- This is first point
- This is second point
- This is third point
<ul class="list-dots">
<li>This is first point</li>
<li>This is second point</li>
<li>This is third point</li>
</ul>
<ul class="list-square">
<li>This is first point</li>
<li>This is second point</li>
<li>This is third point</li>
</ul>
Stacked List
Stacked list have a complete custom component inside <li> tag.
-
Vineet Kumar
vineet@gmail.com
-
Vineet Kumar
vineet@gmail.com
-
Vineet Kumar
vineet@gmail.com
<ul class="list-stacked">
<li class="list-item">
<img src="../assets/avatar" class="avatar"/>
<div>
<p class="txt-md">Vineet Kumar </p>
<p class="txt-sm txt-gray-1">vineet@gmail.com </p>
</div>
</li>
</ul>