Skip to content

Divider

Status: Stable

Latest released: January 2020

Current version: v1.4.0

Storybook
GitHub

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).

  • 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)

Variants

Level 1


Level 2 (default)


Level 3


Development

import Divider from '@nerdwallet/react-divider';
<Divider />;

<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

.border-top-1;
.border-neutral-dark;

Props

<Divider>

className

string

Applies a CSS classname to the component.

Default

null

level

1 | 2 | 3 | '1' | '2' | '3'

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

Default

'2'