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.
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.
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.
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
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">
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>
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| 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.
| Class | Code |
|---|---|
white | #FFF |
black | #000 |
warm grey | #776E64 |
orange | #ED8B00 |
bodycopy | #453F39 |
| Class | Code |
|---|---|
mountainblue | #6399AE |
huckleberryred | #A4343A |
sunsetorange | #DC4405 |
sunriseyellow | #F1BE48 |
mossgreen | #888D30 |
| Class | Code |
|---|---|
ashgrey | #F1F0EF |
silvergrey | #E4E2E0 |
steelgrey | #C9C5C1 |
smokegrey | #ADA8A2 |
irongrey | #47423C |
| Class | Code |
|---|---|
grey1 | #CCCCCC |
grey2 | #999999 |
grey3 | #666666 |
grey4 | #333333 |
| Class | Code |
|---|---|
palemossgreen | #E7E8D6 |
palemountainblue | #E0EBEF |
palesunriseyellow | #F9E0A0 |
max-width: 1140px
For applications with narrow content, where all the screens of the app can be nested in the middle.
Width: 100%; max-width: 1920px
For multi-column data tables that requires full screen width.
(Fluid) Width: 100%; max-width: 1920px
(Fixed) max-width: 1140px
For applications that require both narrow containers and wide content elements (data tables, maps).
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 5435-3455 | Jack Otto | Finger injury | Web Developer |
| 5658-3455 | Tim Turner | Brain injury | Accountant |
| 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 |
| 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) |
| 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 |
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.
This is a sentence to tell users not to refresh their browsers or close tab
This is a callout box with bullets and provides contextual information
Orange line
Gray line
Dash line
Thin line
For general search.
For reduced space or for Mobile.
For autosuggest and type-ahead.
View generated reports for workers and employers.
View generated reports for workers and employers.
View generated reports for workers and employers.
View generated reports for workers and employers.
Enter worker information and hearing test results.
Manage all tests submitted and archived in the system.
View generated reports for workers and employers.
Enter worker information and hearing test results.
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.
| Table header1 | Header 2 |
|---|---|
| January 1, 2020 | $200.00 |
| April 1, 2020 | $300.00 |
| Table header1 | Header 2 |
|---|---|
| January 1, 2020 | $200.00 |
| April 1, 2020 | $300.00 |
| Table header1 | Header 2 |
|---|---|
| January 1, 2020 | $200.00 |
| April 1, 2020 | $300.00 |
Most small businesses calculate and submit this information using the Employer Payroll and Contract ...
General information about this issue
General information about this issue
General information about this issue
General information about this issue
General information about this issue
Find what you need
Building mapsResources and worker's reference
Bullying and HarassmentTitle blockquote
When editing an AngularComponents, you need to make sure you include FileX.tx This is required for the project to compile.
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.
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.
| Institution: | 004 | Toronto Dominion Bank |
| Branch address: | 123 Main St. Vancouver, BC V5J 1J1 |
| Transit (branch) number: | 01234 |
| Account number: | 987654 |
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.
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.
MicrosoftTeams-image (9).png
MicrosoftTeams-image (9).png
Employer's Statement of Return to Work
File size
31 KB
File status
Ready for upload
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
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
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
