Setup - Prototyping

Build prototypes quickly to show people and test with users.

Before you start

To make prototypes you will need to install the HS2 prototype kit which has been built to work with the design system.

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 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 the examples on our component pages, like this example of a button.

Open this example in new window

HTML

Copy code

<button class="hs2-button" type="submit">
  Save and continue
</button>

<button class="hs2-button hs2-button--disabled" type="submit">
  Disabled
</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.

Nunjucks arguments for default buttons
Name	Type	Required	Description
Name element	Type string	Required false	Description Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.
Name text	Type string	Required true	Description If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
Name html	Type string	Required true	Description If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
Name name	Type string	Required false	Description Name for the `input` or `button`. This has no effect on `a` elements.
Name type	Type string	Required false	Description Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.
Name value	Type string	Required false	Description Value for the `button` tag. This has no effect on `a` or `input` elements.
Name disabled	Type boolean	Required false	Description Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.
Name href	Type string	Required false	Description The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.
Name classes	Type string	Required false	Description Classes to add to the button component.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the button component.

Copy code

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

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


{{ button({
  "text": "Disabled",
  "classes": "hs2-button--disabled"
}) }}

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 ....