Other

Table of contents

Badges

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

Class Details Example 1: With a heading Example 2: With a list Example 3: With a link
badge-intro Used as a lead-in

Step 1 Do x

View code 
<h2><span class="badge-intro">Step 1</span> Do x</h2>
  • Option 1 X option
View code 
<ul>
<li><span class="badge-intro">Option 1</span> X option</li>
</ul>

Did you know? Text

View code 
<p><a href="#"><span class="badge-intro">Did you know?</span> Text</a></p>
badge-new Used to draw attention to a new item

Do x New

View code 
<h2>Do x <span class="badge-new">New</span></h2>
  • X option New
View code 
<ul>
<li>X option <span class="badge-new">New</span></li>
</ul>

Text New

View code 
<p><a href="#">Text <span class="badge-new">New</span></a></p>
badge-update Used to feature update details

Do x Updated

View code 
<h2>Do x <span class="badge-update">Updated</span></h2>
  • X option Updated
View code 
<ul>
<li>X option <span class="badge-update">Updated</span></li>
</ul>

Text Updated

View code 
<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.

View code 
<a class="button button-small" href="#embedded">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.

View code
<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.

Donations to date are $0, which is 0% of the target.

(Uses thermometer-0)

Donations to date are $46,500, which is 38% of the target.

(Uses thermometer-40)

Donations to date are $190,512, which is 150% of the target.

(Uses thermometer-120)

View code 
<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.

The date has a float:left; attribute applied to it, so a <div class="clear"></div> is needed afterwards to start a fresh line.

Also, the design is more refined looking in modern browsers, whereas it's simplified for users with IE7/8.

October

11

May

25

August

13

January

14

June

3

January

1

View code 
<div class="date-container">
  <div class="date-month">
   <p><a href="#">October</a></p>
  </div>
  <div class="date-day">
   <p>11</p>
</div>
  </div>