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
A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a
stackable grid
There is a know bug of vertical dividers after a W3C update. Please read
#4342 for more information
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
Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.
Size |
1" x 2" |
Weight |
6 ounces |
Color |
Yellowish |
Odor |
Not Much Usually |
A divider can have its colors inverted
Horizontal
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.
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