Component Contract

Article Layout

Long-form content layout with sidebar and table of contents for pension education articles across the CAAT Pension Plan member experience.

Live Demo

Standard Article

Rendered

Illustration of pension planning concepts

Understanding Your DBplus Pension

Your DBplus pension is one of the most valuable benefits you'll receive during your career. As a jointly sponsored, defined benefit pension plan, CAAT provides you with a secure, predictable retirement income that lasts for life. Understanding how your pension works is the first step toward making the most of this benefit.

How Your Pension Is Calculated

Your DBplus pension is based on a formula that considers your contributions and the credited interest applied to them. Unlike a defined contribution plan, you don't bear the investment risk — the plan guarantees your benefit based on the formula, not market performance.

Each year you contribute, your pension grows. The annual pension you earn is calculated as a percentage of your contributions, which means the more you contribute over time, the larger your lifetime pension will be at retirement.

The Role of Credited Interest

Credited interest is applied to your account balance and plays a key role in growing your pension over time. The rate is set by the CAAT Board of Trustees based on the plan's financial health and long-term sustainability. This is different from a market return — it's a smoothed, stable rate designed to provide predictable growth.

"DBplus gives me confidence that my retirement income is secure, no matter what happens in the stock market. That peace of mind is priceless." — Maria T., retired CAAT member

When Can You Retire?

The normal retirement age under DBplus is 65, but you may be eligible to retire earlier. Early retirement options are available as early as age 55, though retiring before 65 may result in a reduction to your pension amount. The reduction reflects the longer period over which your pension will be paid.

Bridge Benefits

If you retire before age 65, you may receive a temporary bridge benefit that supplements your pension income until you become eligible for government benefits such as the Canada Pension Plan (CPP) and Old Age Security (OAS). This bridge helps smooth the transition into full retirement.

Key Benefits of DBplus

  • Lifetime income: Your pension is paid for life, giving you financial security throughout retirement.
  • Inflation protection: Conditional inflation adjustments help your pension keep pace with the cost of living.
  • Survivor benefits: Your spouse or beneficiary is protected with survivor pension options.
  • Portability: If you leave your employer, you have options for transferring or deferring your pension.
  • No investment risk: The plan manages investments on your behalf — you don't need to worry about market volatility.

Planning for Your Future

We encourage all members to log in to the CAAT member portal regularly to review their pension statement, estimate their retirement income, and update their beneficiary information. The earlier you start planning, the more confident you'll feel when the time comes to retire.

If you have questions about your pension or want personalized guidance, our member services team is here to help. Reach out by phone or email and we'll connect you with a pension advisor.

Article with Sidebar

Rendered

Illustration of pension planning concepts

Understanding Your DBplus Pension

Your DBplus pension is one of the most valuable benefits you'll receive during your career. As a jointly sponsored, defined benefit pension plan, CAAT provides you with a secure, predictable retirement income that lasts for life.

Your DBplus pension is based on a formula that considers your contributions and the credited interest applied to them. Unlike a defined contribution plan, you don't bear the investment risk — the plan guarantees your benefit based on the formula, not market performance.

Each year you contribute, your pension grows. The annual pension you earn is calculated as a percentage of your contributions, which means the more you contribute over time, the larger your lifetime pension will be at retirement.

Credited interest is applied to your account balance and plays a key role in growing your pension over time. The rate is set by the CAAT Board of Trustees based on the plan's financial health and long-term sustainability.

"DBplus gives me confidence that my retirement income is secure, no matter what happens in the stock market." — Maria T., retired CAAT member

The normal retirement age under DBplus is 65, but you may be eligible to retire earlier. Early retirement options are available as early as age 55, though retiring before 65 may result in a reduction to your pension amount.

If you retire before age 65, you may receive a temporary bridge benefit that supplements your pension income until you become eligible for government benefits such as the Canada Pension Plan (CPP) and Old Age Security (OAS).

  • Lifetime income: Your pension is paid for life.
  • Inflation protection: Conditional inflation adjustments help keep pace with costs.
  • Survivor benefits: Your spouse or beneficiary is protected.
  • Portability: Options for transferring or deferring your pension.
  • No investment risk: The plan manages investments on your behalf.

We encourage all members to log in to the CAAT member portal regularly to review their pension statement, estimate their retirement income, and update their beneficiary information.

Minimal Article

Rendered

Understanding Your DBplus Pension

Your DBplus pension is one of the most valuable benefits you'll receive during your career. As a jointly sponsored, defined benefit pension plan, CAAT provides you with a secure, predictable retirement income that lasts for life. Understanding how your pension works is the first step toward making the most of this benefit.

How Your Pension Is Calculated

Your DBplus pension is based on a formula that considers your contributions and the credited interest applied to them. Unlike a defined contribution plan, you don't bear the investment risk — the plan guarantees your benefit based on the formula, not market performance.

Key Benefits of DBplus

  • Lifetime income: Your pension is paid for life, giving you financial security throughout retirement.
  • Inflation protection: Conditional inflation adjustments help your pension keep pace with the cost of living.
  • Survivor benefits: Your spouse or beneficiary is protected with survivor pension options.
  • No investment risk: The plan manages investments on your behalf.

Planning for Your Future

We encourage all members to log in to the CAAT member portal regularly to review their pension statement, estimate their retirement income, and update their beneficiary information. The earlier you start planning, the more confident you'll feel when the time comes to retire.

1. Summary

ComponentArticle Layout
Resource typecaat/components/article-layout
PurposeRenders long-form pension education content with optional hero image, sidebar table of contents, related articles, and share actions. Designed for readability and member engagement.
VariantsStandard · With Sidebar · Minimal
TierComposite (organism) — built by composing base components
StatusEnhance

Composed of

This is a composite component. Per the composition rules, it should compose these components rather than reimplement them. Every dependency must have its own component page (the “completeness rule”).

ConstituentRole hereStatus
BreadcrumbPage trail above the title✓ has page · composed
Rich Text / Text & TitleArticle body prose, headings✓ has page · composed
Card ×N“Related articles” should be a grid of Card teasers↻ reimplemented as .caat-article__related — should compose Card
Social / Share LinksIcon ButtonShare row (LinkedIn, X, email, copy)✓ has page · now composed (was .caat-article__share-btn)
In-page Nav (Table of Contents)Sidebar “On this page” anchor nav✓ has page · now composed (was .caat-article__toc)
Byline / MetaAuthor + date line✓ has page · now composed (.caat-byline)

Article-layout’s own contract covers only what is genuinely article-specific: the responsive grid, sticky sidebar, hero image, and reading measure. See docs/design-system-recommendations.md §F.

2. Design Tokens

TokenRoleValue (light)
--caat-blue-900Article headings, TOC active text, share icon colour#003750
--caat-blue-700Blockquote left border, link hover, TOC active border#0b5a80
--caat-blue-100Blockquote background, TOC active background, category badge#e7f4fb
--caat-greenOptional accent for callout boxes#55a546
--caat-grey-200Sidebar card borders, share button borders, related item dividers#dfe6ef
--caat-focusFocus ring on interactive elements#4D90FE
--caat-inkBody text colour#102637
--caat-radiusHero image, sidebar card border-radius.75rem
--caat-font-primaryFont familyLibre Franklin

3. Authoring Fields

FieldTypeRequiredNotes
VariantSelectYesstandard | with-sidebar | minimal
TitleTextYesArticle heading (h1). Max 120 characters.
Hero imageImage (DAM)NoFull-width image. Recommended 900 × 400 px minimum. Not used in minimal variant.
Hero alt textTextConditionalRequired when hero image is informational; leave empty for decorative.
Author nameTextNoDisplayed in article meta.
Publish dateDateYesDisplay format: Month DD, YYYY.
Read timeTextNoEstimated reading time, e.g. "8 min read".
CategoryTag pickerNoRenders as a badge pill in the meta area.
Body contentRich textYesLong-form HTML content. Supports h2, h3, p, blockquote, ul, ol, a, img.
Show sidebarToggleNoEnables sidebar with TOC and related articles (with-sidebar variant).
TOC headingsAuto-generatedGenerated from h2 elements in body content.
Related articlesPathfield (multi)NoUp to 4 related article paths displayed in sidebar card.
Show share buttonsToggleNoRenders social share icons below article body.
Show breadcrumbToggleNoRenders category breadcrumb above title (minimal variant).

4. Validation

RuleError message
Title is required."Provide a title for this article."
Title must be 120 characters or fewer."Article title exceeds the 120-character limit."
Body content is required."Add body content for this article."
Publish date is required."Set a publish date for this article."
Hero alt text required when hero image is informational."Provide alt text for the hero image, or mark it as decorative."
Related articles limited to 4."Select no more than 4 related articles."

5. Content Guidance

  • Write clear, descriptive titles that communicate the article's value: "Understanding Your DBplus Pension" rather than "Pension Info".
  • Structure body content with meaningful h2 and h3 subheadings — these drive the sidebar table of contents.
  • Keep paragraphs short (3 – 5 sentences) for on-screen readability at the 720 px max-width.
  • Use blockquotes for member testimonials or key takeaways to break up long text.
  • Include bulleted lists when presenting multiple related points (e.g., plan benefits).
  • Hero images should be relevant, high quality, and at least 900 × 400 px for retina displays.
  • Use the minimal variant for shorter updates that don't need a hero or sidebar.
  • Provide a read-time estimate — it sets expectations and increases engagement.

6. Semantic HTML

Standard variant

<article class="caat-article" aria-label="Article">
  <img class="caat-article__hero-image"
       src="/content/dam/caat/articles/hero.jpg"
       alt="Description" loading="lazy">

  <div class="caat-article__header">
    <h1>Article Title</h1>
  </div>

  <div class="caat-article__meta caat-byline">
    <span>Author Name</span>
    <span>April 22, 2026</span>
    <span>8 min read</span>
  </div>

  <div class="caat-article__body caat-rich-text">
    <p>Body content…</p>
    <h2>Section Heading</h2>
    <p>More content…</p>
    <blockquote>Pull quote…</blockquote>
  </div>

  <div class="caat-article__share" aria-label="Share">
    <a href="#" class="caat-icon-btn caat-icon-btn--circle caat-icon-btn--outline" aria-label="Share on LinkedIn">…</a>
  </div>
</article>

With sidebar variant

<article class="caat-article caat-article--has-sidebar">
  <!-- hero + header + meta same as standard -->
  <div class="row">
    <div class="col-lg-8">
      <div class="caat-article__body caat-rich-text">…</div>
    </div>
    <div class="col-lg-4">
      <div class="caat-article__sidebar">
        <!-- composes In-page Nav -->
        <div class="caat-in-page-nav">
          <p class="caat-in-page-nav__title">On this page</p>
          <nav class="nav flex-column" aria-label="On this page">
            <a class="nav-link" href="#section">Section</a>
          </nav>
        </div>
        <div class="caat-article__related">
          <h5>Related Articles</h5>
          <a href="#" class="caat-article__related-item">…</a>
        </div>
      </div>
    </div>
  </div>
</article>

7. CSS Contract

SelectorPurpose
.caat-articleRoot article container.
.caat-article--has-sidebarModifier: enables two-column layout with sidebar.
.caat-article--minimalModifier: centered prose, no hero, no sidebar.
.caat-article__headerTitle wrapper with bottom margin.
.caat-article__meta + .caat-bylineComposes the Byline/Meta component; __meta only adds bottom spacing.
.caat-article__hero-imageFull-width hero — border-radius, responsive.
.caat-article__bodyProse container — max-width:720px, line-height:1.75. Full-width when sidebar present.
.caat-article__sidebarSticky sidebar — position:sticky; top:5rem. Static on mobile.
.caat-article__toc.caat-in-page-navComposes the In-page Nav component (no bespoke ToC CSS).
.caat-article__shareMargin-only wrapper; composes Social/Share Links + Icon Button.
.caat-article__relatedRelated articles sidebar card.
.caat-article__related-itemIndividual related article link with divider.
.caat-article__related-titleRelated article title — blue-900, 600 weight.
.caat-article__related-metaRelated article meta — small muted text.

8. Accessibility

RequirementImplementation
LandmarkWrap content in <article> element for semantic meaning.
Heading hierarchySingle <h1> for title; body uses <h2> and <h3> in order.
Hero imageInformational images use descriptive alt text; decorative images use alt="".
Share buttonsEach share link has aria-label describing the action.
TOC navigationSidebar TOC uses <nav> with heading label.
FocusVisible :focus-visible ring (--caat-focus) on all interactive elements.
Colour contrastBody text (ink on white) meets 4.5:1. Headings (blue-900 on white) meet 4.5:1.
MotionShare button transitions respect prefers-reduced-motion: reduce.
KeyboardAll links and buttons reachable via Tab. Share and TOC links activated via Enter.

9. SEO

  • Article uses semantic <article> element — search engines identify it as the primary content.
  • Single <h1> serves as the page title; subheadings use <h2>/<h3> for a clear page outline.
  • Hero image includes descriptive alt text for image search indexing.
  • Body content is directly in the DOM (not loaded asynchronously) for full crawlability.
  • Structured data (Article schema) should be added via AEM page-level JSON-LD.
  • Publish date and author support rich snippet eligibility.
  • Related article links create internal linking signals to boost article discoverability.

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 Notes

  • Resource type: caat/components/article-layout
  • Sling Model: ArticleLayoutModel — exposes variant, title, heroImage, heroAltText, authorName, publishDate, readTime, category, bodyContent, showSidebar, tocHeadings[], relatedArticles[], showShareButtons, showBreadcrumb.
  • HTL template: article-layout.html — uses data-sly-test to switch between standard, with-sidebar, and minimal variants. TOC auto-generated from h2 elements in body content via JS.
  • Client library: caat.components.article-layout — CSS + JS. JS handles TOC active-state scroll tracking, scroll depth analytics, and share button actions.
  • Policy: Authors can restrict available variants and toggle share button visibility per template policy.
  • Allowed parents: Layout Container, Section Container, Page template.

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": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/select",
        "label": "Variant",
        "name": "./variant",
        "required": true,
        "options": ["standard", "with-sidebar", "minimal"]
      },
      "title": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Title",
        "name": "./jcr:title",
        "required": true,
        "maxLength": 120
      },
      "heroImage": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/pathfield",
        "label": "Hero image",
        "name": "./heroImage",
        "rootPath": "/content/dam/caat"
      },
      "heroAltText": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Hero alt text",
        "name": "./heroAltText"
      },
      "authorName": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Author name",
        "name": "./authorName"
      },
      "publishDate": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/datepicker",
        "label": "Publish date",
        "name": "./publishDate",
        "required": true
      },
      "readTime": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Read time",
        "name": "./readTime"
      },
      "category": {
        "sling:resourceType": "cq/gui/components/coral/common/form/tagfield",
        "label": "Category",
        "name": "./category"
      },
      "bodyContent": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/rte",
        "label": "Body content",
        "name": "./bodyContent",
        "required": true
      },
      "showSidebar": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox",
        "label": "Show sidebar (TOC + related articles)",
        "name": "./showSidebar"
      },
      "relatedArticles": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/multifield",
        "label": "Related articles",
        "name": "./relatedArticles",
        "maxItems": 4,
        "field": {
          "sling:resourceType": "granite/ui/components/coral/foundation/form/pathfield",
          "rootPath": "/content/caat"
        }
      },
      "showShareButtons": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox",
        "label": "Show share buttons",
        "name": "./showShareButtons"
      },
      "showBreadcrumb": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox",
        "label": "Show breadcrumb (minimal variant)",
        "name": "./showBreadcrumb"
      }
    }
  }
}

13. QA Acceptance Checklist

  • Standard variant renders hero image, title, meta, and body prose at max-width 720 px.
  • Body text line-height is 1.75 for readability.
  • Headings in body use --caat-blue-900 colour.
  • Blockquote renders with left border (--caat-blue-700) and blue-100 background.
  • Hero image is full-width with border-radius applied.
  • With-sidebar variant: main content ~8 cols, sidebar ~4 cols on desktop.
  • Sidebar is sticky with proper top offset and doesn't overlap navbar.
  • TOC nav highlights the active section link.
  • Related articles render as small card list with hover state on title.
  • Share buttons render as circular icons with hover fill effect.
  • Sidebar drops below content on tablet/mobile (≤991 px).
  • Minimal variant: centred prose with breadcrumb, no hero, no sidebar.
  • All interactive elements have visible focus rings.
  • prefers-reduced-motion disables transitions.
  • Analytics events fire correctly for view, scroll depth, share, TOC, and related clicks.
  • Cross-browser tested: Chrome, Firefox, Safari, Edge.

14. Definition of Done

AreaDone means
Design Figma component matches this contract. All three variants documented with responsive breakpoints. Sidebar, TOC, share, and blockquote states included.
Development AEM proxy component created. HTL template emits semantic HTML per Section 6. CSS uses design tokens exclusively. JS handles TOC scroll-spy active state and scroll depth tracking. Unit tests pass.
QA All items in the QA Acceptance Checklist (Section 13) pass. Manual accessibility audit completed. Cross-browser tested (Chrome, Firefox, Safari, Edge).
Launch Component deployed to AEM production. Content authors trained on variant selection and sidebar configuration. Documentation published. Analytics dashboards confirmed receiving events.