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 |
|
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](http://placehold.it/200x40)
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) |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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
- Item
- Description of item
|
CSS Style |
Text effects |
Lists |
MathML |
Use to display mathematical formulas (not variables within a sentence) with MathML. |
Tags: Calculations |
or
|
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
|
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 |
|
CSS Style |
Basic effects |
Opacity |
Overlay |
Use to position one element over another. |
Tags: Links, Buttons, Invisible, Show, Hide, Visible, Close, Exit |
Launch overlay
Hi! I'm an overlay and I can show up on the left, the top, the bottom or the right.
|
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 |
|
CSS Style |
Callouts |
Panels |
Pills |
(Description missing) |
Tags: List |
No quick preview available. |
CSS Style |
Menus and navigation |
Pills |
Progress bar and meter |
(Description missing) |
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 |
|
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.
|
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 |
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
Example 2
Example 3
|
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 |
Whitespace / No wrap |
Use to prevent text from wrapping to the next line. |
Tags: Break |
A really long line of text that won't word wrap to the next line |
CSS Style |
Text effects |
Whitespace |
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 |
|
|