Template | BGC Canada

Template

Template Quick Links

This page consists of all template examples of fonts, colours, classes, and call-to-actions. For more information, please contact the site administrator.

Banner Template

The only absolute safe zone between all devices is the cross section within the very centre where you see the screen size descriptions. All other zones will flex and change in regards to the device’s responsive width.

Image Sizes

Home Page

  • Call-to-actions: 445×465 (DIVI National CTA – 2 Columns – Right/Left)
  • Video thumbnail: 888×499

General

  • All icons: 350×350
  • Landing banners: 1425×400
  • Director, staff, volunteer photos: 300×300

Who We Are

  • Call-to-actions: 445×465 (DIVI National CTA – 1 Column – Centre)

Mission & Vision

  • Call-to-actions: 888×400 (DIVI National CTA – 2 Rows – Description)

Our Team

  • Executive photos: 445×567 (ACF)

Our Partners

  • Sponsor logos: 524×260 (ACF)

Annual Report

  • Call-to-actions: 444×384 (ACF)

What We Do

  • Call-to-actions: 540×300 (DIVI National CTA – 2 Rows – Button)
  • Program sponsor logos: 200×50

How We Help

  • Call-to-actions: 444×481 (ACF)

News & Events

  • Blog image: 855×380 (WP)
  • Event images: 536×250 (WP)

Support BGCC

  • Banner image: 1425×800 (ACF)
  • Donate option images: 600×600 (ACF)
  • Thank you image: 596×462 (ACF)

Large Headers

<H1> – Curabitur blandit tempus porttitor. (55px, green, bold)

<H2> – Curabitur blandit tempus porttitor. (40px, green, bold)

<H6> – Curabitur blandit tempus porttitor. (30px, dark grey, bold)

Small Headers

<H3> – Curabitur blandit tempus porttitor. (24px, medium grey)

<H4> – Curabitur blandit tempus porttitor. (20px, dark grey)

<H5> – Curabitur blandit tempus porttitor. (16px, dark grey, bold)

Body Texts

<P> <Strong> <Italic> – Curabitur blandit tempus porttitor. (16px, dark grey)

<P> <Italic> – Curabitur blandit tempus porttitor. (16px, dark grey)

<P> – Curabitur blandit tempus porttitor. (16px, dark grey)

<ul><li> Unordered List (16px)

  • Unordered list 1 – default green button and text
  • <span>Unordered list 2</span> – use <span> tag for dark grey text
  • Unordered list 3

<ol><li> Ordered list (16px)

  1. Ordered list 1 – default dark grey text
  2. Ordered list 2
  3. Ordered list 3

Colour Values

Primary

Green – (HEX) #7AC142; // (RGB) rgba(122, 193, 66, 1)
Blue – (HEX) #00A4E3; // (RGB) rgba(0, 164, 227, 1)
Teal – (HEX) #2EBCB4; // (RGB) rgba(46, 188, 180, 1)
Orange – (HEX) #FBA519; // (RGB) rgba(251, 165, 25, 1)
Yellow – (HEX) #FBEE23; // (RGB) rgba(251, 238, 35, 1)
Navy – (HEX) #202656; // (RGB) rgba(32, 38, 86, 1)
Coral – (HEX) #F0494A; // (RGB) rgba(240, 73, 74, 1)

Neutral

Black – (HEX) #000000; // (RGB) rgba(0, 0, 0, 1)
Night Rider – (HEX) #333333; // (RGB) rgba(51, 51, 51, 1)
Dim Grey – (HEX) #666666; // (RGB) rgba(102, 102, 102, 1)
Grey – (HEX) #888888; // (RGB) rgba(136, 136, 136, 1)
Dark Grey – (HEX) #AAAAAA; // (RGB) rgba(170, 170, 170, 1)
Gainsboro – (HEX) #DDDDDD; // (RGB) rgba(221, 221, 221, 1)
Whisper – (HEX) #EEEEEE; // (RGB) rgba(238, 238, 238, 1)

Custom Text Colour Classes

.txt-green – Green colour texts

.txt-blue – Blue colour texts

.txt-yellow – Yellow colour texts

.txt-teal – Teal colour texts

.txt-navy – Navy colour texts

.txt-red – Red(Coral) colour texts

.txt-orange – Orange colour texts

DIVI Custom Call-to-Actions Syntax

All custom Divi CTA class syntax and examples are listed below.

  • .bgcn-cta-2col-right .pattern .teal
  • .bgcn-cta-2col-left .pattern .teal
  • .bgcn-cta-2row .pattern .teal
  • .bgcn-cta-2row-btn .pattern .teal
  • .bgcn-cta-1col-centre

For other custom colours, replace TEAL with any of the colour class syntax below.

  • .green
  • .teal
  • .orange
  • .navy
  • .yellow

DIVI Custom CTA Examples

National CTA - 2 Columns - Left

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.

To read more, click the link below to continue learning about Lorem Ipsum Title.

Button Link

National CTA - 2 Columns - Right

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.

To read more, click the link below to continue learning about Lorem Ipsum Title.

Button Link
IMAGE ALT TEXT

National CTA – 2 Rows – Description

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

IMAGE ALT TEXT

National CTA – 2 Rows – Description

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

CTA TITLE call to action widget with a picture of IMAGE ALT TEXT.IMAGE ALT TEXT

Lorem Ipsum CTA TITLE

Button Link

Lorem Ipsum Title

CTA TITLE call to action widget with a picture of IMAGE ALT TEXT.IMAGE ALT TEXT

Lorem Ipsum CTA TITLE

Button Link

CTA TITLE call to action widget with a picture of IMAGE ALT TEXT.IMAGE ALT TEXT

National CTA - 1 Column - Centre

CTA TITLE call to action widget with a picture of IMAGE ALT TEXT.IMAGE ALT TEXT

National CTA - 1 Column - Centre

BGC Canada acknowledges that our work spans many Territories and Treaty areas and we are grateful for the traditional Knowledge Keepers and Elders who are with us today, those who have gone before us and the youth that continuously inspire us in the work that we do. BGC Canada’s mission statement is to provide safe, supportive places where children and youth can experience new opportunities, overcome barriers, build positive relationships, and develop confidence and skills for life. We recognize that these values are impossible to attain without the ongoing guidance and partnership with Indigenous peoples.

Share This
Listen to this article