Component Library
Foundations, components, and page templates — everything needed to build consistent, accessible CAAT experiences.
Core design decisions that every component inherits.
Every component follows one BEM-flavoured grammar. If a class doesn't fit one of these shapes, it doesn't ship.
| Pattern | Meaning | Examples |
|---|---|---|
.caat-<component> | Component block (always caat- namespaced) | .caat-button, .caat-card |
.caat-<component>__<part> | Element inside a block | .caat-footer__list, .caat-form__step |
.caat-<component>--<variant> | Authored variant or server-rendered state — anything decided at render time and persistent for the page view: visual variants, data variants, current page/step, applied filter | .caat-button--primary, .caat-badge--retired, .caat-pagination__item--disabled, .caat-social--linkedin |
.is-<state> | Transient client-side state mirror of a pseudo-class — used in demos/QA to render a state statically, and by JS when it must force one. Never authored. | .is-hover, .is-focus, .is-active, .is-disabled |
| ARIA, not classes | Real state that assistive tech must know about is carried by attributes — classes only style them | aria-current="page|step", aria-expanded, aria-busy, aria-invalid, disabled |
Bootstrap-native classes (.active, .disabled, .is-valid/.is-invalid, .collapsed) keep their Bootstrap semantics where a Bootstrap behaviour drives them — don't rename those.
41 components, each with a 14-section AEM contract: live demos, authoring fields, CSS contracts, accessibility, SEO, analytics, and QA checklists.
Full page compositions built entirely from design system components — demonstrating how components assemble into real pages.
Multi-page clickable prototype of the proposed caatpension.ca navigation — mega nav, mobile drill-down, side nav and ~90 destination pages — built for a moderated findability usability test.