Build a basic prototype

Use components from the Design System

You can copy example code from the NHS Design System to add page elements like radios and text inputs - we call these ‘components’.

HTML and Nunjucks

HTML is the language used to create web pages.

Nunjucks is another language we can run in the Prototype Kit, to make HTML for us. Short, simple Nunjucks code can create much longer, more complex HTML.

In the Design System, components have both Nunjucks and HTML example code. Either will work in the Prototype Kit.

Add radios to question 1

1. Go to the radios component in the Design System.
2. Select the Nunjucks tab under the third example, then Copy code.
3. Open magical-powers.html in your app/views folder.
4. Replace the 2 example <p>...</p> paragraphs with the code you copied.
5. The example comes with a heading that is connected to the answers for accessibility, so delete the old <h1> tag with "Have you felt symptoms of magical powers in the last 30 days?".

Customise the example code

1. Under legend, change text from "Do you know your NHS number?" to "Have you felt symptoms of magical powers in the last 30 days?".
2. Change name to magical-powers.
3. Delete the {% set hint %} code.
4. In the hint: { html: area replace hintHtml and add "For example, things moving when you have strong feelings or hearing someone’s thoughts.".

Your component code should now look like this:

{{ radios({
  idPrefix: "magical-powers",
  name: "magical-powers",
  fieldset: {
    legend: {
    text: "Have you felt symptoms of magical powers in the last 30 days?",
      classes: "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  hint: {
    html: "For example, things moving when you have strong feelings or hearing someone’s thoughts."
  },
  items: [
   {
    value: "yes",
    text: "Yes"
    },
    {
      value: "no",
      text: "No"
    },
    {
      value: "not sure",
      text: "I'm not sure"
    }
  ]
}) }}

Your page should now look like this: