Components

List(SCSS)

Styling lists with bullets, numbers, or letters.

Version:	`4.0.3` •View source•Changelog•Report 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>