Divider

A thin visual rule used to separate content sections or items. Supports horizontal and vertical orientations.

Horizontal (default)

A full-width 1 px horizontal rule. The host element is display:block and fills its container width.

<diwa-divider orientation="horizontal" theme="dark"></diwa-divider>

Vertical

A 1 px vertical rule that stretches to the height of its flex parent. The parent below uses display:flex with a fixed height.

Section A

Section B

Section C

<div style="display:flex;align-items:stretch;gap:1.5rem;height:5rem;">
  <span>Section A</span>
  <diwa-divider orientation="vertical"></diwa-divider>
  <span>Section B</span>
  <diwa-divider orientation="vertical"></diwa-divider>
  <span>Section C</span>
</div>

Sectioned content

Horizontal dividers separating distinct content blocks — a common pattern for article sections, settings panels, and cards.

Account details

Manage your personal information and preferences.

Notifications

Configure when and how you receive alerts.

Privacy & security

Control your data and connected applications.

<div style="display:flex;flex-direction:column;gap:1rem;">
  <div>
    <p><strong>Account details</strong></p>
    <p>Manage your personal information and preferences.</p>
  </div>
  <diwa-divider></diwa-divider>
  <div>
    <p><strong>Notifications</strong></p>
    <p>Configure when and how you receive alerts.</p>
  </div>
  <diwa-divider></diwa-divider>
  <div>
    <p><strong>Privacy &amp; security</strong></p>
    <p>Control your data and connected applications.</p>
  </div>
</div>

Navigation bar

Vertical dividers between navigation items in a horizontal toolbar.

<nav style="display:flex;align-items:stretch;height:3rem;padding:0 1rem;">
  <button>Overview</button>
  <diwa-divider orientation="vertical" style="margin:8px 0"></diwa-divider>
  <button>Analytics</button>
  <diwa-divider orientation="vertical" style="margin:8px 0"></diwa-divider>
  <button>Reports</button>
  <diwa-divider orientation="vertical" style="margin:8px 0"></diwa-divider>
  <button>Settings</button>
</nav>

Light theme

Per-component theme override — sets data-theme="light" on the host element.

<diwa-divider orientation="horizontal" theme="light"></diwa-divider>