Government of Canada / Gouvernement du Canada

Search

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 canada.ca. 2023-05-12.

Progressive enhancement note:

On this page

Red background and white text

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

Appearance

This text is styled with .bg-dark, .bg-canadaday and .text-white.

Correct use

Compliance point(s):

  • Use to introduce contrast to information
  • Use .bg-canadaday in combination with .text-white to ensure sufficient contrast between text and background
  • Use a fallback colour such as .bg-dark for sections and paragraphs, .btn-info for buttons or .panel-default for panels to accommodate progressive enhancement
  • Wrap text in a <span> tag if a style does not appear as it is meant to, due to specificity reasons

Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use as the only way to communicate information or intent, as colour alone is not accessible

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

Example of a heading

This section is styled with .bg-dark, .bg-canadaday and .text-white.

Link 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

Button
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

Lorem ipsum dolor sit amet.

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

Lorem ipsum dolor sit amet.

Details/summary polyfill example

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Correct use

Compliance point(s):

  • Use to introduce contrast to information
  • Use only with block elements <p>, <ol>, and <ul> and inline elements <a>, <strong> and <em>.
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use as the only way to communicate information or intent, as colour alone is not accessible
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
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Beige background

Use to make text appear on a beige background.

Appearance

This text is styled with .bg-canadaday-beige.

Correct use

Compliance point(s):

  • Use to introduce contrast to information
  • Use .bg-canadaday-beige with the default text colour to ensure sufficient contrast between text and background
  • Use a fallback colour such as .btn-default for buttons to accommodate progressive enhancement
  • Wrap text in a <span> tag if a style does not appear as it is meant to, due to specificity reasons

Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use as the only way to communicate information or intent, as colour alone is not accessible

Code

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

CSS classes

.bg-canadaday-beige
Set a background colour to beige

Examples

Section example

Example of a heading

This section is styled with .bg-canadaday-beige.

Link 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

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

Feature tiles using panels

Appearance

Title 1 with new CSS

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

Title 2 with new CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 3 with new CSS

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.

Code

<div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
        <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">            
            <header class="panel-heading">
                <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
                <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 1 with new CSS</a></h4>
            </header>
            <div class="panel-body mrgn-bttm-0">
                <p class="mrgn-bttm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu.</p>
            </div>
        </section>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
        <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">            
            <header class="panel-heading">
                <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
                <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 2 with new CSS</a></h4>
            </header>
            <div class="panel-body mrgn-bttm-0">
                <p class="mrgn-bttm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </section>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
        <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">            
            <header class="panel-heading">
                <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
                <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 3 with new CSS</a></h4>
            </header>
            <div class="panel-body mrgn-bttm-0">
                <p class="mrgn-bttm-0">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.</p>
            </div>
        </section>
    </div>

CSS classes

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

Page details

Date modified: