Alternating Content Component Breakdown

Overview

The dd-alternating component provides a layout for alternating content blocks, typically featuring an image on one side and text on the other, which switches sides for each subsequent item. This creates a visually engaging zigzag pattern, ideal for showcasing features, benefits, or narrative sections.

This component is great for pages like "About Us," product features, or case studies. In WordPress, configure it via ACF repeater fields for alternating items (e.g., image, title, body, links). In Drupal, use a Paragraph type with fields for image and copy, rendered in a loop with alternating logic.

Basic Usage

Wrap items in a container with class dd-alternating and role="region" for accessibility. Each item contains a grid with image and copy columns that stack on mobile and side-by-side on larger screens. Use SAL attributes for fade animations.

Preview

Code

<div class="dd-alternating" role="region">
  <div class="dd-alternating__items dd-g">
    <div class="dd-alternating__item dd-u-1-1">
      <div class="dd-alternating__content dd-g">
        <div
          class="dd-alternating__image dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24"
          data-sal="slide-up"
        >
          <img
            src="https://dummyimage.com/600x400/000/fff"
            class="dd-img"
            alt=""
          />
        </div>
        <div
          class="dd-alternating__copy l-box dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24"
          data-sal="slide-up"
        >
          <div class="dd-alternating__title">
            <h2>Alternating title</h2>
          </div>
          <div class="dd-alternating__body">
            <p>Alternating body copy</p>
            <div class="dd-alternating__links">
              <div class="dd-alternating__link">
                <a href="#" class="dd-button -primary">Alternating Link 1</a>
              </div>
              <div class="dd-alternating__link">
                <a href="#" class="dd-button -ghost">Alternating Link 2</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dd-alternating__item dd-u-1-1">
      <div class="dd-alternating__content dd-g">
        <div
          class="dd-alternating__image dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24"
          data-sal="slide-up"
        >
          <img
            src="https://dummyimage.com/600x400/000/fff"
            class="dd-img"
            alt=""
          />
        </div>
        <div
          class="dd-alternating__copy l-box dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-12-24"
          data-sal="slide-up"
        >
          <div class="dd-alternating__title">
            <h2>Alternating title</h2>
          </div>
          <div class="dd-alternating__body">
            <p>Alternating body copy</p>
            <div class="dd-alternating__links">
              <div class="dd-alternating__link">
                <a href="#" class="dd-button -primary">Alternating Link 1</a>
              </div>
              <div class="dd-alternating__link">
                <a href="#" class="dd-button -ghost">Alternating Link 2</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The framework uses CSS :nth-child(odd/even) to alternate image/copy positions automatically.

CSS Modifiers (from _dd_alternating.scss)

The SCSS file defines base styles for the alternating layout, including responsive grid, spacing, and integration with SAL for animations. Key modifiers include:

• -reverse: Reverses the default alternating direction (e.g., starts with copy on left).
• -no-alternate: Disables alternating, keeping all items in the same order (image left, copy right).
• Utility classes for alignment. -x-center -y-center
• SAL data attributes for custom animations. data-sal="slide-up"

For ACF/Paragraphs integration, use repeater sub-fields to generate items dynamically, with optional fields for custom modifiers.

Framework files

• source/js/vendors/sal.js (animations)
• source/scss/components/_dd_alternating.scss (styles)

Accessibility and Best Practices

Use descriptive alt text for images. Ensure copy uses semantic headings. The role="region" helps screen readers identify the section. Test keyboard navigation and color contrast. In CMS, validate image uploads for alt text requirements.