Overview
The Divider block creates visual breaks between sections. Use it to add rhythm to long pages and separate distinct content areas.
Fields
| Field | Description |
|---|---|
| Style | Space Only, Horizontal Line, Line with Text, or Line with Icon |
| Spacing Height | Small, Medium, Large, or Extra Large vertical padding |
| Content Width | Container width for the divider |
Line Options
These options appear when using line styles (not "Space Only"):
| Field | Description |
|---|---|
| Color | DaisyUI semantic colors: Default, Primary, Secondary, Accent, Neutral, Success, Warning, Info, Error |
| Content Position | Center, Start, or End (for text/icon variants) |
| Divider Text | Custom text to display (Line with Text style) |
| Icon | Heroicon to display (Line with Icon style) |
Style Examples
- Space Only: Invisible vertical spacing between sections
- Horizontal Line: Simple line with optional color
- Line with Text: Line interrupted by centered text (e.g., "OR", "Section 2")
- Line with Icon: Line interrupted by a centered icon
Color Options
Colors use DaisyUI's semantic color system, which automatically adapts to your site's theme:
| Color | Use Case |
|---|---|
| Default | Subtle, blends with content |
| Primary | Matches your brand's primary color |
| Secondary | Complementary accent |
| Accent | Eye-catching highlight |
| Neutral | Muted, professional look |
| Success | Positive/completion sections |
| Warning | Attention-grabbing |
| Info | Informational sections |
| Error | Important notices |