Skip to main content

Search

Spacer component Breakdown

Overview

The dd-spacer component provides a simple way to add vertical spacing or dividers between elements, helping control layout flow without custom CSS. It supports predefined sizes and an optional divider line, making it a utility for consistent padding in sections, grids, or between components.

This component is ideal for adding breathing room in content-heavy areas or separating blocks visually. In WordPress, configure it via an ACF select field for size and divider options within flexible content. In Drupal, use a Paragraph type with a select field for size and a boolean for divider, rendering as a standalone element.

Basic Usage

Use a div with class dd-spacer and a size modifier like -xl. Add -divider for a horizontal line.

<div class="dd-spacer -xl -divider"></div>

Place it between elements or sections for spacing; it's full-width by default and can be nested in grids or sections.

Preview

Code

<div class="dd-spacer -sm"></div>
<div class="dd-spacer -md -divider"></div>
<div class="dd-spacer -lg"></div>
<div class="dd-spacer -xl"></div>
<div class="dd-spacer -xxl"></div>
<div class="dd-spacer -xxxl"></div>

CSS Modifiers (from _dd_spacer.scss)

The SCSS file defines base styles for the spacer as a block element with relative positioning and 100% width. Key modifiers include:

  • -sm: Adds 0.5rem top/bottom margin.
  • -md: Adds 1rem top/bottom margin.
  • -lg: Adds 1.5rem top/bottom margin.
  • -xl: Adds 2rem top/bottom margin.
  • -xxl: Adds 2.5rem top/bottom margin.
  • -xxxl: Adds 3rem top/bottom margin.
  • -divider: Adds a 1px solid border (colored via primary variable).

For ACF/Paragraphs integration, use select fields to apply size and divider classes dynamically.

Framework files

  • source/scss/components/_dd_spacer.scss (styles)

Accessibility and Best Practices

Avoid overusing spacers; prefer semantic spacing via CSS margins/padding. For dividers, ensure they don't create empty landmarks. Use aria-hidden if decorative. Test for consistent flow in screen readers. In CMS, limit options to predefined sizes for design consistency and prevent abuse.