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="text-nowrap divider/primary divider-place-content-center w-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

Creates a vertical separator for side-by-side layouts, with optional label content and the same palette modifiers as the horizontal divider.

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. Compose it with either orientation when the default centered label needs to align with surrounding content.

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

Named placements

Start aligned
Center aligned
End aligned
Codehtml
<div
  class="divider/primary divider-place-content-before-start"
>
  Start aligned
</div>
<div
  class="divider/secondary divider-place-content-before-center"
>
  Center aligned
</div>
<div
  class="divider/accent divider-place-content-before-end"
>
  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
Creates a vertical separator for side-by-side layouts, with optional label content and the same palette modifiers as the horizontal divider.
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. Compose it with either orientation when the default centered label needs to align with surrounding content.
Place-content
start/center/end/percentage/[percentage]
On this page