Canada Day 2021 red theme

Sponsor: PCH - Nick Frenette (@nfrenette)

Accessibility statement: This colour meets the colour contrast requirements as outlined in WCAG 2.0 AA Success Criterion 1.4.3: Contrast (Minimum). Tested by Nick Frenette, nick.frenette at canada.ca. 2021-06-01.

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

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 color to red

.panel-canadaday

Set border colour for panel to red

hr.brdr-canadaday

Set border colour for <hr> to red

Examples

Container

Code

<div class="well bg-dark bg-canadaday text-white">
    <h2 class="mrgn-tp-0">Example of a heading</h2>
    <p>This container 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 type="button" class="bg-dark bg-canadaday text-white">Button example</button>
</div>

<button> example

Button

Code

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

<a> btn example

Button

Code

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

<hr> example

---

Code

<hr class="brdr-canadaday">

Standard <hr>

---

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 primary panel border