NHS Digital Service Manual

https://service-manual.nhs.uk/
Admin
A comprehensive guide for designing and building consistent, accessible, and usable digital services...
Tokens:292,940
Snippets:545
Trust Score:9.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Nunjucks Service Header Example

Source: https://service-manual.nhs.uk/design-system/components/header

Example of how to use the Nunjucks `header` macro to render a service header with navigation and search enabled.

```Nunjucks
{% from 'header/macro.njk' import header %}

{{ header({
  service: {
    name: "Digital service manual"
  },
  showNav: "true",
  showSearch: "true",
  searchAction: " ",
  primaryLinks: [
      {
        url  : "#",
        label : "NHS service standard"
      },
      {
        url : '#',
        label : 'Design system'
      },
      {
        url  : '#',
        label : 'Content guide'
      },
      {
        url  : '#',
        label : 'Accessibility'
      },
      {
        url : '#',
        label : 'Community and contribution'
      }
    ]
  })
}}
```

--------------------------------

### NHS Complete Multiple Tasks Pattern Example

Source: https://service-manual.nhs.uk/design-system/patterns/complete-multiple-tasks

Demonstrates the 'Complete multiple tasks' pattern used in the NHS Service Manual, showing task statuses like 'Completed', 'In progress', and 'Not yet started'. Includes implementations in HTML and Nunjucks.

```html
<ul class="nhsuk-task-list">
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-1-status">Contact details</a></div>
    <div class="nhsuk-task-list__status nhsuk-task-list__status--completed" id="your-health-1-status">Completed</div>
  </li>
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-2-hint your-health-2-status">Family health history</a>
      <div id="your-health-2-hint" class="nhsuk-task-list__hint">Details of your parents, brothers and sisters</div>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-2-status"><strong class="nhsuk-tag nhsuk-tag--white">
        In progress
      </strong></div>
  </li>
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-3-status">Smoking history</a></div>
    <div class="nhsuk-task-list__status" id="your-health-3-status"><strong class="nhsuk-tag nhsuk-tag--blue">
        Not yet started
      </strong></div>
  </li>
</ul>
```

```nunjucks
{% from "task-list/macro.njk" import taskList %}

{{ taskList({
  idPrefix: "your-health",
  items: [
    {
      title: {
        text: "Contact details"
      },
      href: "#",
      status: {
        text: "Completed",
        classes: "nhsuk-task-list__status--completed"
      }
    },
    {
      title: {
        text: "Family health history"
      },
      hint: {
        text: "Details of your parents, brothers and sisters"
      },
      href: "#",
      status: {
        tag: {
          text: "In progress",
          classes: "nhsuk-tag--white"
        }
      }
    },
    {
      title: {
        text: "Smoking history"
      },
      href: "#",
      status: {
        tag: {
          text: "Not yet started",
          classes: "nhsuk-tag--blue"
        }
      }
    }
  ]
}) }}
```

--------------------------------

### Multiple Questions Page Example

Source: https://service-manual.nhs.uk/design-system/patterns/question-pages

Demonstrates how to structure a page for asking multiple related questions using the NHS Design System. Includes examples for both HTML structure and Nunjucks templating.

```HTML
<div class="nhsuk-width-container">

  <div class="nhsuk-back-link"> <a class="nhsuk-back-link__link" href="#">
      <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="24" width="24">
        <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
      </svg>
      Back</a>
  </div>

  <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <h1 class="nhsuk-heading-l">
          Your details
        </h1>
        <p>You've told us you are the carer. We need your details.</p>

        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-label--s" for="example">
            First name
          </label> <input class="nhsuk-input" id="example" name="example" type="text">
        </div>

        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-label--s" for="example1">
            Last name
          </label> <input class="nhsuk-input" id="example1" name="example1" type="text">
        </div>

        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-label--s" for="example2">
            Relationship to the person being registered
          </label>
          <div class="nhsuk-hint" id="example2-hint">
            For example, a family member or friend
          </div> <input class="nhsuk-input" id="example2" name="example2" type="text" aria-describedby="example2-hint">
        </div>

        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-label--s" for="example3">
            Contact phone number
          </label> <input class="nhsuk-input nhsuk-input--width-20" id="example3" name="example3" type="tel" autocomplete="tel">
        </div>

        <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
          Continue
        </button>

      </div>
    </div>
  </main>
</div>
```

```Nunjucks
{% from 'back-link/macro.njk' import backLink %}
{% from 'button/macro.njk' import button %}
{% from 'input/macro.njk' import input %}

{% set mainClasses = "nhsuk-main-wrapper--s" %}

{% block beforeContent %}
  {{ backLink({
    href: "#",
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      <h1 class="nhsuk-heading-l">
        Your details
      </h1>
      <p>You've told us you are the carer. We need your details.</p>

      {{ input({
        label: {
          text: "First name",
          classes: "nhsuk-label--s"
        },
        id: "example",
        name: "example"
      }) }}

      {{ input({
        label: {
          text: "Last name",
          classes: "nhsuk-label--s"
        },
        id: "example1",
        name: "example1"
      }) }}

      {{ input({
        label: {
          text: "Relationship to the person being registered",
          classes: "nhsuk-label--s"
        },
        hint: {
          text: "For example, a family member or friend"
        },
        id: "example2",
        name: "example2"
      }) }}

      {{ input({
        label: {
          text: "Contact phone number",
          classes: "nhsuk-label--s"
        },
        id: "example3",
        name: "example3",
        type: "tel",
        autocomplete: "tel",
        classes: "nhsuk-input--width-20"
      }) }}

      {{ button({
        text: "Continue"
      }) }}

    </div>
  </div>
{% endblock %}
```

--------------------------------

### Default Summary List Example

Source: https://service-manual.nhs.uk/design-system/components/summary-list

Demonstrates how to use the `summaryList` macro in Nunjucks to render a list of key-value pairs with associated actions. This example includes multiple items with text and HTML values.

```Nunjucks
{% from "summary-list/macro.njk" import summaryList %}

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}
```

--------------------------------

### Nunjucks Organisational Header Example

Source: https://service-manual.nhs.uk/design-system/components/header

Demonstrates how to use the Nunjucks `header` macro to render an organisational header. This example includes navigation links, search functionality, and organisation details like name, split, and descriptor.

```njk
{% from 'header/macro.njk' import header %}

{{ header({
    showNav: "true",
    showSearch: "true",
    searchAction: " ",
    organisation: {
      name: "Anytown Anyplace",
      split: "Anywhere",
      descriptor: "NHS Foundation Trust"
    },
    primaryLinks: [
      {
        url  : "#",
        label : "Your hospital visit"
      },
      {
        url : '#',
        label : 'Wards and departments'
      },
      {
        url  : '#',
        label : 'Conditions and treatments'
      },
      {
        url  : '#',
        label : 'Our people'
      },
      {
        url : '#',
        label : 'Our research'
      }
    ]
  })
}}
```

--------------------------------

### NHS Tag Component Examples

Source: https://service-manual.nhs.uk/design-system/components/tag

Demonstrates the usage of the NHS tag component with various text labels and color classes. The examples show how to render tags for different statuses like 'New', 'Finished', and 'Waiting on'.

```nunjucks
<table>
  <tbody>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Annette Armstrong
      </td>
      <td class="nhsuk-table__cell">
        {{ tag({
          text: "New",
          classes: "nhsuk-tag--blue"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Vishal Gurudutt
      </td>
      <td class="nhsuk-table__cell">
        {{ tag({
          text: "New",
          classes: "nhsuk-tag--blue"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rachel Preece
      </td>
      <td class="nhsuk-table__cell">
        {{ tag({
          text: "Finished",
          classes: "nhsuk-tag--green"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Tom Hunter
      </td>
      <td class="nhsuk-table__cell">
        {{ tag({
          text: "Waiting on",
          classes: "nhsuk-tag--yellow"
        })}}
      </td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Nunjucks Header Macro Example

Source: https://service-manual.nhs.uk/design-system/components/header

Demonstrates how to use the `header` Nunjucks macro to render a white NHS header with navigation, search, and organizational details. This example showcases common configuration options for customization.

```Nunjucks
{% from 'header/macro.njk' import header %}

{{ header({
    showNav: "true",
    showSearch: "true",
    searchAction: " ",
    classes: "nhsuk-header--white",
    organisation: {
      name: "Anytown Anyplace",
      split: "Anywhere",
      descriptor: "NHS Foundation Trust"
    },
    primaryLinks: [
      {
        url  : "#",
        label : "Your hospital visit"
      },
      {
        url : '#',
        label : 'Wards and departments'
      },
      {
        url  : '#',
        label : 'Conditions and treatments'
      },
      {
        url  : '#',
        label : 'Our people'
      },
      {
        url : '#',
        label : 'Our research'
      }
    ]
  })
}}
```

--------------------------------

### HTML Card Component Example

Source: https://service-manual.nhs.uk/design-system/components/card

Demonstrates the basic structure of an NHS card component using HTML, including a heading and description. This serves as a foundational example for card implementation.

```html
<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading"> Heading level 3
    </h3>
    <p class="nhsuk-card__description">Card description text goes here</p>
  </div>
</div>
```

--------------------------------

### HTML Tablet Grid Layout Example

Source: https://service-manual.nhs.uk/design-system/styles/layout

Demonstrates the usage of NHS tablet-specific grid utility classes. The example shows how to apply classes like `nhsuk-grid-column-one-third` and `nhsuk-u-one-third-tablet` to create a one-third column layout for tablet screen sizes and above.

```html
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-one-third nhsuk-u-one-third-tablet">
    <p>nhsuk-grid-column-one-third nhsuk-u-one-third-tablet</p>
  </div>
</div>
```

--------------------------------

### Start Page Nunjucks Macros

Source: https://service-manual.nhs.uk/design-system/patterns/start-page

Demonstrates the use of Nunjucks macros for generating an NHS start page. It utilizes macros for breadcrumbs and buttons, allowing for dynamic content generation and adherence to the NHS design system.

```nunjucks
{% from 'breadcrumb/macro.njk' import breadcrumb %}
{% from 'button/macro.njk' import button %}

{% set mainClasses = "nhsuk-main-wrapper--s" %}

{% block beforeContent %}
  {{ breadcrumb({
    items: [
      {
        href: "#",
        text: "Home"
      },
      {
        href: "#",
        text: "Section"
      }
    ],
    href: "#",
    text: "Subsection"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      <h1>Service name goes here</h1>
      <p>Use this service to do something.</p>
      <p>You can use this service if you:</p>
      <ul>
        <li>live in England</li>
        <li>need to get a thing</li>
        <li>need to change a thing</li>
      </ul>

      <h2>Before you start</h2>

      <p>We'll ask you for: ...</p>

      <a class="nhsuk-button" href="#" role="button" draggable="false">Start now</a>

      <p>By using this service you are agreeing to our <a href="#">terms of use</a> and <a href="#">privacy policy</a>.</p>

    </div>
  </div>
{% endblock %}
```

--------------------------------

### Start Page HTML Structure

Source: https://service-manual.nhs.uk/design-system/patterns/start-page

Provides the HTML markup for an NHS start page. This includes navigation, main content area, headings, paragraphs, lists, and a call-to-action button. It follows NHS design principles.

```html
<div class="nhsuk-width-container">

  <nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
    <ol class="nhsuk-breadcrumb__list">
      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Home</a></li>
      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Section</a></li>
      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Subsection</a></li>
    </ol>
    <p class="nhsuk-breadcrumb__back">
      <a class="nhsuk-breadcrumb__backlink" href="#">
        <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
        Subsection
      </a>
    </p>
  </nav>

  <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <h1>Service name goes here</h1>
        <p>Use this service to do something.</p>
        <p>You can use this service if you:</p>
        <ul>
          <li>live in England</li>
          <li>need to get a thing</li>
          <li>need to change a thing</li>
        </ul>

        <h2>Before you start</h2>

        <p>We'll ask you for: ...</p>

        <a class="nhsuk-button" href="#" role="button" draggable="false">Start now</a>

        <p>By using this service you are agreeing to our <a href="#">terms of use</a> and <a href="#">privacy policy</a>.</p>

      </div>
    </div>
  </main>
</div>
```

--------------------------------

### NHS.UK Tag Component Examples

Source: https://service-manual.nhs.uk/design-system/components/tag

Demonstrates the NHS.UK tag component with various text labels and associated CSS classes for different status indicators. These examples show how to implement tags for 'In progress', 'Inactive', 'New', 'Active', 'Pending', 'Received', 'Sent', 'Rejected', 'Declined', and 'Delayed' states.

```Nunjucks
{{ tag({
  text: "In progress",
  classes: "nhsuk-tag--white"
})}}
```

```Nunjucks
{{ tag({
  text: "Inactive",
  classes: "nhsuk-tag--grey"
})}}
```

```Nunjucks
{{ tag({
  text: "New",
  classes: "nhsuk-tag--green"
})}}
```

```Nunjucks
{{ tag({
  text: "Active",
  classes: "nhsuk-tag--aqua-green"
})}}
```

```Nunjucks
{{ tag({
  text: "Pending",
  classes: "nhsuk-tag--blue"
})}}
```

```Nunjucks
{{ tag({
  text: "Received",
  classes: "nhsuk-tag--purple"
})}}
```

```Nunjucks
{{ tag({
  text: "Sent",
  classes: "nhsuk-tag--pink"
})}}
```

```Nunjucks
{{ tag({
  text: "Rejected",
  classes: "nhsuk-tag--red"
})}}
```

```Nunjucks
{{ tag({
  text: "Declined",
  classes: "nhsuk-tag--orange"
})}}
```

```Nunjucks
{{ tag({
  text: "Delayed",
  classes: "nhsuk-tag--yellow"
})}}
```

--------------------------------

### NHS Checkboxes with 'None' Option Example

Source: https://service-manual.nhs.uk/design-system/components/checkboxes

Demonstrates how to implement a set of checkboxes with an 'exclusive' 'None' option using the Nunjucks macro. This setup ensures that if the 'None' option is selected, all other options are deselected, and vice-versa. It includes a form structure and specifies the necessary parameters for the checkboxes macro.

```Nunjucks
{% from 'checkboxes/macro.njk' import checkboxes %}

<form method="post" novalidate>
  {{ checkboxes({
    idPrefix: "symptoms",
    name: "symptoms",
    fieldset: {
      legend: {
        text: "Do you have any of these symptoms?",
        isPageHeading: true,
        classes: "nhsuk-fieldset__legend--l"
      }
    },
    hint: {
      text: "Select all the symptoms you have"
    },
    items: [
      {
        value: "sorethroat",
        text: "Sore throat",
        exclusiveGroup: "symptoms-list"
      },
      {
        value: "runnynose",
        text: "Runny nose",
        exclusiveGroup: "symptoms-list"
      },
      {
        value: "muscleorjointpain",
        text: "Muscle or joint pain",
        exclusiveGroup: "symptoms-list"
      },
      {
        divider: "or"
      },
      {
        value: "none",
        text: "No, I do not have any of these symptoms",
        exclusive: true,
        exclusiveGroup: "symptoms-list"
      }
    ]
  }) }}
</form>
```

--------------------------------

### Complete Multiple Tasks Example

Source: https://service-manual.nhs.uk/design-system/patterns/complete-multiple-tasks

This snippet demonstrates the 'Complete Multiple Tasks' pattern, a common UI pattern used in service manuals to guide users through a series of related steps or tasks. It includes links to tasks and their current status (e.g., 'Completed', 'Incomplete'). The pattern is designed with accessibility in mind, referencing WCAG 2.2 guidelines.

```html
<div class="nhsuk-width-container">
  <main class="nhsuk-main-wrapper" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <h1 class="nhsuk-heading-l">Service name</h1>

        <h2 class="nhsuk-heading-m">Your details</h2>

        <ul class="nhsuk-task-list">
          <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
            <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-details-1-status">Name</a></div>
            <div class="nhsuk-task-list__status nhsuk-task-list__status--completed" id="your-details-1-status">Completed</div>
          </li>
          <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
            <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-details-2-status">Contact details</a></div>
            <div class="nhsuk-task-list__status" id="your-details-2-status"><strong class="nhsuk-tag nhsuk-tag--blue">
        Incomplete
      </strong></div>
          </li>
        </ul>

        <h2 class="nhsuk-heading-m">Your health</h2>

        <ul class="nhsuk-task-list">
          <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
            <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-1-status">Physical activity</a></div>
            <div class="nhsuk-task-list__status nhsuk-task-list__status--completed" id="your-health-1-status">Completed</div>
          </li>
          <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
            <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-2-status">Smoking history</a></div>
            <div class="nhsuk-task-list__status" id="your-health-2-status"><strong class="nhsuk-tag nhsuk-tag--blue">
        Incomplete
      </strong></div>
          </li>
          <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
            <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-3-status">Vaccination history</a></div>
            <div class="nhsuk-task-list__status nhsuk-task-list__status--completed" id="your-health-3-status">Completed</div>
          </li>
          <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
            <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-4-status">Alcohol use</a></div>
            <div class="nhsuk-task-list__status" id="your-health-4-status"><strong class="nhsuk-tag nhsuk-tag--blue">
        Incomplete
      </strong></div>
          </li>
          <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
            <div class="nhsuk-task-list__name-and-hint"><a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-5-status">Body measurements</a></div>
            <div class="nhsuk-task-list__status" id="your-health-5-status"><strong class="nhsuk-tag nhsuk-tag--blue">
        Incomplete
      </strong></div>
          </li>
        </ul>

        <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
          Send
        </button>

      </div>
    </div>
  </main>
</div>
```

```nunjucks
{% from 'button/macro.njk' import button %}
{% from 'task-list/macro.njk' import taskList %}


{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      <h1 class="nhsuk-heading-l">Service name</h1>

      <h2 class="nhsuk-heading-m">Your details</h2>

      {{ taskList({
        'rows': [
          {
            'name': {
              'text': 'Name',
              'href': '#'
            },
            'status': {
              'text': 'Completed'
            }
          },
          {
            'name': {
              'text': 'Contact details',
              'href': '#'
            },
            'status': {
              'text': 'Incomplete',
              'classes': 'nhsuk-tag--blue'
            }
          }
        ]
      }) }}

      <h2 class="nhsuk-heading-m">Your health</h2>

      {{ taskList({
        'rows': [
          {
            'name': {
              'text': 'Physical activity',
              'href': '#'
            },
            'status': {
              'text': 'Completed'
            }
          },
          {
            'name': {
              'text': 'Smoking history',
              'href': '#'
            },
            'status': {
              'text': 'Incomplete',
              'classes': 'nhsuk-tag--blue'
            }
          },
          {
            'name': {
              'text': 'Vaccination history',
              'href': '#'
            },
            'status': {
              'text': 'Completed'
            }
          },
          {
            'name': {
              'text': 'Alcohol use',
              'href': '#'
            },
            'status': {
              'text': 'Incomplete',
              'classes': 'nhsuk-tag--blue'
            }
          },
          {
            'name': {
              'text': 'Body measurements',
              'href': '#'
            },
            'status': {
              'text': 'Incomplete',
              'classes': 'nhsuk-tag--blue'
            }
          }
        ]
      }) }}

      {{ button({
        'text': 'Send'
      }) }}

    </div>
  </div>
{% endblock %}
```

--------------------------------

### Nunjucks Error Summary Example

Source: https://service-manual.nhs.uk/design-system/components/error-summary

Example demonstrating how to use the Nunjucks errorSummary macro with custom text and an error list, alongside a checkboxes macro.

```nunjucks
{% from 'error-summary/macro.njk' import errorSummary %}
{% from 'checkboxes/macro.njk' import checkboxes %}

{{ errorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Select how you like to be contacted",
      href: "#contact"
    }
  ]
}) }}

{{ checkboxes({
  idPrefix: "contact",
  name: "contact",
  fieldset: {
    legend: {
      text: "How would you like to be contacted?",
      classes: "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  errorMessage: {
    text: "Select how you like to be contacted"
  },
  items: [
    {
      value: "email",
      text: "Email",
      id: "contact"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}
```

--------------------------------

### Default Header Example

Source: https://service-manual.nhs.uk/design-system/components/header

A Nunjucks code snippet demonstrating the usage of the header macro with common options like navigation, search, and primary links.

```Nunjucks
{% from 'header/macro.njk' import header %}

{{ header({
    showNav: "true",
    showSearch: "true",
    searchAction: " ",
    primaryLinks: [
      {
        url  : "https://www.nhs.uk/conditions",
        "label" : "Health A-Z"
      },
      {
        url : 'https://www.nhs.uk/live-well/',
        label : 'Live Well'
      },
      {
        url : 'https://www.nhs.uk/mental-health/',
        label : 'Mental health'
      },
      {
        url  : 'https://www.nhs.uk/conditions/social-care-and-support/',
        label : 'Care and support'
      },
      {
        url  : 'https://www.nhs.uk/pregnancy/',
        label : 'Pregnancy'
      },
      {
        url : 'https://www.nhs.uk/nhs-services/',
        label : 'NHS services'
      }
    ]
  })
}}
```

--------------------------------

### Nunjucks Reverse Button Example

Source: https://service-manual.nhs.uk/design-system/components/buttons

Example of how to render a reverse button using the Nunjucks button macro, specifying the text and a custom class for styling.

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

{{ button({
  text: "Save and continue",
  classes: "nhsuk-button--reverse"
}) }}
```

--------------------------------

### Form Question Phrasing Examples

Source: https://service-manual.nhs.uk/content/how-to-write-good-questions-for-forms/think-of-the-form-as-a-conversation

Illustrates how to rephrase questions for better user experience, making them less formal and more supportive. These examples focus on clarity and empathy in user interaction.

```English
Instead of: "You must confirm this"
Use: "Before you continue, you need to confirm this"

Instead of: "Full name"
Use: "Name" or "Contact name"

Instead of: "Name" (on a page titled 'Next of kin')
Use: "Name of next of kin"

Instead of: "your" phone number or "their" phone number (for callback)
Use: "What number do you want us to call you on?"
```

--------------------------------

### Example HTML Structure for Tabs

Source: https://service-manual.nhs.uk/design-system/components/tabs

Illustrates the HTML output structure generated by Nunjucks for tab components, showing the arrangement of tab links and their associated content panels.

```HTML
<div class="nhsuk-tabs" data-module="nhsuk-tabs">
  <ul class="nhsuk-tabs__list">
    <li class="nhsuk-tabs__list-item nhsuk-tabs__list-item--selected">
      <a class="nhsuk-tabs__tab" href="#past-day">Past day</a>
    </li>
    <li class="nhsuk-tabs__list-item">
      <a class="nhsuk-tabs__tab" href="#past-year">Past year</a>
    </li>
  </ul>
  <div class="nhsuk-tabs__panel" id="past-day">
    <table class="nhsuk-table">
      <caption class="nhsuk-table__caption">Past day</caption>
      <thead class="nhsuk-table__head">
        <tr>
          <th scope="col" class="nhsuk-table__header">Case manager</th>
          <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric">Cases opened</th>
          <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric">Cases closed</th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">David Francis</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">3</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">0</td>
        </tr>
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">Paul Farmer</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">1</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">0</td>
        </tr>
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">Rita Patel</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">2</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">0</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="nhsuk-tabs__panel nhsuk-tabs__panel--hidden" id="past-year">
    <table class="nhsuk-table">
      <caption class="nhsuk-table__caption">Past year</caption>
      <thead class="nhsuk-table__head">
        <tr>
          <th scope="col" class="nhsuk-table__header">Case manager</th>
          <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric">Cases opened</th>
          <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric">Cases closed</th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">David Francis</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">1380</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">1472</td>
        </tr>
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">Paul Farmer</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">1129</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">1083</td>
        </tr>
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">Rita Patel</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">1539</td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">1265</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```

--------------------------------

### Default Summary List HTML Example

Source: https://service-manual.nhs.uk/design-system/components/summary-list

Provides the HTML structure for a default summary list component, commonly used to display key-value pairs with optional actions.

```html
<dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> name</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> date of birth</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>
      Leeds<br>
      LS2 5ZN
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> contact information</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@example.com</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> contact details</span>
      </a>
    </dd>
  </div>
</dl>
```

--------------------------------

### Nunjucks Example Mini-hub

Source: https://service-manual.nhs.uk/design-system/patterns/mini-hub

This snippet demonstrates how to render the mini-hub pattern using Nunjucks macros. It shows the integration of breadcrumb, contents list, and pagination components, passing data to these macros for dynamic content generation.

```Nunjucks
{% from 'breadcrumb/macro.njk' import breadcrumb %}
{% from 'contents-list/macro.njk' import contentsList %}
{% from 'pagination/macro.njk' import pagination %}

{% block beforeContent %}
  {{ breadcrumb({
    items: [
      {
        href: "#",
        text: "Home"
      }
    ],
    href: "#",
    text: "Health A to Z"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      <h1>

```
Tokens:
Raw