Download

Demo

Single Download Link

Download List

• Annual Report 2025

  PDF · 5.1 MB · Updated Mar 2026

  Download
• Beneficiary Designation Form

  PDF · 340 KB · Updated Nov 2025

  Download
• Contribution Rate Sheet

  XLSX · 128 KB · Updated Jan 2026

  Download
• Retirement Application Form

  DOCX · 220 KB · Updated Sep 2025

  Download
• Member Handbook

  PDF · 2.4 MB · Updated Jan 2026

  Download

Download Card

Grouped Downloads

1. Summary

2. Design Tokens

3. Authoring Fields

4. Validation Rules

5. Content Guidance

• Title: Use the official document name. Keep under 60 characters.
• Meta format: Always follow "TYPE · SIZE · Updated MMM YYYY" pattern.
• Description (card): One sentence summarizing the document's purpose. Max 120 characters.
• Button label: Use action verbs — "Download", "Download Report", "Download Form".
• Grouping: Limit groups to 5–8 items. Use clear category headers.
• File naming: Ensure DAM file names are descriptive (no "doc_final_v3.pdf").

6. Semantic HTML

<!-- Single download -->
<div class="caat-download">
  <div class="caat-download__icon caat-download__icon--pdf">
    <i class="bi bi-file-earmark-pdf-fill" aria-hidden="true"></i>
  </div>
  <div class="caat-download__info">
    <p class="caat-download__title">Document Title</p>
    <p class="caat-download__meta">PDF · 2.4 MB · Updated Jan 2026</p>
  </div>
  <div class="caat-download__action">
    <a href="/path/to/file.pdf" class="caat-button" download>
      <i class="bi bi-download" aria-hidden="true"></i> Download
    </a>
  </div>
</div>

<!-- Download list -->
<ul class="caat-download-list">
  <li class="caat-download-list__item">
    <div class="caat-download__icon caat-download__icon--pdf">…</div>
    <div class="caat-download__info">…</div>
    <div class="caat-download__action">…</div>
  </li>
</ul>

<!-- Grouped -->
<div class="caat-download-group">
  <h4 class="caat-download-group__header">Category Name</h4>
  <ul class="caat-download-list">…</ul>
</div>

7. CSS Contract

8. Accessibility

• All download links must have descriptive text — avoid generic "Click here".
• Icons use aria-hidden="true"; screen readers rely on link text.
• File type and size should be included in visible text or aria-label for context.
• Focus visible: 3px solid var(--caat-focus) with 2px offset.
• Grouped downloads use heading hierarchy (h4 for group titles).
• List variant uses semantic <ul>/<li> for screen reader list navigation.
• Download links include the download attribute to signal browser download behaviour.
• Colour is not the only indicator of file type — icon shape + meta text provide redundancy.

9. SEO

• Document titles are rendered as visible text (not hidden in attributes) for indexing.
• File URLs should use descriptive slugs: /documents/annual-report-2025.pdf
• Include structured data (schema.org DigitalDocument) for key publications.
• Meta descriptions on pages with download lists should reference available documents.
• Ensure PDFs have accessible text (not scanned images) for search engine parsing.

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/content/download
• Sling Model pulls file metadata (size, type, last modified) from DAM asset.
• File type icon class is auto-derived from DAM asset MIME type.
• List and grouped variants use a multifield for multiple document entries.
• Supports Experience Fragment embedding for reusable download blocks.
• Author can override auto-detected file size and date if needed.
• Component is parsys-droppable and allowed in all content containers.

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",
  "tabs": {
    "properties": {
      "variant": { "type": "select", "options": ["single","list","card","grouped"] },
      "groupTitle": { "type": "textfield", "required": "variant=grouped" }
    },
    "documents": {
      "type": "multifield",
      "fields": {
        "title": { "type": "textfield", "required": true },
        "fileReference": { "type": "pathfield", "rootPath": "/content/dam/caat" },
        "description": { "type": "richtext", "maxLength": 120 },
        "buttonLabel": { "type": "textfield", "defaultValue": "Download" }
      }
    }
  }
}

13. QA Checklist

• All four variants render correctly.
• File type icons display correct colour coding (PDF red, XLSX green, DOCX blue).
• Download button triggers browser download (not navigation).
• Meta text shows correct file type, size, and date.
• Hover lift effect works on cards and list items.
• Focus states visible with keyboard navigation.
• Responsive stacking on mobile (≤767px).
• Screen reader announces document title and file info.
• Analytics events fire on download click.
• Grouped variant displays category headers correctly.
• Empty state handled gracefully when no documents configured.

14. Definition of Done

• Component renders all four variants per contract.
• BEM class names match CSS contract (§7).
• Tokens used — no hard-coded colours or fonts.
• WCAG 2.1 AA: focus visible, semantic list markup, aria-hidden icons.
• Responsive breakpoints tested (mobile, tablet, desktop).
• AEM dialog matches dialog model (§12).
• Analytics data layer events verified in staging.
• Cross-browser tested (Chrome, Firefox, Safari, Edge).
• Code reviewed and merged to develop branch.
• Design System documentation updated.