Divider
Dividers are visual elements that separate content into distinct sections, enhancing organization and clarity in user interfaces.
- Overview
- Specs
- Guidelines
Component
Dividers are essential visual components used in user interface design to enhance organization and clarity by effectively separating content into distinct sections. These elements, often consisting of horizontal or vertical lines, whitespace, or subtle graphical elements, serve as structural aids within interfaces, guiding users through content and facilitating navigation.
By creating visual breaks between different components or groups of content, Dividers help improve readability and establish a clear visual hierarchy, ensuring that users can easily comprehend and interact with the interface.
A : Horizontal Variation
B: Vertical Variation
Used for:
Sidebar
To divide common elements such as dashboard, favorites and drafts with the specific pages of a product, a Divider is used to create this separation;
Accordion
To divide different sections of a form, an accordion is used, consisting of the page title, an icon and a Divider to give the impression something is inside the accordion;
Tabs
Tabs are composed directly on a divider to give the impression that all tabs are at the same level and to make it clear which option is selected;
Visual organization
Dividers help to visually organize content, creating clear separations between different sections or elements within the interface;
Don’t use for:
Visual distraction
Dividers should not be used if they draw excessive attention away from the main content or detract from the user’s primary tasks;
Mobile optimization
On mobile devices with limited screen space, excessive use of Dividers can shrink usable content areas and hinder the user experience.
Complexity reduction
In interfaces with complex layouts or dense content, Dividers may not effectively reduce complexity and may instead contribute to visual overload. In these cases, use tabs to divide content in different pages;
Whitespace usage
Dividers should not be used indiscriminately if whitespace alone is sufficient to create visual separation between elements. In such cases, Dividers may introduce unnecessary visual clutter;
Demo
Access the Figma file and inspect the element using Dev Mode.
What’s New?
- Added Vertical variation;
- Added Horizontal variation;
Related
Variations
Vertical
.vertical {
width: 1px;
rotation: 0º;
color: var(--grey-5);
}Horizontal
.horizontal {
width: 1px;
rotation: 90º;
color: var(--grey-5);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Dynamic Size
Depending on the situation, the Divider can be applied on different sizes as this component is very versatile and can be found on different situations. For example, within a sidebar, the Divider can be applied within the collapsed and extended variations.
As the width changes between these two variations, the Divider must fill the space surplus that is available in the extended variation.
Apply the vertical or the horizontal Divider as required.
Apply a different color other than the specified one.
Case Studies
Why Web Accessibility Matters – And How to Start
Writing for Everyone: Every Word Counts in Accessibility
