Components

List(SCSS)

Styling lists with bullets, numbers, or letters.

Version:4.0.3 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-scss

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>
Was this page helpful?

We use this feedback to improve the quality of our documentation.