Divider
Overview
A divider is a thin line that separates content into distinct sections within a layout. It carries no interactive behavior and exists purely for visual organization.
Sandbox
Anatomy
- Line — The visible rule, rendered as an
<hr>or a bordered<div>, styled via a border token.
Variants
By surface
Default — Used between content sections on light surfaces. Uses --border-divider.
On dark/inversed surfaces — Used in the primary navigation sidebar to separate nav groups. Uses --color-navBorder.
On brand surfaces — Used in the patient sidebar, which sits on the dark navy --bg-inversed background. Uses the hardcoded value #143969, specific to that surface.
Usage
Dividers mark boundaries between content groups. They appear as structural elements in data-heavy views and navigation surfaces, not as decoration.
- Treatment sheet rows — Each order row uses a bottom border to separate entries within a section group (Basic Observations, Medications, Vaccines, etc.). Currently implemented with
--border-primary; should migrate to--border-divider. - Patient sidebar sections — Horizontal rules separate sections like Vitals, Visit, Patient, Reminders, and Appointments. These use the surface-specific color #143969 against the dark navy sidebar background.
- Primary navigation — Thin rules separate logical groups of nav items (e.g., between the core screens and tools like Look Up and Rapid Register). Uses
--color-navBorder. - Patient header — A top border on the patient bar distinguishes it from the content above. Uses
--axon-v2--colors-opacity--black--8at 1px solid.
Don't add a divider to create breathing room between elements. Use spacing tokens for that. A divider signals a meaningful boundary between content groups, not just visual padding.
Best Practices
| Do | Don't |
|---|---|
Use --border-divider as the default token for dividers on light surfaces | Don't use --border-primary as a substitute; it resolves lighter and is meant for container outlines |
| Use surface-specific tokens for inversed or branded surfaces | Don't apply --color-navBorder or the patient sidebar color outside their respective surfaces |
| Let the divider span the full width of its container | Don't set a partial width unless the layout explicitly calls for an inset rule |
| Use whitespace and section headings first | Don't add a divider between every row or item in a list |
Accessibility
- A decorative divider should render as
<hr role="presentation">or includearia-hidden="true"so screen readers skip it. - If the divider marks a meaningful section boundary, use a native
<hr>without suppressing it, and ensure adjacent content uses proper headings or landmark regions (<section>,<nav>,<aside>) to carry that structure. - Do not rely on the divider alone to communicate content groupings. Visual separation must be backed by semantic structure for assistive technologies.