Build a basic prototype

Add a textarea to question 2

1. Go to the textarea page of the Design System.
2. Select the Nunjucks tab, 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. Delete the old <h1> tag with "Tell us your symptoms of magical powers" (again the example code comes with an accessible heading for the question).

Customise the example code

1. Under label, change text from "Can you provide more detail?" to "Tell us your symptoms of magical powers".
2. Change the id and name to details.
3. We don’t need a hint, so remove it and the comma just before it.
4. We also want to make the page a title, so in the label area add classes: "nhsuk-label--l", and isPageHeading: true

Your component code should now look like this:

{{ textarea({
name: "details",
id: "details",
label: {
  text: "Tell us your symptoms of magical powers",
  classes: "nhsuk-label--l",
  isPageHeading: true
}
}) }}

Your page should now look like this: