Divider Element

The Divider element provides a simple way to separate content blocks visually using lines that adapt to your layout's orientation and theme.

Live Preview

Divider Preview

Specifications

Dividers can be customized to fit any structural requirement:

  • Orientation: Choose between Horizontal or Vertical modes to fit your layout.
  • Variant Styles: Define the line's character using Solid, Dashed, or Dotted patterns.
  • Sizing: Control the line thickness with SM, MD, or LG presets.
  • Coloring: Set custom hex colors or rely on the theme’s default border color.
  • Spacing: Adjust the vertical or horizontal gap between surrounding elements.

AI Guidance

How to prompt for Dividers:

  • Add a horizontal dashed divider with blue color.
  • Create a subtle solid line between two text sections.
  • Insert a thick dotted divider to separate the main features.