Thumbprint logo

List

Styling lists with bullets, numbers, or letters

List variations

Bullet

  • item one
  • item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • item three
<ul class="tp-list tp-list--disc">
    <li>item one</li>
    <li>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </li>
    <li>item three</li>
</ul>

Number

  • item one
  • item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • item three
<ul class="tp-list tp-list--decimal">
    <li>item one</li>
    <li>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </li>
    <li>item three</li>
</ul>

Lower alpha

  • item one
  • item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • item three
<ul class="tp-list tp-list--lower-alpha">
    <li>item one</li>
    <li>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </li>
    <li>item three</li>
</ul>

Spaced

  • item one
  • item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • item three
<ul class="tp-list tp-list--disc tp-list--spaced">
    <li>item one</li>
    <li>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </li>
    <li>item three</li>
</ul>