Components

Reusable UI components used across CMT Sites

Each component page includes:

• Name
• Description and purpose: What the component is for and when to use it
• Properties: Different versions of the component (e.g., state: default, hover, active, disabled; responsive: desktop, mobile)
• Visual Snapshots: Figma exports showing examples of each property
• Behavior (User-facing): How it responds to interaction, validation rules, error states
• Behavior (Admin/CMS): How content editors configure it in Decap CMS
• Accessibility: Keyboard navigation, ARIA labels, focus management, color contrast
• Responsive Rules: How it adapts across breakpoints (xs, sm, md, lg, xl, xxl, xxxl)
• Dependencies: Related components, JavaScript modules, or feature flags
• Acceptance Criteria: Checklist for QA validation