Types

Divider

A standard divider

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

Example

Vertical Divider

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

and

Example

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

Horizontal Divider

A divider can segment 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

Variations

Inverted

A divider can have its colors inverted

Horizontal

Example

Fitted

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

Hidden

A hidden divider divides content without creating a dividing line

Section One

Section Two

Example

Section

A divider can provide greater margins to divide sections of content

Section One

Section Two

Example

Clearing

A divider can clear the contents above it

Floated Content

Example