Testimonials

Live Demo

Two independent axes: a layout (single · grid · carousel) and an avatar type (photo · initials · icon), with an optional star rating above any quote. Each card is a <figure>/<figcaption> composing the Avatar component.

Layout — Single · photo · with rating

Layout — Grid · photo

Layout — Carousel

Avatar fallbacks · initials & icon

When no photo exists, the Avatar falls back to initials, then a generic icon. The avatar type is independent of the layout.

1. Summary

2. Design Tokens

3. Authoring Fields

4. Validation Rules

5. Content Guidance

• Authenticity: Use real quotes from real members/employers. Obtain written consent before publishing.
• Pension-relevant: Focus on retirement security, defined benefit advantages, peace of mind, inflation protection, and employer recruitment benefits.
• Length: Keep quotes concise — 1–3 sentences (under 300 characters) for maximum impact.
• Diversity: Represent a variety of roles, institutions, genders, and retirement stages.
• Attribution: Always include at minimum a name. Role and employer add credibility.
• Avoid: Specific dollar amounts, investment returns, or language that could constitute financial advice.

6. Semantic HTML

<!-- Single testimonial -->
<div class="caat-testimonial"
     data-analytics-component="testimonial"
     data-analytics-variant="single">
  <blockquote class="caat-testimonial__quote">
    <p>"Quote text here..."</p>
  </blockquote>
  <div class="caat-testimonial__attribution">
    <img class="caat-avatar"
         src="/path/to/avatar.jpg"
         alt="Photo of [Name]"
         width="64" height="64">
    <div>
      <strong>[Name]</strong><br>
      <span class="text-muted">[Role] · [Employer]</span>
    </div>
  </div>
</div>

<!-- Carousel wrapper -->
<div class="caat-testimonial-carousel carousel slide"
     data-bs-ride="false"
     aria-roledescription="carousel"
     aria-label="Member testimonials">
  <div class="carousel-inner">
    <div class="carousel-item active"
         role="group"
         aria-roledescription="slide"
         aria-label="Testimonial 1 of N">
      <!-- .caat-testimonial inside -->
    </div>
  </div>
  <!-- prev/next controls -->
</div>

<!-- Grid wrapper -->
<div class="caat-testimonial-grid">
  <!-- multiple .caat-testimonial children -->
</div>

7. CSS Contract

8. Accessibility

9. SEO

• Testimonials may optionally emit Schema.org Review structured data (@type: Review, author, reviewBody).
• Ensure quote text is rendered in the DOM (not injected via JS) for crawlability.
• Use semantic <blockquote> — search engines treat these as quoted content.
• Avatar images should have descriptive alt attributes that include the person's name.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Implementation Notes

• Resource type: caat/components/testimonial
• Sling Model: com.caat.core.models.Testimonial — exposes quote, attribution, avatar, rating, variant.
• Multifield: Carousel and Grid variants use an AEM Multifield to allow authors to add 2–8 testimonial items.
• Content Fragment support: Optionally bind to a CF model caat/models/testimonial for headless delivery.
• Policies: Restrict display variant options per template (e.g., only "grid" on homepage).
• Experience Fragment: Component can be placed in XF for shared testimonial blocks across pages.

12. Dialog Model

Simplified model — shows field intent and Granite UI resource types, not the literal cq:dialog node tree (e.g. select options are authored as child items nodes).

{
  "jcr:primaryType": "nt:unstructured",
  "sling:resourceType": "cq/gui/components/authoring/dialog",
  "jcr:title": "Testimonial",
  "content": {
    "items": {
      "tabs": {
        "items": {
          "testimonialTab": {
            "jcr:title": "Testimonial",
            "items": {
              "variant": {
                "sling:resourceType": "granite/ui/components/coral/foundation/form/select",
                "fieldLabel": "Display Variant",
                "name": "./variant",
                "required": true,
                "options": ["single", "carousel", "grid"]
              },
              "testimonials": {
                "sling:resourceType": "granite/ui/components/coral/foundation/form/multifield",
                "fieldLabel": "Testimonials",
                "composite": true,
                "items": {
                  "quoteText": { "sling:resourceType": "cq/gui/components/authoring/dialog/richtext", "fieldLabel": "Quote", "name": "./quoteText" },
                  "attributionName": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "fieldLabel": "Name", "name": "./attributionName", "required": true },
                  "attributionRole": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "fieldLabel": "Role", "name": "./attributionRole" },
                  "employerName": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "fieldLabel": "Employer", "name": "./employerName" },
                  "avatarImage": { "sling:resourceType": "cq/gui/components/authoring/dialog/fileupload", "fieldLabel": "Avatar", "name": "./avatarImage" },
                  "starRating": { "sling:resourceType": "granite/ui/components/coral/foundation/form/numberfield", "fieldLabel": "Rating (1-5)", "name": "./starRating", "min": 1, "max": 5 }
                }
              }
            }
          }
        }
      }
    }
  }
}

13. QA Acceptance Checklist

• All three variants (single, carousel, grid) render correctly.
• Blockquote semantic HTML is present in DOM.
• Avatar falls back gracefully when no image is provided.
• Carousel: prev/next/indicator buttons work via keyboard.
• Carousel does NOT autoplay by default.
• Reduced-motion media query disables transitions.
• Grid is responsive: 1 col → 2 cols → 3 cols.
• Star rating (if present) has visually hidden accessible text.
• Analytics events fire: testimonial-viewed, carousel-interaction.
• Cross-browser tested (Chrome, Firefox, Safari, Edge).
• Content contrast meets WCAG 2.1 AA (4.5:1 for text).

14. Definition of Done