Thumbprint logo

Components

Horizontal Rule

Dividers that separate sections of content.

Version:9.1.1 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { HorizontalRule } from '@thumbtack/thumbprint-react';

HorizontalRule line styles

Basic

<React.Fragment>
    <HorizontalRule />
</React.Fragment>

Dotted
<React.Fragment>
    <HorizontalRule lineStyle="dotted" />
</React.Fragment>

Dashed
<React.Fragment>
    <HorizontalRule lineStyle="dashed" />
</React.Fragment>

Colors
HorizontalRule default to Thumbtack’s gray color. You can use gray-300 instead by setting the color prop.
<React.Fragment>
    <HorizontalRule />
    <HorizontalRule color="gray-300" />
</React.Fragment>

Props
HorizontalRule
  • lineStyle
    Renders the horizontal rule with the thumbtack styles.
    Type
    oneOf([
  'solid',
  'dotted',
  'dashed',
])
    Default
    'solid'
  • color
    Type
    oneOf([
  'gray',
  'gray-300',
])
    Default
    'gray'