Natcore LogoNatCorev2 — In Progress
v2 — In Progress

Divider

Flexible separators for splitting content horizontally or vertically. Add optional label content, switch orientation with the v variant, and adjust where the label sits with the placement utility.

At a glance

Section header

Overview

Supporting content continues below.

Left
OR
Right

Playground

Controls
Preview

Current release

Natcore v2 preview

Overview

Swap direction, palette, and placement to inspect the exact utility markup generated for the divider.

Codehtml
<div class="bg-surface/40 w-full space-y-3 rounded-2xl p-4"><div class="space-y-1"><p class="text-sm opacity-75">Current release</p>
<p class="text-lg font-semibold">Natcore v2 preview</p></div>
<div class="divider/primary divider-place-content-before-centerw-full">Overview</div>
<p class="text-sm opacity-75">Swap direction, palette, and placement to inspect the exact utility markup generated for the divider.</p></div>

Divider

componentcomposable

Renders a horizontal divider line with an optional tone palette modifier and optional inline label content.

Pattern
divider[/{palette}]
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
Composes with
divider-place-content-{place-content}

Horizontal

Use the base divider class between stacked sections when you need a simple visual break with or without text.
Without label
With label
Status
Codehtml
<div class="space-y-2">
  <span class="text-sm opacity-75">Without label</span>
  <div class="divider/surface"></div>
</div>
<div class="space-y-2">
  <span class="text-sm opacity-75">With label</span>
  <div class="divider/accent">Status</div>
</div>

Vertical Divider

componentcomposable

Adds the v variant to rotate the divider into a vertical separator while keeping the same palette and content behavior.

Pattern
divider-v[/{palette}]
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
Composes with
divider-place-content-{place-content}

Vertical

Use divider-v inside a flex row and give it height from the layout or a utility like h-24.
Left pane
Right pane
Choice A
OR
Choice B
Codehtml
<div
  class="bg-surface/40 flex h-28 items-center justify-center gap-4 rounded-2xl px-4"
>
  <span class="text-sm opacity-75">Left pane</span>
  <div class="divider-v/primary h-full"></div>
  <span class="text-sm opacity-75">Right pane</span>
</div>
<div
  class="bg-surface/40 flex h-28 items-center justify-center gap-4 rounded-2xl px-4"
>
  <span class="text-sm opacity-75">Choice A</span>
  <div class="divider-v/success h-full">OR</div>
  <span class="text-sm opacity-75">Choice B</span>
</div>

Content Placement

modifier

Moves the divider label toward the start, center, or end of the available line space. Accepts named tokens or arbitrary percentages.

Pattern
divider-place-content-{place-content}
Place-content
start/center/end/percentage/[percentage]

Placement Utility

Compose divider-place-content-* with either orientation when the default centered label needs to align with surrounding content.

Named placements

Start aligned
Center aligned
End aligned
Codehtml
<div
  class="divider-place-content-before-start divider/primary"
>
  Start aligned
</div>
<div
  class="divider-place-content-before-center divider/secondary"
>
  Center aligned
</div>
<div
  class="divider-place-content-before-end divider/accent"
>
  End aligned
</div>

API Reference

Classes

componentdivider[/{palette}]
component
Renders a horizontal divider line with an optional tone palette modifier and optional inline label content.
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
componentdivider-v[/{palette}]
component
Adds the v variant to rotate the divider into a vertical separator while keeping the same palette and content behavior.
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
componentdivider-place-content-{place-content}
component
Moves the divider label toward the start, center, or end of the available line space. Accepts named tokens or arbitrary percentages.
Place-content
start/center/end/percentage/[percentage]

CSS Variables

css-variable--divider-gap
css-variable
Controls the spacing between the label and divider lines. The default is 0.5rem (2).
default:--spacing(2)
On this page