Fixed header with navbar and title

#fixedheaderandtitle

Start your journey

Name:	Joe Smith
Customer Care number:	0000000001

This is what you need to know

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nisi ut sapien lobortis aliquet tempus sed tellus. Fusce vitae lorem id quam placerat lacinia a nec ligula. Cras fermentum ex in ipsum molestie, quis malesuada purus vulputate. Etiam lobortis leo vitae auctor faucibus. Vivamus viverra magna nec metus suscipit, a laoreet mi congue. Nulla non dui sit amet mi finibus eleifend. Donec luctus massa a ante tempor, ut euismod nisl dictum.

Basic text stack

#basictextstack

Get paid by WorksafeBC

This is why you should do it

Maximum convenience

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nisi ut sapien lobortis aliquet tempus sed tellus. Fusce vitae lorem id quam placerat lacinia a nec ligula. Cras fermentum ex in ipsum molestie, quis malesuada purus vulputate. Etiam lobortis leo vitae auctor faucibus. Vivamus viverra magna nec metus suscipit, a laoreet mi congue. Nulla non dui sit amet mi finibus eleifend. Donec luctus massa a ante tempor, ut euismod nisl dictum.

Easy access to your money

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nisi ut sapien lobortis aliquet tempus sed tellus. Fusce vitae lorem id quam placerat lacinia a nec ligula. Cras fermentum ex in ipsum molestie, quis malesuada purus vulputate. Etiam lobortis leo vitae auctor faucibus. Vivamus viverra magna nec metus suscipit, a laoreet mi congue. Nulla non dui sit amet mi finibus eleifend. Donec luctus massa a ante tempor, ut euismod nisl dictum.

Confirmation + Buttons

#confirmationandbuttons

Thank you for setting up direct deposit

Your direct deposit reference number is: 1234qpwo

Name:	Joe Smith
Customer Care number:	0000000001

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nisi ut sapien lobortis aliquet tempus sed tellus. Fusce vitae lorem id quam placerat lacinia a nec ligula. Cras fermentum ex in ipsum molestie, quis malesuada purus vulputate. Etiam lobortis leo vitae auctor faucibus. Vivamus viverra magna nec metus suscipit, a laoreet mi congue. Nulla non dui sit amet mi finibus eleifend. Donec luctus massa a ante tempor, ut euismod nisl dictum.

Back to main menu Print or save

Inline multi field search

#multilinesearch

First name

Last name

Birth date

Search

Alert message with action button

#alertwithaction

We were unable to process your request.

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

Request assistance

Lazy form

#lazyform

Enter banking details

Quick form with image

#quickformwithimage

Enter banking details

You can find this information on your cheques. You can also find this information on your account statements and online banking. Please refer to your financial institution’s website for more information.

Lazy form

#lazyform2

Enter profile details

Button bar full width

#buttonbarfull

Discard Submit Save and close

Wizard button bar

#wizardbuttonbar

Previous Next

Form Block - Multicolumn

#multicolumnform

Personal details

This is a secondary text helper. Explains the purpose of filling up this form

First name

Middle name

Last name

Gender

Last 4 digits of SIN

Date of birth

Test date

Classification unit

Occupation

Cancel Submit

2 column form with image

#dualcolumnform

Your profile

This is a secondary text helper. Explains the purpose of filling up this form

First name

Middle name

Last name

Gender

Last 4 digits of SIN

Expiry date

Activation confirmation

#activationconfirmation

Your are currently setup with direct deposits.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec est varius, luctus nulla ac, ornare mi. Vivamus et pulvinar sem. Nunc lorem felis, elementum eu vulputate id, pretium eu nisi. Phasellus vitae fringilla mi, faucibus hendrerit sem. Morbi maximus, ante id scelerisque scelerisque

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

Edit banking information Cancel direct deposits

Review and aknowledgement

#reviewandaknowledgement

Review and submit

Please confirm the following banking information so we can start processing your direct deposit application.

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

By checking this box, I am authorizing WorkSafeBC to deposit payments into the account identified above and certifying that I am authorized to set up direct deposit for this claim. I understand that once direct deposit has been set up, WorkSafeBC will use this information for all payments for current and future claims unless otherwise advised. WorkSafeBC will only disclose this banking information to their service providers for the purpose of facilitating payments. I understand I may cancel this authorization at any time and acknowledge WorkSafeBC make need up to five days to process the cancellation request.

Submit Edit

Questionaire form - Tabular

#questionairebasic

Questionaire

Have you been exposed to noise within the last 2 hours

How many hours have you been exposed to noise

Do you regularly wear hearing protection when you work in noise?

Class of hearing protection worn regularly

Style of hearing protection worn regularly

Why don’t you wear hearing protection regularly?

Have you received education about noise and noise-induced hearing loss in the last year?

Submit
Cancel

Yes - No survey

#yesnosurvey

Triad card menu

#triadcardmenu

Hearing Test Submission System

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec est varius, luctus nulla ac, ornare mi. Vivamus et pulvinar sem. Nunc lorem felis, elementum eu vulputate id, pretium eu nisi. Phasellus vitae fringilla mi, faucibus hendrerit sem. Morbi maximus, ante id scelerisque scelerisque

Enter a new hearing test

Enter worker information and hearing test results.

Create new test

Manage hearing tests

Manage all tests submitted and archived in the system.

View all tests

Hearing tests reports

View generated reports for workers and employers.

View reports

Text Block - Basic Instructions

#instructionsblock

Apply for coverage as a homeowner or renter

Is residential coverage right for you?

You are required to register with WorkSafeBC if you pay one or more workers in the following situations. Please note that coverage is not available to owners and occupiers who perform these activities at their own residence:

You employ a nanny, companion, personal caregiver, housekeeper, gardener.
You employ an individual regularly for an average of 15 or more hours per week caring for children.
You employ one or more people to do construction, repairs, or other specific jobs.

Getting started

On the following pages, we will guide you through a series of questions to help us understand your situation. Anyone hiring workers, including those who hire workers for work in or around their home, are required by law to register with WorkSafeBC and pay insurance premiums.

What you’ll need

The full legal name, birthdate, and contact information for the person or people who will be responsible for the account
The start date of the first worker(s)
An estimate of what you will be paying the worker(s), including wages, salaries, or any other compensation

Question and answer table

#questionairebasic2

Noise exposure history

Have you ever had a severe ear infection?	Yes
Have you ever had ear surgery?	Yes
Have you ever had dizziness or balance problems?	Yes
Have you ever had a serious head injury?	Yes
Did you have hearing loss in childhood?	Yes
When did you first notice it?	Past month

Table with actions

#tablewithactions

Technician	Status	Employer	Actions
Jim Tester	Ready to submit	Forestry Express Ltd	View Submit Delete
David Tester	Draft	Forestry Express Ltd	View Submit Delete
Bill Tester	Submitted	Forestry Express Ltd	View Submit Delete
Jim Tester	Submitted	Forestry Express Ltd	View Submit Delete
Jim Tester	Draft	Forestry Xpress Ltd	View Submit Delete
Jim Tester	Error	Forestry Express Ltd	View Submit Delete
Bill Tester	Error	Forestry Express Ltd	View Submit Delete
Bill Tester	Error	Forestry Express Ltd	View Submit Delete

Sample registration form block

#registrationform

Have you ever had a employer account with WorkSafeBC?
This would include any related or affiliated firms currently or previously registered with WorkSafeBC.

Yes

No

What is the WorkSafeBC account number of the other account? (Optional)

What is the name on the other account? (Optional)

How many workers are you hiring? (Optional)

Is the worker(s) you are hiring currently registered with WorkSafeBC?

Yes

No

Is the worker(s) you are hiring working for your trade or business?

Yes

No

Are you paying the worker(s) through an agency, firm, or other third party that is currently registered with WorkSafeBC?

Yes

No

Financial statement block

#financialstatement

Enter your monthly coverage amount before deductions
Learn more about Personal Optional Protection Benefits

.00

Base assesment rate for
Courier or Local Delivery Services(not slsewhere specified) (CU#:352671)

2.61%

The estimated monthly premium for Personal Optional Protection is:

$52.00

Grand total block

#grandtotalblock

Grand Total
$ 1.23.456

Data bar double line

#databardoubleline

Employer name
Forestry Express Services Inc.

Confirmation
437984723984723

Tester
Mark Walter

Phone
604.992.5696

Employer name
Forestry Express Services Inc.

Confirmation
437984723984723

Tester Mark Walter

Phone 604.992.5696

Please Select

Basic Blocks

UI Design Blocks & sample patterns

14 Prefab UI sections and patterns that fit nicely together

Assemble UI layouts faster

Do not worry about pixels

Re-use common patterns

Work with larger blocks

Fixed header with navbar and title copy

Start your journey

This is what you need to know

Basic text stack copy

Get paid by WorksafeBC

This is why you should do it

Maximum convenience

Easy access to your money

Confirmation + Buttons copy

Thank you for setting up direct deposit

Your direct deposit reference number is: 1234qpwo

Inline multi field search copy

Alert message with action button copy

We were unable to process your request.

Lazy form copy

Enter banking details

Quick form with image copy

Enter banking details

Lazy form copy

Enter profile details

Button bar full width copy

Wizard button bar copy

Button bar left copy

Form Block - Multicolumn copy

Personal details

2 column form with image copy

Your profile

Activation confirmation copy

Your are currently setup with direct deposits.

Review and aknowledgement copy

Review and submit

Questionaire form - Tabular copy

Questionaire

Yes - No survey copy

Questionaire

Triad card menu copy

Hearing Test Submission System

Enter a new hearing test

Manage hearing tests

Hearing tests reports

Text Block - Basic Instructions copy

Apply for coverage as a homeowner or renter

Is residential coverage right for you?

Getting started

What you’ll need

Question and answer table copy

Noise exposure history

Table with actions copy

Sample registration form block copy

Financial statement block copy

$52.00

Grand total block copy

Grand Total

$ 1.23.456

Data bar double line copy

Fixed header with navbar and title

Basic text stack

Confirmation + Buttons

Inline multi field search

Alert message with action button

Lazy form

Quick form with image

Lazy form

Button bar full width

Wizard button bar

Button bar left

Form Block - Multicolumn

2 column form with image

Activation confirmation

Review and aknowledgement

Questionaire form - Tabular

Yes - No survey

Triad card menu

Text Block - Basic Instructions

Question and answer table

Table with actions

Sample registration form block

Financial statement block

Grand total block

Data bar double line