Divider

Logical hairline rule. Paints via border-block-start so the stroke aligns with the inline axis under any writing mode. Ships three variants: horizontal (default), vertical (.is-vertical), and text-flanked (.has-text, two flanking rules around a centred label).

Live

<div>
<p style="margin: 0;">Section above</p>
<hr class="divider">
<p style="margin: 0;">Section below</p>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-divider')
);

<div style="display: flex; align-items: center; gap: 0.75rem;">
<span>Inbox</span>
<span class="divider is-vertical"></span>
<span>Drafts</span>
<span class="divider is-vertical"></span>
<span>Sent</span>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-divider')
);

<div class="divider has-text">or continue with</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-divider')
);

Markup

<!-- Horizontal hairline. Logical border-block-start so vertical writing modes flip the axis. -->
<hr class="divider">

<!-- Vertical rule. Stretches to parent block-axis height inside a flex/grid row. -->
<div style="display: flex; align-items: center; gap: 0.5rem;">
  <span>Inbox</span>
  <span class="divider is-vertical"></span>
  <span>Drafts</span>
</div>

<!-- Text-flanked rule for labelled section breaks. -->
<div class="divider has-text">or continue with</div>

Variants

• Horizontal (default). <hr class="divider"> or any block element with the class. Paints border-block-start; the element's own block-size is zero so the rule is the only visible bit.
• .is-vertical. Flips to inline-block with an inline-start stroke. Uses align-self: stretch to match the parent's block-axis height under flex or grid; falls back to a 1em minimum height when standalone.
• .has-text. Becomes a flex container with two pseudo-element rules (::before / ::after) flanking a centred label. Use for labelled section breaks ("or continue with", "since 2024", etc.).

Accessibility

• The default rule renders without a visible label; pair with <hr> so the separator carries semantic weight for assistive tech. On a generic <div class="divider">, add role="separator" (and aria-orientation="vertical" for .is-vertical) if the rule conveys structural meaning.
• Under forced-colors: active the color-mix stroke collapses to near-transparent; the plugin overrides border-color: CanvasText so the rule stays visible (WCAG 1.4.11).

Variables

Override example

@use '@adnap/krysalicss/element/divider' with (
  $thickness: 2px,
  $gap: 2rem,
  $color-mix: 30%,
);

Tokens consumed