From 638c2042235e32d62f07bb8605a14b453656afa5 Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Wed, 24 Mar 2021 14:39:16 +0000
Subject: [PATCH] Add new equalities information pattern

---
 .../equality-information/asian/index.njk      |  69 ++++++++
 .../equality-information/black/index.njk      |  61 +++++++
 .../date-of-birth/index.njk                   |  28 +++
 .../disability-impact/index.njk               |  47 +++++
 .../equality-information/disability/index.njk |  40 +++++
 .../error-date-of-birth/index.njk             |  31 ++++
 .../error-ethnicity/index.njk                 |  55 ++++++
 .../ethnic-group/index.njk                    |  52 ++++++
 .../explainer-screen/index.njk                |  52 ++++++
 .../equality-information/index.md.njk         | 166 ++++++++++++++++++
 .../marriage-status/index.njk                 |  68 +++++++
 .../equality-information/multiple/index.njk   |  65 +++++++
 .../equality-information/other/index.njk      |  57 ++++++
 .../equality-information/religion/index.njk   |  81 +++++++++
 .../equality-information/sex-gender/index.njk |  80 +++++++++
 .../sexual-orientation/index.njk              |  93 ++++++++++
 .../equality-information/white/index.njk      |  65 +++++++
 17 files changed, 1110 insertions(+)
 create mode 100644 src/patterns/equality-information/asian/index.njk
 create mode 100644 src/patterns/equality-information/black/index.njk
 create mode 100644 src/patterns/equality-information/date-of-birth/index.njk
 create mode 100644 src/patterns/equality-information/disability-impact/index.njk
 create mode 100644 src/patterns/equality-information/disability/index.njk
 create mode 100644 src/patterns/equality-information/error-date-of-birth/index.njk
 create mode 100644 src/patterns/equality-information/error-ethnicity/index.njk
 create mode 100644 src/patterns/equality-information/ethnic-group/index.njk
 create mode 100644 src/patterns/equality-information/explainer-screen/index.njk
 create mode 100644 src/patterns/equality-information/index.md.njk
 create mode 100644 src/patterns/equality-information/marriage-status/index.njk
 create mode 100644 src/patterns/equality-information/multiple/index.njk
 create mode 100644 src/patterns/equality-information/other/index.njk
 create mode 100644 src/patterns/equality-information/religion/index.njk
 create mode 100644 src/patterns/equality-information/sex-gender/index.njk
 create mode 100644 src/patterns/equality-information/sexual-orientation/index.njk
 create mode 100644 src/patterns/equality-information/white/index.njk

diff --git a/src/patterns/equality-information/asian/index.njk b/src/patterns/equality-information/asian/index.njk
new file mode 100644
index 0000000000..290cb6593c
--- /dev/null
+++ b/src/patterns/equality-information/asian/index.njk
@@ -0,0 +1,69 @@
+---
+title: Asian ethnicity equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% set ethnicityHtml %}
+  {{ govukInput({
+    id: "other-description",
+    name: "other-description",
+    type: "text",
+    spellcheck: false,
+    classes: "govuk-!-width-one-half",
+    label: {
+      text: "How would you describe your background? (optional)"
+    }
+  }) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "ethnicity-detail",
+  name: "ethnicity-detail",
+  fieldset: {
+    legend: {
+      text: "Which of the following best describes your Asian or Asian British background?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "indian",
+      text: "Indian"
+    },
+    {
+      value: "pakistani",
+      text: "Pakistani"
+    },
+    {
+      value: "bangladeshi",
+      text: "Bangladeshi"
+    },
+    {
+      value: "chinese",
+      text: "Chinese"
+    },
+    {
+      value: "other",
+      text: "Any other Asian background",
+      conditional: {
+        html: ethnicityHtml
+      }
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/black/index.njk b/src/patterns/equality-information/black/index.njk
new file mode 100644
index 0000000000..c96e7a4547
--- /dev/null
+++ b/src/patterns/equality-information/black/index.njk
@@ -0,0 +1,61 @@
+---
+title: Black ethnicity equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% set ethnicityHtml %}
+  {{ govukInput({
+    id: "other-description",
+    name: "other-description",
+    type: "text",
+    spellcheck: false,
+    classes: "govuk-!-width-one-half",
+    label: {
+      text: "How would you describe your background? (optional)"
+    }
+  }) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "ethnicity-detail",
+  name: "ethnicity-detail",
+  fieldset: {
+    legend: {
+      text: "Which of the following best describes your Black, African, Caribbean or Black British background?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "african",
+      text: "African"
+    },
+    {
+      value: "caribbean",
+      text: "Caribbean"
+    },
+    {
+      value: "other",
+      text: "Any other Black, African or Caribbean background",
+      conditional: {
+        html: ethnicityHtml
+      }
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/date-of-birth/index.njk b/src/patterns/equality-information/date-of-birth/index.njk
new file mode 100644
index 0000000000..09a7e83e36
--- /dev/null
+++ b/src/patterns/equality-information/date-of-birth/index.njk
@@ -0,0 +1,28 @@
+---
+title: Date of birth equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukDateInput({
+  id: "date-of-birth",
+  namePrefix: "date-of-birth",
+  fieldset: {
+    legend: {
+      text: "What is your date of birth?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "For example, 31 3 1980"
+  }
+}) }}
+
+<p class="govuk-body">If you prefer not to say, continue without entering any information.</p>
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/disability-impact/index.njk b/src/patterns/equality-information/disability-impact/index.njk
new file mode 100644
index 0000000000..751cd8a4d7
--- /dev/null
+++ b/src/patterns/equality-information/disability-impact/index.njk
@@ -0,0 +1,47 @@
+---
+title: Disability impact equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
+  idPrefix: "disability",
+  name: "disability",
+  fieldset: {
+    legend: {
+      text: "Do any of your conditions or illnesses reduce your ability to carry out day to day activities?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "For example eating, washing, walking or going shopping."
+  },
+  items: [
+    {
+      value: "little",
+      text: "Yes, a little"
+    },
+    {
+      value: "lot",
+      text: "Yes, a lot"
+    },
+    {
+      value: "No",
+      text: "Not at all"
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/disability/index.njk b/src/patterns/equality-information/disability/index.njk
new file mode 100644
index 0000000000..8591574034
--- /dev/null
+++ b/src/patterns/equality-information/disability/index.njk
@@ -0,0 +1,40 @@
+---
+title: Disability equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
+  idPrefix: "disability",
+  name: "disability",
+  fieldset: {
+    legend: {
+      text: "Do you have any physical or mental health conditions or illness lasting or expected to last 12 months or more?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "yes",
+      text: "Yes"
+    },
+    {
+      value: "no",
+      text: "No"
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/error-date-of-birth/index.njk b/src/patterns/equality-information/error-date-of-birth/index.njk
new file mode 100644
index 0000000000..c3b0d8099d
--- /dev/null
+++ b/src/patterns/equality-information/error-date-of-birth/index.njk
@@ -0,0 +1,31 @@
+---
+title: Date of birth equality question with error
+layout: layout-example.njk
+---
+
+{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukDateInput({
+  id: "date-of-birth",
+  namePrefix: "date-of-birth",
+  fieldset: {
+    legend: {
+      text: "What is your date of birth?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  errorMessage: {
+    text: "Enter a real date of birth, or leave it blank"
+  },
+  hint: {
+    text: "For example, 31 3 1980"
+  }
+}) }}
+
+<p class="govuk-body">If you prefer not to say, continue without entering any information.</p>
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/error-ethnicity/index.njk b/src/patterns/equality-information/error-ethnicity/index.njk
new file mode 100644
index 0000000000..d4a510e80f
--- /dev/null
+++ b/src/patterns/equality-information/error-ethnicity/index.njk
@@ -0,0 +1,55 @@
+---
+title: Ethnicity question with error
+layout: layout-example.njk
+---
+
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukRadios({
+  idPrefix: "ethnicity",
+  name: "ethnicity",
+  fieldset: {
+    legend: {
+      text: "What is your ethnic group?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  errorMessage: {
+    text: "Select an ethnic group or ‘Prefer not to say’"
+  },
+  items: [
+    {
+      value: "white",
+      text: "White"
+    },
+    {
+      value: "multiple",
+      text: "Mixed or multiple ethnic groups"
+    },
+    {
+      value: "asian",
+      text: "Asian or Asian British"
+    },
+    {
+      value: "black",
+      text: "Black, African, Carribean or Black British"
+    },
+    {
+      value: "other",
+      text: "Other ethnic group"
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/ethnic-group/index.njk b/src/patterns/equality-information/ethnic-group/index.njk
new file mode 100644
index 0000000000..801e910193
--- /dev/null
+++ b/src/patterns/equality-information/ethnic-group/index.njk
@@ -0,0 +1,52 @@
+---
+title: Ethnic group equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
+  idPrefix: "ethnicity",
+  name: "ethnicity",
+  fieldset: {
+    legend: {
+      text: "What is your ethnic group?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "white",
+      text: "White"
+    },
+    {
+      value: "multiple",
+      text: "Mixed or multiple ethnic groups"
+    },
+    {
+      value: "asian",
+      text: "Asian or Asian British"
+    },
+    {
+      value: "black",
+      text: "Black, African, Carribean or Black British"
+    },
+    {
+      value: "other",
+      text: "Other ethnic group"
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/explainer-screen/index.njk b/src/patterns/equality-information/explainer-screen/index.njk
new file mode 100644
index 0000000000..bb0f1d30ff
--- /dev/null
+++ b/src/patterns/equality-information/explainer-screen/index.njk
@@ -0,0 +1,52 @@
+---
+title: Explainer screen for equality information questions
+layout: layout-example.njk
+---
+
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{% set hintHtml %}
+  <p>These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
+  <p>Your answers won’t affect your application.</p>
+{% endset -%}
+
+<h1 class="govuk-heading-l">We have received your application</h1>
+
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+
+<form action="/form-handler" method="post" novalidate>
+  {{ govukRadios({
+    idPrefix: "equalities-info",
+    name: "equalities-info",
+    fieldset: {
+      legend: {
+        text: "Do you want to answer the equality questions?",
+        classes: "govuk-fieldset__legend--m"
+      }
+    },
+    hint: {
+      html: hintHtml
+    },
+    items: [
+      {
+        value: "yes",
+        text: "Yes, answer the equality questions (takes 2 minutes)"
+      },
+      {
+        value: "no",
+        text: "No, skip the equality questions"
+      }
+    ]
+  }) }}
+
+  {{ govukDetails({
+    summaryText: "Why we ask equality questions",
+    text: "Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information."
+  }) }}
+
+  {{ govukButton({
+    text: "Continue"
+  }) }}
+<form>
diff --git a/src/patterns/equality-information/index.md.njk b/src/patterns/equality-information/index.md.njk
new file mode 100644
index 0000000000..3a55c468ea
--- /dev/null
+++ b/src/patterns/equality-information/index.md.njk
@@ -0,0 +1,166 @@
+---
+title: Equality information
+description: This pattern explains how to ask users for equality information
+section: Patterns
+theme: Ask users for…
+backlog_issue_id: 180
+layout: layout-pane.njk
+---
+
+{% from "_example.njk" import example %}
+
+Public sector organisations have a duty to consider the need to avoid discimination and advance equality of opportunity as part of what they do. This is part of what’s called the [public sector equality duty](https://www.gov.uk/guidance/equality-act-2010-guidance#public-sector-equality-duty).
+
+Public sector bodies often collect equality information about service users to help them meet this duty.
+
+## When to use this pattern
+
+These patterns are based on the [harmonised standards developed by the Government Statistical Service](https://gss.civilservice.gov.uk/guidances/harmonised-standards-guidance/).
+
+Collecting equality information in a consistent way across the public sector makes the data more useful. For example, an organisation can benchmark its own services against other public sector services or the population in general. And it can adjust its approach if it finds a particular group is under-represented.
+
+Do not use this pattern to collect information for operational reasons - especially if you’re legally required to ask for the information in a particular way. For example, you’re [asking about the user’s gender or sex](/patterns/gender-or-sex/) to work out how much State Pension they’re entitled to.
+
+## How it works
+
+When asking users for equality information, make it clear:
+
+- that the questions are different from other questions in the service
+- why you’re asking the questions, and what you’ll do with the information
+- that the questions are optional
+
+## Where to place equality questions
+
+For a service that people are likely to use on a one-off basis:
+
+- place equality questions between the [‘check your answers’ page](https://design-system.service.gov.uk/patterns/check-answers/) and the [confirmation page](https://design-system.service.gov.uk/patterns/confirmation-pages/)
+- show the user a screen explaining why you’re asking the questions and what you’ll do with the information they provide, like the one below
+- on the ‘check your answers’ screen, group answers together under an ‘Optional equality questions’ heading
+
+{{ example({group: "patterns", item: "equality-information", example: "explainer-screen", html: true, nunjucks: true, open: false}) }}
+
+### Longer term services
+
+With a service that you expect users to return to multiple times, you’ll need to decide where to place the equality questions. For example, with an account-type service with tasks that need to be completed at different times, you might choose to make answering the equality questions an optional task.
+
+You’ll also need to give users the option to update their equality information in case anything changes.
+
+## Get specialist privacy or data protection advice
+
+Some or all of the equality information you collect is likely to be what’s called ‘[special category personal data](https://ico.org.uk/for-organisations/guide-to-data-protection/guide-to-the-general-data-protection-regulation-gdpr/special-category-data/what-is-special-category-data/)’, meaning it has special legal protections.
+
+So before you start collecting equality information, it’s important to get advice and approval from your organisation’s privacy or data protection expert on how to collect and process the information.
+
+You’ll also need to update [the service’s privacy notice](https://www.gov.uk/service-manual/design/collecting-personal-information-from-users).
+
+## What information to collect
+
+Public sector organisations will have someone who is responsible for making sure the organisation is meeting its obligations under the public sector equality duty. They can help you work out what equality information to collect.
+
+This pattern covers:
+
+- age
+- disability
+- ethnic group
+- marital or partnership status
+- religion
+- sex and gender identity
+- sexual orientation
+
+### Collecting more detailed information
+
+Start with the harmonised standards, keeping the categories of responses in the same order. Break them down into subcategories if necessary. For example if your service is aimed at a disabled people in particular, you may want to collect more detailed information about their disability.  But make sure any categories you use map back to a ‘parent’ category in the harmonised standard.
+
+### Collecting other types of equality information
+
+See the [full list of Government Statistical Service harmonised standards](https://gss.civilservice.gov.uk/guidances/harmonised-standards-guidance/) if you want to collect other types of equality information. For example, about income or employment status.
+
+## Asking about date of birth (age)
+
+Use this approach to ask for the user’s date of birth.
+
+{{ example({group: "patterns", item: "equality-information", example: "date-of-birth", html: true, nunjucks: true, open: false}) }}
+
+## Asking about disability
+
+Use this approach to ask about disability.
+
+{{ example({group: "patterns", item: "equality-information", example: "disability", html: true, nunjucks: true, open: false}) }}
+
+If the user answers ‘yes’, ask about the impact of their condition or illness.
+
+{{ example({group: "patterns", item: "equality-information", example: "disability-impact", html: true, nunjucks: true, open: false}) }}
+
+## Asking about ethnic group
+
+The ethnic groups used here are for England. The Government Statistical Service harmonised standard for ethnicity uses [different categories for Wales, Scotland and Northern Ireland](https://gss.civilservice.gov.uk/policy-store/ethnicity/). This is to reflect differences in local populations.
+
+If your service covers more than one of England, Wales, Scotland or Northern Ireland, you should accommodate these differences in your design. For example, by changing the ethnic groups shown depending on where the user is based. Where this isn’t possible, use the English categories.
+
+First ask about the user’s broad ethnic group.
+
+{{ example({group: "patterns", item: "equality-information", example: "ethnic-group", html: true, nunjucks: true, open: false}) }}
+
+Then ask for a more detailed category, depending on which broad ethnic group the user selects. Always give the user the option to enter their own description of their background.
+
+{{ example({group: "patterns", item: "equality-information", example: "white", html: true, nunjucks: true, open: false}) }}
+{{ example({group: "patterns", item: "equality-information", example: "multiple", html: true, nunjucks: true, open: false}) }}
+{{ example({group: "patterns", item: "equality-information", example: "asian", html: true, nunjucks: true, open: false}) }}
+{{ example({group: "patterns", item: "equality-information", example: "black", html: true, nunjucks: true, open: false}) }}
+{{ example({group: "patterns", item: "equality-information", example: "other", html: true, nunjucks: true, open: false}) }}
+
+## Asking about marriage or civil partnership status
+
+Use this approach to ask about marriage or civil partnership status.
+
+{{ example({group: "patterns", item: "equality-information", example: "marriage-status", html: true, nunjucks: true, open: false}) }}
+
+## Asking about religion
+
+The categories used here are for England. The Government Statistical Service harmonised standard for religion uses [different categories for Wales, Scotland and Northern Ireland](https://gss.civilservice.gov.uk/policy-store/religion/). This is to reflect differences in local populations.
+
+If your service covers more than one of England, Wales, Scotland or Northern Ireland, you should accommodate these differences in your design. For example, by changing the categories shown depending on where the user is based. Where this isn’t possible, use the English categories.
+
+{{ example({group: "patterns", item: "equality-information", example: "religion", html: true, nunjucks: true, open: false}) }}
+
+## Asking about sex and gender identity
+
+Use this approach to ask about sex and gender identity.
+
+{{ example({group: "patterns", item: "equality-information", example: "sex-gender", html: true, nunjucks: true, open: false}) }}
+
+## Asking about sexual orientation
+
+Use this approach to ask about sexual orientation.
+
+{{ example({group: "patterns", item: "equality-information", example: "sexual-orientation", html: true, nunjucks: true, open: false}) }}
+
+## Validation and error messages
+
+If a user enters information that’s valid but incomplete, accept it. For example, they might just enter their year of birth without the day or month.
+
+Error messages should be styled like this -
+
+{{ example({group: "patterns", item: "equality-information", example: "error-ethnicity", html: true, nunjucks: true, open: false}) }}
+
+{{ example({group: "patterns", item: "equality-information", example: "error-date-of-birth", html: true, nunjucks: true, open: false}) }}
+
+## Research on this pattern
+
+The two-step approach to asking for ethnicity information is based on:
+
+- user research by the [Race Disparity Unit](https://www.gov.uk/government/organisations/race-disparity-unit)
+- [examples of ways to ask about ethnic groups](https://designnotes.blog.gov.uk/2019/01/29/researching-how-we-ask-users-about-their-ethnicity/) from a number of different government services
+
+### Questions we’d like to answer through research
+
+For one-off services, we’ve suggested placing the equality and diversity questions between the ‘check your answers’ and confirmation pages.
+
+This is based on where the ‘Do you want to create an account?’ question is placed in the ‘Get support if you’re clinically extremely vulnerable to coronavirus’ service - but we’d like to confirm whether this placement works for the equality questions too.
+
+We’d also appreciate any the following questions:
+
+- do users understand from the first ‘Equality questions’ screen that the questions they’re about to answer are different from other questions in the service?
+- do we need to explain why we’re asking each question individually, or is it enough to have an explanation at the start?
+- what’s the best way to ask for equality information in different types of service where you expect to have more than one contact with the user?
+- is including the `If you prefer not to say, continue without entering any information` text the clearest way to get across that all the text inputs on that screen are optional?
diff --git a/src/patterns/equality-information/marriage-status/index.njk b/src/patterns/equality-information/marriage-status/index.njk
new file mode 100644
index 0000000000..24b7ded617
--- /dev/null
+++ b/src/patterns/equality-information/marriage-status/index.njk
@@ -0,0 +1,68 @@
+---
+title: Marriage or civil partnership status equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
+  idPrefix: "marriage-civil-partnership",
+  name: "marriage-civil-partnership",
+  fieldset: {
+    legend: {
+      text: "What is your legal marital or registered civil partnership status?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "never",
+      text: "Never married and never registered in a civil partnership"
+    },
+    {
+      value: "married",
+      text: "Married"
+    },
+    {
+      value: "civil-partnership",
+      text: "In a registered civil partnership"
+    },
+    {
+      value: "separated-married",
+      text: "Separated, but still legally married"
+    },
+    {
+      value: "separated-civil-partnership",
+      text: "Separated, but still legally in a civil partnership"
+    },
+    {
+      value: "divorced",
+      text: "Divorced"
+    },
+    {
+      value: "dissolved-civil-partnership",
+      text: "Formerly in a civil partnership which is now legally dissolved"
+    },
+    {
+      value: "widowed",
+      text: "Widowed"
+    },
+    {
+      value: "widowed-civil-partnership",
+      text: "Surviving partner from a registered civil partnership"
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/multiple/index.njk b/src/patterns/equality-information/multiple/index.njk
new file mode 100644
index 0000000000..fef59097f3
--- /dev/null
+++ b/src/patterns/equality-information/multiple/index.njk
@@ -0,0 +1,65 @@
+---
+title: Multiple ethnicity equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% set ethnicityHtml %}
+  {{ govukInput({
+    id: "other-description",
+    name: "other-description",
+    type: "text",
+    spellcheck: false,
+    classes: "govuk-!-width-one-half",
+    label: {
+      text: "How would you describe your background? (optional)"
+    }
+  }) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "ethnicity-detail",
+  name: "ethnicity-detail",
+  fieldset: {
+    legend: {
+      text: "Which of the following best describes your Mixed or Multiple ethnic groups background?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "white-black-caribbean",
+      text: "White and Black Caribbean"
+    },
+    {
+      value: "white-black-african",
+      text: "White and Black African"
+    },
+    {
+      value: "white-asian",
+      text: "White and Asian"
+    },
+    {
+      value: "other",
+      text: "Any other Mixed or Multiple ethnic background",
+      conditional: {
+        html: ethnicityHtml
+      }
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/other/index.njk b/src/patterns/equality-information/other/index.njk
new file mode 100644
index 0000000000..27936b7840
--- /dev/null
+++ b/src/patterns/equality-information/other/index.njk
@@ -0,0 +1,57 @@
+---
+title: Other ethnicity equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% set ethnicityHtml %}
+  {{ govukInput({
+    id: "other-description",
+    name: "other-description",
+    type: "text",
+    spellcheck: false,
+    classes: "govuk-!-width-one-half",
+    label: {
+      text: "How would you describe your background? (optional)"
+    }
+  }) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "ethnicity-detail",
+  name: "ethnicity-detail",
+  fieldset: {
+    legend: {
+      text: "Which of the following best describes your background?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "arab",
+      text: "Arab"
+    },
+    {
+      value: "other",
+      text: "Any other ethnic group",
+      conditional: {
+        html: ethnicityHtml
+      }
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/religion/index.njk b/src/patterns/equality-information/religion/index.njk
new file mode 100644
index 0000000000..b6664cafdc
--- /dev/null
+++ b/src/patterns/equality-information/religion/index.njk
@@ -0,0 +1,81 @@
+---
+title: Religion equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% set religionHtml %}
+  {{ govukInput({
+    id: "other-description",
+    name: "other-description",
+    type: "text",
+    spellcheck: false,
+    classes: "govuk-!-width-one-half",
+    label: {
+      text: "What is your religion? (optional)"
+    }
+  }) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "religion",
+  name: "religion",
+  fieldset: {
+    legend: {
+      text: "What is your religion?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "none",
+      text: "No religion"
+    },
+    {
+      value: "christian",
+      text: "Christian (including Church of England, Catholic, Protestant and all other Christian denominations)"
+    },
+    {
+      value: "buddhist",
+      text: "Buddhist"
+    },
+    {
+      value: "hindu",
+      text: "Hindu"
+    },
+    {
+      value: "jewish",
+      text: "Jewish"
+    },
+    {
+      value: "muslim",
+      text: "Muslim"
+    },
+    {
+      value: "sikh",
+      text: "Sikh"
+    },
+    {
+      value: "other",
+      text: "Any other religion",
+      conditional: {
+        html: religionHtml
+      }
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/sex-gender/index.njk b/src/patterns/equality-information/sex-gender/index.njk
new file mode 100644
index 0000000000..b5b4458d7a
--- /dev/null
+++ b/src/patterns/equality-information/sex-gender/index.njk
@@ -0,0 +1,80 @@
+---
+title: Sex and gender equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+
+{% set genderHtml %}
+  {{ govukInput({
+    id: "gender-description",
+    name: "gender-description",
+    type: "text",
+    spellcheck: false,
+    classes: "govuk-!-width-one-half",
+    label: {
+      text: "What is your gender identity? (optional)"
+    }
+  }) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "sex",
+  name: "sex",
+  fieldset: {
+    legend: {
+      text: "What is your sex?",
+      classes: "govuk-fieldset__legend--m"
+    }
+  },
+  items: [
+    {
+      value: "female",
+      text: "Female"
+    },
+    {
+      value: "male",
+      text: "Male"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukRadios({
+  idPrefix: "gender-identity",
+  name: "gender-identity",
+  fieldset: {
+    legend: {
+      text: "Is the gender you identify with the same as your sex registered at birth?",
+      classes: "govuk-fieldset__legend--m"
+    }
+  },
+  items: [
+    {
+      value: "yes",
+      text: "Yes"
+    },
+    {
+      value: "no",
+      text: "No",
+      conditional: {
+        html: genderHtml
+      }
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/sexual-orientation/index.njk b/src/patterns/equality-information/sexual-orientation/index.njk
new file mode 100644
index 0000000000..250653cd42
--- /dev/null
+++ b/src/patterns/equality-information/sexual-orientation/index.njk
@@ -0,0 +1,93 @@
+---
+title: Sexual orientation equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% set sexualOrientationHtml %}
+  {{ govukInput({
+    id: "other-description",
+    name: "other-description",
+    type: "text",
+    spellcheck: false,
+    classes: "govuk-!-width-one-half",
+    label: {
+      text: "How would you describe your sexual orientation? (optional)"
+    }
+  }) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "sexual-orientation",
+  name: "sexual-orientation",
+  fieldset: {
+    legend: {
+      text: "Which of the following options best describes how you think of yourself?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "heterosexual",
+      text: "Heterosexual or straight"
+    },
+    {
+      value: "gay-lesbian",
+      text: "Gay or lesbian"
+    },
+    {
+      value: "bisexual",
+      text: "Bisexual"
+    },
+    {
+      value: "other",
+      text: "Other",
+      conditional: {
+        html: sexualOrientationHtml
+      }
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukRadios({
+  idPrefix: "gender-identity",
+  name: "gender-identity",
+  fieldset: {
+    legend: {
+      text: "Is the gender you identify with the same as your sex registered at birth?",
+      classes: "govuk-fieldset__legend--m"
+    }
+  },
+  items: [
+    {
+      value: "yes",
+      text: "Yes"
+    },
+    {
+      value: "no",
+      text: "No",
+      conditional: {
+        html: genderHtml
+      }
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}
diff --git a/src/patterns/equality-information/white/index.njk b/src/patterns/equality-information/white/index.njk
new file mode 100644
index 0000000000..8cdda9e79e
--- /dev/null
+++ b/src/patterns/equality-information/white/index.njk
@@ -0,0 +1,65 @@
+---
+title: White ethnicity equality question
+layout: layout-example.njk
+---
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% set ethnicityHtml %}
+  {{ govukInput({
+    id: "other-description",
+    name: "other-description",
+    type: "text",
+    spellcheck: false,
+    classes: "govuk-!-width-one-half",
+    label: {
+      text: "How would you describe your background? (optional)"
+    }
+  }) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "ethnicity-detail",
+  name: "ethnicity-detail",
+  fieldset: {
+    legend: {
+      text: "Which of the following best describes your White background?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  items: [
+    {
+      value: "british",
+      text: "English, Welsh, Scottish, Northern Irish or British"
+    },
+    {
+      value: "irish",
+      text: "Irish"
+    },
+    {
+      value: "gypsy-traveller",
+      text: "Gypsy or Irish Traveller"
+    },
+    {
+      value: "other",
+      text: "Any other White background",
+      conditional: {
+        html: ethnicityHtml
+      }
+    },
+    {
+      divider: "or"
+    },
+    {
+      value: "skip",
+      text: "Prefer not to say"
+    }
+  ]
+}) }}
+
+{{ govukButton({
+  text: "Continue"
+}) }}