Canada Day theme

Sponsor: PCH - Nick Frenette (@nfrenette)

Accessibility statement: These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). Tested by Nick Frenette, nick.frenette at pch.gc.ca. 2023-12-06.

Progressive enhancement note:

• The bg-canadaday class must be accompagnied with another dark contrast background colour such as bg-dark
• The panel-canadaday class must be accompagnied with a fall back color such as panel-default
• Use bg-canadaday-beige with standard text colour to ensure sufficient contrast between text and background

On this page

• Red background and white text
• Beige background
• Feature tiles using panels

Red background and white text

Use to make text appear white in colour on a red background.

Code

<p class="bg-dark bg-canadaday text-white">...</p>

CSS classes

.bg-canadaday

Set a background colour to red

.panel-canadaday

Set border colour for panel to red

hr.brdr-canadaday

Set border colour for <hr> to red

Examples

Section example

Code

<section class="well bg-dark bg-canadaday text-white">
    <h5 class="h3 mrgn-tp-0">Example of a heading</h5>
    <p>This section is styled with <code>.bg-dark</code>, <code>.bg-canadaday</code> and <code>.text-white</code>.</p>
    <p><a class="text-white" href="#">Link example</a></p>
    <button class="btn-info bg-canadaday text-white" type="button">Button example</button>
</section>

<button> .btn example

Code

<button class="btn btn-info bg-canadaday text-white" type="button">Button</button>

<a> .btn example

Code

<a href="#" class="btn btn-info bg-canadaday text-white" role="button">Button</a>

<hr> example

Code

<hr class="brdr-canadaday">

Standard <hr> for visual comparison reference

Panel border example

Code

<div class="panel panel-default panel-canadaday">
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

Standard default panel border for visual comparison reference

Details/summary polyfill example

Code

<details class="bg-canadaday">
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum <a href="#">dolor sit amet</a>, <strong>consectetur</strong> <em>adipiscing elit</em>.</p>
    <ul>
        <li>List item 1</li>
    </ul>
</details>

Standard default Details/summary polyfill for visual comparison reference

Beige background

Use to make text appear on a beige background.

Code

<p class="bg-canadaday-beige">...</p>

CSS classes

.bg-canadaday-beige

Set a background colour to beige

Examples

Section example

Code

<section class="well bg-canadaday-beige">
    <h5 class="h3 mrgn-tp-0">Example of a heading</h5>
    <p>This section is styled with <code>.bg-canadaday-beige</code>.</p>
    <p><a href="#">Link example</a></p>
    <button class="btn-default bg-canadaday-beige" type="button">Button example</button>
</section>

<button> .btn example

Code

<button class="btn btn-default bg-canadaday-beige" type="button">Button</button>

<a> .btn example

Code

<a href="#" class="btn btn-default bg-canadaday-beige" role="button">Button</a>

Feature tiles using panels

Image, linked heading, and text

Appearance

Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu.

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 3 lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu. Ut sit amet turpis sapien.

Linked heading, and text

Appearance

Linked text styled as a heading

Appearance

Image and linked text style as a heading, side-by-side

Appearance

Link text 1

Link text 2

Link text 3 lorem ipsum dolor sit amet

CSS classes

.panel-canadaday-card

Use .panel-canadaday-card to spotlight features

.panel-canadaday-card-compact

Use .panel-canadaday-card-compact to spotlight features