Menu

Divider

A divider visually segments content into groups

Download

Types

Divider

If you are looking to add a divider in between grid rows, you can use the ui divided grid variation. For more information check out the grid definition

A standard divider

Vertical Divider

Vertical and horizontal dividers require you to add position: relative to the element that you would like to contain the divider
A vertical divider will automatically adjust to a horizontal divider at mobile resolutions when used inside a stackable grid

A divider can segment content vertically

Login
Or
Sign Up

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
Search
Or
Create New Order

Doggie Treat
$4.99 for 100

Add to cart

Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.

Specifications

Size 1" x 2"
Weight 6 ounces
Color Yellowish
Odor Not Much Usually

Variations

Inverted

A divider can have its colors inverted

Fitted

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Hidden

A hidden divider divides content without creating a dividing line

Section One

Section Two

Section

A divider can provide greater margins to divide sections of content

Section One

Section Two

Clearing

A divider can clear the contents above it

Floated Content

Dimmer Message
Dimmer sub-header