Divider
Material Design 3 divider component for separating content
Divider
Dividers separate content into clear groups. @duskmoon-dev/core provides horizontal and vertical dividers with multiple style options.
Basic Usage
Basic Divider
html
<div class="divider"></div>Orientation
Horizontal (Default)
Horizontal Divider
Content above
Content below
html
<div>Content above</div>
<div class="divider"></div>
<div>Content below</div>Vertical
Vertical Divider
Left
Right
html
<div class="flex items-center">
<span>Left</span>
<div class="divider divider-vertical"></div>
<span>Right</span>
</div>Styles
Solid (Default)
Solid Divider
html
<div class="divider divider-solid"></div>Dashed
Dashed Divider
html
<div class="divider divider-dashed"></div>Dotted
Dotted Divider
html
<div class="divider divider-dotted"></div>Thickness
Divider Thickness
html
<div class="divider divider-thin"></div>
<div class="divider divider-medium"></div>
<div class="divider divider-thick"></div>Colors
Colored Dividers
html
<div class="divider divider-primary"></div>
<div class="divider divider-secondary"></div>
<div class="divider divider-tertiary"></div>Gradients
Gradient Dividers
html
<div class="divider divider-gradient-primary"></div>
<div class="divider divider-gradient-secondary"></div>
<div class="divider divider-gradient-tertiary"></div>Spacing
Divider Spacing
html
<div class="divider divider-compact"></div>
<div class="divider"></div>
<div class="divider divider-comfortable"></div>
<div class="divider divider-spacious"></div>With Text
Divider with Text
OR
Section Title
End
html
<!-- Centered text -->
<div class="divider-text">OR</div>
<!-- Left-aligned text -->
<div class="divider-text-left">Section Title</div>
<!-- Right-aligned text -->
<div class="divider-text-right">End</div>Inset
For list items:
Inset Dividers
html
<div class="divider divider-inset"></div>
<div class="divider divider-inset-both"></div>API Reference
| Class | Description |
|---|---|
.divider | Base divider (horizontal) |
.divider-vertical | Vertical divider |
.divider-solid | Solid style (default) |
.divider-dashed | Dashed style |
.divider-dotted | Dotted style |
.divider-thin | Thin (1px) |
.divider-medium | Medium (2px) |
.divider-thick | Thick (4px) |
.divider-primary | Primary color |
.divider-secondary | Secondary color |
.divider-tertiary | Tertiary color |
.divider-gradient-primary | Primary gradient |
.divider-gradient-secondary | Secondary gradient |
.divider-gradient-tertiary | Tertiary gradient |
.divider-compact | Compact spacing |
.divider-comfortable | Comfortable spacing |
.divider-spacious | Spacious spacing |
.divider-text | Divider with centered text |
.divider-text-left | Divider with left text |
.divider-text-right | Divider with right text |
.divider-inset | Inset from left |
.divider-inset-both | Inset from both sides |