Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius aliquid, quia cumque, labore totam sit incidunt ratione aut, repellat laboriosam culpa dolorum voluptatibus fuga provident consequatur. Amet asperiores in consequatur?

MobileSafe

Adaptive mobile components, layouts and patterns for WorkSafeBC apps

Use the components along with Responsive Blocks. Try a mobile component from the examples below.

Getting started

This is very simple, load the mobile safe CSS on top of your stack, copy the HTML code you need and that's it.

Step 1: Load the CSS and JS

Recommended for testing your app - use local, production files for production environments) 


<!--INCLUDE GLOBAL CSS LIBRARY-->
<link rel="stylesheet" href="https://ux-static.online.dv.worksafebc.com/css/wsbc.css">

<!--INCLUDE MOBILE CSS-->
<link rel="stylesheet" href="https://ux-static.online.dv.worksafebc.com/mobilesafe/wsbc-mobile.css">

<!--INCLUDE ANNO CSS-->
<link href="http://iamdanfox.github.io/anno.js/dist/anno.css" rel="stylesheet" type="text/css" >

<!--INCLUDE FONTAWESOME CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                              

<!--INCLUDE ADDITIONAL JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
<script src="https://sachinchoolur.github.io/lightslider/src/js/lightslider.js"></script>
<script src="http://iamdanfox.github.io/anno.js/dist/anno.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollintoview/1.8/jquery.scrollintoview.js" type="text/javascript"></script>

<!-- INCLUDE WSBC MOBILE JS-->
<script src="https://ux-static.online.dv.worksafebc.com/mobilesafe/wsbc-mobile.js"></script>

Step 2: Copy the components

Copy and paste the component or section block into your project.

Step 3: Hide and show components

Decide when to hide or show mobile components. Use simple bootstrap display properties as explained on the Bootstrap display properties documentation

Header

Copy the mobile header

Header

Copy the mini mobile header

Exit

Footer

Copy the mobile footer

Action Bar

Copy the mobile Action Bar

Tab Bar

Copy the mobile tabbar

Views, menus and controls

Native looking mobile elements that enter the screen based on user interaction

Your application is submitted. Please allow 5 days to process.

Text blurbs

Simple text snipped for rapid use

App title

Lorem ipsum

Maecenas quis orci et mi efficitur laoreet. Donec eu imperdiet lectus...

Lorem ipsum

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

Sed ut perspiciatis

Maecenas quis orci et mi efficitur laoreet. Donec eu imperdiet lectus...

Accordion data panel

Item lists are clickable blocks that connect one page or section with another.

Client ID

4456662

Last Name

Alderson

Date of birth

03/04/80

Items generic

Item lists are clickable blocks that connect one page or section with another.

Items table

Table items display up to 3 columns of information.

Cards

Cards are microformats containing information about a relevant subject. They can be clickable or read-only.

Benefits for workers

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis

Programs for employers

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis

Cards with image

Cards are microformats containing information about a relevant subject. They can be clickable or read-only.

Work with safety
Rapid prototyping

Advice and examples

Cards long

Cards are microformats containing information about a relevant subject. They can be clickable or read-only.

New Covid rules for work

Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit consectetur adipisicing elit Lorem ipsum dolor sit amet, ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit consectetur adipisicing elit Lorem ipsum

Show more
Creating safer work spaces

Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit

Show more

Cards block

Cards are microformats containing information about a relevant subject. They can be clickable or read-only.

Reports
Documents

Cards overlay

Cards are microformats containing information about a relevant subject. They can be clickable or read-only.

Test cases
Client files

Control Bars

Utility bars are components made to place buttons and other interactive elements. They can be configured in different ways according to the application.

Back
Back
Inbox
Edit
Back
Full modal
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet corrupti voluptatibus hic ea laborum qui placeat libero, numquam ducimus nam adipisci id porro ad rem, consequatur blanditiis explicabo veritatis vel!
Save Changes
Full modal
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet corrupti voluptatibus hic ea laborum qui placeat libero, numquam ducimus nam adipisci id porro ad rem, consequatur blanditiis explicabo veritatis vel!
Save Changes
Full modal
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet corrupti voluptatibus hic ea laborum qui placeat libero, numquam ducimus nam adipisci id porro ad rem, consequatur blanditiis explicabo veritatis vel!
Save Changes
Back

Toggles

Toggles allow the user to filter out information.

Borderless table

Simple 2-column table showing general information.

Name Joe Doe
Email joe@mail.com
Claim number 23232
Coverage starts January 23, 2021
Total $15,350

Table Striped

Striped table designed to show longer data sets.

Invoice number Injured worker
4363-4634 John Walter
5658-3455 Tim Turner
5435-3455 Jack Otto
5658-3455 Tim Turner
5435-3455 Jack Otto

Table Bubble

Chunky table designed to contain contact information and other generic user data.

Stripped table with border

Invoice number Injured worker
4363-4634 John Walter
5658-3455 Tim Turner
5435-3455 Jack Otto
5658-3455 Tim Turner
5435-3455 Jack Otto

Scrolling tabs

Tabbed content segmented by groups.


Data Tables

Stacked 2-column tables

Date of service
2020/12/03
Description
OO remake/repair
Cost per unit
$ 320.00
Tax
$ 105.00
No. of units
45
Line item total
$ 2151.00
Date of service
2019/06/10
Description
OO remake/repair
Cost per unit
$ 255
Tax
$ 105.00
No. of units
45
Line item total
$ 2151.00
Date of service
2018/01/11
Description
OO remake/repair
Cost per unit
$ 150
Tax
$ 105.00
No. of units
45
Line item total
$ 2151.00

Scrollable Tables

Side scrolling table with a fixed column.

Invoice Injuried Worker Role Claim number Invoice total Invoice status Header 7 Header 8
4363-4634 Tim Turner Tim Turner 11254631 $ 6584 Processing Cell content Cell content
5658-3455 John Walter Web Developer 4241186 $ 7412 Received Cell content Cell content
5435-3455 Jack Otto Web Developer 11254685 $ 8015 Processing Cell content Cell content
6235-5645 Tim Turner Web Developer 4241003 $ 3402 Received Cell content Cell content
6444-8454 John Walter Web Developer 11255485 $ 100 Processing Cell content Cell content
5978-5568 Jack Otto Web Develope 42456245 $ 5787 Received Cell content Cell content

Modals

Full screen and small screen modals for additional content.

Half modal
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet corrupti voluptatibus hic ea laborum qui placeat libero, numquam ducimus nam adipisci id porro ad rem, consequatur blanditiis explicabo veritatis vel!
Save Changes
Full modal
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet corrupti voluptatibus hic ea laborum qui placeat libero, numquam ducimus nam adipisci id porro ad rem, consequatur blanditiis explicabo veritatis vel!
Save Changes
Half modal
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet corrupti voluptatibus hic ea laborum qui placeat libero, numquam ducimus nam adipisci id porro ad rem, consequatur blanditiis explicabo veritatis vel!
Cancel
Half modal
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet corrupti voluptatibus hic ea laborum qui placeat libero, numquam ducimus nam adipisci id porro ad rem, consequatur blanditiis explicabo veritatis vel!
Save
Cancel
Full modal
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet corrupti voluptatibus hic ea laborum qui placeat libero, numquam ducimus nam adipisci id porro ad rem, consequatur blanditiis explicabo veritatis vel!
Save Changes

Snack Bars

Submit Password Confirm Upload Submit
Your password has beed reset. Please try loging in again.
Your document has been uploadedX
Your application is submitted. Please allow 5 days to process.X

Sliding panel

This is a panel that slides in

Sliding cards

Multipurpose sliding placeholders with vartiants

Sliding cards Small

Small sliding placeholders with actions and triggers

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Sliding cards Medium

Large sliding placeholders

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Sliding cards with actionbar

Sliding placeholders with actions and triggers

Side by side Buttons

Choice buttons aligned one beside each other

Cancel
OK

Grids

Grid 3x3

Basic grid for place-holding content.

1
2
3
4
5
6
7
8
9

Grid 2x2

Basic grid for place-holding content

1
2
3
4
Submit

Ripple Button

Feedback effect when clicking on a button

Infinite Scroll Tables

As you scroll down, the data keeps loading. This avoids having to load all data all at once.

Invoice number Injured worker

Multiple FIlters

Lorem ipsam sit amet

Sort By: Latest
Filter(1)

Expansible Card Stack

Item lists are clickable blocks that connect one page or section with another.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Tour

Item lists are clickable blocks that connect one page or section with another.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam sint blanditiis commodi nobis id eveniet harum aperiam minus sapiente consectetur. Saepe omnis corrupti, voluptatum facilis nihil accusantium quas cumque exercitationem?


Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam sint blanditiis commodi nobis id eveniet harum aperiam minus sapiente consectetur. Saepe omnis corrupti, voluptatum facilis nihil accusantium quas cumque exercitationem?

$(document).ready(function(){ demoTour.show() }) demoTour = new Anno([{ target: '.tourtwo', position: 'bottom', content: 'Choose your content from the list below.', buttons: [ { text: 'Got it!', className: 'btn btn-blue btn-sm m-2', click: function (anno, evt) { anno.hide() } } ] } ])

Settings

Item lists are clickable blocks that connect one page or section with another.

PAGINATION

Item lists are clickable blocks that connect one page or section with another.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Page of