List

There are two types of lists in HTML, ordered and unordered. I have put a third category of stacked list as well for making small notification or info boxes.

Unordered List

List by default is unordered. To add custom marker or set different font size or padding add the pre-defined classes. list--circle sets round markers and list--square sets square markers.

<ul class="list--circle sm sb sm-s">
<li>Coffee</li>
  <li>Tea</li>
  <li>Cola </li>
</ul>
                  

Ordered List

Ordered List by default is numbered. To override default properties wrap it in list--od class. To add custom marker or set different font size or padding add the pre-defined classes. list--roman sets roman numerals markers and list--alpha sets alpahbets markers.

<ol class="list--od list--roman sm sb sm-s">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Cola </li>
</ol>
                  

Stacked List

Stacked List are basically like a text only card. To begin default wrap a list in stack class. User can set any content inside the card and adjust the width and height using custom styling classes.

<ul class="stack">
  <li class="stack__card flex-ct-st">
   <img src="..."
      alt="Avatar" class="avatar avatar--sm"/>
   <div>
     <h1 class="primary sm sb">...</h1>
     <h2 class="primary--light sm">...</h2>
   </div>
  </li>
</ul>