Lists

List is a record of short pieces of related information.

Ordered List

Use the class list-spaced to make a spaced ordered list.

Item 1
Item 2
Item 3

        
  <ol class="list-spaced">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>

Unordered List

Use the class list-spaced to make a spaced unordered list.

Item 1
Item 2
Item 3

        
  <ul class="list-simple list-cursor-pointer list-style-none">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

Simple List

Use the class list-simple to make a simple list as shown below.

Item 1
Item 2
Item 3

        
  <ul class="list-simple list-cursor-pointer list-style-none">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

Icon List

Use the class list-sicon to make a simple icon list as shown below.

task_alt Cleaning
radio_button_unchecked Shopping
task_alt Excercise

        
  <ul class="list-simple list-icon list-cursor-pointer">
    <li>
      <span class="material-icons color-success-light"> task_alt </span
      ><span>Cleaning</span>
    </li>
    <li>
      <span class="material-icons"> radio_button_unchecked </span
      ><span>Shopping</span>
    </li>
    <li>
      <span class="material-icons color-success-light"> task_alt </span
      ><span>Excercise</span>
    </li>
  </ul>

Stacked List

Use the class list-stacked to make a simple list as shown below.

Jane Doe
Did you pick Jenny?
John Doe
This Sunday, golf?
Jenny Doe
Where are you?

        
  <ul class="list-simple list-stacked list-cursor-pointer">
    <li>
      <img
        class="avatar-round avatar-sm"
        src="../../assets/avatarOne.png"
        alt="avatar"
      />
      <div class="list-info">
        <h3>Jane Doe</h3>
        <small class="color-accents-2">Did you pick Jenny?</small>
      </div>
    </li>
    <li>
      <img
        class="avatar-round avatar-sm"
        src="../../assets/avatarTwo.png"
        alt="avatar"
      />
      <div class="list-info">
        <h3>John Doe</h3>
        <small class="color-accents-2">This Sunday, golf?</small>
      </div>
    </li>
    <li>
      <img
        class="avatar-round avatar-sm"
        src="../../assets/avatarThree.png"
        alt="avatar"
      />
      <div class="list-info">
        <h3>Jenny Doe</h3>
        <small class="color-accents-2">Where are you?</small>
      </div>
    </li>
  </ul>