| Component |
Constraints |
Container/Layouts |
Accessibility |
Comments |
| NAVIGATION - HEADER / FOOTER UI |
| Meta Nav |
No item limit
No chr limit |
N/A |
|
|
| Mega Nav |
Up to 3 columns
8 Max number of items per column |
N/A |
|
|
| Drop Down Nav |
|
|
|
|
Mobile hamburger nav
(this nav is the same for either desktop nav variant) |
|
|
|
|
| Breadcrumbs |
|
|
|
|
| In-page nav bar |
|
|
|
|
Footer
includes:
- Meta footer
- Mega footer
- Social bar in footer
- Back-to-top button in footer |
|
|
|
|
| Back-to-top sticky button |
|
|
|
|
| COMPONENTS |
| Accordion |
|
|
|
|
| Buttons |
|
|
|
|
| Collection Card |
|
|
|
|
| Contact Card |
|
|
|
|
| CTA bar |
|
|
|
|
| Explore Card |
|
|
|
|
| Hero Banner Image |
|
|
|
|
| Hero Banner Video |
|
|
|
|
| HTML widget |
|
|
|
|
| Image component |
|
|
|
|
| Message Bar |
|
|
|
|
| News: Listing component and UI filters |
|
|
|
|
| News: News Article page |
|
|
|
|
| News: feature social share |
|
|
|
|
| Quote accolade |
|
|
|
|
| Responsive table |
|
|
|
|
| RTE |
|
|
|
|
| RTE Icon bullets |
|
|
|
|
| RTE Static Table |
|
|
|
|
| Spacer 16 |
|
|
|
|
| Spacer 24 |
|
|
|
|
| FORM UI COMPONENTS |
| Checkbox |
|
|
|
|
| Combo box (Multiple choice) |
|
|
|
|
| Data Consent |
|
|
|
|
| Date |
|
|
|
|
| Drop-down list |
|
|
|
|
| File upload |
|
|
|
|
| Hidden |
|
|
|
|
| Marketing opt-in |
|
|
|
|
| Newsletter subscription form (test as part of footer) |
|
|
|
|
| Password |
|
|
|
|
| Radio (Single choice) |
|
|
|
|
| Recaptcha v2 |
|
|
|
|
| Recaptcha v3 with score |
|
|
|
|
| Rich text |
|
|
|
|
| Text area (Long answer) |
|
|
|
|
| Text field (Short answer) |
|
|
|
|
| Title and description |
|
|
|
|
| CONTAINERS: GRIDS & LAYOUTS |
| Layout Container |
|
|
|
|
| Grid Layout |
|
|
|
|
| Section block |
|
|
|
|
| 1-col or single column |
|
|
|
|
| 1:1 2-col or 2 column even |
|
|
|
|
| 2:1 2-col or 2 column uneven |
|
|
|
|
| 1:2 2-col or 2 column uneven reverse |
|
|
|
|
| 1:1:1 3-col or 3 column |
|
|
|
|
| 1:1:1:1 4-col or 2 column |
|
|
|
|
| Manuscript 1-col or single column |
|
|
|
|
| Manuscript 2-col or 2 column |
|
|
|
|