Designs

An overview of all custom Layout Builder blocks.

The distribution has shipped with two versions of Layout Builder component designs. The first-generation “Pre-release” designs were shipped with version 9.2.12 (December 2022) and 9.2.13 (March 2023). The revised and feature-complete “Design System” designs shipped with the June 2023 release.

Design System

Discover our Design System in our interactive UI kit.

Colorways

Based on the YMCA Brand Guide, the distribution contains four “colorways” that allow content editors to apply accessible, brand-compliant styles to all components on a Layout Builder-based page.

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

Canadian Colourways

YMCA of the USA has partnered with YMCA Canada to create a brand-compliant and accessible colourway for use by Canadian YMCAs.

The colourway is packaged as the Canada Layout Builder Colorway on Drupal.org and is included with the full YMCA Layout Builder package.

Content Types

The distribution provides new Content Types for use with Layout Builder components.

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

Components

Each of these components is available 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
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