Divider – Design

​

Anatomy

The Divider consists of two primary elements that work together to separate content.

1. Divider line
2. Content

​

Options

The Divider supports spacing, orientation, and content alignment configurations to accommodate various separation scenarios.

​

Spacing

​

Vertical

Divider supports vertical orientation for separating content horizontally.

​

Content

Divider supports content to provide additional information to users.

​

Content Alignment

Content aligns to start, end, or center.

​

Behavior

The Divider responds to spacing and orientation requirements while maintaining consistent visual separation.

​

Usage Guidelines

Don’t add excessive amounts of Dividers.

​

How to Use

​

Spacing considerations

Divider supports multiple spacing configurations. Follow these general principles:

• If used within a Form, spacing conforms to the Form pattern.
• Maintain internal consistency within the product area for spacing choices.
• When interactive elements exist near Dividers, use more spacing to meet WCAG guidance on touch target size minimums.

​

Content

Content within the Divider should provide additional context when needed, keeping it concise and informative.

​

Keyboard Interaction

Users can navigate the Divider using standard keyboard controls.