Please Select

UX/UI Design System

HTML/CSS Components, patterns and elements

Front end design library for WorkSafeBC

View css View docs

2022 Edition

5.4.0

Featured

Section Blocks

HTML blocks to build web page templates

View docs

Mobile components

Adaptive mobile components for WorkSafeBC apps

View docs

Working examples

UX Prototypes built with the library

View docs

Getting started

UI Designers: Prototype up with lego blocks

Design interfaces with "plug and play" components like playing with Lego blocks. Extend bootstrap by adding the design layer to bootstrap stylesheet appstyles.css in your root directory and forget about the rest. Use any code editor or a bootstrap visual builder to create your pages and prototypes.

UI Developers: Take the UI to the next level

Use the design styles and resources and take your application to the next level. Create angular or react components and focus in building your interface rather stylizing each element from scratch. Do you want to use vanilla javascript or the good old Jquery? no problem, the UI library is agnostic and adaptable to any framework.

CDN - Quick start for design prototypes not recommended for production:

wsbc.css is a stylesheet boundle made out of a bootstrap 4.3.1 and the custom worksafeBC stylesheet called "appstyles.css". To get out of the ground, simply grab the code from below, stick it at the root of your document and you are ready to start using the UI components and styles. For angular applications, please follow up the instructions here

Base CSS Files

The css files are the core files required for the library to work, more specifically the wsbc.css file. This is the primary library stylesheet at the most global level


<!--INCLUDE CSS along with FONTAWESOME/ MANDATORY-->
<link rel="stylesheet" href="https://ux.online.dv.worksafebc.com/latest/wsbc.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Additional JS Files

JS files are optional but they are required for components that are interactive and have behaviours. You may use additional plug ins depending on the component.


<!-- INCLUDE JS deps / OPTIONAL FOR SOME COMPONENTS IF YOU ARE USING VANILLA JAVASCRIPT-->
<script src="https://ux-static.online.worksafebc.com/js/wsbc.js"></script>

<!-- INCLUDE Jquery deps-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>

<!-- INCLUDE Boostrap JS deps-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<!-- INCLUDE amcharts JS deps -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- INCLUDE chart JS deps -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.js"></script>

<!-- INCLUDE Sortable table JS deps -->
<script src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>

Typography

H1 Page Title - I am a page title - 28px

H2 - Subtitle - I am a subtitle - 21px Orange

H2 - I am an exception subtitle - 21px Dark

H3 Section Title - I am a section title - 16px

Every firm registered with WorkSafeBC is assigned a classification unit based on their main business undertaking. Others with similar businesses will share the classification unit, and they'll all pay the same base premium rate for their insurance. Every firm registered with WorkSafeBC is assigned a classification unit based on their main business undertaking. Others with similar businesses will share the classification unit, and they'll all pay the same base premium rate for their insurance.

This is bolded

This is the fine print: WorkSafeBC collects your personal information for the purpose of enabling online portal services and administering your WorkSafeBC claim or account. The personal information you provide is collected in accordance with section 26 of the BC Freedom of Information and Protection of Privacy Act. If you have any questions about the collection of your personal information, please contact our

Default text link

Alert Notification

We were unable to process your request.

Please contact our Employer Service Centre and a representative will be able to assist you.

Buttons

Button Styles

btn-blue btn-orange btn-grey btn-outline-blue btn-outline-orange btn-outline-grey

Button Sizes

button small button medium button large

Button Block

btn-blue

btn-orange

btn-grey

Breadcrumbs

Confirmation

Responsive

Name:	Joe Smith
Customer Care number:	0000000001

Institution:	004 \| Toronto Dominion Bank
Branch address:	123 Main St. Vancouver, BC V5J 1J1
Transit (branch) number:	01234
Account number:	987654
Effective date:	Thursday, August 20, 2020 at 3:43 p.m. (PT)

Name:

Joe Smith

Customer Care number:

0000000001

Institution:

004 | Toronto Dominion Bank

Branch address:

123 Main St. Vancouver, BC V5J 1J1

Transit (branch) number:

01234

Account number:

987654

Effective date:

Thursday, August 20, 2020 at 3:43 p.m. (PT)

Fixed

Your confirmation number is 78943739

Claim number:	12345678
Customer Care Number:	000000001

We’ve added the estimated premium for 2020 to your account balance. You may print or save this page for your records. Next, please make your payment.

Please note that you still need to report your actual payroll for 2020 in early 2021. We’ll send you a reminder at that time. If your actual payroll is different than the estimate you provided today, we’ll adjust your account balance accordingly.

Colours

Primary

Class	Code
white	#FFF
black	#000
warm grey	#776E64
orange	#ED8B00
bodycopy	#453F39

Secondary

Class	Code
mountainblue	#6399AE
huckleberryred	#A4343A
sunsetorange	#DC4405
sunriseyellow	#F1BE48
mossgreen	#888D30

Warm greys (preferred)

Class	Code
ashgrey	#F1F0EF
silvergrey	#E4E2E0
steelgrey	#C9C5C1
smokegrey	#ADA8A2
irongrey	#47423C

Grayscale (exception)

Class	Code
grey1	#CCCCCC
grey2	#999999
grey3	#666666
grey4	#333333

Special use colours

Class	Code
palemossgreen	#E7E8D6
palemountainblue	#E0EBEF
palesunriseyellow	#F9E0A0

Date Picker

Angular ComponentApproved

View Angular date picker

Boilerplate Template Layouts - Bootstrap Page Wrapers

Fixed Template
Fixed Header & Footer

max-width: 1140px

For applications with narrow content, where all the screens of the app can be nested in the middle.

Fluid Template
Fluid Header & Footer

Width: 100%; max-width: 1920px

For multi-column data tables that requires full screen width.

Mixed Template
Fluid Header & Footer

(Fluid) Width: 100%; max-width: 1920px
(Fixed) max-width: 1140px

For applications that require both narrow containers and wide content elements (data tables, maps).

Loading Animation

Loading

Radio Buttons & Checkboxes

What would you like to eat?

Radio Buttons

What would you like to eat?

Radio Buttons horizontal

Direct deposit Cash in advance Cheque

Table - Striped

Invoice number	Injured worker	Injury type	Role
4363-4634	John Walter	Knee injury	Designer
5658-3455	Tim Turner	Elbow injury	Accountant
5435-3455	Jack Otto	Third degree concussion	Web Developer
5658-3455	Tim Turner	Brain injury	Accountant
5435-3455	Jack Otto	Finger injury	Web Developer

Table Striped Condensed

Inreview

Invoice number	Injured worker	Injury type	Role
4363-4634	John Walter	Knee injury	Designer
5658-3455	Tim Turner	Elbow injury	Accountant
5435-3455	Jack Otto	Third degree concussion	Web Developer
5658-3455	Tim Turner	Brain injury	Accountant
5435-3455	Jack Otto	Finger injury	Web Developer

Thick Bordered Table

Inreview

Invoice number	Injured worker	Role
4363-4634	John Walter	Web developer
5658-3455	Tim Turner	Web developer
5435-3455	Jack Otto	Web developer
5435-3455	Emmanuel Sanders	Web developer

Table - Striped Bordered

Stripped table with border

Invoice number	Injured worker	Role
4363-4634	John Walter	Web developer
5658-3455	Tim Turner	Web developer
5435-3455	Jack Otto	Web developer
5435-3455	Emmanuel Sanders	Web developer

Table - Grid

Table grid with border

Offices	Address	Department
Downtown Vancouver	5765 Homer st, V67 8V7	Injury prevention
Richmond	1232 Westminster st, V3E 8X2	Claims and refunds
North Burnaby	323 Canada Way, V6T 8F7	Training and IT
West Vancouver	5765 Homer st, V2C 897	Events and Marketing

Table grid with border

Offices	Address	Department
Downtown Vancouver	5765 Homer st, V67 8V7	Injury prevention
Richmond	1232 Westminster st, V3E 8X2	Claims and refunds
North Burnaby	323 Canada Way, V6T 8F7	Training and IT
West Vancouver	5765 Homer st, V2C 897	Events and Marketing

Table with no borders

Offices	Address	Department
Downtown Vancouver	5765 Homer st, V67 8V7	Injury prevention
Richmond	1232 Westminster st, V3E 8X2	Claims and refunds
North Burnaby	323 Canada Way, V6T 8F7	Training and IT
West Vancouver	5765 Homer st, V2C 897	Events and Marketing

Expanded Tables

Requires Javascript

Invoice number	Injured worker	Injury type	Role
4363-4634	John Walter	Knee injury	Designer
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo aliquid eveniet reiciendis, consectetur quasi pariatur minima culpa, modi iusto at laboriosam. Earum velit ex iste voluptate, eum saepe sapiente at.
5658-3455	Tim Turner	Elbow injury	Accountant
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis placeat beatae ut, veritatis corporis repudiandae ducimus illum minima blanditiis architecto labore, accusamus, quae ex vero minus praesentium rerum in.
5435-3455	Jack Otto	Third degree concussion	Web Developer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis placeat beatae ut, veritatis corporis repudiandae ducimus illum minima blanditiis architecto labore, accusamus, quae ex vero minus praesentium rerum in.
5435-3455	Jack Otto	Finger injury	Web Developer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis placeat beatae ut, veritatis corporis repudiandae ducimus illum minima blanditiis architecto labore, accusamus, quae ex vero minus praesentium rerum in.
5658-3455	Tim Turner	Brain injury	Accountant
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis placeat beatae ut, veritatis corporis repudiandae ducimus illum minima blanditiis architecto labore, accusamus, quae ex vero minus praesentium rerum in.

Offices	Address	Department
Downtown Vancouver	5765 Homer st, V67 8V7	Injury prevention
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, iure praesentium sequi dignissimos vitae nemo quidem iusto minus maxime sapiente ipsam perspiciatis exercitationem ea in deserunt voluptatibus non quo! Accusamus.
Richmond	1232 Westminster st, V3E 8X2	Claims and refunds
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, iure praesentium sequi dignissimos vitae nemo quidem iusto minus maxime sapiente ipsam perspiciatis exercitationem ea in deserunt voluptatibus non quo! Accusamus.
North Burnaby	323 Canada Way, V6T 8F7	Training and IT
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, iure praesentium sequi dignissimos vitae nemo quidem iusto minus maxime sapiente ipsam perspiciatis exercitationem ea in deserunt voluptatibus non quo! Accusamus.
West Vancouver	5765 Homer st, V2C 897	Events and Marketing
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, iure praesentium sequi dignissimos vitae nemo quidem iusto minus maxime sapiente ipsam perspiciatis exercitationem ea in deserunt voluptatibus non quo! Accusamus.
Downtown Vancouver	5765 Homer st, V67 8V7	Injury prevention
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, iure praesentium sequi dignissimos vitae nemo quidem iusto minus maxime sapiente ipsam perspiciatis exercitationem ea in deserunt voluptatibus non quo! Accusamus.

Sortable Tables

Invoice number	Injured worker	Injury type	Role
4363-4634	John Walter	Knee injury	Designer
5658-3455	Tim Turner	Elbow injury	Accountant
5435-3455	Jack Otto	Third degree concussion	Web Developer
5658-3455	Tim Turner	Brain injury	Accountant
5435-3455	Jack Otto	Finger injury	Web Developer

Review & Submit Tables

First name	Last name	Job title (optional)
John	Walter	Plumber
Barbara	Jones	HR
John	Smith	Engineering

Review & Submit Tables - Vertical

Full width

Incident location	123 Main Street, Vancouver, BC
Location description (optional)	Down the road by the farm
Operating location associated with the incident	456 Some Other Address, Vancouver, BC
Incident date	April 23, 2021
Incident time	1:30 a.m. (PT)

Compact

First name:	John
Preferred first name:	Jock
Middle initial:	--
Last name:	Doe
Preferred last name:	--
Date of birth:	January 1, 1987
Gender:	Male
Social Insurance Number (SIN):	* * 456
Personal Health Number (PHN):	9879 543 214

Headers

Exit

H1 Default Page Title - Fluid, Wide Header

Exit

H1 Default Page Title - Fixed, Narrow Header

Font Icons - Fontawesome

Default font icon set for Worksafe BC is Font Awesome 4.7

The font awesome icon set contains hundreds of icons for multiple purposes, the library is free, and easily applicable. Icons can be colorized and resized as needed. Below some commonly used icons.

fa-minus

fa-plus

fa-check

fa-trash-o

fa-file-text-o

fa-pencil

fa-external-link

fa-eye

fa-info-circle

fa-link

fa-print

fa-search

fa-eye-slash

fa-question-circle

fa-undo

fa-upload

fa-plus-circle

fa-exclamation-circle

fa-exclamation

fa-calendar-o

fa-ellipsis-v

fa-refresh

fa-file-pdf-o

fa-file-excel-o

fa-filter

Colors for states

Clickable

Muted / disabled

Colors for indicators

Error

Success

Warning

Info

Progress Bars

Submitting Invoice

40%

This is a sentence to tell users not to refresh their browsers or close tab

Cancel submission

Modal

Badges

Light

Orange Yellow Blue Red Grey Green

Regular

Orange Yellow Red Grey Green

Stepper

Contact information
Business details
Classification unit
Coverage details
Payroll
Review & submit
Confirmation

Pagination

Page 4 of 42

Form Fields & Inputs

Requires Javascript

Select one - Fallback

Example textarea * 140 characters available

.00

Lists

Who does and doesn’t need coverage
Understand your legal rights and responsibilities for health and safety
Manage risk and control hazards
Ensure workers are trained and adequately supervised

Default tootip positioning

Tooltip on Top

Tooltip on Right

Tooltip on Bottom

Tooltip on Left

Toast Notification

Requires Javascript

This is a warning, please take action

Good Job! You did it.

This application autosaves your changes

Toggle buttons

Toggle button

option A option B

Option A Option B Option C

Toggle switch

OnOff

YesNo

Disclaimer box

I agree that this app is an online open-content collaborative project; that is, a voluntary association of individuals and groups working to develop a common resource of human knowledge. The structure of the project allows anyone with an Internet connection to alter its content. Please be advised that nothing found here has necessarily been reviewed by people with the expertise required to provide you with complete, accurate or reliable information.

Callout Box

Callout

This is a callout box with bullets and provides contextual information

list item one
list item two
list item three

Separators

Orange line

Gray line

Dash line

Thin line

Search Bar

Requires Javascript

Lipstick search bar - Default

For general search.

Lipstick compact Search bar

For reduced space or for Mobile.

Type-ahead Search bar

For autosuggest and type-ahead.

Blades

Tabs

Contact information

Content for contact information

Business details

Placeholder for business details

Classification unit

This area contains information about classification units

Nav Bar - Desktop and Mobile

Cards

Card with image and button

Enter worker information and hearing test results.

Create new test

Card with image and button

Manage all tests submitted and archived in the system.

View all tests