Divider
A divider is a visual element used to create a separation or divide between sections, content or components within a user interface.
Overview
The purpose of dividers is to create a clear visual distinction between elements or sections, improving the overall layout and user experience. It helps users understand the structure and hierarchy of the content, making it easier to navigate and understand the interface.
Dividers are commonly used to visually separate different sections, such as between paragraphs of text, in lists, or between distinct components or modules. They provide visual clarity, improve readability, and contribute to a more organised and aesthetically pleasing user interface.
Dos and Don’ts
Anatomy
- Divider: 1px line.
Variations
Orientation
Horizontal
Vertical
Modifiers
Type
Examples
Outlines the atomic level interactive elements for the component.
Resources
Available | |
Figma Documentation | Planned |
Beta | |
Vue [Fozzie] | N/A |
Available | |
iOS JustUI [UI Kit] | Available |
iOS PIE [SwiftUI] | Planned |
Android [XML views] | Alpha |
Android [Jetpack compose] | Alpha |