#Overview
A divider helps to structure a page visually.
#When to use
- To separate list items
- When white space or titles are not sufficient to convey the hierarchy or architecture of the user interface
#When not to use
- When white space or titles are already sufficient to separate content
#Anatomy
#Color
Dividers always use the same color. This is to maintain consistency and reduce maintenance work.
There is one exception for the specifications table on the Product Detail Page (PDP), which uses a lighter gray of #EEEEEE.
- Galaxus
- Digitec
#Best practices
#Divider width: Default vs Hover
Do
Align dividers with the elements they are dividing.
Don't
Do not align dividers with the outer edges of the parent element.
Do
Dividers can be stretched to the outer edges of the parent element as a hover effect only.
#Dividers are not used for headings
Do
Use text weight and size to separate headers from list items whenever possible.
Don't
Do not use separator lines to separate headings from content.
#Dividers do not separate content sections
Do
Use white space to separate content sections.
Don't
Adding a separator adds visual noise, and it is more difficult to see where the list ends.
#Vertical dividers are used between elements
Do
Use vertical dividers between elements in a horizontal list.
Don't
Do not begin or end a horizontal list with a divider.
#Exceptions
#Products in List mode
Do
Product List Items always begin and end with a divider. This is needed to hold the contents of the element together.
Don't
Don’t use Product List Items without dividers, as they easily fall apart from a visual perspective.
#Products or Teasers between paragraphs
Do
Use dividers for all UI elements within or between paragraphs to separate them from the text.
Don't
Don’t place UI elements between or within paragraphs without dividers.
