{
  "name": "Summary list",
  "component": "summary-list",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "name"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "date of birth"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Contact information"
            },
            "value": {
              "html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "contact information"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Contact details"
            },
            "value": {
              "html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "contact details"
                }
              ]
            }
          }
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> name</span></a>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> date of birth</span></a>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact information\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      73 Roman Rd<br>\n      Leeds<br>\n      LS2 5ZN\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> contact information</span></a>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact details\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <p>07700 900362</p>\n      <p>karen.francis@example.com</p>\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> contact details</span></a>\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "example person: Karen Francis",
      "context": {
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "example person: Karen Francis (no border)",
      "context": {
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "border": false,
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "example person: Sarah Philips (no border)",
      "context": {
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Sarah Philips"
            }
          },
          {
            "border": false,
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "5 January 1978"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Sarah Philips\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      5 January 1978\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "with multiple actions",
      "context": {
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "date of birth"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Contact information"
            },
            "value": {
              "html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "contact information"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Contact details"
            },
            "value": {
              "html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/add",
                  "text": "Add",
                  "visuallyHiddenText": "new contact details"
                },
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "contact details"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Medicines"
            },
            "value": {
              "html": "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/add",
                  "text": "Add",
                  "visuallyHiddenText": "new medicine"
                },
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "medicines"
                }
              ]
            }
          }
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-actions\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> date of birth</span></a>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact information\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      73 Roman Rd<br>\n      Leeds<br>\n      LS2 5ZN\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> contact information</span></a>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact details\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <p>07700 900362</p>\n      <p>karen.francis@example.com</p>\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <ul class=\"nhsuk-summary-list__actions-list\">\n        <li class=\"nhsuk-summary-list__actions-list-item\">\n          <a class=\"nhsuk-link\" href=\"#/add\">Add<span class=\"nhsuk-u-visually-hidden\"> new contact details</span></a>\n        </li>\n        <li class=\"nhsuk-summary-list__actions-list-item\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> contact details</span></a>\n        </li>\n      </ul>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Medicines\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <p>Isotretinoin capsules (Roaccutane)</p>\n      <p>Isotretinoin gel (Isotrex)</p>\n      <p>Pepto-Bismol (bismuth subsalicylate)</p>\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <ul class=\"nhsuk-summary-list__actions-list\">\n        <li class=\"nhsuk-summary-list__actions-list-item\">\n          <a class=\"nhsuk-link\" href=\"#/add\">Add<span class=\"nhsuk-u-visually-hidden\"> new medicine</span></a>\n        </li>\n        <li class=\"nhsuk-summary-list__actions-list-item\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> medicines</span></a>\n        </li>\n      </ul>\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "with multiple actions (empty items)",
      "context": {
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            },
            "actions": {
              "items": [
                false,
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "date of birth"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Contact information"
            },
            "value": {
              "html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
            },
            "actions": {
              "items": [
                false,
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "contact information"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Contact details"
            },
            "value": {
              "html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/add",
                  "text": "Add",
                  "visuallyHiddenText": "new contact details"
                },
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "contact details"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Medicines"
            },
            "value": {
              "html": "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/add",
                  "text": "Add",
                  "visuallyHiddenText": "new medicine"
                },
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "medicines"
                }
              ]
            }
          }
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-actions\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> date of birth</span></a>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact information\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      73 Roman Rd<br>\n      Leeds<br>\n      LS2 5ZN\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> contact information</span></a>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact details\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <p>07700 900362</p>\n      <p>karen.francis@example.com</p>\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <ul class=\"nhsuk-summary-list__actions-list\">\n        <li class=\"nhsuk-summary-list__actions-list-item\">\n          <a class=\"nhsuk-link\" href=\"#/add\">Add<span class=\"nhsuk-u-visually-hidden\"> new contact details</span></a>\n        </li>\n        <li class=\"nhsuk-summary-list__actions-list-item\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> contact details</span></a>\n        </li>\n      </ul>\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Medicines\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <p>Isotretinoin capsules (Roaccutane)</p>\n      <p>Isotretinoin gel (Isotrex)</p>\n      <p>Pepto-Bismol (bismuth subsalicylate)</p>\n    </dd>\n    <dd class=\"nhsuk-summary-list__actions\">\n      <ul class=\"nhsuk-summary-list__actions-list\">\n        <li class=\"nhsuk-summary-list__actions-list-item\">\n          <a class=\"nhsuk-link\" href=\"#/add\">Add<span class=\"nhsuk-u-visually-hidden\"> new medicine</span></a>\n        </li>\n        <li class=\"nhsuk-summary-list__actions-list-item\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> medicines</span></a>\n        </li>\n      </ul>\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "without actions",
      "context": {
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          },
          {
            "key": {
              "text": "Contact information"
            },
            "value": {
              "html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
            }
          },
          {
            "key": {
              "text": "Contact details"
            },
            "value": {
              "html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
            }
          }
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact information\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      73 Roman Rd<br>\n      Leeds<br>\n      LS2 5ZN\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact details\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <p>07700 900362</p>\n      <p>karen.francis@example.com</p>\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "without border",
      "context": {
        "border": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          },
          {
            "key": {
              "text": "Contact information"
            },
            "value": {
              "html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
            }
          },
          {
            "key": {
              "text": "Contact details"
            },
            "value": {
              "html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
            }
          }
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<dl class=\"nhsuk-summary-list nhsuk-summary-list--no-border\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact information\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      73 Roman Rd<br>\n      Leeds<br>\n      LS2 5ZN\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact details\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <p>07700 900362</p>\n      <p>karen.francis@example.com</p>\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "without row border",
      "context": {
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          },
          {
            "key": {
              "text": "Contact information"
            },
            "value": {
              "html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
            }
          },
          {
            "key": {
              "text": "Contact details"
            },
            "value": {
              "html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
            }
          }
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact information\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      73 Roman Rd<br>\n      Leeds<br>\n      LS2 5ZN\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Contact details\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <p>07700 900362</p>\n      <p>karen.francis@example.com</p>\n    </dd>\n  </div>\n</dl>"
    },
    {
      "name": "as a card",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "headingSize": "m"
        },
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Regional Manager\n    </h2>\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card (clickable) without actions",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "headingSize": "m",
          "href": "#/card-clickable",
          "clickable": true
        },
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--clickable\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      <a class=\"nhsuk-card__link\" href=\"#/card-clickable\">Regional Manager</a>\n    </h2>\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card (feature) with actions",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "headingSize": "m",
          "variant": "feature",
          "actions": {
            "items": [
              {
                "text": "Delete",
                "href": "#/delete"
              },
              {
                "text": "Withdraw",
                "href": "#/withdraw"
              }
            ]
          }
        },
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Regional Manager\n    </h2>\n    <ul class=\"nhsuk-card__actions\">\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/delete\">Delete<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/withdraw\">Withdraw<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card (feature) with custom HTML",
      "context": {
        "card": {
          "heading": "Your read",
          "headingSize": "m",
          "variant": "feature"
        },
        "rows": [
          {
            "key": {
              "text": "Opinion"
            },
            "value": {
              "html": "<p class=\"nhsuk-u-margin-bottom-3\">\n  <strong class=\"nhsuk-tag nhsuk-tag--red\">\n  Recall for assessment\n</strong>\n\n</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "opinion"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Detailed opinion"
            },
            "value": {
              "html": "<div class=\"nhsuk-grid-row\">\n  <div class=\"nhsuk-grid-column-one-half\">\n    <p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n      Right breast\n    </p>\n    <p class=\"nhsuk-u-margin-bottom-3\">\n      <strong class=\"nhsuk-tag nhsuk-tag--red\">\n  Abnormal\n</strong>\n\n    </p>\n  </div>\n\n  <div class=\"nhsuk-grid-column-one-half\">\n    <p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n      Left breast\n    </p>\n    <p class=\"nhsuk-u-margin-bottom-3 nhsuk-u-secondary-text-colour\">\n      Not recorded\n    </p>\n  </div>\n</div>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "detailed opinion"
                }
              ]
            }
          },
          {
            "classes": "nhsuk-summary-list__row--no-border",
            "key": {
              "text": "Annotations"
            },
            "value": {
              "html": "<p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n  Right breast\n</p>\n<p class=\"nhsuk-u-margin-bottom-0\">\n  Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)\n</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "annotations"
                }
              ]
            }
          }
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "width": "full"
      },
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Your read\n    </h2>\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Opinion\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          <p class=\"nhsuk-u-margin-bottom-3\">\n            <strong class=\"nhsuk-tag nhsuk-tag--red\">\n            Recall for assessment\n          </strong>\n          \n          </p>\n        </dd>\n        <dd class=\"nhsuk-summary-list__actions\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> opinion (Your read)</span></a>\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Detailed opinion\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          <div class=\"nhsuk-grid-row\">\n            <div class=\"nhsuk-grid-column-one-half\">\n              <p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n                Right breast\n              </p>\n              <p class=\"nhsuk-u-margin-bottom-3\">\n                <strong class=\"nhsuk-tag nhsuk-tag--red\">\n            Abnormal\n          </strong>\n          \n              </p>\n            </div>\n          \n            <div class=\"nhsuk-grid-column-one-half\">\n              <p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n                Left breast\n              </p>\n              <p class=\"nhsuk-u-margin-bottom-3 nhsuk-u-secondary-text-colour\">\n                Not recorded\n              </p>\n            </div>\n          </div>\n        </dd>\n        <dd class=\"nhsuk-summary-list__actions\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> detailed opinion (Your read)</span></a>\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Annotations\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          <p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n            Right breast\n          </p>\n          <p class=\"nhsuk-u-margin-bottom-0\">\n            Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)\n          </p>\n        </dd>\n        <dd class=\"nhsuk-summary-list__actions\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> annotations (Your read)</span></a>\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card (secondary) with actions",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "headingSize": "m",
          "variant": "secondary",
          "actions": {
            "items": [
              {
                "text": "Delete",
                "href": "#/delete"
              },
              {
                "text": "Withdraw",
                "href": "#/withdraw"
              }
            ]
          }
        },
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--secondary\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Regional Manager\n    </h2>\n    <ul class=\"nhsuk-card__actions\">\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/delete\">Delete<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/withdraw\">Withdraw<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card (type emergency) with actions",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "variant": "emergency",
          "actions": {
            "items": [
              {
                "text": "Delete",
                "href": "#/delete"
              },
              {
                "text": "Withdraw",
                "href": "#/withdraw"
              }
            ]
          }
        },
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--care nhsuk-card--care--emergency\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading\">\n      <span role=\"text\">\n        <span class=\"nhsuk-u-visually-hidden\">Immediate action required:</span> Regional Manager\n      </span>\n    </h2>\n    <span class=\"nhsuk-card--care__arrow\" aria-hidden=\"true\"></span>\n    <ul class=\"nhsuk-card__actions\">\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/delete\">Delete<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/withdraw\">Withdraw<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card (type non-urgent) with actions",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "variant": "non-urgent",
          "actions": {
            "items": [
              {
                "text": "Delete",
                "href": "#/delete"
              },
              {
                "text": "Withdraw",
                "href": "#/withdraw"
              }
            ]
          }
        },
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--care nhsuk-card--care--non-urgent\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading\">\n      <span role=\"text\">\n        <span class=\"nhsuk-u-visually-hidden\">Non-urgent advice:</span> Regional Manager\n      </span>\n    </h2>\n    <span class=\"nhsuk-card--care__arrow\" aria-hidden=\"true\"></span>\n    <ul class=\"nhsuk-card__actions\">\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/delete\">Delete<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/withdraw\">Withdraw<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card (type urgent) with actions",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "variant": "urgent",
          "actions": {
            "items": [
              {
                "text": "Delete",
                "href": "#/delete"
              },
              {
                "text": "Withdraw",
                "href": "#/withdraw"
              }
            ]
          }
        },
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--care nhsuk-card--care--urgent\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading\">\n      <span role=\"text\">\n        <span class=\"nhsuk-u-visually-hidden\">Urgent advice:</span> Regional Manager\n      </span>\n    </h2>\n    <span class=\"nhsuk-card--care__arrow\" aria-hidden=\"true\"></span>\n    <ul class=\"nhsuk-card__actions\">\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/delete\">Delete<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/withdraw\">Withdraw<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card with actions",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "headingSize": "m",
          "actions": {
            "items": [
              {
                "text": "Delete",
                "href": "#/delete"
              },
              {
                "text": "Withdraw",
                "href": "#/withdraw"
              }
            ]
          }
        },
        "lastRowBorder": false,
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Regional Manager\n    </h2>\n    <ul class=\"nhsuk-card__actions\">\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/delete\">Delete<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/withdraw\">Withdraw<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    },
    {
      "name": "as a card with multiple actions",
      "context": {
        "card": {
          "heading": "Regional Manager",
          "headingSize": "l",
          "actions": {
            "items": [
              {
                "text": "Delete",
                "href": "#/delete"
              },
              {
                "text": "Withdraw",
                "href": "#/withdraw"
              }
            ]
          }
        },
        "rows": [
          {
            "key": {
              "text": "Name"
            },
            "value": {
              "text": "Karen Francis"
            }
          },
          {
            "key": {
              "text": "Date of birth"
            },
            "value": {
              "text": "15 March 1984"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "date of birth"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Contact information"
            },
            "value": {
              "html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
            },
            "actions": {
              "items": [
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "contact information"
                }
              ]
            }
          },
          {
            "key": {
              "text": "Contact details"
            },
            "value": {
              "html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/add",
                  "text": "Add",
                  "visuallyHiddenText": "new contact details"
                },
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "contact details"
                }
              ]
            }
          },
          {
            "border": false,
            "key": {
              "text": "Medicines"
            },
            "value": {
              "html": "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
            },
            "actions": {
              "items": [
                {
                  "href": "#/add",
                  "text": "Add",
                  "visuallyHiddenText": "new medicine"
                },
                {
                  "href": "#/change",
                  "text": "Change",
                  "visuallyHiddenText": "medicines"
                }
              ]
            }
          }
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-l\">\n      Regional Manager\n    </h2>\n    <ul class=\"nhsuk-card__actions\">\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/delete\">Delete<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n      <li class=\"nhsuk-card__action\">\n        <a class=\"nhsuk-link\" href=\"#/withdraw\">Withdraw<span class=\"nhsuk-u-visually-hidden\"> (Regional Manager)</span></a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <dl class=\"nhsuk-summary-list\">\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-actions\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Name\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          Karen Francis\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Date of birth\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          15 March 1984\n        </dd>\n        <dd class=\"nhsuk-summary-list__actions\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> date of birth (Regional Manager)</span></a>\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Contact information\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          73 Roman Rd<br>\n          Leeds<br>\n          LS2 5ZN\n        </dd>\n        <dd class=\"nhsuk-summary-list__actions\">\n          <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> contact information (Regional Manager)</span></a>\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Contact details\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          <p>07700 900362</p>\n          <p>karen.francis@example.com</p>\n        </dd>\n        <dd class=\"nhsuk-summary-list__actions\">\n          <ul class=\"nhsuk-summary-list__actions-list\">\n            <li class=\"nhsuk-summary-list__actions-list-item\">\n              <a class=\"nhsuk-link\" href=\"#/add\">Add<span class=\"nhsuk-u-visually-hidden\"> new contact details (Regional Manager)</span></a>\n            </li>\n            <li class=\"nhsuk-summary-list__actions-list-item\">\n              <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> contact details (Regional Manager)</span></a>\n            </li>\n          </ul>\n        </dd>\n      </div>\n      <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n        <dt class=\"nhsuk-summary-list__key\">\n          Medicines\n        </dt>\n        <dd class=\"nhsuk-summary-list__value\">\n          <p>Isotretinoin capsules (Roaccutane)</p>\n          <p>Isotretinoin gel (Isotrex)</p>\n          <p>Pepto-Bismol (bismuth subsalicylate)</p>\n        </dd>\n        <dd class=\"nhsuk-summary-list__actions\">\n          <ul class=\"nhsuk-summary-list__actions-list\">\n            <li class=\"nhsuk-summary-list__actions-list-item\">\n              <a class=\"nhsuk-link\" href=\"#/add\">Add<span class=\"nhsuk-u-visually-hidden\"> new medicine (Regional Manager)</span></a>\n            </li>\n            <li class=\"nhsuk-summary-list__actions-list-item\">\n              <a class=\"nhsuk-link\" href=\"#/change\">Change<span class=\"nhsuk-u-visually-hidden\"> medicines (Regional Manager)</span></a>\n            </li>\n          </ul>\n        </dd>\n      </div>\n    </dl>\n  </div>\n</div>"
    }
  ]
}