Content3 min read•Audience: Designers
Divider Block (mj-divider)
Add visual separation between content sections with customizable lines, borders, and margins.
Key Takeaways
- Create clean visual hierarchy between editorial sections, articles, or invoice items.
- Customize border color, thickness (e.g., 1px, 2px), and style (solid, dashed, dotted).
- Adjust horizontal width percentage (e.g., 100% full-width or 40% centered accent).
- Control top and bottom padding around the divider line.
Configuring Dividers#
The Divider block (mj-divider) renders a semantic horizontal rule using table border properties:
- Border Style: Choose between Solid, Dashed, or Dotted.
- Border Width: Line thickness in pixels (typically
1pxor2px). - Border Color: Subtle neutral hex colors such as
#e2e8f0(light mode) or#334155(dark mode) are recommended. - Divider Width: By default
100%, or reduce to60pxto create a modern accent line beneath a section heading. - Padding: Controls the vertical breathing room above and below the line.
Design Tips for Clean Dividers#
Dividers should guide the eye without overwhelming the content:
- Low Contrast Lines: Use subtle border colors (
#e2e8f0or#f1f5f9) rather than dark black or grey borders. - Accent Rules: Pair a 60px centered accent divider colored with your primary brand hue directly under an H1 or H2 title.
- Zero Padding Resets: If you want a hairline boundary between two colored sections, set divider padding to
0px.
Frequently Asked Questions
How do I create a vertical divider between two columns?
Instead of mj-divider, apply a border-right property (e.g., 1px solid #e2e8f0) to the left column in the column properties inspector.
Why is there space above and below my divider?
The default padding on mj-divider is 10px 25px. Set vertical padding to 0px in the properties inspector if you want a tight separation.