Divider

Material Design 3 divider component for separating content

Divider

Dividers separate content into clear groups. Place any content inside .divider and it will appear centered between two line segments.

Basic Usage

Plain Divider

Divider with Text

OR

Divider with Icon

✦

Content Positioning

Content Position

Section Title
Centered
End

Orientation

Horizontal (Default)

Horizontal Divider

Content above
OR
Content below

Vertical

Vertical Divider

Left
Right

Vertical with Text

Section A
OR
Section B

Styles

Solid (Default)

Solid Divider

Solid

Dashed

Dashed Divider

Dashed

Dotted

Dotted Divider

Dotted

Thickness

Divider Thickness

Thin
Default
Medium
Thick

Colors

Colored Dividers

Primary
Secondary
Tertiary
Success
Warning
Error

Gradient

Gradient Divider

OR

Spacing

Divider Spacing

Compact
Default
Comfortable
Spacious

Inset

For list items or indented layouts:

Inset Dividers

API Reference

ClassDescription
.dividerBase divider; content inside appears between lines
.divider-verticalVertical orientation
.divider-startContent aligned to start
.divider-endContent aligned to end
.divider-thin1px line thickness
.divider-medium2px line thickness
.divider-thick4px line thickness
.divider-dashedDashed line style
.divider-dottedDotted line style
.divider-gradientFades out at edges
.divider-primaryPrimary color lines
.divider-secondarySecondary color lines
.divider-tertiaryTertiary color lines
.divider-infoInfo color lines
.divider-successSuccess color lines
.divider-warningWarning color lines
.divider-errorError color lines
.divider-compactReduced spacing and gap
.divider-comfortableIncreased margin
.divider-spaciousMaximum margin and gap
.divider-insetLeft-indented
.divider-inset-bothBoth sides indented
  • Card - Content containers
  • List - List items

See Also