Exit to UX Library

Utility classes and design tokens

For faster prototyping and development, the WorkSafeBC design system includes dozens of utility classes and design tokens for positioning, colors, aligning, and spacing content.

Positioning

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

Colors

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

Form field widths

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

Fixed minimum heights

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

Zoom Utilities

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%

Fixed Widths Utilities

Classes to assign exact fixed widths to elements

Class Width
.w-10px Sets width to 10px
.w-12px Sets width to 12px
.w-14px Sets width to 14px
.w-16px Sets width to 16px
.w-18px Sets width to 18px
.w-20px Sets width to 20px
.w-22px Sets width to 22px
.w-24px Sets width to 24px
.w-26px Sets width to 26px
.w-28px Sets width to 28px
.w-30px Sets width to 30px
.w-32px Sets width to 32px
.w-34px Sets width to 34px
.w-36px Sets width to 36px
.w-38px Sets width to 38px
.w-40px Sets width to 40px
.w-42px Sets width to 42px
.w-44px Sets width to 44px
.w-46px Sets width to 46px
.w-48px Sets width to 48px
.w-50px Sets width to 50px
.w-52px Sets width to 52px
.w-54px Sets width to 54px
.w-56px Sets width to 56px
.w-58px Sets width to 58px
.w-60px Sets width to 60px
.w-62px Sets width to 62px
.w-64px Sets width to 64px
.w-66px Sets width to 66px
.w-68px Sets width to 68px
.w-70px Sets width to 70px
.w-72px Sets width to 72px
.w-74px Sets width to 74px
.w-76px Sets width to 76px
.w-78px Sets width to 78px
.w-80px Sets width to 80px
.w-82px Sets width to 82px
.w-84px Sets width to 84px
.w-86px Sets width to 86px
.w-88px Sets width to 88px
.w-90px Sets width to 90px
.w-92px Sets width to 92px
.w-94px Sets width to 94px
.w-96px Sets width to 96px
.w-98px Sets width to 98px
.w-100px Sets width to 100px
.w-102px Sets width to 102px
.w-104px Sets width to 104px
.w-106px Sets width to 106px
.w-108px Sets width to 108px
.w-110px Sets width to 110px
.w-112px Sets width to 112px
.w-114px Sets width to 114px
.w-116px Sets width to 116px
.w-118px Sets width to 118px
.w-120px Sets width to 120px
.w-122px Sets width to 122px
.w-124px Sets width to 124px
.w-126px Sets width to 126px
.w-128px Sets width to 128px
.w-130px Sets width to 130px
.w-132px Sets width to 132px
.w-134px Sets width to 134px
.w-136px Sets width to 136px
.w-138px Sets width to 138px
.w-140px Sets width to 140px
.w-142px Sets width to 142px
.w-144px Sets width to 144px
.w-146px Sets width to 146px
.w-148px Sets width to 148px
.w-150px Sets width to 150px
.w-152px Sets width to 152px
.w-154px Sets width to 154px
.w-156px Sets width to 156px
.w-158px Sets width to 158px
.w-160px Sets width to 160px
.w-162px Sets width to 162px
.w-164px Sets width to 164px
.w-166px Sets width to 166px
.w-168px Sets width to 168px
.w-170px Sets width to 170px
.w-172px Sets width to 172px
.w-174px Sets width to 174px
.w-176px Sets width to 176px
.w-178px Sets width to 178px
.w-180px Sets width to 180px
.w-182px Sets width to 182px
.w-184px Sets width to 184px
.w-186px Sets width to 186px
.w-188px Sets width to 188px
.w-190px Sets width to 190px
.w-192px Sets width to 192px
.w-194px Sets width to 194px
.w-196px Sets width to 196px
.w-198px Sets width to 198px
.w-200px Sets width to 200px
.w-202px Sets width to 202px
.w-204px Sets width to 204px
.w-206px Sets width to 206px
.w-208px Sets width to 208px
.w-210px Sets width to 210px
.w-212px Sets width to 212px
.w-214px Sets width to 214px
.w-216px Sets width to 216px
.w-218px Sets width to 218px
.w-220px Sets width to 220px
.w-222px Sets width to 222px
.w-224px Sets width to 224px
.w-226px Sets width to 226px
.w-228px Sets width to 228px
.w-230px Sets width to 230px
.w-232px Sets width to 232px
.w-234px Sets width to 234px
.w-236px Sets width to 236px
.w-238px Sets width to 238px
.w-240px Sets width to 240px
.w-242px Sets width to 242px
.w-244px Sets width to 244px
.w-246px Sets width to 246px
.w-248px Sets width to 248px
.w-250px Sets width to 250px
.w-252px Sets width to 252px
.w-254px Sets width to 254px
.w-256px Sets width to 256px
.w-258px Sets width to 258px
.w-260px Sets width to 260px
.w-262px Sets width to 262px
.w-264px Sets width to 264px
.w-266px Sets width to 266px
.w-268px Sets width to 268px
.w-270px Sets width to 270px
.w-272px Sets width to 272px
.w-274px Sets width to 274px
.w-276px Sets width to 276px
.w-278px Sets width to 278px
.w-280px Sets width to 280px
.w-282px Sets width to 282px
.w-284px Sets width to 284px
.w-286px Sets width to 286px
.w-288px Sets width to 288px
.w-290px Sets width to 290px
.w-292px Sets width to 292px
.w-294px Sets width to 294px
.w-296px Sets width to 296px
.w-298px Sets width to 298px
.w-300px Sets width to 300px