Components

Block List(React)

Layout options for vertically stacking content.

Version:9.3.0 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
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

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