Government of Canada / Gouvernement du Canada

Search

Winterlude 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-01-03.

Progressive enhancement note:

On this page

Customized heading 1 with larger font and a blue bottom border underline

Use to increase the font size and add a blue bottom border underline to the h1.

For an example of the appearance, please see the h1 of this page that is styled with the class .winterlude.

Correct use

Compliance point(s):

  • Use to style the h1 for Winterlude campaign pages

Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<h1 class="winterlude">...</h1>

CSS classes

.winterlude
Increase the font size and add a blue bottom border underline

Blue background and white text

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

Appearance

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

Correct use

Compliance point(s):

  • Use to introduce contrast to information
  • Use .bg-winterlude 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-winterlude text-white">...</p>

CSS classes

.bg-winterlude
Set a background colour to blue
.panel-winterlude
Set border colour for panel to blue
hr.brdr-winterlude
Set border colour for <hr> to blue

Examples

Section example

Example of a heading

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

Link example

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

<button> .btn example

Code

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

<a> .btn example

Anchor

Code

<a href="#" class="btn btn-info bg-winterlude text-white">Anchor</a>

<hr> example

Code

<hr class="brdr-winterlude">

Standard <hr> for visual comparison reference

Panel border example

Lorem ipsum dolor sit amet.

Code

<div class="panel panel-default panel-winterlude">
    <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

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
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code

<details class="bg-winterlude mrgn-tp-sm mrgn-bttm-sm">
    <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>
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light blue background

Use to make text appear on a lightblue background.

Appearance

This text is styled with .bg-winterlude-lightblue.

Correct use

Compliance point(s):

  • Use to introduce contrast to information
  • Use .bg-winterlude-lightblue 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-winterlude-lightblue">...</p>

CSS classes

.bg-winterlude-lightblue
Set a background colour to light blue

Examples

Section example

Example of a heading

This section is styled with .bg-winterlude-lightblue.

Link example

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

<button> .btn example

Code

<button class="btn btn-default bg-winterlude-lightblue" type="button">Button</button>

<a> .btn example

Anchor

Code

<a href="#" class="btn btn-default bg-winterlude-lightblue">Anchor</a>

Page details

Date modified: