Vitality theme

The colours offered by this theme aim to evoke a sense of vitality for the user during certain life events, such as the addition of a child to your family.

Sponsor: Francis Snoddy on behalf of ESDC - Portfolio web

Accessibility statement: These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). After validation using WebAIM online contrast checker, I can certified that the color matches used in this thematic are meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and also a contrast ratio of at least 3:1 for graphics and user interface components. I did my due diligence and to knowledge and from my understanding, all elements of this thematic are meeting WCAG 2.1 AA standards. Tested by Francis Snoddy, francis.snoddy@hrsdc-rhdcc.gc.ca. 2025-01-17.

Progressive enhancement note:

• The btn-vitality class must be accompanied with a fall back button class such as btn-default or btn-primary.

CSS classes

.vitality

When applied to the <h1> element it sets a green underline to the title element of the page.

When applied to the Steps Quiz along with the wb-steps and quiz it set the thematic colours to the navigation buttons, the progress bar and to the <legend> text.

.cards

Cards can be used with .light-hover or .dark-hover to change the colours on hover or active states.

.text-vitality

Style the content with the primary thematic color.

.bg-vitality

Style the content's background with the primary thematic color.

.bg-vitality-light

Style the content's background with the secondary thematic color.

.btn-vitality

Along with .btn-primary or .btn-default, set a green colour thematic to buttons.

.printable-checklist

Displays a checkbox besides open summary elements on print media.

Examples

Green Underline to the <h1>

The example has been applied to the <h1> element of this page.

Code

<h1 property="name" id="wb-cont" class="vitality"><-- Page title --></h1>

Cards

Example of cards used in a grid layout.

Code

<div class="row vitality">
	<div class="col-xs-12 col-md-4">
		<div class="cards">
			<h4><a href="#" class="stretched-link">Default card title</a></h4>
			<p>Default card content</p>
		</div>
	</div>
	<div class="col-xs-12 col-md-4">
		<div class="cards light-hover">
			<h4><a href="#" class="stretched-link">Light card with hover</a></h4>
			<p>Default card content</p>
		</div>
	</div>
	<div class="col-xs-12 col-md-4">
		<div class="cards dark-hover">
			<h4><a href="#" class="stretched-link">Dark card with hover</a></h4>
			<p>Default card content</p>
		</div>
	</div>
</div>

Green text

This is green text

Code

<p class="text-vitality">This is green text</p>

Green background

This is on a green background

Code

<p class="bg-vitality">This is on a green background</p>

Light green background

This is on a light green background

Code

<p class="bg-vitality-light">This is on a light green background</p>

Light Green Button

Code

<button class="btn btn-default btn-vitality" type="button">Button</button>

Steps Form with progress bar

Code

<div class="wb-frmvld provisional wb-steps quiz vitality panel-body">
    <!-- Steps Form -->
</div>

Open summary elements with checkboxes in print view

• Item 1 to do

  Description of what needs to be done.

• Item 2 to do

  The expanded summaries will have a checkbox besides them on print media.

Code

<ul class="printable-checklist">
	<li>
		<details>
			<summary>Item 1 to do</summary>
			<p>Description of what needs to be done.</p>
		</details>
	</li>
	<li>
		<details>
			<summary>Item 2 to do</summary>
			<p>The expanded summaries will have a checkbox besides them on print media.</p>
		</details>
	</li>
</ul>