Logo Wall

Live Demo

Variant 1 — Default

Trusted by leading Canadian employers

Organizations across Canada rely on CAAT's DBplus pension plan.

Read our success stories

Variant 2 — Clean (no borders)

Variant 3 — Dark background

Our growing employer network

Logo item states

1. Summary

2. Design Tokens

3. Authoring Fields

4. Validation Rules

• Minimum logos: 3 items required
• Maximum logos: 20 (to prevent performance issues)
• Image format: SVG preferred; PNG/WebP accepted (transparent background required)
• Image dimensions: Recommended 200×80px, will be constrained to max-height: 3rem
• Alt text: Required for every logo — must be the organization name
• Marquee variant: Requires ≥ 6 logos for smooth scrolling effect

5. Content Guidance

• Use SVG logos when available for crisp rendering at any size
• Ensure all logos have transparent backgrounds
• Logos render in grayscale by default and transition to full colour on hover — ensure originals have sufficient contrast
• Keep title concise (≤ 10 words). Examples: "Trusted by leading Canadian employers", "Our growing employer network"
• CTA should link to success stories or employer list page
• For the dark variant, ensure logos are visible against the dark background (light versions of logos may be needed)

6. Semantic HTML

<div class="caat-logo-wall"
     data-analytics-component="logo-wall"
     data-analytics-variant="default">
  <div class="caat-logo-wall__header">
    <h2 class="caat-logo-wall__title">…</h2>
    <p class="caat-logo-wall__subtitle">…</p>
  </div>
  <div class="caat-logo-wall__grid" role="list"
       aria-label="Participating employers">
    <div class="caat-logo-wall__item" role="listitem">
      <img src="logo.svg" alt="Organization Name" loading="lazy">
    </div>
    <!-- repeat -->
  </div>
  <div class="caat-logo-wall__footer">
    <a href="#" class="caat-button caat-button--outline-primary caat-button--sm">
      Read our success stories
    </a>
  </div>
</div>

7. CSS Contract

8. Accessibility

• role="list" on grid, role="listitem" on each item
• aria-label on grid describes the collection
• Every <img> must have meaningful alt text (organization name)
• Logos use loading="lazy" for performance
• Grayscale-to-colour transition is purely decorative — information is conveyed by alt text, not colour
• Marquee variant respects prefers-reduced-motion — animation stops and falls back to wrapped grid
• If logos are linked, ensure focus styles are visible and link purpose is clear

9. SEO

• Title rendered as <h2> for semantic hierarchy
• Alt text on logos provides keyword-rich content for image search
• Structured data opportunity: Organization schema on linked logos
• CTA link should use descriptive anchor text

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/logo-wall
• Sling Model: LogoWallModel — iterates multifield items, renders image references from DAM
• Client library: caat.components.logowall (category), CSS only — no JS required for default/clean/dark variants
• Marquee JS: Optional script for --marquee variant uses IntersectionObserver to pause when out of viewport
• Policy configuration: Variant selector, max items, optional title/CTA toggles

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).

{
  "variant": "default | clean | dark | marquee",
  "title": "Trusted by leading Canadian employers",
  "subtitle": "Organizations across Canada rely on…",
  "logos": [
    {
      "image": "/content/dam/…/jamieson.png",
      "alt": "Jamieson Natural Sources",
      "link": "/pension-solutions/success-stories/jamieson"
    }
  ],
  "ctaLabel": "Read our success stories",
  "ctaLink": "/pension-solutions/success-stories",
  "ctaNewTab": false
}

13. QA Checklist

• ☐ All four variants render correctly
• ☐ Grayscale → colour transition works on hover
• ☐ Grid reflows responsively (2-col mobile, 3-col tablet, auto-fit desktop)
• ☐ Every logo has alt text
• ☐ Dark variant logos visible against dark background
• ☐ Marquee pauses on prefers-reduced-motion
• ☐ CTA button uses caat-button component styles
• ☐ Linked logos have visible focus indicators
• ☐ Works with 3–20 logos without layout breaking
• ☐ Title/subtitle optional — component renders cleanly without them

14. Definition of Done

1. All variants implemented and match Figma specs
2. Responsive breakpoints verified (mobile, tablet, desktop)
3. Alt text rendered for every logo
4. Marquee reduced-motion fallback tested
5. Lighthouse accessibility score ≥ 95
6. Analytics attributes present on root element
7. AEM dialog wired to Sling model
8. Cross-browser tested (Chrome, Firefox, Safari, Edge)