IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Divider

/

Design

Visually separate individual elements based on relationship.

Dividers are lines used to clarify the relationship of content within a list or layout.

Width

Dividers are important, yet subtle. It’s critical to choose the correct width when separating content.


One: A single pixel wide, use this width to act as a visual comma to the content being separated.

Orientation

Separating content can be done within a single or multi-column layout. Choosing the correct orientation provides coherence of the purpose of the interface.


Horizontal: The majority of our content can be separated within a single column.

Type

Dividers can provide visual enhancements for particular elements or as an explicit division between items in lists or related content within a section.


Default: The majority of our layouts can benefit from separating content into sections.

Usage

Dividers can be applied to any part of an interface, but should be relational to the level they’re placed on. Make use of division to group information relationally.

Don't mix and match level and level accents.

Don'tmix and match level and level accents.

Do choose the correct divider for the segment.

Dochoose the correct divider for the segment.

Don't divide content unreasonably.

Don'tdivide content unreasonably.

Do provide visual pause when required.

Doprovide visual pause when required.

Don't combine divider widths within the same element.

Don'tcombine divider widths within the same element.

Do provide visual pause when necessary.

Doprovide visual pause when necessary.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.