Divider Element
The Divider element creates horizontal lines to separate content sections. Use dividers to improve visual hierarchy and organize your popup layout.
Overview
| Property | Value |
|---|---|
| Element Type | divider |
| Can Contain Children | No |
| Purpose | Visual separation |
Use Cases
- Separating popup sections
- Breaking up long content
- Visual hierarchy
- Decorative accents
- Horizontal rules
Style Settings
Divider Style
Choose the line style:
| Style | Description |
|---|---|
| Solid | Continuous line |
| Dashed | Dashed line |
| Dotted | Dotted line |
| Double | Double line |
Width
Set the divider width:
| Option | Description |
|---|---|
| Full | 100% of container |
| Auto | Centered with margins |
| Fixed | Specific pixel width |
| Percentage | Percentage of container |
Example:
Width: 80%
Thickness
Line thickness (height):
| Value | Description |
|---|---|
| 1px | Thin/subtle |
| 2px | Standard |
| 3-4px | Medium |
| 5px+ | Bold |
Color
Set the line color:
Color: #e2e8f0
Common choices:
- Light gray for subtle separation
- Brand color for accent
- Gradient for decorative effect
Pattern Settings
XBuilder includes decorative divider patterns:
Pattern Types
| Pattern | Description |
|---|---|
| None | Simple line |
| Zigzag | Zigzag pattern |
| Wave | Wavy line |
| Dots | Row of dots |
| Arrows | Arrow pattern |
| Tribal | Decorative tribal |
Pattern Size
Adjust pattern scale.
Pattern Repeat
Control pattern repetition.
Layout Settings
Alignment
Position the divider:
| Option | Description |
|---|---|
| Left | Align to left |
| Center | Center horizontally |
| Right | Align to right |
Margin
Space around the divider:
Top: 16px
Bottom: 16px
Typical vertical spacing: 12-24px
Padding
Space inside divider container (rarely needed).
Advanced Styling
Gradient Divider
Create a gradient line using custom CSS:
background: linear-gradient(90deg, transparent, #4F46E5, transparent);
Fade Effect
Fade the divider at edges:
background: linear-gradient(90deg,
transparent 0%,
#e2e8f0 20%,
#e2e8f0 80%,
transparent 100%
);
Icon Divider
Place an icon in the center using CSS or a Section with:
- Left: Divider
- Center: Icon
- Right: Divider
Advanced Settings
HTML ID
Custom ID for CSS targeting.
CSS Classes
Add custom classes.
Device Visibility
Show/hide divider per device.
Examples
Subtle Separator
Settings:
- Style: Solid
- Width: 100%
- Thickness: 1px
- Color: #f1f5f9
- Margin: 16px 0
Bold Section Divider
Settings:
- Style: Solid
- Width: 60px
- Thickness: 4px
- Color: #4F46E5
- Alignment: Center
- Margin: 24px auto
Dashed Divider
Settings:
- Style: Dashed
- Width: 100%
- Thickness: 2px
- Color: #cbd5e1
- Margin: 20px 0
Decorative Wave
Settings:
- Pattern: Wave
- Width: 100%
- Color: #4F46E5
- Margin: 24px 0
When to Use Dividers
Good uses:
- Between distinct content sections
- After headings (subtle)
- Before CTAs
- In long-form content
Avoid:
- Between every element (creates clutter)
- When spacing alone is sufficient
- In minimal designs (use whitespace instead)
Alternatives to Dividers
Sometimes spacing or styling changes work better:
| Alternative | Description |
|---|---|
| Whitespace | Just increase margins |
| Background change | Different section backgrounds |
| Border | Bottom border on elements |
| Shadow | Subtle shadow separation |
Best Practices
- Be consistent — Use same divider style throughout
- Don't overuse — Dividers should aid, not clutter
- Match the design — Subtle for minimal, bold for dramatic
- Consider spacing — Add adequate margin
- Mobile check — Verify appearance on small screens