Skip to main content

Search

Banner Component Breakdown

Overview

The dd-banner component provides a full-width banner image with customizable background positioning. It's designed for hero sections, promotional banners, or visual breaks, supporting responsive images and inline styles for background.

This component is ideal for landing pages or section dividers. In WordPress, configure it via ACF fields for image upload, alt text, and position modifier. In Drupal, use a Paragraph type with image field and select list for background position, rendering the style attribute dynamically.

Basic Usage

Use a div with class dd-banner and data-sal for animations. Set background-image via inline style, with an img element for foreground or fallback, using srcset for responsiveness.

Preview

Banner image description

Code

<div class="dd-banner" data-sal="fade" style="background-image: url(https://dummyimage.com/1440x600/000/fff);">
  <div class="dd-banner__image">
  <img
    sizes="(max-width: 1024px) 100vw 1024px"
    srcset="
      https://dummyimage.com/720x400/000/fff 720w
      https://dummyimage.com/1440x600/000/fff 1024w"
    src="https://dummyimage.com/1440x600/000/fff" class="dd-img" alt="Banner image description" />
  </div>
</div>

Add media queries in <style> for larger backgrounds. For overlays or text, nest content inside, as seen in header examples.

CSS Modifiers (from _dd_banner.scss)

The SCSS file defines base styles for the banner, including full-width, background sizing (cover/contain), and positioning utilities. Key modifiers include:

  • -bg-top-left: Positions background at top-left.
  • -bg-top-center: Positions at top-center.
  • -bg-top-right: Positions at top-right.
  • -bg-center-left: Positions at center-left.
  • -bg-center-center: Positions at center-center (default if none specified).
  • -bg-center-right: Positions at center-right.
  • -bg-bottom-left: Positions at bottom-left.
  • -bg-bottom-center: Positions at bottom-center.
  • -bg-bottom-right: Positions at bottom-right.
  • SAL data attributes for custom animations. data-sal="slide-up"

Framework files

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

Accessibility and Best Practices

Provide descriptive alt text for images. If text overlays, ensure contrast ratios meet WCAG. Use aria-label for decorative banners. Test for keyboard focus if interactive. In CMS, enforce alt text requirements and validate image formats for responsiveness.