Card Component Breakdown

Overview

The dd-card component provides a flexible card layout for displaying grouped content, such as features, products, or team members. It supports grids of cards with images, titles, subtitles, body text, and links, making it responsive and customizable.

This component is ideal for galleries, portfolios, or feature lists. In WordPress, configure it via ACF repeater fields for card items (e.g., image, title, subtitle, copy, link). In Drupal, use a Paragraph type with fields for each card element, rendered in a loop for multi-card displays.

Basic Usage

Wrap cards in a container with class dd-card. Use a grid for items, each with content structure. Add SAL for fade animations and lazy loading for images.

Preview

Code

<div class="dd-card">
  <div class="dd-card__items dd-g"><!-- cards loop inside items -->

    <div class="dd-card__item l-box dd-u-1-1 dd-u-md-12-24" data-sal="slide-up">
      <div class="dd-card__body dd-g">
        <div class="dd-card__image">
          <img src="https://dummyimage.com/500x500/000/fff" alt="Image description" class="dd-image" width="768" height="287" loading="lazy">
        </div>
        <div class="dd-card__copy l-box">
          <div class="dd-card__title">
            <h3>Card Title</h3>
          </div>
          <div class="dd-card__sub-title">
            <strong>Card Sub Title</strong>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="dd-card__links dd-g">
            <div class="dd-card__link">
              <a href="#" target="_self" class="dd-button -primary">Card Link <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M16 12L10 18V6L16 12Z"></path></svg></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dd-card__item l-box dd-u-1-1 dd-u-md-12-24" data-sal="slide-up">
      <div class="dd-card__body dd-g">
        <div class="dd-card__image">
          <img src="https://dummyimage.com/500x500/000/fff" alt="Image description" class="dd-image" width="768" height="287" loading="lazy">
        </div>
        <div class="dd-card__copy l-box">
          <div class="dd-card__title">
            <h3>Card Title</h3>
          </div>
          <div class="dd-card__sub-title">
            <strong>Card Sub Title</strong>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="dd-card__links dd-g">
            <div class="dd-card__link">
              <a href="#" target="_self" class="dd-button -primary">Card Link <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M16 12L10 18V6L16 12Z"></path></svg></a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<div class="dd-spacer -xxl"></div>

<div class="dd-card -horizontal">
  <div class="dd-card__items dd-g"><!-- cards loop inside items -->

    <div class="dd-card__item l-box dd-u-1-1" data-sal="slide-up">
      <div class="dd-card__body dd-g">
        <div class="dd-card__image">
          <img src="https://dummyimage.com/500x500/000/fff" alt="Image description" class="dd-image" width="768" height="287" loading="lazy">
        </div>
        <div class="dd-card__copy l-box">
          <div class="dd-card__title">
            <h3>Card Title</h3>
          </div>
          <div class="dd-card__sub-title">
            <strong>Card Sub Title</strong>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="dd-card__links dd-g">
            <div class="dd-card__link">
              <a href="#" target="_self" class="dd-button -primary">Card Link <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M16 12L10 18V6L16 12Z"></path></svg></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dd-card__item l-box dd-u-1-1" data-sal="slide-up">
      <div class="dd-card__body dd-g">
        <div class="dd-card__image">
          <img src="https://dummyimage.com/500x500/000/fff" alt="Image description" class="dd-image" width="768" height="287" loading="lazy">
        </div>
        <div class="dd-card__copy l-box">
          <div class="dd-card__title">
            <h3>Card Title</h3>
          </div>
          <div class="dd-card__sub-title">
            <strong>Card Sub Title</strong>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="dd-card__links dd-g">
            <div class="dd-card__link">
              <a href="#" target="_self" class="dd-button -primary">Card Link <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M16 12L10 18V6L16 12Z"></path></svg></a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Use grid classes like dd-u-md-12-24 for responsive columns (e.g., 2-column on medium screens).

CSS Modifiers (from _dd_card.scss)

The SCSS file defines base styles for cards, including borders, shadows, and responsive grids. Key modifiers include:

• -horizontal: Lays out card content horizontally (image left, copy right) instead of vertical.
• -no-image: Hides the image for text-only cards.
• 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_card.scss (styles)

For ACF/Paragraphs integration, use repeater fields to generate cards dynamically, with optional fields for modifiers.

Accessibility and Best Practices

Use alt text for images and semantic headings in titles. Ensure links are descriptive. Add role="list" to items for screen readers if in a grid. Test keyboard navigation and focus styles. In CMS, require alt text and validate content for completeness.