Add error page guidance (#168)

Add draft error page guidance with placeholder example images

docs/components/error-pages.md

@@ -0,0 +1,68 @@
+---
+layout: layouts/component.njk
+title: Error pages
+description: Use an error page to tell users there is a problem. Explain what has happened and what they can do about it.
+---
+
+## When to use
+
+Use an error page when:
+
+- something has gone wrong
+- users cannot continue to the next page
+
+## When not to use
+
+Do not use an error page when users make mistakes while completing forms. Instead, follow the NHS service manual guidance for in-page validation error messages, to help users understand what they need to do in context.
+
+## How to use
+
+The content of error pages must tell users:
+
+- what has happened
+- what they can do next
+
+### Describe the problem
+
+Use the main heading to describe the problem.
+
+Write the heading using the active voice. Starting with “We” or “You” can help make clear where the issue comes from. For example:
+
+- “We could not connect you to the NHS App”
+- “You need to update the NHS App”
+
+### Explain the next steps
+
+You should primarily use the body of an error page to explain what users can do next.
+
+Use a secondary button to provide the main action on the page. This should be the main step users can take to overcome the error.
+
+![Error page example](/assets/images/error-pages/log-in-1120.png)
+
+Sometimes, you may need to use the start of the body text to give more detail about the problem. In this case, use the sub-heading “What you can do” to clearly separate the problem from the solution.
+
+![Error page example](/assets/images/error-pages/connect-to-app-1120.png)
+
+### Explain what to do if the problem continues
+
+Sometimes users may need to contact the NHS App team if an error keeps happening. Use the sub-heading “If the problem continues” to provide this information.
+
+#### Give alternative actions
+
+You can use secondary card links to give users alternative actions they could take. This could be a link to a related service.
+
+Use the sub-heading “Other things you can do” to give alternative actions.
+
+Use the sub-heading “Find out more” to include supplementary information pages uses might find it helpful to read.
+
+![Error page example](/assets/images/error-pages/confirmed-prescriptions-1120.png)
+
+### Give medical signposting
+
+If the error may be stopping a user from accessing particular medical help, it may be relevant to include signposting to a health service. This could be to their GP surgery if the error occurs while accessing a GP service, or to 111 online.
+
+Use [inset text](https://service-manual.nhs.uk/design-system/components/inset-text) at the bottom of the page to give 111 signposting.
+
+Medical signposting is not always needed. There is a risk of users thinking health services can help with technical problems. Check with the clinical team if you need guidance.
+
+![Error page example](/assets/images/error-pages/no-appointments-1120.png)