Components

Block List(React)

Layout options for vertically stacking content.

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

This component is moving out of Thumbprint

This component will soon be moved out of Thumbprint and into the website codebase. No action is required of you and you may continue using it. The Design Systems team will own the migration.

Default

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

Item One
Item Three
Item Four

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

Bottom border

Item One
Item Two
Item Three
Item Four

Surrounding border

Item One
Item Two
Item Three
Item Four

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