Divider

src/elements/Divider/Divider.js

Props

A standard divider.

To add a divider between parts of a grid use a divided Grid variation.

A divider can segment content vertically.

Vertical dividers requires position: relative on the element that you would like to contain the divider.

Due to a change in W3C implementation of absolutely positioned elements in flex containers vertical dividers now currently only support 50/50 splits automatically, and only if not positioned as direct children of flex containers (like grid).

A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable Grid.

A divider can segement content horizontally.

Horizontal dividers can also be used in combination with headers and icons to create different styles of dividers.

Dividers will automatically vary the size of their dividing rules to match the length of your text.

A divider can have its colors inverted.

A divider can be fitted, without any space above or below it.

A hidden divider divides content without creating a dividing line.

A divider can provide greater margins to divide sections of content.

A divider can clear the contents above it.

This is the bottom

Divider
A divider visually segments content into groups.

Types

Vertical Divider

Horizontal Divider

Variations

Inverted

Fitted

Hidden

Section

Clearing

DividerA divider visually segments content into groups.