Hero Component Breakdown

Overview

The dd-hero component provides a prominent introductory section, typically at the top of a page, featuring a large background image with overlaid content like titles, body text, and calls-to-action. It's designed for engaging headers with responsive backgrounds and flexible content alignment.

This component is ideal for homepages, landing pages, or section intros. In WordPress, configure it via ACF fields for hero image (with srcset), title, body, links, and aria-label. In Drupal, use a Paragraph type with media field for image, text fields for content, and optional link fields, rendering responsive attributes dynamically.

Basic Usage

Use a section with class dd-hero and aria-label for accessibility. Include an image with srcset for responsiveness, and content with title, body, and optional links.

Preview

Code

<section class="dd-hero" id="dd-0001" aria-label="Introduction">
  <div class="dd-hero__image">
    <picture>
      <source srcset="
      https://dummyimage.com/720x405/000000/fff 320w,
      https://dummyimage.com/1024x505/000000/fff 720w,
      https://dummyimage.com/1920x1080/000000/fff 1440w"
      sizes="(max-width: 1440px) 100vw, 1440px">
      <img src="https://dummyimage.com/1920x1080/000000/fff" class="dd-img" alt="Hero image description" />
    </picture>
  </div>
  <style>
    .dd-hero__image {
      background-image: url('https://dummyimage.com/720x405/000000/fff');
    }
    @media only screen and (min-width: 64em) {
      .dd-hero__image {
        background-image: url('https://dummyimage.com/1920x1080/000000/fff');
      }
    }
  </style>
  <div class="dd-hero__content dd-g" data-sal="fade">
    <div class="dd-hero__copy dd-u-1-1 dd-u-lg-12-24">
      <div class="dd-hero__title">
        <h1>Hero Title</h1>
      </div>
      <div class="dd-hero__subtitle">
        <strong>Subtitle</strong>
      </div>
      <div class="dd-hero__body">
        <p>Hero Body Copy</p>
        <div class="dd-hero__links dd-g">
          <div class="dd-hero__link">
            <a href="#" class="dd-button -primary">Hero Link 1</a>
          </div>
          <div class="dd-hero__link">
            <a href="#" class="dd-button -ghost">Hero Link 2</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Nest within a full-width section for layout; use CSS for background positioning on larger screens.

CSS Modifiers (from _dd_hero.scss)

The SCSS file defines base styles for the hero, including absolute positioning for images on desktop, flexible content alignment, and responsive heights. Key modifiers include:

• -left: Aligns content to the left.
• -center: Centers content (default for mobile).
• -right: Aligns content to the right.
• -overlay-light: Adds a semi-transparent overlay for better text readability on images.
• -overlay-dark: Adds a darker semi-transparent overlay for better text readability on images.
• Utility classes for alignment. -x-center -y-center
• SAL data attributes for custom animations. data-sal="slide-up"

For ACF/Paragraphs integration, map image fields to generate srcset and classes dynamically.

Framework files

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

Accessibility and Best Practices

Use aria-label for the section. Provide descriptive alt text for images. Ensure text contrasts with backgrounds. Test keyboard focus on links. In CMS, enforce alt text and aria requirements, and validate for mobile stacking order.