Skip to main content

Search

Blockquote Component Breakdown

Overview

The dd-blockquote component provides a styled blockquote for testimonials, quotes, or highlighted statements. It includes optional elements like an icon, person's image, name, title, and JSON-LD schema for SEO.

This component is ideal for testimonials sections, blog pull-quotes, or about pages. In WordPress, configure it via ACF fields for quote text, name, title, image, and schema. In Drupal, use a Paragraph type with text fields for quote and details, plus an image field, rendering schema dynamically.

Basic Usage

Use a blockquote with class dd-blockquote and data-sal for animations. Include structured elements for icon, person details, and comment. Add schema script for structured data.

Preview

First Name Last Name
First Name Last Name , Title

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

<blockquote class="dd-blockquote">
  <div class="dd-blockquote__content dd-g" data-sal="fade">
    <div class="dd-blockquote__icon"><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="M21 3C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.455L2 22.5V4C2 3.44772 2.44772 3 3 3H21ZM20 5H4V18.385L5.76333 17H20V5ZM10.5153 7.4116L10.9616 8.1004C9.29402 9.0027 9.32317 10.4519 9.32317 10.7645C9.47827 10.7431 9.64107 10.7403 9.80236 10.7553C10.7045 10.8389 11.4156 11.5795 11.4156 12.5C11.4156 13.4665 10.6321 14.25 9.66558 14.25C9.12905 14.25 8.61598 14.0048 8.29171 13.6605C7.77658 13.1137 7.5 12.5 7.5 11.5052C7.5 9.75543 8.72825 8.18684 10.5153 7.4116ZM15.5153 7.4116L15.9616 8.1004C14.294 9.0027 14.3232 10.4519 14.3232 10.7645C14.4783 10.7431 14.6411 10.7403 14.8024 10.7553C15.7045 10.8389 16.4156 11.5795 16.4156 12.5C16.4156 13.4665 15.6321 14.25 14.6656 14.25C14.1291 14.25 13.616 14.0048 13.2917 13.6605C12.7766 13.1137 12.5 12.5 12.5 11.5052C12.5 9.75543 13.7283 8.18684 15.5153 7.4116Z"></path></svg></div>
    <div class="dd-blockquote__person dd-g l-box">
      <div class="dd-blockquote__image">
        <img src="https://dummyimage.com/400x400/000/fff" alt="First Name Last Name" />
      </div>
      <div class="dd-blockquote__name-title">
        <span class="dd-blockquote__name">First Name Last Name</span>
        <span class="dd-blockquote__title">, Title</span>
      </div>
      <div class="dd-blockquote__comment">
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</blockquote>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Quotation",
  "creator": {
    "@type": "Person",
    "name": "PERSONS NAME GOES HERE"
  },
  "text": "COMMENT COPY GOES HERE"
}
</script>

Repeat for multiple quotes in a loop, using grid for layout.

CSS Modifiers (from _dd_blockquote.scss)

The SCSS file defines base styles for the blockquote, including centering, icons, and responsive sizing. Key modifiers include:

  • -left: Aligns content to the left.
  • -right: Aligns content to the right.
  • -no-icon: Removes the quote icon.
  • -no-image: Hides the person's image for text-only quotes.
  • -compact: Reduces spacing and sizes for inline or smaller displays.
  • 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_blockquote.scss (styles)

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

Accessibility and Best Practices

Use alt text for images. Ensure schema is accurate for SEO. Test readability and contrast. In CMS, require name and quote fields, and validate image uploads for accessibility.