Section Component Breakdown

Overview

The dd-section component provides a foundational container for grouping content blocks on a page. It handles layout constraints, background colors (with alternation), padding, and responsive widths, serving as a wrapper for other components like titles, grids, and items.

This component is ideal for dividing pages into logical sections, such as intros, features, or footers. In WordPress, configure it via ACF flexible content or layouts for section types, with fields for full/contained, title, and inner items. In Drupal, use a Paragraph type as a section wrapper, nesting other paragraphs inside, with options for modifiers.

Basic Usage

Use a section with class dd-section for contained width or add -full for full-width. Include content with title and items in a grid. Backgrounds alternate automatically via CSS.

Preview

Code

<section class="dd-section -full-contained">
  <div class="dd-section__content">
    <div class="dd-section__title l-box">Section "contained" with max width set</div>
    <div class="dd-section__items dd-g">
      <div class="dd-section__item dd-u-1-1 dd-u-lg-8-24 l-box">
        <!-- component go here-->
        Section Item goes here. This item can be any of the other components.
      </div>
      <div class="dd-section__item dd-u-1-1 dd-u-lg-8-24 l-box">
        <!-- component go here-->
        Section Item goes here. This item can be any of the other components.
      </div>
      <div class="dd-section__item dd-u-1-1 dd-u-lg-8-24 l-box">
        <!-- component go here-->
        Section Item goes here. This item can be any of the other components.
      </div>
    </div>
  </div>
</section>

Nest other components inside __items for modular builds; use l-box for padding on items.

CSS Modifiers (from _dd_section.scss)

The SCSS file defines base styles for sections, including default padding, max-width, and alternating backgrounds via :nth-child. Key modifiers include:

• -full: Sets max-width to 100% for full-width sections (apply to both section and __content).
• -contained: Limits __content to a max-width (default behavior; explicit for overrides).
• -no-padding: Removes default padding for custom spacing.
• Utility classes for alignment. -x-center -y-center
• SAL data attributes for custom animations. data-sal="slide-up"

Framework files

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

For ACF/Paragraphs integration, use conditional fields to apply modifiers dynamically.

Accessibility and Best Practices

Use role="region" and aria-labelledby for titled sections. Ensure backgrounds provide sufficient contrast. Nest semantic elements inside. Test landmark navigation with screen readers. In CMS, make titles optional but encouraged for labeled regions.