A way to categorize information, with the ability to show and hide sections. Accordions vertically stack information and designed primarily for blocks of text; however, it can also contain tables, lists, and other elements (on a case by case basis)
Allows the user to compare two addresses; the one that they’ve just entered, and the system's recommendation. The address validator includes two choices for the user to pick from.
Provides serious error or failure messages to the user.
Small status descriptors; typically contains a number or other short set of characters.
Use WorksafeBC custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Indicates the user’s location within the hierarchy of a website or application.
Indicates the user’s location within the hierarchy of a website or application.
Used to make items stand out from a block of text (without explicitly stating the order of importance).
The callout box is a user-interface piece that presents contextual information appearing besides or below other content. The callout box summarizes content and displays it in a short digestible way.
A card is a flexible and extensible content container. It includes options for headings, images, paragraphs and buttons. Cards allow for a wide variety of content, contextual background colors, and display options.
Charts are used for data visualization and for presenting statistics. These chart examples are all using the same library (amcharts). Charts can be customized but with the technical limitations provided by the charting framework.
A singular, or set of small, interactive boxes, for the user to ‘check’, indicating a selection has been made; used if more than one can be selected
Colour palette is the official color set to be used across all apps within WorkSafeBC. There are currently 5 color sets available.
Typically follows a “submit” action. A box at the end of an application, which provides the user important information surrounds the action(s) they just made.
The data bar or "thumbstone" presents summarized data at the top of a page
A control that allows the user to make a date selection from a calendar
A container that includes a disclaimer and a checkbox. Allowing the user to make a conscious acknowledgment
A block of content that highlights a document and descreibes it.
Use dropdown menu to navigate to a different screen on the same application. This menu is different from the select input.
Error pages are displayed when the most common system errors occur (404, 400, 401, 403 and 500). They indicate the error code, the issue and provides the user with a solution to the problem or additional resources to deal with the issue.
The default footer style is the fluid (100%) version. The footer is always part of all web templates used for WorkSafeBC apps.
Form fields allow users to enter text data into a UI. Form fields typically appear in forms and dialogs.
Templates are pre-built layouts to be used across all WorksafeBC apps. All templates are responsive by default and they all allow multiple configurations.
Table striped is an opt-in table recommended for large data sets where fast scanning and scrolling are essential.
Striped bordered table is used as an optional alternative to the simple stripped table. It can be used interchangeably with other tables as per designer discretion.
The table grid component is designed to handle small data sets with few rows and columns. There is no mandatory use for this table and it's usage depends on the context of the application.
The WorksafeBC web application headers are the standard for all web apps in worksafe BC and they come in 2 formats: full screen and fixed screen.
Font awesome is an external, open source symbol font library containing a limited set of icons that may be used in various applications and cases, specially those cases with action items (print, save, view etc)
The progress bar is an element that provides a visual indication of progress. It also provides a description and an option to cancel
Loading animation is an indicator of an element or a page being loaded
A modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it.
Backdrops are designed to serve as a layer overlay on top of a screen or a component. Backdrops come in two colors with 95% of opacity. They are mainly used along with loaders, modals or sliding panels.
Pagination is meant to divide a page or a table into discrete, numbered sections. Pagination are an important element in web application design. Especially in content heavy websites pagination is used to divide content and present in limited & digestible manner.
The progress bar is an element that provides a visual indication of progress. It also provides a description and an option to cancel.
Radio buttons are used in forms and applications for presenting multiple choices, but only allowing one.
Search box is a combination of input field and submit button. The exception is the "Type-ahead Search bar" which reveals the results as the user types in.
The select card is an element designed to provide the user with choices. These cards are typically laid out side by side.
You can use horizontal (or vertical) lines to create any necessary visual dividers between related sections of content. Separators help users understand how content is organized by establishing a rhythm and hierarchy on a page. A separator is a thin, lightweight line that groups content in page layouts.
The side panel is screen overlay that swipes in from either the right or left side of the screen. It is triggered by a button or link and is used to reveal information or features that wouldn’t fit on the screen.
A stage bar, different to progress bar or step bar, displays information about the status of a process happening outside of the application. For example, in the case of eCommerce, the stage bar would be used to show stages such as "order accepted, shipped, delivered".
Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.
The table grid component is designed to handle small data sets with few rows and columns.
Table striped is an opt-in table recommended for large data sets where fast scanning and scrolling are essential.
Striped bordered table is used as an optional alternative to the simple stripped table.
Tabs are used to nest content into more manageable groups. It is also a way to categorize data and information without having to display it all at once.
Alerts about something that requires attention
Toggle switches and toggle buttons are mainly used for changing the state of system functionalities and preferences. Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states or filter through various conditions.
Tooltips display informative text when users hover over an element. Tooltips are always paired nearby the element with which they are associated. Typically a question mark "?" beside an element that requires additional explanation.
The top navbar is a sub-component of the header. It includes an array of horizontal links to other pages or sections within the application.
WorkSafeBC uses a modified Halis font as the official spec. This guide includes the main headings, body copy, links and default paragraphs.