package: '@thumbtack/tp-ui-layout-block-list' kit: block-list/index.mdx platform: scss url: /components/block-list/scss/ mdxType: componentApi

import '@thumbtack/tp-ui-layout-block-list'; import '@thumbtack/tp-ui-element-link';

Default

<ul class="tp-block-list">
    <li>Item One</li>
    <li>Item Two</li>
    <li><a href="#" class="tp-block-list__link">Item Fours</a></li>
    <li>Item Three</li>
</ul>

Flush

<ul class="tp-block-list tp-block-list--flush">
    <li>Item One</li>
    <li>Item Two</li>
    <li><a href="#" class="tp-block-list__link">Item Fours</a></li>
    <li>Item Three</li>
</ul>

Bottom border

<ul class="tp-block-list tp-block-list--all">
    <li>Item One</li>
    <li>Item Two</li>
    <li><a href="#" class="tp-block-list__link">Item Fours</a></li>
    <li>Item Three</li>
</ul>

Surrounding border

<ul class="tp-block-list-group">
    <li>Item One</li>
    <li>Item Two</li>
    <li><a href="#" class="tp-block-list__link">Item Fours</a></li>
    <li>Item Three</li>
</ul>