For faster prototyping and development, the WorkSafeBC design system includes dozens of utility classes and design tokens for positioning, colors, aligning, and spacing content.
Classes dealing with positioning of elements in the UI
Class | Effect |
---|---|
.fixed-bottom |
Fixes element to the bottom of the page |
.footer-up |
bring up the footer 60px in order to accommodate fixed elements |
Classes dealing with color backgrounds for elements
Class | Color token |
---|---|
.sunsetorange |
Applies Sunset orange color background |
.mountainblue |
Applies Mountain blue color background |
.mossgreen |
Applies moss green color background |
.white |
Applies white color background |
.black |
Applies black color background |
.grey |
Applies #776E64 color background |
.orange |
Applies #ED8B00 color background |
.mountainblue |
Applies #6399AE color background |
.huckleberryred |
Applies #A4343A color background |
.sunsetorange |
Applies #DC4405 color background |
.sunriseyellow |
Applies #F1BE48 color background |
.mossgreen |
Applies #888D30 color background |
.fire |
Applies #f1a223 color background |
.warmgrey1 |
Applies #E4E2E0 color background |
.warmgrey2 |
Applies #C9C5C1 color background |
.warmgrey3 |
Applies #ADA8A2 color background |
.warmgrey4 |
Applies #47423C color background |
.warmgrey5 |
Applies #453F39 color background |
.ashgrey |
Applies #F1F0EF color background |
.silvergrey |
Applies #E4E2E0 color background |
.steelgrey |
Applies #C9C5C1 color background |
.smokegrey |
Applies #ADA8A2 color background |
.irongrey |
Applies #47423C color background |
Classes to set the widths of input elements and form fields.
Class | Width token |
---|---|
.input-50p |
Makes an input element 50px width |
.input-75p |
Makes an input element 75px width |
.input-100p |
Makes an input element 100px width |
.input-150p |
Makes an input element 150px width |
.input-200p |
Makes an input element 200px width |
.input-250p |
Makes an input element 250px width |
.input-300p |
Makes an input element 300px width |
Classes to set the minimum heights of a container
Class | Width token |
---|---|
.minheight-150p |
Makes the minimum height of an element 150px |
.minheight-300p |
Makes the minimum height of an element 300px |
.height-50p |
Makes the height of an element 50px |
.height-75p |
Makes the height of an element 75px |
.height-100p |
Makes the height of an element 100px |
.height-150p |
Makes the height of an element 150px |
.height-200p |
Makes the height of an element 200px |
.height-250p |
Makes the height of an element 250px |
.height-300p |
Makes the height of an element 300px |
.height-350p |
Makes the height of an element 350px |
.height-400p |
Makes the height of an element 400px |
Classes to set the Zoom
Class | Zoom |
---|---|
.zoom110 |
Makes the zoom 110% |
.zoom120 |
Makes the zoom 120% |
.zoom130 |
Makes the zoom 130% |
.zoom140 |
Makes the zoom 140% |
.zoom150 |
Makes the zoom 150% |
.zoom160 |
Makes the zoom 160% |
.zoom170 |
Makes the zoom 170% |
.zoom180 |
Makes the zoom 180% |
.zoom190 |
Makes the zoom 190% |
.zoom200 |
Makes the zoom 200% |