Style guide

Content creation

Before creating content, content creators and content providers need to understand and comply with the following:

Content creation principles
Information related to content (development, architecture, structure, style and flow), and print versus Web.
Canada.ca Content Style Guide
Includes writing guidelines, language quality, terminology, plain language, training, and related products.

Design and layout

The following components have been documented. They include:

Refer to: Working examples for further details.

Design elements
Design option Description Keywords Example Related to Design category Design feature
Absolute positioning

Use to position content on top of other content.

Tags: Links
CSS Style Structure and placement Absolute positioning
Ajax

Use to allow parts of one webpage to load or update within a second webpage (repurpose content).

Tags: Technology, Dynamic

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Alerts

Use to provide contextual feedback messages for typical user actions. Choose from a handful of available and flexible alert messages.

Tags: Colour

Alert

Info

Warning

Danger

CSS Style Callouts Alerts
Alignment

Use to align text to the left, centre or right. Or, use to align a block of content or an image to the centre.

Tags: Position

Left aligned text

Center aligned text/image A generic square placeholder image with rounded corners

Right aligned text

CSS Style Structure and placement Alignment
Archived information Use to helps users identify Web pages that have been archived online. Tags: Overlay, Invisible, Visible, Show, Hidden, Close, Exit

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Badges

Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.

Tags: Links

Link text 42

Link text 20

Link text 5

CSS Style Callouts Badges
Borders

Use to add single or multiple borders to design elements in order to separate or call attention to content. Additionally, remove default borders or sharpen corners that appear in design components such as a "well".

Tags: Horizonal rule (hr)

Left border

Right border

Top border

Bottom border

CSS Style Basic effects Borders
Buttons

Use buttons to create a call to action that entices the user to submit content from a form. Also, use buttons also take users to a webpage that provides additional information.

Tags: Colour, Links
CSS Style Basic effects,Text effects,Callouts Buttons
Calendar of events

Use the Calendar of events interface to navigate a chronological list of events.

Tags: Tables

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Carousel

Use a carousel to tab or cycle through content in a slide show format.

Tags: Tabs, Invisible, Show, Hide, Visible, Images, Slider, Links, Details, Summary, Expand

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Charts and graphs

Use to dynamically generate charts and graphs from a table.

Tags: Tables

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Code

Use to emulate source code and display it in monospace font.

Tags: Coding
<div class="container-fluid"> <div class="row"> ... </div> </div>
CSS Style Text effects Code
Code prettify

Use to provide syntax and highlight source code snippets within an HTML page.

Tags: Coding
<div class="container-fluid">
	<div class="row">
		...
	</div>
</div>
Plugins
Colour

Use colour as a presentation element for decorative purposes to convey information.

Tags: Background
  • Muted
  • Primary
  • Primary
  • Success
  • Success
  • Info
  • Info
  • Warning
  • Warning
  • Danger
  • Danger
CSS Style Basic effects Colour
Country identifier

Use a country identifier, a basic AjaxLoader wrapper, to  insert Ajaxed-in content, based on a visitor's country (determined by Free Geo IP).

Tags: Location

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Data inview

Use data inview to display an overlay when a section moves out of the viewport.

Tags: Overlay, Invisible, Visible, Show, Hidden, Close, Exit

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Data picture

Use to allow a webpage to specify different image sources to display, based on media queries.

Tags: Images

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Data tables

Use to enhance a data table and allow sorting, filtering, searching, pagination and other such features.

Tags: Paginate

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Datalist (auto complete)

Use to add auto-complete functionality to specific input fields; dynamically display a list of words that match a datalist.

Tags: Forms

( Tip: Type 'w' and cities will appear)

Plugins
Datalist (auto complete) − Dynamic

Use to update the contents of a datalist element dynamically, based upon user input.

Tags: Forms

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Date picker

Use to provide an interface to select a date in a form.

Tags: Input, Forms

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Dismissible content Use to make content dismissible by users. This is not the same as the Expand/collapse feature, as the content dissapears until the user clears their browser cookies. Tags: Visible, Invisible, Show, Hide,

Dismissible content A

Regular static content

Dismissible content B

Regular static content

Plugins
Equalize (Equal height)

Use to make grid cells the same height. Make the inner elements (panels, wells and so forth) inherit the height from the parent grid.

Tags: Panels, Wells, Borders

Column 1

Column 1

Column 2

Column 2

Column 2

Plugins
Expand and hide (Details/summary)

Use to create collapsible expand and hide widgets that a user can select to show or hide content.

Tags: Toggle, Links
  • Example 1

    Content goes here

  • Example 2

    Content goes here

Plugins
Favicon Use this plugin to provide the ability to add and update a webpage favicon. Tags: Branding

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Feedback form Use this component to allow users to submit feedback for a specific webpage or the website in general. Tags: Forms, Input, Submit

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Feeds

Use a feed widget to aggregate and display the entries from one or more web feeds on a webpage. Supported Web feed formats are Atom, RSS, and Media RSS.

Tags: Lists, Links

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Floats

Use a float to change the normal flow of an element. Push the element to the left or right of its container, where text and inline elements wrap around it.

Tags: Alignment

Floated left

Floated right

CSS Style Structure and placement Floats
Footnotes

Use a footnote to note a reference, citation, or comment that provides details about something on that page. It is non-critical content that relates to the main text, and is always at the bottom of the page.

Tags: Links

Body text here Footnote 1.

Plugins
Forms Use to collect and transmit information from users in a pre-defined format. Tags: Input, Label, Button, Submit, Radio button, Selectbox, Text area, Size
CSS Style Basic effects Forms
Forms validation Use to provide generic validation and error messages that handle web forms. Tags: Input, Label, Button, Submit, Validation
Plugins
Geomap

Use a geomap to display a dynamic map and overlay information from additional sources.

Tags: Location, Dynamic

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Grids

Use a grid system (a series of rows and columns that house content) to create page layouts.

Tags: Responsive
3/4
1/4
1/2
1/2
1/3
1/3
1/3
CSS Style Structure and placement Grids
Headings

Use a heading to title a section of content that immediately follows it. Headings are large, bold, concise text that are hierarchical in nature.

Tags: Size

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading
CSS Style Text effects Headings
Icons

Use one of the two icon sets, Glyphicons or Font Awesome for decorative purposes. Icons are glyphs − picture-based fonts, similar to wingdings. They do not convey meaning, unlike traditional fonts. Therefore, real text must accompany the icon to ensure accessibility requirements are met. Make the text visible or invisible, as long as it is present.

Tags: Glyphicons, Font awesome, Colour
... and hundreds more
CSS Style Basic effects Icons
Images

Use images to visually represent a noun (person, place, thing) or a verb (action). An image is a static two dimensional visual artifact that is a type of non-text content. It is classified as decorative, simple, complex, or an image of text.

Tags: Thumbnails, Responsive, Photos
A generic square placeholder image with rounded corners
A generic square placeholder image where only the portion within the circle circumscribed about said square is visible
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
CSS Style Basic effects Images
Invisible and visible content

Use to show or hide content − it all depends on what you need to accomplish. There are styles specific to assistive technology (aid screen-reader users), responsive design (view from small to large devices), general usage (use of toggle tabs), and print (print only necessary info).

Tags: Printing, Responsive, Hidden

No quick preview available.
To see this feature in action, go to its topic page.

CSS Style Basic effects Invisible and visible content
Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Tags: Colour, Alerts

Hello world

CSS Style Callouts Jumbotron
Keyboard keys

Use to mimic the keys of a computer keyboard.

Tags: Code

Press Shift

Press Ctrl

Press Enter

CSS Style Text effects Keyboard keys
Labels

Use the appropriate label to describe and highlight text-based (non-numerical) information.

Tags: Colour
  • Text Default
  • Text Primary
  • Text Success
  • Text Info
  • Text Warning
  • Text Danger
CSS Style Callouts Labels
Links

Use a link (text and/or image) to take a user to another webpage, jump to another location within the same webpage, or perform a user-control function determined by client-side scripting (JavaScript).

Tags: Hyperlink
Link text
CSS Style Text effects Links
List group

Use list group components to contain related content.

Tags: Links, Badges, Colour
CSS Style Menus and navigation List group
Lists

Use to display a number of connected items in a consecutive manner. Typically list items appear one below the other.

Tags: Ordered, Unordered, Definition
  • Item
  • Item
    • Sub-item
  1. Item
  2. Item
    1. Sub-item
Item
Description of item
CSS Style Text effects Lists
MathML

Use to display mathematical formulas (not variables within a sentence) with MathML.

Tags: Calculations
x = b ± b 2 4 a c 2 a or 3 x 4 = 12
Plugins
Margin proximity

Use to increase or decrease the proximity of one object to another. This adjusts the white space between two elements to suggest whether items are related or unrelated. Additionally, these classes allow grid and non-grid content to exist in the same row.

Tags: Spacing

Close together

Close together

Far apart

Far apart

CSS Style Structure and placement Margin proximity
Meter

Use to display a value in a range when there is a known minimum and maximum value (for example, the height of something).

Tags: Colour, Alerts, Progress bar
  • 75% (normal)
  • 90% (too high)
  • 15% (too low)
Plugins
Modal popup (lightbox)

Use a modal pop-up window for information that stays in front of the original window.

Tags: Links, Buttons, Invisible, Show, Hide, Visible, Close, Exit

Launch modal popup

Plugins
Multimedia player

Use to provide an accessible multimedia player to embed video and audio into webpages.

Tags: Video, Audio, YouTube

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Opacity

Use to adjust the opacity of any element.

Tags: Images
Demo of opct-100
Demo of opct-90
Demo of opct-80
Demo of opct-70
Demo of opct-60
Demo of opct-50
Demo of opct-40
Demo of opct-30
Demo of opct-20
CSS Style Basic effects Opacity
Overlay

Use to position one element over another.

Tags: Links, Buttons, Invisible, Show, Hide, Visible, Close, Exit

Launch overlay

Plugins
Pagination

Use a pagination index for long documents that are best broken up over several pages. A user can select a specific page within a document through either the "Next", "Previous", or (if present) the numeric pagination hyperlinks.

Tags: Buttons, Links, Colour
CSS Style Menus and navigation Pagination
Panels

Use to create a visual grouping of content. Panels have colour themed options, as well as offer a distinct header and footer.

Tags: Colour, Alert

Primary title

Content

Success title

Content

Info title

Content

Warning title

Content

Danger title

Content

CSS Style Callouts Panels
Pills

Use to style a navigation list and to draw focus to an active link.

Tags: List

No quick preview available.

CSS Style Menus and navigation Pills
Progress bar and meter

The progress bar is used to provide up-to-date feedback on the progress of a workflow or action. Meter is used to display a value in a range when there is a known minimum and maximum value (scalar measurement).

Tags:

No quick preview available.

CSS Style Callouts Progress bar and meter
Progress bar

Use to display the progress of a task.

Tags: Colour, Alerts, Meter
  • 22%
  • 66%
Plugins
Quotations

Use quotations to cite a group of words by someone other than the original author or speaker.

Tags: Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
CSS Style Text effects Quotations
Reflowing content around grids

Use to reflow and wrap non-grid content around and below a grid cell (box of content).

Tags: Grids, Floats, Alignment

Float right

Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids.

CSS Style Structure and placement Reflowing content around grids
Session timeout

Use to provide session timeout and inactivity timeout functionality.

Tags: Close, Exit

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Share widget Use to enable users to quickly share content with their networks. Tags: Links, Icons, Twitter, YouTube
Plugins
Sizing

Use to override the default size of any text (make text large or small).

Tags: Headings
  • Size h1
  • Size h2
  • Size lead
  • Size h3
  • Size h4
  • Size h5
  • Size h6
  • Size small
CSS Style Text effects Sizing
Slider control (range)

Use to display a slider control bar.

Tags: Input
Plugins
Table validator

Use this web editor tool to produce tables that conform to WCAG 2.0. This tool helps to identify relationship errors within a complex table.

Tags: Validation

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Tables

Use to organize data into rows and columns in order to create data cells.

Tags: Tabular, Zebra striping, Hover, Colour, Responsive

No quick preview available.
To see this feature in action, go to its topic page.

CSS Style Text effects Tables
Tabs

Use to show multiple aspects of related content in different panes, side by side.

Tags: Invisible, Show, Hide, Visible, Links, Details, Summary, Expand
Tab 1

Content

Tab 2

Content

Tab 3

Content

Plugins
Text editing effects Use to indicate text edits on a page. New Tags: Text edits

This is marked text

This is deleted text

This is strikethrough text

Do not use inserted text

Do not use underlined text

CSS Style Text effects Text editing effects
Text highlighting Use to highlight text within a pre-defined area that matches case-insensitive search criteria, specified through the URLs query string. Tags: Colour

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Theme: Base Use the Base theme template to aid in the creation of new themes. Tags: Core

No quick preview available.
To see this feature in action, go to its topic page.

Themes
Theme: Canada.ca Use the Canada.ca theme template to meet the layout and design requirements of Canada.ca pages. Tags: Government of Canada

No quick preview available.
To see this feature in action, go to its topic page.

Themes
Theme: Government of Canada intranet Use the Government of Canada intranet theme template to adapt the Government of Canada Web Usability theme to intranet sites. Tags: Government of Canada

No quick preview available.
To see this feature in action, go to its topic page.

Themes
Theme: Open Government Platform (OGPL) Use the Open Government Platform (OGPL) template to support the OGPL theme. Tags: India, United States

No quick preview available.
To see this feature in action, go to its topic page.

Themes
Theme: Web Experience Toolkit (WET) Use the Web Experience Toolkit theme template to provide an example of an implemented Base theme. Tags: Core

No quick preview available.
To see this feature in action, go to its topic page.

Themes
Thumbnail and photo gallery (lightbox)

Use to display images in a lightbox, either individually or as part of a gallery.

Tags: Images, Invisible, Show, Hide, Visible, Links

One image

Gallery

Plugins
Toggle Use to toggle elements between on and off states, with only one section expanding open at a time and the previous section collapsing automatically. Tags: Expand, Hide, Visible, Invisible, Show, Hide, Accordion
Example 1

Content

Example 2

Content

Example 3

Content

Plugins
Transitions

Use to create a content transition with optional states (fade in, fade out, slide right or slide left).

Tags: Effects

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Twitter embedded timeline

Use to implement and embed Twitter timelines.

Tags: Share widget

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Variant: Drupal Use to adapt WET for use with Drupal. Tags: Technology

No quick preview available.
To see this feature in action, go to its topic page.

Variant
Variant: Jekyll Use to adapt WET for use with Jekyll. Tags: Technology

No quick preview available.
To see this feature in action, go to its topic page.

Variant
Variant: PHP Use to adapt WET for use with PHP. Tags: Technology

No quick preview available.
To see this feature in action, go to its topic page.

Variant
Variant: SSI Use to adapt WET for use with SSI. Tags: Technology

No quick preview available.
To see this feature in action, go to its topic page.

Variant
Variables

Use when there is reference to a variable like “x.”, "n" or "y" within a sentence (a non-mathematical phrase). New

Tags: Calculations
Over n years, the increase in payments is x.
CSS Style Text effects Variables
Variant: WordPress Use to adapt WET for use with WordPress. Tags: Technology

No quick preview available.
To see this feature in action, go to its topic page.

Variant
Wells Use to spotlight content by placing it in a light grey box. Tags: Colour, Alerts

Look, I'm in a well!

Look, I'm in a small well!

CSS Style Callouts Wells
Wrapping and truncating text Use to prevent text from wrapping to the next line. Tags: Break

Default:

This year's deadline to filing your taxes is April 30.

With .nowrap:

This year's deadline to filing your taxes is April 30.

With .wb-elps:

This year's deadline to filing your taxes is April 30.

CSS Style Text effects Wrapping and truncating text
Zebra striping (Advanced)

Use to provide alternate white and grey stripes to table rows in horizontal or multiple directions. This helps to visually connect horizontal with vertical data.

Tags: Tables

No quick preview available.
To see this feature in action, go to its topic page.

Plugins
Date modified: