Alert Component Breakdown

Overview

The dd-alert component provides a flexible way to display notification messages, such as warnings, errors, successes, or informational alerts. It supports different severity levels with color-coded visuals for quick user recognition.

This component is ideal for form validation feedback, system messages, or user notifications. In WordPress, configure it via ACF fields for alert type, heading, and text. In Drupal, use a Paragraph type with select fields for type and text areas for content, allowing dynamic rendering based on conditions.

Basic Usage

Wrap the alert content in a container with class dd-alert and role="alert" for accessibility. Include a heading and text, with optional links. Use SAL for fade-in animations.

Preview

Code

<div class="dd-alert" role="alert" data-sal="fade">
  <div class="dd-alert__content dd-g">
    <div class="dd-u-1-1">
      <div class="l-box">
        <div class="dd-alert__heading">
          Default Alert
        </div>
        <div class="dd-alert__copy">
          Lorem ipsum dolor sit amet, <a href="#">link</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

<div class="dd-alert -info" role="alert" data-sal="fade">
  <div class="dd-alert__content dd-g">
    <div class="dd-u-1-1">
      <div class="l-box">
        <div class="dd-alert__heading">
          Info Alert
        </div>
        <div class="dd-alert__copy">
          Lorem ipsum dolor sit amet, <a href="#">link</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

<div class="dd-alert -success" role="alert" data-sal="fade">
  <div class="dd-alert__content dd-g">
    <div class="dd-u-1-1">
      <div class="l-box">
        <div class="dd-alert__heading">
          Success Alert
        </div>
        <div class="dd-alert__copy">
          Lorem ipsum dolor sit amet, <a href="#">link</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

<div class="dd-alert -warning" role="alert" data-sal="fade">
  <div class="dd-alert__content dd-g">
    <div class="dd-u-1-1">
      <div class="l-box">
        <div class="dd-alert__heading">
          Warning Alert
        </div>
        <div class="dd-alert__copy">
          Lorem ipsum dolor sit amet, <a href="#">link</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

<div class="dd-alert -error" role="alert" data-sal="fade">
  <div class="dd-alert__content dd-g">
    <div class="dd-u-1-1">
      <div class="l-box">
        <div class="dd-alert__heading">
          Error Alert
        </div>
        <div class="dd-alert__copy">
          Lorem ipsum dolor sit amet, <a href="#">link</a>
        </div>
      </div>
    </div>
  </div>
</div>

Add spacers between multiple alerts for separation.

CSS Modifiers (from _dd_alert.scss)

The SCSS file defines base styles for alerts, including colors, borders, and icons based on type. Key modifiers include:

• -info: Blue-themed for informational messages.
• -success: Green-themed for positive confirmations.
• -warning: Yellow/orange-themed for cautions.
• -error: Red-themed for errors or critical alerts.
• -compact: Reduces padding for inline or space-constrained uses.
• 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_alert.scss (styles)

Accessibility and Best Practices

Use role="alert" for immediate announcements. Ensure color contrast meets WCAG standards. Include icons for visual cues but hide them from screen readers if decorative. Test with screen readers for live updates. In CMS, make text fields support HTML for links, and validate for empty content.