SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Getting Started



Advanced customisation with Sass

We highly recommend that you customise your site, by extending base SGDS classes using separate CSS or Sass files.

This way, your site will automatically inherit non-conflicting fixes and improvements made to SGDS without breaking existing styles.

Here are the items you’ll need:

Note: Links that contain the JS tags contain interactive elements that require JavaScript.

If you are using a JavaScript framework, check out the framework-specific helper libraries:

Component reference

Component reference is helpful for you to implement layouts, elements and components, using our CSS class and modifiers.

Each page provides you with comprehensive usage instructions, examples and guidelines.

Standard Components

Standard components aid users in basic site identification and navigation. They should be present in all websites as stated in the Digital Service Standards.


CSS classes are used for composing your site layout. Over here, you can also find the breakpoints that we use for desktop and mobile devices.


Common components that can be used individually or grouped to form patterns and templates. For example, you can group the hero with cards to build a landing page.


Form components and guidelines for the collection of user input.


Helper classes to help you alter the style of almost any component.