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.

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.

Open this button example in new window
Copy
<button class="nhsuk-button" type="submit">
  Save and continue
</button>
Copy
{% from 'button/macro.njk' import button %}

{{ button({
  "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 NHS digital service manual or want to feedback, get in touch.

Updated: January 2020