Milestones Component Breakdown

Overview

The dd-milestones component provides a grid of milestone or statistic blocks, featuring animated percentage counters, titles, subtitles, copy, and optional links. It's designed for showcasing achievements, stats, or key metrics with visual animations for engagement.

This component is ideal for about pages, dashboards, or impact reports. In WordPress, configure it via ACF repeater fields for milestone items (e.g., number, title, subtitle, copy, link). In Drupal, use a Paragraph type with fields for each milestone element, rendered in a grid loop.

Basic Usage

Wrap milestones in a div with class dd-milestones. Use a grid for items, each with a body containing the percentage (with data-number), title, subtitle, copy, and link. Add SAL for fade animations.

Preview

Code

<div class="dd-milestones">
  <div class="dd-milestones__content">
    <div class="dd-milestones__items dd-g"><!-- milestones loop inside items -->

      <div class="dd-milestones__item dd-u-12-24 dd-u-sm-12-24 dd-u-md-12-24 dd-u-lg-8-24 l-box" data-sal="slide-up">
        <div class="dd-milestones__body l-box">
          <div class="dd-milestones__percentage" data-number="70"><span class="number">70</span>%</div>
          <div>
            <div class="dd-milestones__title"><h2>Title</h2></div>
            <div class="dd-milestones__subtitle"><strong>Subtitle</strong></div>
            <div class="dd-milestones__copy">Lorem ipsum dolor sit amet</div>
            <div class="dd-milestones__link"><a href="#" class="dd-button">Link</a></div>
          </div>
        </div>
      </div>

      <div class="dd-milestones__item dd-u-12-24 dd-u-sm-12-24 dd-u-md-12-24 dd-u-lg-8-24 l-box" data-sal="slide-up">
        <div class="dd-milestones__body l-box">
          <div class="dd-milestones__percentage" data-number="80"><span class="number">70</span>%</div>
          <div>
            <div class="dd-milestones__title"><h2>Title</h2></div>
            <div class="dd-milestones__subtitle"><strong>Subtitle</strong></div>
            <div class="dd-milestones__copy">Lorem ipsum dolor sit amet</div>
            <div class="dd-milestones__link"><a href="#" class="dd-button">Link</a></div>
          </div>
        </div>
      </div>

      <div class="dd-milestones__item dd-u-12-24 dd-u-sm-12-24 dd-u-md-12-24 dd-u-lg-8-24 l-box" data-sal="slide-up">
        <div class="dd-milestones__body l-box">
          <div class="dd-milestones__percentage" data-number="90"><span class="number">70</span>%</div>
          <div>
            <div class="dd-milestones__title"><h2>Title</h2></div>
            <div class="dd-milestones__subtitle"><strong>Subtitle</strong></div>
            <div class="dd-milestones__copy">Lorem ipsum dolor sit amet</div>
            <div class="dd-milestones__link"><a href="#" class="dd-button">Link</a></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

The data-number drives the animation; grid classes control responsive columns (e.g., 3-column on large screens).

CSS Modifiers (from _dd_milestones.scss)

The SCSS file defines base styles for milestones, including grid layout, shadows on bodies, and animation classes for visibility. Key modifiers include:

• -horizontal: Adjusts for horizontal item flow if needed.
• Utility classes like SAL data attributes (e.g., data-sal="slide-up") for custom entrances, or grid utilities for column adjustments.

Associated JavaScript (from dd_milestones.js)

The component includes a JS file for animating the percentage counters, triggered on window load (or via dd_animate.js) to increment numbers from 0 to data-number value.

For ACF/Paragraphs integration, map number fields to data-number attributes dynamically.

Framework files

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

Accessibility and Best Practices

Use aria-live for dynamic counter updates if needed. Ensure colors contrast for percentages. Add units or labels for clarity. Test screen reader announcements of final values. In CMS, validate number fields as integers and provide fallbacks for no-JS (show final value statically).