Designs
The distribution has shipped with two generations of Layout Builder component designs. The first-generation “Pre-release” designs were included with versions 9.2.12 (December 2022) and 9.2.13 (March 2023). The refined and feature-complete “Design System” designs were released in June 2023.
Design System
Explore our Design System through our interactive UI kit.
Colorways
Following the YMCA Brand Guide, the distribution offers four “colorways.” Content editors can use these to apply accessible, brand-compliant styles to all components within a Layout Builder-based page.
| Blue | Green | Purple | Red |
|---|---|---|---|
 |  |  |  |
Canadian Colorways
Refer to How to use the Canadian Colorway for Layout Builder for specific instructions.
Content Types
The distribution offers new Content Types designed for use with Layout Builder components.
| Article | Branch | Camp | Event |
|---|---|---|---|
 |  |  |  |
Components
You can access each of these components on Layout Builder pages via the Create custom block selector.
| Component | Design |
|---|---|
| Accordion |  |
| Amenities |  |
| Article List |  |
| (Hero) Banner |  |
| Branch Hours |  |
| Branch Menu |  |
| Branch Preferred Branch |  |
| Branch Social Links |  |
| Breadcrumbs |  |
| Camp Menu |  |
| Camp Video Banner |  |
| Card |  |
| Card - Column Variations |  |
| Carousel |  |
| Donate |  |
| Event List |  |
| Forms |  |
| Global Footer |  |
| Global Header |  |
| Grid Content |  |
| Icon Grid |  |
| Icons and Logos |  |
| Locations |  |
| Menu and Search |  |
| Modal |  |
| Ping Pong |  |
| Promo Cards |  |
| Side Menu |  |
| Sponsors |  |
| Staff |  |
| Statistics |  |
| Table (Simple Content) |  |
| Tabs |  |
| Testimonials |  |
| Utility Menu |  |
Pre-release
View the designs
| Component | Mobile | Desktop |
|---|---|---|
| Accordion |  |  |
| Article (/News /Blog /Press Release) |  |  |
| Branch |  |  |
| Branch Amenities |  |  |
| Branch Hours |  |  |
| Branch Menu |  |  |
| Branch Social Links |  |  |
| Breadcrumbs |  |  |
| Cards |  |  |
| Carousels |  |  |
| Event |  |  |
| Grid Content |  |  |
| Hero Banner |  |  |
| Modals |  |  |
| Partners (/Sponsors) |  |  |
| Ping Pong |  |  |
| Promo Cards |  |  |
| Simple Menu |  |  |
| Staff |  |  |
| Statistics |  |  |
| Tables |  |  |
| Tabs |  |  |
| Testimonials |  |  |
| Webforms |  |  |