Please Select

-->

UX/UI Design System

HTML/CSS Components, patterns and elements

Front end design library for WorkSafeBC

View css View docs

2026 Edition

8.1.0-beta.132

Getting started

UI Designers: Prototype up with lego blocks

Build screens with ready-made UI blocks, like Lego pieces. Start with wsbc.css, and you can focus on layout and flow instead of styling every detail. Use any code editor or AI to quickly prototype pages.

UI Developers: Take the UI to the next level

Use the shared styles and resources to speed up delivery. Build Angular or React components and focus on features, not repetitive CSS work. Prefer vanilla JavaScript or jQuery? That works too. The library is framework-friendly and flexible.

CDN - Quick start only and not recommended for production:

wsbc.css is a bundled stylesheet that combines Bootstrap 5.3 with the WorkSafeBC design layer in "appstyles.css". For quick demos, copy the snippet below into your page and start using components right away. For Angular apps, follow the setup guide 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-static.online.worksafebc.com/css/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="/js/wsbc.js"></script>

<!-- INCLUDE Jquery deps-->
<script src="/js/framework/jquery.js"></script>

<!-- INCLUDE Boostrap JS deps-->
<script src="/js/framework/popper.js"></script>
<script src="/js/framework/bootstrap.js"></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="/js/framework/chart.js"></script>

<!-- INCLUDE Sortable table JS deps -->
<script src="/js/framework/jquery.sortElements.js"></script>

Typography

H1 Page Title - I am a page title - 1.7 rem

H2 - Subtitle - I am a subtitle - Orange - 1.3 rem

H2 - I am an exception subtitle - Dark - 1.3 rem

H3 Section Title - I am a section title - 1.1 rem

This is our standard paragraph text - 1rem. 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

Fluid text

Experimental

Fluid text

Fluid Text automatically adjusts the size of your text based on the screen size, creating a smooth and responsive experience across devices.

As the viewport changes, the text scales fluidly between desktop and mobile sizes, so you don’t need to manually define separate styles for every breakpoint.

Try it out: Resize the example below and make the screen narrower to see how the text smoothly adapts from desktop to mobile.

Heading hierarchy with Halis & Verdana

(Add class="fluid" to make the text responsive as below)

Heading 1 Halis with class "fluid"

Heading 2 Halis with class "fluid"

Heading 3 Verdana with class "fluid"

Heading 4 Verdana with class "fluid"

Heading 5 Verdana with class "fluid"

Variable fonts - Noto

(Add class="fluid" to make the text responsive)

Variable fonts bring a new level of flexibility and precision to typography. Instead of relying on fixed font styles, they allow weights, widths, and italic angles to be adjusted fluidly, helping typography adapt seamlessly across different devices, screen sizes, and contexts. variable weights

Using Noto as a variable font would make it possible to fine-tune these properties with micro-adjustments, giving designers greater control over readability, hierarchy, and overall visual expression

See the example below to see variable fonts in action, make the screen size narrow to see the fluid adjustments between desktop vs mobile:

Heading hierarchy

H1: Occupational Health & Safety Compliance Guide

H2: Employer Obligations and Incident Management

H3: Mandatory Hazard Identification Procedures

H4: Risk Assessment and Mitigation Strategies

H5: Emergency Response Planning

Font weights styles with class names

Safety Plan Guidelines

class="noto-thin"

Safety Plan Guidelines

class="noto-extralight"

Safety Plan Guidelines

class="noto-light"

Safety Plan Guidelines

class="noto-book"

Safety Plan Guidelines

class="noto-regular"

Safety Plan Guidelines

class="noto-medium"

Safety Plan Guidelines

class="noto-demi"

Safety Plan Guidelines

class="noto-semibold"

Safety Plan Guidelines

class="noto-bold"

Safety Plan Guidelines

class="noto-extrabold"

Safety Plan Guidelines

class="noto-black"

Font width styles with class names

Employer Classification Unit

Regular

Employer Classification Unit

class="noto-extra-condensed"

Employer Classification Unit

class="noto-condensed"

Employer Classification Unit

class="noto-semi-condensed"