Skip links and keyboard navigation

For government has transitioned to using the Queensland Government design system. If you have feedback, please use the form at the bottom of this page.

Learn more

Single Website Experience

Get started with SWE

Review the foundations to learn about the key underpinning elements of the SWE. Explore the components and templates to familiarise yourself with the existing interface patterns that you can incorporate into your website.

To help with rapid design and development, the SWE is tightly integrated with the open source frontend  framework Bootstrap 4.

Figma UI kit

A SWE UI kit is available in Figma and contains all the design assets required to quickly and easily create, share and test prototypes.

To reuse the styles, components and templates from the SWE UI kit across your Figma design files you'll need access to the library. Send your Figma account email address to online@qld.gov.au and we'll send you a direct invitation.

If you don't need access to the library, you can access the view-only SWE Figma UI kit.

HTML prototyping

You can also use the SWE codebase available on GitHub for HTML prototyping.

Installation instructions can be found on the GitHub repository: qg-web-template.

For the compiled/released assets copy of the codebase, see the GitHub repository: web-template-release.

The SWE includes jQuery and a suite of custom Javascript features.

The SWE is built on SASS. The source SCSS files are included in the NPM package (or the GitHub released assets repository) under /scss. The main SCSS files are:

qg-main.scss - the main file which includes all other SCSS fragments. Compiles to qg-main.css .

  • scss-general/_qg-variables.scss - contains settings specific to Queensland Government
  • scss-general/_bootstrap-variables - contains the standard set of Bootstrap variables
  • scss-general/_bootstrap-loader.scss - loader for standard Bootstrap files, from node_modules/bootstrap-sass/
  • scss-general/bootstrap/_mixins.scss - loader for Bootstrap mixins, from node_modules/bootstrap-sass/mixins/

qg-noscript.scss - contains styles for browsers not running javascript.

See Squiz Matrix CMS documentation and guides for instructions on how to add and configure SWE components on your web pages.

What's new

23 Jan 2024: We released v4.4.0

This release included a new tag component and numerous improvements to the topic index and franchise landing page templates. Updates were also made to the table, social media, quick exit, radio, checkbox, and accordion components.

Contribute

The SWE is for, and built by, all of us—and we need your help to continue improving it. Anyone can suggest an improvement, report a bug or fix an error. Take a look at the 'contribute to SWE' page to find out how.

Join the User interface community of practice (UI CoP), where Queensland Government employees share and discuss our experiences, ideas and resources on user interface design and development, including the SWE.

Support

The SWE is maintained by Queensland Online within Smart Service Queensland, Department of Transport and Main Roads.

Contact the team by email at online@qld.gov.au.

Last updated:
25 January 2023