← Back to Documentation

Spacers and Dividers

Spacers and dividers help organize your content with breathing room and visual breaks. This guide covers when and how to use these layout tools.

Spacers

What is a Spacer?

A spacer is an invisible block that creates vertical space between elements. Use spacers to:

  • Add breathing room between sections
  • Create consistent vertical rhythm
  • Separate content groups
  • Control page flow

Adding a Spacer

  1. Open the block palette
  2. Select Spacer
  3. Click to place between elements
  4. Adjust height as needed

Spacer Properties

| Property | Description | |----------|-------------| | Height | Vertical space in pixels | | Responsive | Different heights per breakpoint | | Visibility | Show/hide on different devices |

Common Spacer Heights

| Height | Use Case | |--------|----------| | 16-24px | Between related items | | 32-48px | Between paragraphs | | 64-96px | Between sections | | 120px+ | Major content breaks |

Dividers

What is a Divider?

A divider is a horizontal line that visually separates content sections. Use dividers to:

  • Clearly separate content sections
  • Add visual interest
  • Guide the reader's eye
  • Create content hierarchy

Adding a Divider

  1. Open the block palette
  2. Select Divider
  3. Click to place on your canvas
  4. Style as desired

Divider Properties

| Property | Description | |----------|-------------| | Width | Full width or specific pixels/percentage | | Thickness | Line height (1-10px typical) | | Style | Solid, dashed, dotted, double | | Color | Any color value | | Alignment | Left, center, right |

Styling Dividers

Line Styles

| Style | Appearance | Use For | |-------|------------|---------| | Solid | ─────── | Clean, modern | | Dashed | - - - - - | Subtle, playful | | Dotted | · · · · · | Delicate, minimal | | Double | ═══════ | Traditional, formal |

Width Options

  • Full width - Edge to edge
  • Percentage - 50%, 75% of container
  • Fixed - Specific pixel width
  • Content width - Match content above/below

Color Choices

Match your design:

  • Theme color - Use your accent color
  • Subtle gray - Light separator
  • Black - Strong division
  • Gradient - Modern effect (CSS)

Thickness

| Thickness | Effect | |-----------|--------| | 1px | Subtle, refined | | 2px | Standard | | 3-4px | Bold, noticeable | | 5px+ | Decorative accent |

Spacer vs. Divider

When to Use Spacers

  • Adding breathing room without visual marker
  • Layouts where divisions should be invisible
  • Precise spacing control
  • Between items within a section

When to Use Dividers

  • Clear visual separation is needed
  • Content topics change significantly
  • Design calls for visible lines
  • Traditional/formal layouts

Using Both Together

Combine for best effect:

[Content Section A]
    [Spacer: 48px]
    [Divider]
    [Spacer: 48px]
[Content Section B]

Responsive Spacing

Different Sizes Per Device

Adjust spacers for each breakpoint:

| Breakpoint | Typical Reduction | |------------|-------------------| | Desktop | Full size (e.g., 80px) | | Tablet | 75% (e.g., 60px) | | Mobile | 50% (e.g., 40px) |

Setting Responsive Values

  1. Select the spacer
  2. Click responsive icon
  3. Set value for each breakpoint
  4. Preview on each device

Hiding on Mobile

Sometimes remove spacing on small screens:

  1. Select spacer
  2. Enable responsive settings
  3. Set mobile visibility to hidden

Best Practices

Consistent Spacing

Use a spacing scale:

  • Base unit: 8px
  • Scale: 8, 16, 24, 32, 48, 64, 96

This creates visual harmony.

Rhythm and Flow

Create vertical rhythm:

  • Similar spacing between similar elements
  • Larger gaps for major sections
  • Smaller gaps for related items

Don't Overuse Dividers

Too many dividers:

  • Clutter the page
  • Reduce impact
  • Make content feel disconnected

Use sparingly for maximum effect.

Advanced Techniques

Decorative Dividers

Create custom divider styles:

Centered Short Line:

  • Width: 50px
  • Alignment: Center
  • Thickness: 3px
  • Color: Accent color

Gradient Fade:

  • Use custom CSS
  • Fade from transparent to color

Vertical Spacing Rhythm

Create a system:

$space-xs: 8px;   // Tiny gaps
$space-sm: 16px;  // Small gaps
$space-md: 32px;  // Medium gaps
$space-lg: 64px;  // Large gaps
$space-xl: 96px;  // Section breaks

Section Breaks

For major content divisions:

  1. Add 64-96px spacer
  2. Optional: Add subtle divider
  3. Add another spacer
  4. Continue with new section

Common Patterns

Article Sections

Between article sections:

  • Spacer: 48px
  • Divider: Light gray, 50% width
  • Spacer: 48px

Footer Separation

Above footer:

  • Spacer: 64px
  • Divider: Full width, solid
  • No spacer before footer (footer has internal padding)

Card Layouts

Between card rows:

  • Spacer: 24-32px
  • No divider needed (cards provide visual separation)

Troubleshooting

Spacing looks different on mobile

  • Check responsive settings
  • May need smaller values
  • Elements may stack differently

Divider not visible

  • Check color contrast
  • Verify thickness is set
  • Ensure not hidden by other elements

Inconsistent spacing

  • Use spacer blocks, not block margins
  • Set consistent values
  • Consider using a spacing scale

Tips

  1. Plan your spacing - Decide on a scale before building
  2. Use spacers over margins - More control and visibility
  3. Test responsively - Spacing needs differ by device
  4. Less is more - Start minimal, add space as needed
  5. Dividers are optional - Whitespace often sufficient

Next Steps

Spacers and Dividers - Salon Docs