Separator

Visual divider component to separate content sections with 6% opacity of primary text color

Orientations

Horizontal
1px
orientation="horizontal"
Vertical
40px
orientation="vertical"

Content Divider

Separate content sections

Props:
{ orientation: "horizontal" }

Section One

First section content goes here

Section Two

Second section content goes here

Menu Divider

Separate menu items

Props:
{ orientation: "horizontal" }
Profile
Settings
Logout

List Separator

Between list items

Props:
{ orientation: "horizontal" }
John Doe
Software Engineer
Jane Smith
Product Designer
Bob Johnson
Marketing Manager

Sidebar Layout

Vertical separator in layout

Props:
{ orientation: "vertical" }
Main Content
Primary content area with main information
Sidebar
Additional info

Form Sections

Divide form groups

Props:
{ orientation: "horizontal" }

Card Footer

Separate card sections

Props:
{ orientation: "horizontal" }

Card Title

Main card content with detailed information

Toolbar Groups

Separate toolbar sections

Props:
{ orientation: "vertical" }

Stats Grid

Between stat items

Props:
{ orientation: "vertical" }
1.2K
Followers
847
Following
94
Posts

Timeline Divider

Visual break in timeline

Props:
{ orientation: "horizontal" }
10:30
Morning meeting
12:00
Lunch break
14:00
Project review

Price Table

Column dividers in table

Props:
{ orientation: "vertical" }
Basic
$9
/month
Pro
$29
/month
Enterprise
$99
/month

Modal Header

Separate modal sections

Props:
{ orientation: "horizontal" }

Modal Title

Modal body content with detailed information and form elements

Navigation Items

Inline menu divider

Props:
{ orientation: "vertical" }

Usage Guidelines

  • •Separator uses 6% opacity of var(--color-font-primary) for subtle division
  • •Default orientation is horizontal, use vertical for column layouts
  • •Horizontal separators are 1px tall and full width by default
  • •Vertical separators are 1px wide and adapt to parent height
  • •Use decorative= for semantic separators (accessibility)
  • •Customize with className to adjust margins, height, or opacity
  • •Color automatically adapts to light/dark theme via CSS variables