{
  "name": "Header",
  "component": "header",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "logo": {
          "href": "#"
        },
        "service": {
          "text": "Digital service manual",
          "href": "#"
        },
        "search": {
          "placeholder": "Search",
          "visuallyHiddenLabel": "Search the NHS digital service manual"
        },
        "navigation": {
          "items": [
            {
              "text": "NHS service standard",
              "href": "#"
            },
            {
              "text": "Design system",
              "href": "#"
            },
            {
              "text": "Content guide",
              "href": "#"
            },
            {
              "text": "Accessibility",
              "href": "#"
            },
            {
              "text": "Community and contribution",
              "href": "#"
            }
          ]
        }
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop",
          "large-desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Digital service manual homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Digital service manual</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS digital service manual\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS service standard</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Design system</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Content guide</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Accessibility</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Community and contribution</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "linked logo",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        }
      },
      "screenshot": {
        "states": [
          "hover",
          "focus"
        ],
        "selector": ".nhsuk-header__service-logo",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "linked logo",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "colour": "white"
      },
      "screenshot": {
        "states": [
          "hover",
          "focus"
        ],
        "selector": ".nhsuk-header__service-logo",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "unlinked logo",
      "description": "blue",
      "context": {},
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "unlinked logo",
      "description": "white",
      "context": {
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "white linked logo, ARIA label",
      "context": {
        "colour": "white",
        "logo": {
          "ariaLabel": "NHS white homepage",
          "href": "#"
        }
      },
      "screenshot": false,
      "options": {
        "hidden": true,
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS white homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "white linked logo, custom",
      "context": {
        "colour": "white",
        "logo": {
          "href": "#",
          "src": "/nhsuk-frontend/assets/example-logo.svg",
          "alt": "Great Ormond Street Hospital for Children, NHS Foundation Trust"
        }
      },
      "screenshot": {
        "states": [
          "focus"
        ],
        "selector": ".nhsuk-header__service-logo",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"Great Ormond Street Hospital for Children, NHS Foundation Trust homepage\">\n        <img class=\"nhsuk-header__organisation-logo\" src=\"/nhsuk-frontend/assets/example-logo.svg\" width=\"280\" alt=\"Great Ormond Street Hospital for Children, NHS Foundation Trust\">\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with account inline (logged in)",
      "description": "blue",
      "context": {
        "inline": true,
        "logo": {
          "href": "#"
        },
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Account",
              "icon": true
            },
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n              <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n            </svg>\n            Account\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with account inline (logged in)",
      "description": "white",
      "context": {
        "inline": true,
        "logo": {
          "href": "#"
        },
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Account",
              "icon": true
            },
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n              <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n            </svg>\n            Account\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with account inline (logged out)",
      "description": "blue",
      "context": {
        "inline": true,
        "logo": {
          "href": "#"
        },
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Log in"
            }
          ]
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            Log in\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with account inline (logged out)",
      "description": "white",
      "context": {
        "inline": true,
        "logo": {
          "href": "#"
        },
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Log in"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            Log in\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with account (logged in)",
      "description": "blue",
      "context": {
        "account": {
          "items": [
            {
              "href": "#",
              "text": "florence.nightingale@nhs.net",
              "icon": true
            },
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        }
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n              <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n            </svg>\n            florence.nightingale@nhs.net\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with account (logged in)",
      "description": "white",
      "context": {
        "account": {
          "items": [
            {
              "href": "#",
              "text": "florence.nightingale@nhs.net",
              "icon": true
            },
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n              <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n            </svg>\n            florence.nightingale@nhs.net\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with account (logged out)",
      "description": "blue",
      "context": {
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Log in"
            }
          ]
        }
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            Log in\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with account (logged out)",
      "description": "white",
      "context": {
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Log in"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            Log in\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with navigation",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "href": "#",
              "text": "Pregnancy",
              "active": true
            },
            {
              "href": "#",
              "text": "NHS services"
            }
          ]
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\" aria-current=\"true\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "href": "#",
              "text": "Pregnancy",
              "active": true
            },
            {
              "href": "#",
              "text": "NHS services"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\" aria-current=\"true\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (empty items)",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Account",
              "icon": true
            },
            false,
            false,
            false,
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "navigation": {
          "items": [
            {
              "text": "Home",
              "href": "/"
            },
            false,
            false,
            false,
            {
              "text": "Reports",
              "href": "/"
            }
          ]
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n              <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n            </svg>\n            Account\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"/\">Home</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"/\">Reports</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (empty items)",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Account",
              "icon": true
            },
            false,
            false,
            false,
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "navigation": {
          "items": [
            {
              "text": "Home",
              "href": "/"
            },
            false,
            false,
            false,
            {
              "text": "Reports",
              "href": "/"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n              <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n            </svg>\n            Account\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"/\">Home</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"/\">Reports</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (justified)",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "navigation": {
          "justified": true,
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "href": "#",
              "text": "Pregnancy",
              "active": true
            },
            {
              "href": "#",
              "text": "NHS services"
            }
          ]
        }
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n  <nav class=\"nhsuk-header__navigation nhsuk-header__navigation--justified\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\" aria-current=\"true\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (justified)",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "navigation": {
          "justified": true,
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "href": "#",
              "text": "Pregnancy",
              "active": true
            },
            {
              "href": "#",
              "text": "NHS services"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n  <nav class=\"nhsuk-header__navigation nhsuk-header__navigation--justified\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\" aria-current=\"true\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (overflow)",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "service": {
          "text": "Digital service manual",
          "href": "#"
        },
        "search": {
          "placeholder": "Search",
          "visuallyHiddenLabel": "Search the NHS digital service manual"
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "href": "#",
              "text": "Pregnancy",
              "active": true
            },
            {
              "href": "#",
              "text": "NHS services"
            },
            {
              "href": "#",
              "text": "Another item #1"
            },
            {
              "href": "#",
              "text": "Another item #2"
            }
          ]
        }
      },
      "screenshot": {
        "name": "menu",
        "states": [
          "click"
        ],
        "selector": "#toggle-menu",
        "viewports": [
          "mobile",
          "tablet",
          "desktop",
          "large-desktop",
          "xlarge-desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Digital service manual homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Digital service manual</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS digital service manual\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\" aria-current=\"true\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Another item #1</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Another item #2</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (overflow)",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "service": {
          "text": "Digital service manual",
          "href": "#"
        },
        "search": {
          "placeholder": "Search",
          "visuallyHiddenLabel": "Search the NHS digital service manual"
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "href": "#",
              "text": "Pregnancy",
              "active": true
            },
            {
              "href": "#",
              "text": "NHS services"
            },
            {
              "href": "#",
              "text": "Another item #1"
            },
            {
              "href": "#",
              "text": "Another item #2"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": {
        "name": "menu",
        "states": [
          "click"
        ],
        "selector": "#toggle-menu",
        "viewports": [
          "mobile",
          "tablet",
          "desktop",
          "large-desktop",
          "xlarge-desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Digital service manual homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Digital service manual</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS digital service manual\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\" aria-current=\"true\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Another item #1</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Another item #2</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (overflow, white)",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "service": {
          "text": "Digital service manual",
          "href": "#"
        },
        "search": {
          "placeholder": "Search",
          "visuallyHiddenLabel": "Search the NHS digital service manual"
        },
        "navigation": {
          "colour": "white",
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "href": "#",
              "text": "Pregnancy",
              "active": true
            },
            {
              "href": "#",
              "text": "NHS services"
            },
            {
              "href": "#",
              "text": "Another item #1"
            },
            {
              "href": "#",
              "text": "Another item #2"
            }
          ]
        }
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Digital service manual homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Digital service manual</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS digital service manual\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n  <nav class=\"nhsuk-header__navigation nhsuk-header__navigation--white\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\" aria-current=\"true\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Another item #1</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Another item #2</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (overflow, white)",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "service": {
          "text": "Digital service manual",
          "href": "#"
        },
        "search": {
          "placeholder": "Search",
          "visuallyHiddenLabel": "Search the NHS digital service manual"
        },
        "navigation": {
          "colour": "white",
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "href": "#",
              "text": "Pregnancy",
              "active": true
            },
            {
              "href": "#",
              "text": "NHS services"
            },
            {
              "href": "#",
              "text": "Another item #1"
            },
            {
              "href": "#",
              "text": "Another item #2"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Digital service manual homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Digital service manual</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS digital service manual\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n  <nav class=\"nhsuk-header__navigation nhsuk-header__navigation--white\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\" aria-current=\"true\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Another item #1</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Another item #2</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (unlinked item)",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "text": "Pregnancy",
              "current": true
            },
            {
              "href": "#",
              "text": "NHS services"
            }
          ]
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <span class=\"nhsuk-header__navigation-text\" aria-current=\"page\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></span>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with navigation (unlinked item)",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Health A to Z"
            },
            {
              "href": "#",
              "text": "Live Well"
            },
            {
              "href": "#",
              "text": "Mental health"
            },
            {
              "href": "#",
              "text": "Care and support"
            },
            {
              "text": "Pregnancy",
              "current": true
            },
            {
              "href": "#",
              "text": "NHS services"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n    </div>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Health A to Z</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Live Well</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Mental health</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Care and support</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item nhsuk-header__navigation-item--current\">\n          <span class=\"nhsuk-header__navigation-text\" aria-current=\"page\"><strong class=\"nhsuk-header__navigation-item-current-fallback\">Pregnancy</strong></span>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">NHS services</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with organisation name",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "organisation": {
          "name": "Business Services Authority"
        }
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--organisation\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Business Services Authority homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__organisation-name\">Business Services Authority</span>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with organisation name",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "organisation": {
          "name": "Business Services Authority"
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--organisation\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Business Services Authority homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__organisation-name\">Business Services Authority</span>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with organisation name (and descriptor)",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "organisation": {
          "name": "Anytown Anyplace Anywhere",
          "descriptor": "NHS Foundation Trust"
        }
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--organisation\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Anytown Anyplace Anywhere homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__organisation-name\">Anytown Anyplace Anywhere</span><span class=\"nhsuk-header__organisation-name-descriptor\">NHS Foundation Trust</span>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with organisation name (and descriptor)",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "organisation": {
          "name": "Anytown Anyplace Anywhere",
          "descriptor": "NHS Foundation Trust"
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--organisation\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Anytown Anyplace Anywhere homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__organisation-name\">Anytown Anyplace Anywhere</span><span class=\"nhsuk-header__organisation-name-descriptor\">NHS Foundation Trust</span>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with organisation name (split with descriptor)",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "organisation": {
          "name": "Anytown Anyplace",
          "split": "Anywhere",
          "descriptor": "NHS Foundation Trust"
        }
      },
      "screenshot": {
        "states": [
          "hover",
          "focus"
        ],
        "selector": ".nhsuk-header__service-logo",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--organisation\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Anytown Anyplace Anywhere homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__organisation-name\">Anytown Anyplace <span class=\"nhsuk-header__organisation-name-split\">Anywhere</span></span><span class=\"nhsuk-header__organisation-name-descriptor\">NHS Foundation Trust</span>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with organisation name (split with descriptor)",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "organisation": {
          "name": "Anytown Anyplace",
          "split": "Anywhere",
          "descriptor": "NHS Foundation Trust"
        },
        "colour": "white"
      },
      "screenshot": {
        "states": [
          "hover",
          "focus"
        ],
        "selector": ".nhsuk-header__service-logo",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--organisation\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Anytown Anyplace Anywhere homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__organisation-name\">Anytown Anyplace <span class=\"nhsuk-header__organisation-name-split\">Anywhere</span></span><span class=\"nhsuk-header__organisation-name-descriptor\">NHS Foundation Trust</span>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with organisation name (split with descriptor), search",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "organisation": {
          "name": "Anytown Anyplace",
          "split": "Anywhere",
          "descriptor": "NHS Foundation Trust"
        },
        "search": {
          "visuallyHiddenLabel": "Search the Anytown Anyplace Anywhere website"
        }
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--organisation\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Anytown Anyplace Anywhere homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__organisation-name\">Anytown Anyplace <span class=\"nhsuk-header__organisation-name-split\">Anywhere</span></span><span class=\"nhsuk-header__organisation-name-descriptor\">NHS Foundation Trust</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the Anytown Anyplace Anywhere website\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n</header>"
    },
    {
      "name": "with organisation name (split with descriptor), search",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "organisation": {
          "name": "Anytown Anyplace",
          "split": "Anywhere",
          "descriptor": "NHS Foundation Trust"
        },
        "search": {
          "visuallyHiddenLabel": "Search the Anytown Anyplace Anywhere website"
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--organisation\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Anytown Anyplace Anywhere homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__organisation-name\">Anytown Anyplace <span class=\"nhsuk-header__organisation-name-split\">Anywhere</span></span><span class=\"nhsuk-header__organisation-name-descriptor\">NHS Foundation Trust</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the Anytown Anyplace Anywhere website\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n</header>"
    },
    {
      "name": "with search",
      "description": "blue",
      "context": {
        "search": true
      },
      "screenshot": {
        "states": [
          "focus"
        ],
        "selector": ".nhsuk-header__search-form .nhsuk-input",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS website\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n</header>"
    },
    {
      "name": "with search",
      "description": "white",
      "context": {
        "search": true,
        "colour": "white"
      },
      "screenshot": {
        "states": [
          "focus"
        ],
        "selector": ".nhsuk-header__search-form .nhsuk-input",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS website\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n</header>"
    },
    {
      "name": "with search inline",
      "description": "blue",
      "context": {
        "inline": true,
        "search": true
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS website\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n</header>"
    },
    {
      "name": "with search inline",
      "description": "white",
      "context": {
        "inline": true,
        "search": true,
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n        <title>NHS</title>\n        <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n      </svg>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS website\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n</header>"
    },
    {
      "name": "with service name",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#"
        },
        "service": {
          "text": "Find your NHS number"
        }
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n      <span class=\"nhsuk-header__service-name\">Find your NHS number</span>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with service name",
      "description": "white",
      "context": {
        "logo": {
          "href": "#"
        },
        "service": {
          "text": "Find your NHS number"
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n      <span class=\"nhsuk-header__service-name\">Find your NHS number</span>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with service name, account inline (logged in)",
      "description": "blue",
      "context": {
        "inline": true,
        "service": {
          "text": "Get a self-test kit for HIV",
          "href": "#"
        },
        "account": {
          "items": [
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Get a self-test kit for HIV homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Get a self-test kit for HIV</span>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with service name, account inline (logged in)",
      "description": "white",
      "context": {
        "inline": true,
        "service": {
          "text": "Get a self-test kit for HIV",
          "href": "#"
        },
        "account": {
          "items": [
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Get a self-test kit for HIV homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Get a self-test kit for HIV</span>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with service name, account inline (logged out)",
      "description": "blue",
      "context": {
        "inline": true,
        "service": {
          "text": "Get a self-test kit for HIV",
          "href": "#"
        },
        "account": {
          "items": [
            {
              "action": "#",
              "text": "Log in"
            }
          ]
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Get a self-test kit for HIV homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Get a self-test kit for HIV</span>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log in\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with service name, account inline (logged out)",
      "description": "white",
      "context": {
        "inline": true,
        "service": {
          "text": "Get a self-test kit for HIV",
          "href": "#"
        },
        "account": {
          "items": [
            {
              "action": "#",
              "text": "Log in"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white nhsuk-header--inline\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Get a self-test kit for HIV homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Get a self-test kit for HIV</span>\n      </a>\n    </div>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log in\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>"
    },
    {
      "name": "with service name as separate link",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#/logo"
        },
        "service": {
          "text": "Find your NHS number",
          "href": "#/service"
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#/logo\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n      <a class=\"nhsuk-header__service-name\" href=\"#/service\">Find your NHS number</a>\n      \n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with service name as separate link",
      "description": "white",
      "context": {
        "logo": {
          "href": "#/logo"
        },
        "service": {
          "text": "Find your NHS number",
          "href": "#/service"
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#/logo\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n      <a class=\"nhsuk-header__service-name\" href=\"#/service\">Find your NHS number</a>\n      \n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with service name (linked)",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#nhs"
        },
        "service": {
          "text": "Find your NHS number",
          "href": "#"
        }
      },
      "screenshot": [
        {
          "name": "name",
          "states": [
            "hover",
            "focus"
          ],
          "selector": ".nhsuk-header__service-name",
          "viewports": [
            "desktop"
          ]
        },
        {
          "name": "logo",
          "states": [
            "hover",
            "focus"
          ],
          "selector": ".nhsuk-header__service-logo",
          "viewports": [
            "desktop"
          ]
        }
      ],
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#nhs\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n      <a class=\"nhsuk-header__service-name\" href=\"#\">Find your NHS number</a>\n      \n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with service name (linked)",
      "description": "white",
      "context": {
        "logo": {
          "href": "#nhs"
        },
        "service": {
          "text": "Find your NHS number",
          "href": "#"
        },
        "colour": "white"
      },
      "screenshot": [
        {
          "name": "name",
          "states": [
            "hover",
            "focus"
          ],
          "selector": ".nhsuk-header__service-name",
          "viewports": [
            "desktop"
          ]
        },
        {
          "name": "logo",
          "states": [
            "hover",
            "focus"
          ],
          "selector": ".nhsuk-header__service-logo",
          "viewports": [
            "desktop"
          ]
        }
      ],
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#nhs\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n      <a class=\"nhsuk-header__service-name\" href=\"#\">Find your NHS number</a>\n      \n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with service name (linked and long), search",
      "description": "blue",
      "context": {
        "logo": {
          "href": "#nhs"
        },
        "service": {
          "text": "This a really long service name to fully test wrapping",
          "href": "#"
        },
        "search": true
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#nhs\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n      <a class=\"nhsuk-header__service-name\" href=\"#\">This a really long service name to fully test wrapping</a>\n      \n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS website\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n</header>"
    },
    {
      "name": "with service name (linked and long), search",
      "description": "white",
      "context": {
        "logo": {
          "href": "#nhs"
        },
        "service": {
          "text": "This a really long service name to fully test wrapping",
          "href": "#"
        },
        "search": true,
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#nhs\" aria-label=\"NHS homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n      </a>\n      <a class=\"nhsuk-header__service-name\" href=\"#\">This a really long service name to fully test wrapping</a>\n      \n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search the NHS website\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Search\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n  </div>\n</header>"
    },
    {
      "name": "with service name (linked with logo)",
      "description": "blue",
      "context": {
        "service": {
          "text": "Prototype kit",
          "href": "#"
        }
      },
      "screenshot": {
        "states": [
          "hover",
          "focus"
        ],
        "selector": ".nhsuk-header__service-logo",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Prototype kit homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Prototype kit</span>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with service name (linked with logo)",
      "description": "white",
      "context": {
        "service": {
          "text": "Prototype kit",
          "href": "#"
        },
        "colour": "white"
      },
      "screenshot": {
        "states": [
          "hover",
          "focus"
        ],
        "selector": ".nhsuk-header__service-logo",
        "viewports": [
          "desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Prototype kit homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Prototype kit</span>\n      </a>\n    </div>\n  </div>\n</header>"
    },
    {
      "name": "with service name, search, account (logged in, complex), navigation",
      "description": "blue",
      "context": {
        "service": {
          "href": "#",
          "text": "Manage patients"
        },
        "search": {
          "placeholder": "Name or NHS number",
          "visuallyHiddenLabel": "Search patients by name or NHS number"
        },
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Florence Nightingale",
              "icon": true
            },
            {
              "text": "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust"
            },
            {
              "href": "#",
              "text": "Change role"
            },
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Home"
            },
            {
              "href": "#",
              "text": "Create user"
            },
            {
              "href": "#",
              "text": "Find user"
            }
          ]
        }
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop",
          "large-desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Manage patients homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Manage patients</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search patients by name or NHS number\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Name or NHS number\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n              <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n            </svg>\n            Florence Nightingale\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          Regional Manager, Hull and East Yorkshire Hospitals NHS Trust\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            Change role\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Home</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Create user</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Find user</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with service name, search, account (logged in, complex), navigation",
      "description": "white",
      "context": {
        "service": {
          "href": "#",
          "text": "Manage patients"
        },
        "search": {
          "placeholder": "Name or NHS number",
          "visuallyHiddenLabel": "Search patients by name or NHS number"
        },
        "account": {
          "items": [
            {
              "href": "#",
              "text": "Florence Nightingale",
              "icon": true
            },
            {
              "text": "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust"
            },
            {
              "href": "#",
              "text": "Change role"
            },
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Home"
            },
            {
              "href": "#",
              "text": "Create user"
            },
            {
              "href": "#",
              "text": "Find user"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop",
          "large-desktop"
        ]
      },
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Manage patients homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Manage patients</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search patients by name or NHS number\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Name or NHS number\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n              <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n            </svg>\n            Florence Nightingale\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          Regional Manager, Hull and East Yorkshire Hospitals NHS Trust\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <a class=\"nhsuk-header__account-link\" href=\"#\">\n            Change role\n          </a>\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Home</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Create user</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Find user</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with service name, search, account, navigation",
      "description": "blue",
      "context": {
        "service": {
          "text": "Search patient directory",
          "href": "#"
        },
        "search": {
          "placeholder": "Name or NHS number",
          "visuallyHiddenLabel": "Search patients by name or NHS number"
        },
        "account": {
          "items": [
            {
              "text": "Florence Nightingale",
              "icon": true
            },
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Home"
            },
            {
              "href": "#",
              "text": "Patient list"
            },
            {
              "href": "#",
              "text": "Advanced search"
            },
            {
              "href": "#",
              "text": "Help guides"
            }
          ]
        }
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Search patient directory homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Search patient directory</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search patients by name or NHS number\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Name or NHS number\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n            <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n          </svg>\n          Florence Nightingale\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Home</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Patient list</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Advanced search</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Help guides</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    },
    {
      "name": "with service name, search, account, navigation",
      "description": "white",
      "context": {
        "service": {
          "text": "Search patient directory",
          "href": "#"
        },
        "search": {
          "placeholder": "Name or NHS number",
          "visuallyHiddenLabel": "Search patients by name or NHS number"
        },
        "account": {
          "items": [
            {
              "text": "Florence Nightingale",
              "icon": true
            },
            {
              "action": "#",
              "text": "Log out"
            }
          ]
        },
        "navigation": {
          "items": [
            {
              "href": "#",
              "text": "Home"
            },
            {
              "href": "#",
              "text": "Patient list"
            },
            {
              "href": "#",
              "text": "Advanced search"
            },
            {
              "href": "#",
              "text": "Help guides"
            }
          ]
        },
        "colour": "white"
      },
      "screenshot": false,
      "options": {
        "width": false
      },
      "html": "<header class=\"nhsuk-header nhsuk-header--white\" data-module=\"nhsuk-header\" role=\"banner\">\n  <div class=\"nhsuk-header__container nhsuk-width-container\">\n    <div class=\"nhsuk-header__service\">\n      <a class=\"nhsuk-header__service-logo\" href=\"#\" aria-label=\"NHS Search patient directory homepage\">\n        <svg class=\"nhsuk-header__logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" height=\"40\" width=\"100\" focusable=\"false\" role=\"img\" aria-label=\"NHS\">\n          <title>NHS</title>\n          <path fill=\"currentcolor\" d=\"M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z\"/>\n        </svg>\n        <span class=\"nhsuk-header__service-name\">Search patient directory</span>\n      </a>\n    </div>\n    <search class=\"nhsuk-header__search\">\n      <form class=\"nhsuk-header__search-form\" id=\"search\" action=\"https://www.nhs.uk/search/\" method=\"get\" novalidate>\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"search-field\">\n            Search patients by name or NHS number\n          </label>\n          <div class=\"nhsuk-input-wrapper\">\n            <input class=\"nhsuk-input\" id=\"search-field\" name=\"q\" type=\"search\" autocomplete=\"off\" placeholder=\"Name or NHS number\">\n            <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n              <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n                <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </form>\n    </search>\n    <nav class=\"nhsuk-header__account\" aria-label=\"Account\">\n      <ul class=\"nhsuk-header__account-list\">\n        <li class=\"nhsuk-header__account-item\">\n          <svg class=\"nhsuk-icon nhsuk-icon--user\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n            <path d=\"M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z\"/>\n          </svg>\n          Florence Nightingale\n        </li>\n        <li class=\"nhsuk-header__account-item\">\n          <form class=\"nhsuk-header__account-form\" action=\"#\" method=\"post\" novalidate>\n            <button class=\"nhsuk-header__account-button\">\n              Log out\n            </button>\n          </form>\n        </li>\n      </ul>\n    </nav>\n  </div>\n  <nav class=\"nhsuk-header__navigation\" aria-label=\"Menu\">\n    <div class=\"nhsuk-header__navigation-container nhsuk-width-container\">\n      <ul class=\"nhsuk-header__navigation-list\">\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Home</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Patient list</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Advanced search</a>\n        </li>\n        <li class=\"nhsuk-header__navigation-item\">\n          <a class=\"nhsuk-header__navigation-link\" href=\"#\">Help guides</a>\n        </li>\n        <li class=\"nhsuk-header__menu\" hidden>\n          <button class=\"nhsuk-header__menu-toggle nhsuk-header__navigation-link\" id=\"toggle-menu\" aria-expanded=\"false\">\n            <span class=\"nhsuk-u-visually-hidden\">Browse </span>More\n          </button>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</header>"
    }
  ]
}