Setup – Prototyping

Build prototypes quickly to show people and test with users.

Before you start

To make prototypes you will need to install the NHS.UK prototype kit which has been built to work with the service manual.

How to guides

The how to guides will show you how to use the prototype kit, from creating pages to building complex user journeys. Including guidance on passing data page to page, branching, setting up Git and publishing a prototype to the web.

Styling page elements

The service manual 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 service manual 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 service manual are designed to be accessible and responsive.

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

You can copy the code from the HTML or Nunjucks tabs below the examples on our component pages, like this example of a button.

HTML code for buttons
Nunjucks code for buttons

HTML

<button class="nhsuk-button" data-module="nhsuk-button" type="submit">
  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. Deprecated options are marked as "Deprecated".

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.

Primary options
Name	Type	Description
id	string	The ID of the button.
element	string	Deprecated in 10.6.0 (see GitHub). HTML element for the button – `"input"`, `"button"` or `"a"`. In most cases you will not need to set this as it will be configured automatically if `href` is provided.
text	string	Required. If `html` or `ariaLabel` is set, this is not required. Text for the button. If `html` is provided, the `text` option will be ignored.
html	string	Required. If `text` or `ariaLabel` is set, this is not required. HTML for the button. If `html` is provided, the `text` option will be ignored.
caller	nunjucks-block	Not strictly an option but supports the `call` block as an alternative to the `html` option. To use it, you will need to wrap the entire button component in a `call` block.
name	string	Name for the button. If `href` is provided, this has no effect.
type	string	Type of button – `"button"`, `"submit"` or `"reset"`. Defaults to `"submit"` unless `href` is provided.
value	string	The button `value` attribute. If `href` is provided, this has no effect.
disabled	boolean	Whether the button should be disabled. If `href` is provided, this has no effect.
href	string	The button `href` attribute. If set, the button will use an `<a>` tag automatically unless `type` is provided.
variant	string	Optional variant of button – `"brand"`, `"login"`, `"reverse"`, `"secondary"`, `"secondary-solid"` or `"warning"`.
small	boolean	If set to `true`, smaller button size will be used.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.
ariaLabel	string	Button text exposed to assistive technologies, like screen readers, when only an icon is used.
preventDoubleClick	boolean	Prevent accidental double clicks on submit buttons from submitting forms multiple times.
icon	object	Can be used to add an icon to the button. See macro options for icon.

Options for `icon` object
Name	Type	Description
name	string	Required. Icon name for the button – for example, `"search"`, `"arrow-right"`, `"plus"` or `"minus"`.
html	string	Required. HTML to use for the icon, as an alternative to the `name` option. If `html` is provided, the `name` option will be ignored.
placement	string	Required. Placement of the icon within the button – `"start"` or `"end"`.

{% from "button/macro.njk" import button %}

{{ button({
  text: "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 ....

Updated: August 2020