Components

Block List(React)

Layout options for vertically stacking content.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
Import:import { BlockListItemLink, BlockListItem, BlockList } from '@thumbtack/thumbprint-react';

Default

<BlockListItemLink> creates a block link that takes up all of the space in the row.

Item One
Item Three
Item Four
<BlockList>
    <BlockListItem>Item One</BlockListItem>
    <BlockListItem>
        <BlockListItemLink href="https://thumbtack.com">Item Two</BlockListItemLink>
    </BlockListItem>
    <BlockListItem>Item Three</BlockListItem>
    <BlockListItem>Item Four</BlockListItem>
</BlockList>

Note the use of color-inherit to override the default blue link color of <BlockListItemLink>.

<BlockList border="group">
    <BlockListItem>
        <BlockListItemLink href="https://thumbtack.com" className="color-inherit hover-bg-gray-200">
            <div className="flex">
                <div className="mr3">
                    <img
                        src="https://randomuser.me/api/portraits/women/80.jpg"
                        className="br2 mt1"
                        width="40"
                    />
                </div>
                <Text size={2}>
                    We bring out the best in our colleagues — and our product — by pushing each
                    beyond what we believe we’re capable of. We give honest feedback, even when it’s
                    hard.
                </Text>
            </div>
        </BlockListItemLink>
    </BlockListItem>
    <BlockListItem>
        <BlockListItemLink href="https://thumbtack.com" className="color-inherit hover-bg-gray-200">
            <div className="flex">
                <div className="mr3">
                    <img
                        src="https://randomuser.me/api/portraits/women/85.jpg"
                        className="br2 mt1"
                        width="40"
                    />
                </div>
                <Text size={2}>
                    In a world where tech is often seen as eroding good jobs, we’re helping small
                    business owners thrive. Our product makes entrepreneurship accessible to
                    everyone.
                </Text>
            </div>
        </BlockListItemLink>
    </BlockListItem>
</BlockList>

Bottom border

Item One
Item Two
Item Three
Item Four
<BlockList border="bottom">
    <BlockListItem>Item One</BlockListItem>
    <BlockListItem>Item Two</BlockListItem>
    <BlockListItem>Item Three</BlockListItem>
    <BlockListItem>Item Four</BlockListItem>
</BlockList>

Surrounding border

Item One
Item Two
Item Three
Item Four
<BlockList border="group">
    <BlockListItem>Item One</BlockListItem>
    <BlockListItem>Item Two</BlockListItem>
    <BlockListItem>Item Three</BlockListItem>
    <BlockListItem>Item Four</BlockListItem>
</BlockList>

Props

  • href
    required

    URL pointing to the item link destination.

    Type
    string
  • children
    required

    Content of the link.

    Type
    node

BlockListItem

  • children
    required

    The content of the list item.

    Type
    node

BlockList

  • border

    Add a border to the bottom or surround the entire list.

    Type
    oneOf([
      'bottom',
      'group',
    ]);
    Default
    undefined
  • children
    required

    The list items and any item links.

    Type
    node