Other

Badges

Draw attention to a some keyword trigger text. This acts as a teaser to the information that immediately follows/precedes.

<h2><span class="badge-intro">Step 1</span> Do x</h2>

<ul>
<li><span class="badge-intro">Option 1</span> X option</li>
</ul>

<p><a href="#"><span class="badge-intro">Did you know?</span> Text</a></p>

<h2>Do x <span class="badge-new">New</span></h2>

<ul>
<li>X option <span class="badge-new">New</span></li>
</ul>

<p><a href="#">Text <span class="badge-new">New</span></a></p>

<h2>Do x <span class="badge-update">Updated</span></h2>

<ul>
<li>X option <span class="badge-update">Updated</span></li>
</ul>

<p><a href="#">Text <span class="badge-update">Updated</span></a></p>

wb-invisible class

The wb-invisible class clips content into a one pixel square. It allows you to create links that are descriptive (and compliant), but not visually clutter the page. It is common to use this technique to target assistive technology users. For example, JAWS users hear the information, but the visual user does not hear or see it. The CSS attribute display:none; does not achieve the same effect, as JAWS ignores this style entirely.

<a class="button button-small" href="#">1<span class="wb-invisible">: Page 1 of search results</span></a>

Display options

Most styles are have their default display attribute as block, inline or inline-block. Use the CSS display-block, display-inline or display-inline-block to override the default.

<span-3>
  <p>
    <a href="#" class="button button-small">button-small</a>
  </p>
  <p>
    <a href="#" class="button button-small button-dark">button-small</a>
  </p>
</div>

<a class="button button-small" href="#">1<span class="wb-invisible">: Page 1 of search results</span></a>

Print

Some content, like right menus, may lose their value when printed. Use the print-none CSS to remove specific content from the printed copy.

<div class="span-2 module-related print-none"><p>content</p></div>

Thermometer

Use this style is to record the donation progress for events such as the Government of Canada Workplace Charitable Campaign (GCWCC).

This CSS determines which thermometer background image to display. By changing the class name on the <p> element, the thermometer image instantly reflects the new amount. Since the classes increase by 10% increments, you need to adjust your thermometer percentage to the nearest 10% class. Values range from 0% to 120%. For values in excess of 120% , use the 120% class.

<p class="thermometer-40">Donations to date are $46,500, which is 38% of the target. </p>

Date

Used to highlight a specific date. In addition, the month can be a link.

<div class="date-container">
  <div class="date-month">
   <p><a href="#">October</a></p>
  </div>
  <div class="date-day">
   <p>11</p>
</div>
  </div>
  
  <div class="date-container date-small">
  <div class="date-month">
   <p><abbr="January">Jan</abbr></p>
  </div>
  <div class="date-day">
   <p>11</p>
</div>
  </div>
  
  
  

Columns

The ability to spread content over multiple columns is achieved using the CSS3 column-count attribute. IE9 and lower will display the content in a single column, as these browsers do not support column-count. The options are column-two, column-three and column-four.

For example, the list in the below table of contents is split into two columns. From an accessibility stance, this is a better approach as the table of contents should be represented by a single list and not carved up over serveral lists for display purposes. This ensures that the list is symantcially correct and inline with accessibility. As previously mentioned, this is column feature is only visible in modern browsers:

<div class="span-4 module-table-contents">
	<h2>Table of contents</h2>
	<ul class="column-two">
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
	</ul>
</div>