Menu
Divider
UI Docs
Getting Started New in 2.9
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Emoji Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Text
Collections
Breadcrumb Form Grid Menu Message Table
Views
Ad Card Comment Feed Item Statistic
Modules
Accordion Calendar Checkbox Dimmer Dropdown Embed Flyout Modal Nag Popup Progress Rating Search Shape Sidebar Slider Sticky Tab Toast Transition
Behaviors
API Form Validation State Visibility

Divider
A divider visually segments content into groups

Types

Divider

A standard divider

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

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
A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid
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

Description

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

Horizontal Alignment

A horizontal divider can be aligned

Left Aligned

Center Aligned

Right Aligned

Variations

Inverted

A divider can have its colors inverted

Horizontal

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

Size

A divider text can vary in size

Mini
Tiny
Small
Large
Big
Huge
Massive

Dimmer Message
Dimmer sub-header