WebBGC 2026 Theme: Design & Component Reference
This page is a visual reference for the components included in the WebBGC 2026 theme for typography, colours, buttons, calls to action, and other content blocks. Use it as a guide when planning or reviewing your club’s site.
Quick Links
Image Rounded Corners (Default)
Image Upload Guidelines
To ensure optimal website loading speed and the best visual experience, please crop and compress your images based on the recommendations below before uploading.
Hero Images
Best for: Large in-content images and wide backgrounds.
- Dimensions: 1920 x 1080 px
- Max File Size: Under 300 – 400 KB
- Format: JPG or WebP
Standard / Half-Width Images
Best for: Blog post images and side-by-side text/image layouts.
- Dimensions: 800 x 600 px (or 1024 x 768 px)
- Max File Size: Under 100 – 150 KB
- Format: JPG or WebP
Thumbnails / Headshots
Best for: Team member headshots, product thumbnails, and logos.
- Dimensions: 400 x 400 px (1:1 Square)
- Max File Size: Under 50 KB
- Format: JPG (for photos) or PNG (for transparent backgrounds)
Small Icons
Best for: UI icons, service feature badges, and small graphics.
- Dimensions: 100 x 100 px (1:1 Square)
- Max File Size: Under 20 KB
- Format: JPG or PNG
Font Styles
Lorem Ipsum – H1
Lorem Ipsum – H2
Paragraph text – default colour – Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem Ipsum – H3
Lorem Ipsum – H4
Lorem Ipsum – H5
Ordered List:
- item one
- item two
- item three
Unordered List:
- item one
- item two
- item three
Text highlight
The text highlight is yellow by default. If you want to use a green or purple highlight, you will need to add an extra CSS class style to the content. Please refer to the support doc – highlight.
Highlighted text – purple class highlight colour – Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Highlighted text – purple class highlight colour – Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Highlighted text – purple class highlight colour – Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Colour Values
Links
Inline link style
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Buttons
The button’s background color, text color, and outline color are configured via the Divi Builder.
By default, the button hover state matches the green button style. If you want to implement a purple or red button, you will need to add an extra class name to the button. For details, please refer to the support doc – button.
Call To Action
Title-Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur. Nibh tellus adipiscing pellentesque in sagittis fermentum cursus sed ut. Dui nunc a commodo arcu.
Title-Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur. Nibh tellus adipiscing pellentesque in sagittis fermentum cursus sed ut. Dui nunc a commodo arcu.
Call To Action – Hover
Testing
Belonging to a Boys and Girls Club is often a life-changing experience. Children can build healthy, supportive relationships with caring adult role models, which in turn can positively influence the life path they choose. Clubs also encourage healthy, respectful relationships with peers and family members.
2 Columns Block
Nulla Vitae Elit Libero a Pharetra Augue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus tellus ac cursus commodo.
Nulla Vitae Elit Libero a Pharetra Augue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus tellus ac cursus commodo.
Divi Module: Testimonial
Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Divi Module: Accordion
Title-Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur. Nibh tellus adipiscing pellentesque in sagittis fermentum cursus sed ut. Dui nunc a commodo arcu.
Title-Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur. Nibh tellus adipiscing pellentesque in sagittis fermentum cursus sed ut. Dui nunc a commodo arcu.
Title-Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur. Nibh tellus adipiscing pellentesque in sagittis fermentum cursus sed ut. Dui nunc a commodo arcu.
Title-Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur. Nibh tellus adipiscing pellentesque in sagittis fermentum cursus sed ut. Dui nunc a commodo arcu.
Find Your Club
The interactive Find Your Club map is available exclusively with the WebBGC Plus package. It provides visitors with an easy, engaging way to search for nearby club locations and view key location details in a convenient pop-up window.
This feature is not included with the WebBGC Standard or WebBGC Starter packages. Clubs interested in adding the interactive map and other enhanced website features can explore upgrading to WebBGC Plus.
Select the link below to visit the Find your club page and preview the map experience.
BGC Canada Brand Assets & Canva Templates
Newly updated for 2026
Looking for approved BGC brand assets or editable templates? BGC Canada’s National Office provides a collection of Canva resources for clubs, including logos, brand guidelines, fonts, social media templates, website graphics, signage, presentations and promotional materials.
These national resources are provided as a convenient reference and are separate from the WebBGC components and website support offered by Innermost Digital.