Setup guides

Prototyping

This guide explains how to create prototypes using the GOV.UK Design System and GOV.UK Prototype Kit.

Before you start

To make prototypes you will need to install version 7 or later of the GOV.UK Prototype Kit which has been built to work with the Design System.

Version 7 of the Prototype Kit works in the same way as previous versions except that it uses a new frontend framework called GOV.UK Frontend.

This means that any code that you copy across from old prototypes will not display correctly. Instead, you should use the code provided in the Design System.

Styling page elements

The Design System provides lots of new CSS classes for styling page elements, so you should not need to write as much of your own Sass or CSS.

Explore the Styles section of the Design System to see what classes are available and how to apply them.

Using components

Components are reusable parts of the user interface, like buttons, text inputs and checkboxes. The components in the Design System are designed to be accessible and responsive.

There are 2 ways to use components in the Design System. You can either use HTML or a Nunjucks macro.

You can copy the code from the HTML or Nunjucks tabs below any examples:

Open this example in a new tab

HTML

<button type="submit" class="govuk-button" data-module="govuk-button">
  Save and continue
</button>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
element	string	HTML element for the button component – input, button or a. In most cases you will not need to set this as it will be configured automatically if href is provided. This parameter will be removed in the next major version.
text	string	Required. If html is set, this is not required. Text for the input, button or a element. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined.
html	string	Required. If text is set, this is not required. HTML for the button or a element only. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined. This option has no effect if element is set to "input".
name	string	Name for the input or button. This has no effect on a elements.
type	string	Type for the input or button element – "button", "submit" or "reset". Defaults to "submit". This has no effect on a elements.
value	string	Value for the button element only. This has no effect on a or input elements.
disabled	boolean	Whether the button component should be disabled. For input and button elements, disabled and aria-disabled attributes will be set automatically. This has no effect on a elements.
href	string	The URL that the button component should link to. If this is set, element will be automatically set to "a" if it has not already been defined.
classes	string	Classes to add to the button component.
attributes	object	HTML attributes (for example data attributes) to add to the button component.
preventDoubleClick	boolean	Prevent accidental double clicks on submit buttons from submitting forms multiple times.
isStartButton	boolean	Use for the main call to action on your service’s start page.
id	string	The ID of the button.

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Save and continue"
}) }}

Using Nunjucks macros

A Nunjucks macro is a simple template that generates more complex HTML. However, macros are more sensitive to mistakes than HTML, so it’s worth saving and previewing.

When using Nunjucks macros in the Prototype Kit leave out the first line that starts with {% from ....

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.