Please Select

UX/UI Design System

HTML/CSS Components, patterns and elements

Front end design library for WorkSafeBC

View css View docs

2024 Edition

7.3.0-beta.33

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 only and 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


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.

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

This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text. This is our standard paragraph text.

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

Button Sizes

Button Block

Button Inline

Confirmation


Your confirmation number is 78943739

Date submitted: Tuesday, October 22, 2019 at 3:52 p.m. (PT)
Period: January 1 to December 31, 2020

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

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

Secondary

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

Warm greys (preferred)

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

Grayscale (exception)

ClassCode
grey1
#CCCCCC
grey2
#999999
grey3
#666666
grey4
#333333

Special use colours

ClassCode
palemossgreen
#E7E8D6
palemountainblue
#E0EBEF
palesunriseyellow
#F9E0A0

Date Picker

Angular ComponentApproved

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

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

In review
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

In review
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
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.
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.
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.
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.
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 - Vertical

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)

Review & Submit Tables - Vertical


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

H1 Default Page Title - Fluid, Wide Header

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-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

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
Page 4 of 42

Form Fields & Inputs

Requires Javascript
Please provide a valid ID
We'll never share your phone with anyone else.
140 characters available
%
.00
$
.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

Tooltip

Requires Javascript

 Default tootip positioning
 Tooltip on Top
 Tooltip on Right
 Tooltip on Bottom
 Tooltip on Left

Toast Notification

Requires Javascript

Toggle buttons

Toggle button

Toggle switch

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


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

Content for contact information
Placeholder for business details
This area contains information about classification units

Nav Bar - Desktop and Mobile

Cards

Card image cap

Card with image and button

Enter worker information and hearing test results.

Create new test
Card image cap

Card with image and button

Manage all tests submitted and archived in the system.

View all tests
Card image cap

Card with image and button

View generated reports for workers and employers.

View reports

Card with text

View generated reports for workers and employers.

Card with text

View generated reports for workers and employers.

Card with text

View generated reports for workers and employers.

Card with text

View generated reports for workers and employers.

Card image cap

Card title

Enter worker information and hearing test results.

Card image cap

Card title

Manage all tests submitted and archived in the system.

Card image cap

Card title

View generated reports for workers and employers.

Card image cap

Card title

Enter worker information and hearing test results.

Action cards with icons

Action Box Primary

Select your file

Your file can be a PDF, JPEG, PNG, or TIFF with a maximum file size of 10.0 MB. If you’re uploading a picture or scanned image, please ensure it is legible and clear.

Compact headers

App name

First opening application headline

App name

First opening application headline

Address validator box

Charts

Requires Javascript

Left Ear

Right Ear

Vertical Bar Charts

Horizontal Bar Charts

Requires Javascript

Left Nav Menu

Requires Javascript

Choice cards

Choice A

Table header1 Header 2
January 1, 2020 $200.00
April 1, 2020 $300.00

Choice B

Table header1 Header 2
January 1, 2020 $200.00
April 1, 2020 $300.00

Choice C

Table header1 Header 2
January 1, 2020 $200.00
April 1, 2020 $300.00

Opacity

Requires Javascript

Accordion

Requires Javascript

Everyone in the workplace has certain responsibilities for workplace health and safety. As an employer, it's important that you understand your own rights and responsibilities for workplace health and safety, as well as those of owners, supervisors, prime contractors, and workers.

As an employer, you're responsible for providing workers with prompt, easily accessible, and appropriate first aid treatment. To determine the first aid requirements for your workplace, first you'll need to do an assessment. hen, you can review the findings and take necessary steps to put proper first aid procedures in place.

Managing the health and safety side of your business includes managing risk in your workplace. The first step to managing risk is to identify things or situations in your workplace that could cause harm to workers. The next step is to assess the likelihood and seriousness of the potential harm. Once you've assessed the risk, you can take steps to control the risk to reduce the potential harm.

Databar

Employer name
Forestry Express Services Inc.
Confirmation
437984723984723
Tester
Mark Walter
Phone
604.992.5696

Stage bar

  • Order received
    March 12, 2020
  • Shipped
    March 13, 2020
  • In customs
    March 14, 2020
  • Last check
    March 12, 2020
  • Delivered
    March 17, 2020

Snack Bar - Autosave

Requires Javascript
Show Snackbar One Show Snackbar Two Show Snackbar Three Show Snackbar four Dismissible Snack bar
Changes automatically one
Changes automatically two
Changes automatically thre
Changes automatically four
Your application is submitted. Please allow 5 days to process.X

Document block (4 styles)

Health and Safety for Small Businesses: A Guide to WorkSafeBC

Most small businesses calculate and submit this information using the Employer Payroll and Contract ...

Publication date: December 1, 2017 PDF
Download
Publication date: December 1, 2017 PDF

Landing page tiles - rounded grid

Panel title

General information about this issue

Panel title

General information about this issue

Panel title

General information about this issue

Panel title

General information about this issue

Panel title

General information about this issue

Blockquote

Generic

Title blockquote

When editing an AngularComponents, you need to make sure you include FileX.tx This is required for the project to compile.

With colors

For developer documentation only

Title blockquote

When editing an AngularComponents, you need to make sure you include FileX.tx This is required for the project to compile.

Internet explorer won't work with this component

Due to the way explorer registers DOM elements, componentXYZ won't work in versions under 5.0.

Use shortcuts!

You can use the shortcut n g generate to cvreate a new component. This will save you time developing your application and is the recommended best practice

Make sure you include your dependencies

When editing an AngularComponents, you need to make sure you include FileX.tx This is required for the project to compile.

With color accents

Title blockquote

When editing an AngularComponents, you need to make sure you include FileX.tx This is required for the project to compile.

Title blockquote

When editing an AngularComponents, you need to make sure you include FileX.tx This is required for the project to compile.

Title blockquote

When editing an AngularComponents, you need to make sure you include FileX.tx This is required for the project to compile.

Title blockquote

When editing an AngularComponents, you need to make sure you include FileX.tx This is required for the project to compile.

Checkbox button

Requires Javascript

Browse button


Info panel

Institution: 004 | Toronto Dominion Bank
Branch address: 123 Main St. Vancouver, BC V5J 1J1
Transit (branch) number: 01234
Account number: 987654
Institution:
004 | Toronto Dominion Bank
Branch address:
123 Main St. Vancouver, BC  V5J 1J1
Transit (branch) number:
01234
Account number:
987654

Links Block

Portal Navigation

Popovers

Popovers

Combo Search

Bullets

  • Who does and doesn’t need coverage
    • Ensure workers are trained and adequately supervised
    • Manage risk and control hazards
    • Ensure workers are trained and adequately supervised
    • Understand your legal rights and responsibilities for health and safety
  • Understand your legal rights and responsibilities for health and safety
  • Manage risk and control hazards
  1. Ensure workers are trained and adequately supervised
  2. Understand your legal rights and responsibilities for health and safety
  3. Manage risk and control hazards
  4. Ensure workers are trained and adequately supervised
  5. Understand your legal rights and responsibilities for health and safety
  6. Manage risk and control hazards

Survey Bar

Does our new payments tool work for you?

Add details component

Show additional components
  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Toasts for displaying and dismissing
  • Tooltips and popovers for displaying and positioning (also requires Popper)
  • Scrollspy for scroll behavior and navigation updates
What is a "details" element

There is a secret hidden in plain sight, the details tag The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary element.

How details work?

By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.

Expanding Cards

MicrosoftTeams-image (9).png

MicrosoftTeams-image (9).png
Employer's Statement of Return to Work

File size
31 KB

File status
Ready for upload

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error sapiente ad in molestias placeat neque eaque rerum dolorum enim adipisci? Adipisci officia explicabo quam ut est ex deserunt quo fugit.

MicrosoftTeams-image (9).png

MicrosoftTeams-image (9).png
Employer's Statement of Return to Work

File size
31 KB

File status
Ready for upload

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel eos impedit corporis tempora itaque inventore totam labore tenetur nostrum commodi! Quisquam quis quidem, perspiciatis culpa odio consequatur possimus aperiam maxime!

Details block

Specific requirements for your home

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores

Specific requirements for your workplace

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores

Specific requirements for your warehouse

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores

Support Line


Prefer to have payments deposited directly into your bank account? Set up direct deposit.

Have questions about a payment? Call us at 1.888.967.5377.

HTML EDITOR

Rendering using the Editor in view-only mode:
Rendering using in a DIV with HTML markup from the editor:

Action Link

Edit Print Clear all Remove Delete Close Back View payment details Refresh Reload Add Save Copy Share Download More Archive