Divider

Overview

Definition

A simple visual indicator to separate different pieces of content or sections.

Guidelines

While it’s usually best to use negative or white space when designing for ALEX, that can also depend on the available size of the page and goals of the experience. If adding more space makes the page seem complete—and people would not know to scroll, a Divider can be one way to give a clear distinction between different sections of content.

These can also be used, if there’s a need to keep information dense on the screen. This way a divider separates information to help a person understand that they are different groups while keeping more information visible.

Horizontal

Vertical

Visuals

Do

The default is ink-200, but you can change the color to better match the page. Say the background if Ink-800, then a darker color may be appropriate.

Caution

The default spacing on each side is 24px. You can change it, but be cautious of items that get too far away.

Don’t

Don’t change the width of the divider.

Specs

Padding:
top and bottom for horizontal; left and right for vertical		spacing-05
widthborder-width-sm
color$ink-200

Accessibility

  • Since this is a decorative element, it doesn’t need to pass contrast ratios or be accessible with keyboard commands / assistive technology.