GOV.UK Elements form the building blocks from which all pages are made.
HTML CSS JavaScript Other
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.github Update the pull request and issue templates Feb 9, 2017
.travis Combine scripts for Travis Mar 22, 2017
app Update notice message about the Design System Jun 26, 2018
assets Fix missing arrow on `<details>` element In Firefox Jul 4, 2018
config Add a package task May 17, 2017
packages/govuk-elements-sass Bump version to 3.1.3 Jul 5, 2018
scripts Release as "GOV.UK Design System CI" Oct 11, 2017
test/specs Add mocha tests to check the app runs May 9, 2017
tests Add Wraith configuration Nov 17, 2015
.gitignore Revert "Serve GOV.UK elements over https" Jun 14, 2017
.npmrc Set npm config production to false May 6, 2016
.slugignore Add yarn.lock to .slugignore for Heroku May 2, 2017
.travis.yml Update npm token Jul 13, 2018 Merge pull request #531 from alex-ju/master Jul 14, 2017
Gemfile Update to latest version of govuk-lint Dec 14, 2017
Gemfile.lock Update to latest version of govuk-lint Dec 14, 2017
LICENSE.txt Add The MIT License (MIT) to the license file May 25, 2016
Procfile Set Procfile to start server.js May 9, 2017 Update notice message about the Design System Jun 26, 2018
app.json Add Heroku generated app.json Mar 7, 2017
gulpfile.js Rename the partial of frontend toolkit dependencies Jun 13, 2017
package.json Update GOV.UK Frontend Toolkit to 7.1.0 Oct 3, 2017
server.js Revert "Serve GOV.UK elements over https" Jun 14, 2017
yarn.lock Update GOV.UK Frontend Toolkit to 7.1.0 Oct 3, 2017

The GOV.UK Design System launched on 22 June 2018

The Government Digital Service (GDS) is retiring GOV.UK Elements following the launch of the GOV.UK Design System. GOV.UK Elements will remain available to you if you are currently using it but will no longer be maintained. GDS will only roll out major bug fixes and security patches.

For new projects, you can get all of the information about GOV.UK styles, components and patterns in the GOV.UK Design System.

GOV.UK elements · JavaScript Style Guide Greenkeeper badge

GOV.UK elements is three things:

  1. An online design guide, explaining how to make your service look consistent with the rest of GOV.UK.
  2. An example of how to use the code in the GOV.UK template and the GOV.UK frontend toolkit.
  3. An npm package of the Sass files.

GOV.UK elements guide

Using govuk-elements-sass

Installation and usage instructions can be found in the govuk-elements-sass README.

Running this site locally

If you would like to clone the repository and run it locally, you will need Node.js (at least version v0.10.0).

Clone this repository

git clone

Install all dependencies

npm install

Run the app

npm start

Go to localhost:3000 in your browser.

Running tests

To check the whole codebase, run:

npm test


GOV.UK lint

GOV.UK elements uses govuk-lint, which uses scss-lint as its scss linter.

Standard JavaScript

GOV.UK elements uses standardjs, an opinionated JavaScript linter. All JavaScript files follow its conventions.

Both linters run on CI to ensure that new pull requests are in line with them.

Running Wraith to compare changes

GOV.UK elements uses Wraith so that regressions can be easily spotted.

This needs to be run from the Wraith directory /tests/wraith and some dependencies need to be installed on the local machine first.

  1. Install Wraith and its dependencies.

     gem install wraith
     brew install phantomjs
     brew install imagemagick
  2. Take a baseline of the current version.

On master run:

    wraith history config.yaml
  1. Switch to your feature branch and make changes.

On your feature branch run:

    wraith latest config.yaml

Releasing a new version

Follow the instructions in

Pattern libraries using GOV.UK elements

Here are examples of service-specific pattern libraries using GOV.UK elements.


You can find contribution guidelines in