Live Demo

Variant 1 — Default

Pension Solutions

A better pension matters:

The attraction and retention strategy every employer should be thinking about.

Download the brochure [PDF] Talk to us

PDF · 2.4 MB

Variant 2 — Accent border

New Report

2025 Retirement Readiness Report

Insights into how Canadians are preparing for retirement and what employers can do to help.

Download report

Variant 3 — Centred

Featured Resource

The Value of a Good Pension

Research shows how modern DB pension plans deliver significantly more value per dollar contributed.

Download study

Variant 4 — Dark background

Annual Report

Year in Review 2025

Explore CAAT's performance, growth, and commitment to members over the past year.

View report

1. Summary

2. Design Tokens

3. Authoring Fields

4. Validation Rules

• Title: Required, 3–15 words recommended
• Preview image: Required. Recommended 320×420px (portrait orientation)
• Primary CTA: Both label and link required
• File info label: If provided, must follow format "TYPE · SIZE" (e.g., "PDF · 2.4 MB")

5. Content Guidance

• Use this component for featuring downloadable resources (brochures, reports, whitepapers) prominently
• Preview image should be the actual cover of the resource for visual recognition
• Headline should clearly state the value proposition — not just the document title
• Include file type and size in the CTA or file info label so users know what they're downloading
• For accessibility, ensure the preview image alt text describes the document ("Retirement that works brochure cover")

6. Semantic HTML

<div class="caat-feature-hero"
     data-analytics-component="feature-resource-hero">
  <div class="caat-feature-hero__inner">
    <div class="caat-feature-hero__body">
      <p class="caat-eyebrow">…</p>
      <h1 class="caat-feature-hero__title">…</h1>
      <p class="caat-feature-hero__subtitle">…</p>
      <div class="caat-feature-hero__actions">
        <a href="…" class="caat-button caat-button--primary">
          <i class="bi bi-file-earmark-pdf caat-button__icon"></i>
          Download the brochure [PDF]
        </a>
      </div>
    </div>
    <div class="caat-feature-hero__preview">
      <a href="…" target="_blank" rel="noopener noreferrer">
        <img src="cover.png" alt="…" loading="eager">
        <span class="caat-feature-hero__preview-label">
          PDF · 2.4 MB
        </span>
      </a>
    </div>
  </div>
</div>

7. CSS Contract

8. Accessibility

• Preview image must have descriptive alt text describing the resource
• If primary CTA opens in new tab, include rel="noopener noreferrer" and consider adding a visually hidden "(opens in new tab)" label
• CTA button text must be descriptive enough to understand out of context
• Colour contrast: all text meets WCAG 2.1 AA (4.5:1 for body text, 3:1 for large text)
• Focus order: eyebrow → title → subtitle → CTA → preview image link
• File info label should be associated with the download link

9. SEO

• Title rendered as <h1> or <h2> depending on page context
• Alt text on preview image provides keyword context
• CTA link to downloadable PDF should use descriptive anchor text
• Eyebrow text provides topical categorization

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/feature-resource-hero
• Sling Model: FeatureResourceHeroModel — resolves DAM asset for preview image, reads CTA paths
• Client library: caat.components.featureresourcehero (category), CSS only — no JS
• Policy: Variant selector, toggle for secondary CTA, toggle for file info label
• DAM integration: Preview image uses adaptive image servlet for responsive delivery

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 | accent | centered | dark | fullbleed",
  "bgImage": "/content/dam/…/hero-bg.jpg",
  "bgAlt": "",
  "eyebrow": "Pension Solutions",
  "title": "A better pension matters:",
  "subtitle": "The attraction and retention strategy…",
  "primaryCtaLabel": "Download the brochure [PDF]",
  "primaryCtaLink": "/content/dam/…/brochure.pdf",
  "primaryCtaIcon": "bi-file-earmark-pdf",
  "secondaryCtaLabel": "Talk to us",
  "secondaryCtaLink": "/pension-solutions",
  "previewImage": "/content/dam/…/brochure-cover.png",
  "previewAlt": "Retirement that works brochure cover",
  "fileInfoLabel": "PDF · 2.4 MB",
  "openInNewTab": true
}

13. QA Checklist

• ☐ All five variants render correctly
• ☐ Fullbleed variant: background image covers full width with gradient overlay
• ☐ Fullbleed variant: text is white with sufficient contrast against gradient
• ☐ Preview image hover animation works (lift + tilt)
• ☐ CTA buttons use caat-button component
• ☐ Responsive: stacks vertically on mobile, preview moves to top
• ☐ Accent variant border switches from left to top on mobile
• ☐ Alt text present on preview image
• ☐ Dark variant text has sufficient contrast
• ☐ File info label renders below preview image
• ☐ Download link opens in new tab when configured
• ☐ Analytics attributes present

14. Definition of Done

1. All variants implemented and match Figma specs
2. Responsive breakpoints verified (mobile, tablet, desktop)
3. Preview image alt text and focus styles verified
4. CTA buttons use design system caat-button component
5. Lighthouse accessibility score ≥ 95
6. Analytics attributes on root element
7. AEM dialog wired to Sling model
8. Cross-browser tested (Chrome, Firefox, Safari, Edge)