Government of Canada / Gouvernement du Canada

Search

Zero Emission Vehicles (ZEV) Theme

Sponsor: NRCan - Eric Goodwin (@auxonic)

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 Eric Goodwin, eric.goodwin at nrcan-rncan.gc.ca. 2023-04-18. See the compliance notes regarding the risk of using these colours to convey meaning

Progressive enhancement note:

On this page

Coloured Backgrounds

Used to theme an element with the green or purple background and text colors

Appearance

ZEV Green

This section is styled with .bg-zev-green.

Link example. Note the smaller padding on this well.

ZEV Purple

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

Link example

Normal Well

This section is styled with .well.

Link example

Correct use

Compliance point(s):

  • Use to introduce contrast to information
  • Use .bg-zev-purple in combination with .text-white to ensure sufficient contrast between text and background
  • In the case of .bg-zev-purple 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
  • For buttons using these colours ensure a fallback is provided using the .btn-default class

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
  • These colours should not be used to convey meaning unless there is also text to support the distinction. Remember that these classes may be removed and some users will not see them.

CSS classes

.bg-zev-green
Set a background colour in an element or well to green
.bg-zev-purple
Set a background colour in an element or well to purple
.btn-zev-green
Set a button to the ZEV purple green
.btn-zev-purple
Set a button to the ZEV purple style
.panel-zev-green
Set a Panel to the ZEV purple green header, footer, and border.
.panel-zev-purple
Set a Panel to the ZEV purple purple header, footer, and border.

Examples

Well example

This is a .bg-zev-green well wrapper with .well-text on the header

Station locator

This is a .bg-zev-purple well

This is a .bg-zev-green with .well-sm for smaller padding

Donec at sem in augue accumsan scelerisque.

This is a .bg-zev-purple with .well-sm for smaller padding

Donec at sem in augue accumsan scelerisque.

Code

<div class="well mrgn-bttm-0 text-center bg-zev-green">
      <h4 class="well-text">This is a <code>.bg-zev-green</code> well wrapper with <code>.well-text</code> on the header</h4>
      <p><a class="btn btn-lg btn-default mrgn-tp-md btn-zev-purple" href="#">Station locator</a></p>
    </div>
    <div class="well bg-dark text-white bg-zev-purple">
      <ul class="list-unstyled lst-spcd mrgn-lft-md mrgn-rght-sm mrgn-bttm-0 text-white">      
        <li><h4 class="text-white mrgn-tp-sm well-text">This is a <code>.bg-zev-purple</code> well</h4></li>
        <li><a class="text-white well-link" href="#">Incentives for buyers and dealerships</a></li>
        <li><a class="text-white well-link" href="#">Infrastructure and awareness project funding</a></li>
      </ul>    
    </div>
    
    <div class="row">
      <div class="col-md-6">
        <div class="well well-sm bg-zev-green">
          <h4 class="well-text">This is a <code>.bg-zev-green</code> with <code>.well-sm</code> for smaller padding</h4>
          <p>Donec at sem in augue accumsan scelerisque.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="well well-sm bg-dark text-white bg-zev-purple">
          <h4 class="well-text">This is a <code>.bg-zev-purple</code> with <code>.well-sm</code> for smaller padding</h4>
          <p>Donec at sem in augue accumsan scelerisque.</p>
        </div>  
      </div>
    </div>

Button example

Code

<a href="#" class="btn btn-default btn-zev-green">This is a button in the <code>.btn-zev-green</code> style</a>
<a href="#" class="btn btn-default btn-zev-purple">This is a button in the <code>.btn-zev-purple</code> style</a>

Panels example

This is a .panel-zev-green panel

Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vel eros donec ac odio tempor orci. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Non enim praesent elementum facilisis leo vel fringilla est. Amet justo donec enim diam vulputate.

Mi sit amet mauris commodo quis imperdiet.

This is a .panel-zev-purple panel

Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vel eros donec ac odio tempor orci. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Non enim praesent elementum facilisis leo vel fringilla est. Amet justo donec enim diam vulputate.

Mi sit amet mauris commodo quis imperdiet.

Code

<section class="panel panel-default panel-zev-green">
  <header class="panel-heading">
    <h4 class="panel-title">This is a <code>.panel-zev-green</code> panel </h4>
  </header>
  <div class="panel-body">
    <p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vel eros donec ac odio tempor orci. <a class="well-link" href="#">Morbi tincidunt augue interdum </a>velit euismod in pellentesque massa. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Non enim praesent elementum facilisis leo vel fringilla est. Amet justo donec enim diam vulputate.</p>
  </div>
</section>

<section class="panel panel-default panel-zev-purple">
  <header class="panel-heading">
    <h4 class="panel-title">This is a <code>.panel-zev-purple</code> panel </h4>
  </header>
  <div class="panel-body">
    <p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vel eros donec ac odio tempor orci. <a class="well-link" href="#">Morbi tincidunt augue interdum </a>velit euismod in pellentesque massa. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Non enim praesent elementum facilisis leo vel fringilla est. Amet justo donec enim diam vulputate.</p>
  </div>
</section>

Page details

Date modified: