Divider

v1.0.4 Edit this page

Dividers should be used sparingly. A few areas where dividers can be helpful include: separating complex blocks of content (i.e., product comparison), connecting interactive selections (i.e., accordion, left/right nav).

Best practices

  • Consistent space is a great alternative to using dividers
  • A hierarchy of dividers provides a visual cue when rows are being compared in a table or nav structure
  • Engineers can use the .border base-styles rule directly in place of <Divider> (see usage notes below)

Usage

<Divider> is implemented with two .border rules from @nerdwallet/base-styles. Engineers can use these directly such as in the case of a Table. For example, an engineer could simulate <Divider level={1} /> with

Loading examples...

Props

<Divider>

Composes the horizontal rule (<hr>) standard HTML element which provides a thematic break between content. With this implementation of Divider, we reset the default border and use a border-top to style the <hr>.

Name

Description

Type

Default

level

Levels of lightness. 3 is the lightest which maps to the design token from the design system, "neutral-lightest".

one of [[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]]

'2'

Maintainers

This component was created by FEI.