content-divider component

Drop-in semantic component. See examples, sizes, variants, and source.

Visual separator for content sections. The base divider renders a horizontal line; layer adjectives for line style (solid, dashed, dotted, double), thickness (thick, heavy), spacing (compact, relaxed, loose), color (primary, positive, etc.), or content slots (text, icon, section, vertical). Pure CSS — no JS.

Content Divider System

Line Dividers

Default

Thick

Heavy

<div class="stack">
  <div>
    <p class="footnote text-gray-400 mb-2">Default</p>
    <div class="divider"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Thick</p>
    <div class="divider thick"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Heavy</p>
    <div class="divider heavy"></div>
  </div>
</div>

Line Styles

Solid

Dashed

Dotted

Double

<div class="stack">
  <div>
    <p class="footnote text-gray-400 mb-2">Solid</p>
    <div class="divider solid"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Dashed</p>
    <div class="divider dashed"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Dotted</p>
    <div class="divider dotted"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Double</p>
    <div class="divider double"></div>
  </div>
</div>

Text Dividers

Section Break

New Section

End of Section

<div class="stack">
  <div class="divider text">
    <span>Section Break</span>
  </div>
  <div class="divider text left">
    <span>New Section</span>
  </div>
  <div class="divider text right">
    <span>End of Section</span>
  </div>
</div>

Colored Text Dividers

Primary

Success

Warning

Error

Information

<div class="stack">
  <div class="divider text primary">
    <span>Primary</span>
  </div>
  <div class="divider text positive">
    <span>Success</span>
  </div>
  <div class="divider text warning">
    <span>Warning</span>
  </div>
  <div class="divider text negative">
    <span>Error</span>
  </div>
  <div class="divider text info">
    <span>Information</span>
  </div>
</div>

Icon Dividers

<div class="stack">
  <div class="divider icon">
    <i class="icon star"></i>
  </div>
  <div class="divider icon primary">
    <i class="icon heart"></i>
  </div>
  <div class="divider icon positive">
    <i class="icon check"></i>
  </div>
  <div class="divider icon warning">
    <i class="icon triangle-alert"></i>
  </div>
  <div class="divider icon negative">
    <i class="icon x"></i>
  </div>
</div>

Special Effects

Fade Effect

Fade Thick

Gradient

Gradient Thick

Section with Ornament

<div class="stack">
  <div>
    <p class="footnote text-gray-400 mb-2">Fade Effect</p>
    <div class="divider fade"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Fade Thick</p>
    <div class="divider fade thick"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Gradient</p>
    <div class="divider gradient"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Gradient Thick</p>
    <div class="divider gradient thick"></div>
  </div>
  <div>
    <p class="footnote text-gray-400 mb-2">Section with Ornament</p>
    <div class="divider section ornament"></div>
  </div>
</div>

Vertical Dividers

Home

Products

About

Contact

<div class="flex items-center h-8">
  <span class="text-gray-600">Home</span>
  <div class="divider vertical"></div>
  <span class="text-gray-600">Products</span>
  <div class="divider vertical thick"></div>
  <span class="text-gray-600">About</span>
  <div class="divider vertical primary"></div>
  <span class="text-gray-600">Contact</span>
</div>

Spacing Modifiers

Content above compact divider

Content above default divider

Content above relaxed divider

Content above loose divider

Content below

<div class="stack compact">
  <p class="text-gray-600">Content above compact divider</p>
  <div class="divider compact"></div>
  <p class="text-gray-600">Content above default divider</p>
  <div class="divider"></div>
  <p class="text-gray-600">Content above relaxed divider</p>
  <div class="divider relaxed"></div>
  <p class="text-gray-600">Content above loose divider</p>
  <div class="divider loose"></div>
  <p class="text-gray-600">Content below</p>
</div>

Color Variations

<div class="stack">
  <div class="divider"></div>
  <div class="divider primary"></div>
  <div class="divider positive"></div>
  <div class="divider negative"></div>
  <div class="divider warning"></div>
  <div class="divider info"></div>
  <div class="divider purple"></div>
  <div class="divider pink"></div>
  <div class="divider teal"></div>
  <div class="divider blue"></div>
  <div class="divider green"></div>
</div>

Combined Modifiers

Important Section

<div class="stack">
  <div class="divider primary thick dashed"></div>
  <div class="divider positive double"></div>
  <div class="divider warning heavy dotted"></div>
  <div class="divider text primary thick">
    <span>Important Section</span>
  </div>
  <div class="divider icon negative thick">
    <i class="icon circle-alert"></i>
  </div>
</div>

Practical Examples

Article Title

This is the first paragraph of content that explains something important about the topic at hand.

This is the next section of content that provides additional details and context.

Card Header

Card content goes here with appropriate spacing.

<div class="space-y-6">
  <article class="prose">
    <h3 class="title-3-semibold">Article Title</h3>
    <p class="text-gray-600">
      This is the first paragraph of content that explains something important about the topic at
      hand.
    </p>
    <div class="divider text">
      <span>Continue Reading</span>
    </div>
    <p class="text-gray-600">
      This is the next section of content that provides additional details and context.
    </p>
  </article>

  <div class="divider section ornament"></div>

  <form class="stack">
    <div>
      <label class="block subhead-semibold mb-1">Personal Information</label>
      <input type="text" placeholder="Full Name" class="input w-full" />
    </div>
    <div class="divider text left">
      <span>Contact Details</span>
    </div>
    <div>
      <input type="email" placeholder="Email Address" class="input w-full" />
    </div>
  </form>

  <div class="divider"></div>

  <div class="card p-4 border rounded-lg">
    <h4 class="font-semibold">Card Header</h4>
    <div class="divider compact"></div>
    <p class="text-gray-600 subhead">Card content goes here with appropriate spacing.</p>
  </div>
</div>

<div class="space-y-6">
  <article class="prose">
    <h3 class="title-3-semibold">Article Title</h3>
    <p class="text-gray-600">
      This is the first paragraph of content that explains something important about the topic at
      hand.
    </p>
    <div class="divider text">
      <span>Continue Reading</span>
    </div>
    <p class="text-gray-600">
      This is the next section of content that provides additional details and context.
    </p>
  </article>

<form class="stack">
    <div>
      <label class="block subhead-semibold mb-1">Personal Information</label>
      <input type="text" placeholder="Full Name" class="input w-full" />
    </div>
    <div class="divider text left">
      <span>Contact Details</span>
    </div>
    <div>
      <input type="email" placeholder="Email Address" class="input w-full" />
    </div>
  </form>

<div class="card p-4 border rounded-lg">
    <h4 class="font-semibold">Card Header</h4>
    <div class="divider compact"></div>
    <p class="text-gray-600 subhead">Card content goes here with appropriate spacing.</p>
  </div>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`divider`	Required base class	Renders a horizontal line by default
Line Style	`solid`	Solid line	Default; class is optional
	`dashed`	Dashed line	—
	`dotted`	Dotted line	—
	`double`	Double line	Auto-bumps thickness to 4px
Thickness	(default)	1px line	Also reachable via `thin`
	`thick`	2px line	Applies to plain, text, icon, vertical, fade, gradient, section
	`heavy`	4px line	Same coverage as `thick`
Content	`text`	Text in the middle of the line	Requires a `<span>` child
	`icon`	Icon in the middle of the line	Requires an `<i class="icon ...">` child
	`section`	Centered short line	Pair with `ornament` for the diamond mark
Alignment	(default)	Center	Applies to `text` / `icon` dividers
	`left`	Left aligned label	—
	`right`	Right aligned label	—
Spacing	`compact`	my-2 — tight	Tight vertical rhythm
	(default)	my-6 — standard	No class needed
	`relaxed`	my-8	—
	`loose`	my-12 — maximum	—
Effect	`fade`	Fade-to-transparent gradient	Background-driven; ignores `solid` / `dashed`
	`gradient`	Blue → purple → pink gradient	Same as `fade` but colored
	`animated`	Shimmer overlay	Sits on top of the static line
	`ornament`	Diamond mark	Modifier for `section` only
Orientation	`vertical`	Vertical divider	Inline-flex; use inside a flex row
Color (Semantic)	(default)	gray-200 line, gray-600 content	No class needed
	`primary`	blue-500 / blue-600	—
	`positive`	green-500 / green-600	—
	`negative`	red-500 / red-600	—
	`warning`	yellow-500 / yellow-600	—
	`info`	blue-500 / blue-600	Alias of `primary` for messaging contexts
Color (Palette)	`red`	red-500 line	Decorative — prefer semantic adjectives above when intent is clear
	`blue`	blue-500 line
	`green`	green-500 line
	`purple`	purple-500 line
	`pink`	pink-500 line
	`gray` / `grey`	gray-400 line
State	`inverted`	Light line on dark background	Use over dark surfaces
State	`hidden`	Reserves space, no visible line	Spacer-style usage