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.
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.
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.
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.
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="/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>
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| 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 | 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 |
| Claim | Notification | Actions |
|---|---|---|
| 12345678 | A full document package was received and attached to this claim for review. The case is now waiting for an adjudicator to confirm completeness, assess the submitted details, and determine whether any additional follow-up is required before the file can move ahead to the next stage. | View |
| 12345679 | A notification was issued to request more supporting information from the worker and the employer. Until those details are returned and validated, the claim will remain in a pending state so the review team can make a complete and accurate decision based on the full record. | Review |
| 12345680 | Benefit payment processing has started for this claim, and the account has been marked as in progress. Internal checks are still being completed to ensure the payment amount, claim timeline, and supporting approvals all match the most recent status entered on the file. | Approve |
| 12345681 | This claim has been escalated for additional review after a recent update changed the expected service timeline. A supervisor will examine the latest notes, confirm whether any policy exceptions apply, and decide what communication should be sent to the claimant next. | Open |
| 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 |
| 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
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.
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.
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.
| 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.
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
