CTA Component Breakdown

Overview

The dd-cta component provides a prominent call-to-action section with a background image or video, overlaid content (title, body, links), and flexible positioning for the copy block. It's designed for conversions like sign-ups, downloads, or contact forms, with responsive overlays for readability.

This component is ideal for hero CTAs, mid-page promotions, or footers. In WordPress, configure it via ACF fields for background image, title, copy, links, and position select. In Drupal, use a Paragraph type with media field for background, text fields for content, and multi-value fields for links, rendering positioning via a select widget.

Basic Usage

Wrap the CTA in a div with class dd-cta. Include an image for background (hidden on desktop for CSS background), content overlay with title, body, and links. Use grid for link alignment.

Preview

Code

<div class="dd-cta -top-left">
  <div class="dd-cta__image">
    <picture>
      <source srcset="
        https://dummyimage.com/720x405/000000/fff 720w,
        https://dummyimage.com/1920x1080/000000/fff 1440w"
      sizes="(max-width: 1440px) 100vw, 1440px">
      <img src="/assets/imgs/cta-bg-sm.webp" class="dd-img" alt="CTA alt tag" />
    </picture>
  </div>
  <style>
    .dd-cta .dd-cta__image {
      background-image: url("https://dummyimage.com/720x405/000000/fff");
    }
    @media only screen and (min-width: 64em) {
      .dd-cta .dd-cta__image {
        background-image: url("https://dummyimage.com/1920x1080/000000/fff");
      }
    }
  </style>
  <div class="dd-cta__content dd-g" data-sal="slide-up" data-sal-duration="1000" data-sal-delay="0">
    <div class="dd-cta__copy dd-u-1-1 dd-u-md-12-24">
      <div class="dd-cta__title">
        <h2>CTA Title</h2>
      </div>
      <div class="dd-cta__subtitle">
        <strong>CTA Subtitle</strong>
      </div>
      <p>CTA body copy</p>
      <div class="dd-cta__links dd-g -x-center">
        <div class="dd-cta__link">
          <a href="#" class="dd-button -primary">CTA Link 1</a>
        </div>
        <div class="dd-cta__link">
          <a href="#" class="dd-button -ghost">CTA Link 2</a>
        </div>
      </div>
    </div>
  </div>
</div>

Set background via inline style or CSS class; use responsive image for mobile.

CSS Modifiers (from _dd_cta.scss)

The SCSS file defines base styles for the CTA, including cover backgrounds and content positioning. Key modifiers for .dd-cta include:

• -top-left: Positions copy at top-left of background.
• -top-center: Positions at top-center.
• -top-right: Positions at top-right.
• -center-left: Positions at center-left.
• -center-center: Positions at center-center (default).
• -center-right: Positions at center-right.
• -bottom-left: Positions at bottom-left.
• -bottom-center: Positions at bottom-center.
• -bottom-right: Positions at bottom-right.
• Utility classes for alignment. -x-center -y-center
• SAL data attributes for custom animations. data-sal="slide-up"

Framework files

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

For ACF/Paragraphs integration, map fields to generate inline styles and classes dynamically.

Accessibility and Best Practices

Ensure overlay text contrasts with background (use borders/opacity). Provide alt text for images if visible. Use semantic headings for titles. Test focus on links. In CMS, validate background images for required fields and enforce contrast checks if possible.