Aquatics Programs
Ages 3+
Learn to swim with the Y
Small class sizes, certified instructors, and progressive skill levels from Parent & Tot through Bronze Cross.
YMCA Ignite LMS — Component Styleguide
This page catalogues every component that is usable on the standard Default Page layout for this site. When adding a section to a page, the CMS's Add component pop up lists many layouts, but not all of them will render on this site — only the ones shown below have a matching template in this theme.
Each section below is preceded by a small heading with the component name and its layout ID (shown in parentheses). If a component isn't shown here, treat it as unavailable.
⚠ Components you should NOT use on this site
These layouts appear in the Add component pop up but have no matching template in this theme. Adding any of them to a page will render as an empty section on the live site:
- Y Guide: Search Bar
- Form — Multistep
- Form — Try the Y
- Map
- Find a Y Widget
- Y Guide: Activities
- Map With Search Filter
- Form — Conditional
- Form — Review Form
- Word Cloud
- Faceted Search Section
- Faceted Search
Also note: the Pop-up Window component is supported by this theme but is intentionally not demoed on this page (it would auto-open every time you visit the styleguide). Use it on real pages when you need a scheduled overlay modal.
01 — Rich Text (layout 73)
Standard rich-text block. Supports headings, paragraphs, links, lists, tables, bold, italic, code.
Heading three
A rich-text component with a link to the catalogue, bold, italic, and inline code.
- Bullet list item one
- Bullet list item two
- Bullet list item three
- Ordered list item one
- Ordered list item two
A blockquote for emphasis or a pulled quote from your content.
02 — CTA (layout 51)
Call-to-action banner with pre/post headings, rich text, and up to N buttons. Full-bleed backdrop; supports background image + colour blend.
03 — Section CTA (layout 21)
Thin banner with a title, subtitle, and a single button on the right. Useful for narrow calls to action between page sections.
05 — MEDIA COMPONENTS
YouTube Popup + Card Portrait (in Columns)
Both components look better nested inside a container. Here they sit side-by-side in a two-column layout.
YouTube Popup Video (layout 71) and Card: Portrait (layout 72) don't render well as full-width root components. Nest them in Columns, a Slider, or a Card container instead.
07 — Card: Landscape (layout 96)
Wide (side-by-side) card with the image beside the text. Same content areas as Card: Portrait but arranged horizontally.
First Aid & CPR Certification
Get certified in one weekend
Standard First Aid, CPR-C, and AED training — delivered by Canadian Red Cross-certified instructors at YMCA locations across the GTA.
08 — Image (Mobile / Desktop) (layout 146)
Serves separate images to mobile vs. desktop breakpoints. Useful when a horizontal hero shot needs a portrait crop on phone.
09 — Legacy Banner (layout 95)
Full-width hero banner with separate desktop / mobile images and an optional clickable action.
10 — Testimonial Grid (layout 140)
Grid of testimonial cards. The cards collection accepts Testimonial Cards, Images, YouTube popups, and Rich Text — mix and match.
“The instructors were knowledgeable, patient, and made every session engaging. I felt confident by the end of week one.”
“As a first-time parent, the Parent & Tot swim program was invaluable. My daughter now loves the water.”
“Great value and flexible scheduling. Booking online through the new LMS is much easier than the previous system.”
11 — Form (layout 91)
Renders a Form record inline in the page. Pick which form to display; the form's own fields, layout, and submission handling are configured on the Form record.
12 — FAQ Section (layout 41)
Embeds the questions and answers from a FAQ Page record. Choose which FAQ page to display; the questions themselves are edited on that FAQ Page.
HELP CENTRE
Frequently asked questions
Pulled from the /faq FAQ Page. Edit questions there.
YMCA Ignite Course Refund Policy
At YMCA Ignite, we want you to be satisfied with your learning experience. If for any reason you are not, you may request a refund for any course purchased on our platform under the following conditions:
- Refund Eligibility: You may request a refund within 14 days of purchasing the course, provided that you have not completed more than 20% of the course content.
- Refund Request Process: To request a refund, please contact our support team at ymcaignite@ymcagta.org with your purchase details and reason for the refund request.
- Refund Exceptions: Refunds will not be granted if more than 20% of the course content has been accessed or if the request is made after the 14-day period.
Please allow 7-10 business days for the refund to be processed once approved.
For any additional support or questions with the platform, please contact us directly at ymcaignite@ymcagta.org.
For any additional support or questions with the platform and your account transition, please contact us directly at ymcaignite@ymcagta.org.
13 — Accordion (layout 78)
Container of expandable rows (Accordion Elements). Each element has an optional subheading and rich-text content. Also nestable inside Columns and Tabs.
FREQUENTLY ASKED
Accordion — top-level
Click each row to expand.
Standalone accordion outside any container.
The Ignite LMS is the YMCA's online learning management system.
Browse the catalogue, add a course to cart, and check out.
Yes — certificates are issued on course completion.
This row has both a subheading and content; the previous row only had content.
14 — Columns (layout 75)
Container that splits its content into 2 or 3 columns. The Columns Layout setting picks the split (equal, 2-1-1, 1-1-2, etc.). Content can be any of: Rich Text, Image, YouTube popup, Card Portrait, Card Landscape, CTA, FAQ, Form, Slider, Accordion, Tabs.
Three variants below show different splits and nested content.
VARIANT A
Two equal columns — Rich Text + Image
The most common split. Content sits side by side on desktop and stacks on mobile.
2-1-1 = 2 columns, both taking 1 fraction of the row width each.
Aquatics at the Y
Small class sizes, certified instructors, and a progressive skill-level system that runs from Parent & Tot through Bronze Cross.
Book online, drop in at your local branch, or sign up for a full-season pass.
VARIANT B
Three equal columns — mixed content
Text + image + card, all at equal width.
Column one
A rich-text panel with a paragraph of copy and a link to the catalogue.
First Aid & CPR
Get certified
Standard First Aid, CPR-C, and AED training.
VARIANT C
Two columns — Portrait + Landscape cards on dark
Asymmetric 1fr / 2fr split. Middle vertical alignment.
Programs
Portrait card in narrow column
Portrait card sits in the narrow 1fr column.
Wide column
Landscape card in wide column
Landscape card sits in the wide 2fr column and gets more breathing room for copy.
15 — Tabs (layout 97)
Tabbed container. Each tab hosts a nested component: Rich Text, Image, Slider, Columns, Accordion, CTA, FAQ, Form, Legacy Banner, or Jump Menu. Below, four tabs each host a different nested component.
Tabs — varied nested content
Click each tab header to switch. Each panel demonstrates a different nested component.
Overview
This tab contains a plain Rich Text component. Simplest content — headings, paragraphs, and lists.
- Bullet one
- Bullet two
- Bullet three
Nested columns
A Columns component inside a tab — supported by Tabs (97).
NESTED
Accordion inside a tab
An accordion nested inside a tab — Tabs (97) supports Accordion (78).
Second expandable row of the nested accordion.
Third row. Rich text supported inside the accordion body.
16 — Slider (layout 74)
Auto-advancing slider. Each slide can be an Image, Rich Text, Card Portrait, CTA, or Columns. Auto-interval, controls, and pagination dots are all configurable.
Card in a slider
Portrait card slide
Cards work as slides too.
Columns inside a slide
Yes — you can nest a Columns component as a single slide.
17 — Container with Background Image (layout 99)
Full-bleed section with a background image (separate mobile image supported), colour blend, and a positioned content container on top. Good for hero-style feature sections.