Designs

An overview of all custom Layout Builder blocks and their 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.

BlueGreenPurpleRed
Blue Colorway Design
Green Colorway Design
Purple Colorway Design
Red Colorway Design

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.

ArticleBranchCampEvent
Article Content Type Design
Branch Content Type Design
Camp Content Type Design
Event Design

Components

You can access each of these components on Layout Builder pages via the Create custom block selector.

ComponentDesign
Accordion
Accordion Design
Amenities
Amenities Design
Article List
Article List Design
(Hero) Banner
(Hero) Banner Design
Branch Hours
Branch Hours Design
Branch Menu
Branch Menu Design
Branch Preferred Branch
Branch Preferred Branch Design
Branch Social Links
Branch Social Links Design
Breadcrumbs
Breadcrumbs Design
Camp Menu
Camp Menu Design
Camp Video Banner
Camp Video Banner Design
Card
Card Design
Card - Column Variations
Card - Column Variations Design
Carousel
Carousel Design
Donate
Donate Design
Event List
Event List Design
Forms
Forms Design
Global Footer
Global Footer Design
Global Header
Global Header Design
Grid Content
Grid Content Design
Icon Grid
Icon Grid Design
Icons and Logos
Icons and Logos Design
Locations
Locations Design
Menu and Search
Menu and Search Design
Modal
Modal Design
Ping Pong
Ping Pong Design
Promo Cards
Promo Cards Design
Side Menu
Side Menu Design
Sponsors
Sponsors Design
Staff
Staff Design
Statistics
Statistics Design
Table (Simple Content)
Table (Simple Content) Design
Tabs
Tabs Design
Testimonials
Testimonials Design
Utility Menu
Utility Menu Design

Pre-release

View the designs
ComponentMobileDesktop
Accordion
Accordion Mobile Design
Accordion Desktop Design
Article (/News /Blog /Press Release)
Article Mobile Design
Article Desktop Design
Branch
Branch Location Mobile Design
Branch Location Desktop Design
Branch Amenities
Branch Amenities Mobile Design
Branch Amenities Desktop Design
Branch Hours
Branch Hours Mobile Design
Branch Hours Desktop Design
Branch Menu
Branch Menu Mobile Design
Branch Menu Desktop Design
Branch Social Links
Branch Social Links Mobile Design
Branch Social Links Desktop Design
Breadcrumbs
Breadcrumbs Mobile Design
Breadcrumbs Desktop Design
Cards
Cards Mobile Design
Cards Desktop Design
Carousels
Carousels Mobile Design
Carousels Desktop Design
Event
Events Mobile Design
Event Desktop Design
Grid Content
Grid Content Mobile Design
Grid Content Desktop Design
Hero Banner
Hero Banner Mobile Design
Hero Banner Desktop Design
Modals
Modals Mobile Design
Modals Desktop Design
Partners (/Sponsors)
Sponsors Mobile Design
Sponsors Desktop Design
Ping Pong
Ping Pong Mobile Design
Ping Pong Desktop Design
Promo Cards
Promo Cards Mobile Design
Promo Cards Desktop Design
Simple Menu
Simple Menu Mobile Design
Simple Menu Desktop Design
Staff
Staff Mobile Design
Staff Desktop Design
Statistics
Statistics Mobile Design
Statistics Desktop Design
Tables
Tables Mobile Design
Tables Desktop Design
Tabs
Tabs Mobile Design
Tabs Desktop Design
Testimonials
Testimonials Mobile Design
Testimonials Desktop Design
Webforms
Webforms Mobile Design
Webforms Desktop Design
Last modified March 11, 2025: fix: markdown ai typo (7c7c61db)