Components

Documentation and resources (complete with examples) required to deploy a SonarQube server instance into a BCGov OpenShift pathfinder environment, and integrate SonarQube and ZAP scanning into your Jenkins pipeline. With SonarQube you can perform and report on code quality, and code coverage, and scan for known vulnerabilities and security issues.

A simple containerized backup solution for backing up one or more supported databases to a secondary location.

Get started with docs and resources for Matomo, a fully featured web analytics server. It's a great alternative to Google Analytics when data ownership and privacy compliance are a concern.

Fathom Analytics provides very simple website stats without tracking or storing personal data.

An image that can be used for chained builds that require Oracle Instant Client software RPM's.

The OWASP Zed Attack Proxy (ZAP) automatically finds security vulnerabilities in web applications.

What the Design System is and how it works.

Accessibility considerations in the design system

Primary and secondary colours to be used on all government digital websites and services.

Font families and styling to be used on all government digital websites and services.

Iconography uses images and symbols to represent an object visually. They communicate a message and should be distinct and informative.

Alert banners notify people of important information or changes on a page.

Beta status indicator

Headers help users understand what the content of the page is about and provides a quick, organized way to reach the main sections of a website.

Footer help users understand what the content of the page is about and provides a quick, organized way to reach the main sections of a website.

Navigation bars provide a list of links to important content on a website or application. Typically they are placed in the header.

Guidance on designing digital forms

Primary buttons allow users to carry out an important action.

Secondary buttons allow users to carry out a supporting action

Disabled buttons are greyed out to indicate to users that they cannot undertake the action associated with it.

Links lead users to a different page or further information.

Callouts are an excerpt of text that has been pulled out and used as a visual clue to draw the eye to the text.

Radio buttons allow users to select one item from a given list.

Checkboxes allow users to select one or more items from a list.

Dropdowns allow users to select one option from a list.

Text inputs allow users to enter any combination of letters, numbers, or symbols of their choosing in a structured format.

Textarea allow users to input multiple lines of text

Browser support guidance

Components are constantly being added to the design system. The backlog shows what’s on the list, upcoming, and currently in development.

Anyone can propose a new component for inclusion in the B.C. government Design System. Components are proposed and selected for development based off our evaluation criteria.

How to use the design system prototyping libraries