Styles live in scss/components/_keyline.scss. Dividers separate content with border-primary at 1, 2, or 4 px. Use a native <hr> for thematic breaks, or a <div class="keyline"> when you need a non-semantic separator in flex layouts.
HR (horizontal rule)
Classes .hr or .keyline on <hr>. Default thickness is 1 px; add .hr--2 or .hr--4 for heavier lines.
<hr class="hr" />Keyline (div)
Same visuals on a <div>. Mark decorative lines aria-hidden="true" when nearby headings or labels already convey structure.
<div class="keyline" role="separator" aria-hidden="true"></div>In context
Prefer <hr> between sections of prose so assistive tech can announce a thematic break. Avoid stacking multiple adjacent rules.
Section one
Introductory copy before the break.
Section two
Content after a semantic horizontal rule.
Related components
Tab bars reuse the same 1px token via .tabs__separator (see Tabs).
Class reference
| Class | Description |
|---|---|
.keyline / .hr | Horizontal rule (1px border-primary) |
.keyline--2 / .hr--2 | 2px top border |
.keyline--4 / .hr--4 | 4px top border |
Customize (Sass)
-
Keyline width
Override max-width when dividers should span the full content column.@use "pimentcss-design-system" with ( $keyline-max-width: 100% ); -
Rebuild CSS
Run after editing _keyline.scss.npm run build:css
Accessibility (RGAA / WCAG)
Dividers
- Semantic breaks, use
<hr>between thematic sections; do not replace headings. - Decorative lines, on
<div class="keyline">userole="separator"andaria-hidden="true"when structure is already exposed. - Contrast, lines use
--border-primary; verify on tinted backgrounds in your theme. - Density, avoid multiple consecutive rules; one divider per logical break is enough.