{
  "name": "Tables",
  "component": "tables",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "compact",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "compact": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "striped compact",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "compact": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "responsive",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "responsive compact",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "compact": true,
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "responsive striped",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "responsive": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "responsive striped compact",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "compact": true,
        "responsive": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "reverse",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "reverse compact",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "compact": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "reverse striped",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "default",
      "description": "reverse striped compact",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "compact": true,
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "scrolling",
      "context": {
        "caption": {
          "id": "scrolling-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-caption\">\n    <table class=\"nhsuk-table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-caption\">\n        Childhood vaccination coverage by nation\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling",
      "description": "striped",
      "context": {
        "caption": {
          "id": "scrolling-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-caption\">\n    <table class=\"nhsuk-table nhsuk-table--striped\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-caption\">\n        Childhood vaccination coverage by nation\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling",
      "description": "reverse",
      "context": {
        "caption": {
          "id": "scrolling-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<div class=\"nhsuk-scroll nhsuk-scroll--reverse\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-caption\">\n    <table class=\"nhsuk-table nhsuk-table--reverse\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-caption\">\n        Childhood vaccination coverage by nation\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling as a card",
      "context": {
        "card": {
          "heading": {
            "text": "Leeds",
            "size": "m"
          },
          "actions": {
            "items": [
              {
                "text": "Edit",
                "href": "#/view/leeds"
              }
            ]
          }
        },
        "caption": {
          "id": "scrolling-card-caption",
          "text": "Vaccine types (12 months)",
          "size": "s"
        },
        "lastRowBorder": false,
        "scroll": true,
        "head": [
          {
            "text": "Location"
          },
          {
            "text": "6‑in‑1",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "MenB",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "Pneumococcal",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "Rotavirus",
            "format": "numeric",
            "align": "left"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "91.30%"
            },
            {
              "text": "91.00%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "88.80%"
            }
          ],
          [
            {
              "text": "Yorkshire"
            },
            {
              "text": "91.90%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "94.20%"
            },
            {
              "text": "89.20%"
            }
          ],
          [
            {
              "text": "Leeds"
            },
            {
              "text": "88.40%"
            },
            {
              "text": "88.50%"
            },
            {
              "text": "92.20%"
            },
            {
              "text": "85.60%"
            }
          ]
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "width": "one-half"
      },
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Leeds\n    </h2>\n    <div class=\"nhsuk-card__actions\">\n      <a class=\"nhsuk-link\" href=\"#/view/leeds\">Edit<span class=\"nhsuk-u-visually-hidden\"> (Leeds)</span></a>\n    </div>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n      <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-card-caption\">\n        <table class=\"nhsuk-table nhsuk-table--no-last-row-border\">\n          <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\" id=\"scrolling-card-caption\">\n            Vaccine types (12 months)\n          </caption>\n          <thead class=\"nhsuk-table__head\">\n            <tr class=\"nhsuk-table__row\">\n              <th class=\"nhsuk-table__header\" scope=\"col\">\n                Location\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\">\n                6‑in‑1\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\">\n                MenB\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\">\n                Pneumococcal\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\">\n                Rotavirus\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"nhsuk-table__body\">\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                England\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.30%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.00%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                93.10%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.80%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                Yorkshire\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.90%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.80%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                94.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                89.20%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                Leeds\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.40%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.50%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                92.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                85.60%\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling as a card",
      "description": "striped",
      "context": {
        "card": {
          "heading": {
            "text": "Leeds",
            "size": "m"
          },
          "actions": {
            "items": [
              {
                "text": "Edit",
                "href": "#/view/leeds"
              }
            ]
          }
        },
        "caption": {
          "id": "scrolling-card-caption",
          "text": "Vaccine types (12 months)",
          "size": "s"
        },
        "lastRowBorder": false,
        "scroll": true,
        "head": [
          {
            "text": "Location"
          },
          {
            "text": "6‑in‑1",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "MenB",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "Pneumococcal",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "Rotavirus",
            "format": "numeric",
            "align": "left"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "91.30%"
            },
            {
              "text": "91.00%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "88.80%"
            }
          ],
          [
            {
              "text": "Yorkshire"
            },
            {
              "text": "91.90%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "94.20%"
            },
            {
              "text": "89.20%"
            }
          ],
          [
            {
              "text": "Leeds"
            },
            {
              "text": "88.40%"
            },
            {
              "text": "88.50%"
            },
            {
              "text": "92.20%"
            },
            {
              "text": "85.60%"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "width": "one-half"
      },
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Leeds\n    </h2>\n    <div class=\"nhsuk-card__actions\">\n      <a class=\"nhsuk-link\" href=\"#/view/leeds\">Edit<span class=\"nhsuk-u-visually-hidden\"> (Leeds)</span></a>\n    </div>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n      <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-card-caption\">\n        <table class=\"nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--striped\">\n          <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\" id=\"scrolling-card-caption\">\n            Vaccine types (12 months)\n          </caption>\n          <thead class=\"nhsuk-table__head\">\n            <tr class=\"nhsuk-table__row\">\n              <th class=\"nhsuk-table__header\" scope=\"col\">\n                Location\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\">\n                6‑in‑1\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\">\n                MenB\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\">\n                Pneumococcal\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\">\n                Rotavirus\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"nhsuk-table__body\">\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                England\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.30%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.00%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                93.10%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.80%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                Yorkshire\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.90%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.80%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                94.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                89.20%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                Leeds\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.40%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.50%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                92.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                85.60%\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling as a card",
      "description": "responsive",
      "context": {
        "card": {
          "heading": {
            "text": "Leeds",
            "size": "m"
          },
          "actions": {
            "items": [
              {
                "text": "Edit",
                "href": "#/view/leeds"
              }
            ]
          }
        },
        "caption": {
          "id": "scrolling-card-caption",
          "text": "Vaccine types (12 months)",
          "size": "s"
        },
        "lastRowBorder": false,
        "scroll": true,
        "head": [
          {
            "text": "Location"
          },
          {
            "text": "6‑in‑1",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "MenB",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "Pneumococcal",
            "format": "numeric",
            "align": "left"
          },
          {
            "text": "Rotavirus",
            "format": "numeric",
            "align": "left"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "91.30%"
            },
            {
              "text": "91.00%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "88.80%"
            }
          ],
          [
            {
              "text": "Yorkshire"
            },
            {
              "text": "91.90%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "94.20%"
            },
            {
              "text": "89.20%"
            }
          ],
          [
            {
              "text": "Leeds"
            },
            {
              "text": "88.40%"
            },
            {
              "text": "88.50%"
            },
            {
              "text": "92.20%"
            },
            {
              "text": "85.60%"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "width": "one-half"
      },
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Leeds\n    </h2>\n    <div class=\"nhsuk-card__actions\">\n      <a class=\"nhsuk-link\" href=\"#/view/leeds\">Edit<span class=\"nhsuk-u-visually-hidden\"> (Leeds)</span></a>\n    </div>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n      <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-card-caption\">\n        <table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border\" role=\"table\">\n          <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\" id=\"scrolling-card-caption\">\n            Vaccine types (12 months)\n          </caption>\n          <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n            <tr class=\"nhsuk-table__row\" role=\"row\">\n              <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n                Location\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" role=\"columnheader\">\n                6‑in‑1\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" role=\"columnheader\">\n                MenB\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" role=\"columnheader\">\n                Pneumococcal\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" role=\"columnheader\">\n                Rotavirus\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"nhsuk-table__body\">\n            <tr class=\"nhsuk-table__row\" role=\"row\">\n              <td class=\"nhsuk-table__cell\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Location </span>England\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">6‑in‑1 </span>91.30%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">MenB </span>91.00%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Pneumococcal </span>93.10%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Rotavirus </span>88.80%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\" role=\"row\">\n              <td class=\"nhsuk-table__cell\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Location </span>Yorkshire\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">6‑in‑1 </span>91.90%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">MenB </span>91.80%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Pneumococcal </span>94.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Rotavirus </span>89.20%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\" role=\"row\">\n              <td class=\"nhsuk-table__cell\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Location </span>Leeds\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">6‑in‑1 </span>88.40%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">MenB </span>88.50%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Pneumococcal </span>92.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Rotavirus </span>85.60%\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling (full width)",
      "context": {
        "caption": {
          "id": "scrolling-full-width-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-full-width-caption\">\n    <table class=\"nhsuk-table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-full-width-caption\">\n        Childhood vaccination coverage by nation\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling (full width)",
      "description": "striped",
      "context": {
        "caption": {
          "id": "scrolling-full-width-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-full-width-caption\">\n    <table class=\"nhsuk-table nhsuk-table--striped\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-full-width-caption\">\n        Childhood vaccination coverage by nation\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling (full width)",
      "description": "reverse",
      "context": {
        "caption": {
          "id": "scrolling-full-width-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "width": "full",
        "layout": "background-blue"
      },
      "html": "<div class=\"nhsuk-scroll nhsuk-scroll--reverse\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-full-width-caption\">\n    <table class=\"nhsuk-table nhsuk-table--reverse\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-full-width-caption\">\n        Childhood vaccination coverage by nation\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable",
      "context": {
        "caption": {
          "id": "scrolling-sortable-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation",
            "sort": "ascending"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-sortable-caption\">\n    <table class=\"nhsuk-table nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-sortable-caption\">\n        Childhood vaccination coverage by nation<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable",
      "description": "striped",
      "context": {
        "caption": {
          "id": "scrolling-sortable-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation",
            "sort": "ascending"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-sortable-caption\">\n    <table class=\"nhsuk-table nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-sortable-caption\">\n        Childhood vaccination coverage by nation<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable",
      "description": "reverse",
      "context": {
        "caption": {
          "id": "scrolling-sortable-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation",
            "sort": "ascending"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<div class=\"nhsuk-scroll nhsuk-scroll--reverse\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-sortable-caption\">\n    <table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-sortable-caption\">\n        Childhood vaccination coverage by nation<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable as a card",
      "context": {
        "card": {
          "heading": {
            "text": "Leeds",
            "size": "m"
          },
          "actions": {
            "items": [
              {
                "text": "Edit",
                "href": "#/view/leeds"
              }
            ]
          }
        },
        "caption": {
          "id": "scrolling-card-caption",
          "text": "Vaccine types (12 months)",
          "size": "s"
        },
        "lastRowBorder": false,
        "scroll": true,
        "head": [
          {
            "text": "Location"
          },
          {
            "text": "6‑in‑1",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "MenB",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "Pneumococcal",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "Rotavirus",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "91.30%"
            },
            {
              "text": "91.00%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "88.80%"
            }
          ],
          [
            {
              "text": "Yorkshire"
            },
            {
              "text": "91.90%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "94.20%"
            },
            {
              "text": "89.20%"
            }
          ],
          [
            {
              "text": "Leeds"
            },
            {
              "text": "88.40%"
            },
            {
              "text": "88.50%"
            },
            {
              "text": "92.20%"
            },
            {
              "text": "85.60%"
            }
          ]
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "width": "one-half"
      },
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Leeds\n    </h2>\n    <div class=\"nhsuk-card__actions\">\n      <a class=\"nhsuk-link\" href=\"#/view/leeds\">Edit<span class=\"nhsuk-u-visually-hidden\"> (Leeds)</span></a>\n    </div>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n      <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-card-caption\">\n        <table class=\"nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n          <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\" id=\"scrolling-card-caption\">\n            Vaccine types (12 months)<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n          </caption>\n          <thead class=\"nhsuk-table__head\">\n            <tr class=\"nhsuk-table__row\">\n              <th class=\"nhsuk-table__header\" scope=\"col\">\n                Location\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" data-sort data-sort-next=\"descending\">\n                6‑in‑1\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" data-sort data-sort-next=\"descending\">\n                MenB\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" data-sort data-sort-next=\"descending\">\n                Pneumococcal\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" data-sort data-sort-next=\"descending\">\n                Rotavirus\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"nhsuk-table__body\">\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                England\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.30%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.00%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                93.10%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.80%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                Yorkshire\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.90%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.80%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                94.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                89.20%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                Leeds\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.40%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.50%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                92.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                85.60%\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable as a card",
      "description": "striped",
      "context": {
        "card": {
          "heading": {
            "text": "Leeds",
            "size": "m"
          },
          "actions": {
            "items": [
              {
                "text": "Edit",
                "href": "#/view/leeds"
              }
            ]
          }
        },
        "caption": {
          "id": "scrolling-card-caption",
          "text": "Vaccine types (12 months)",
          "size": "s"
        },
        "lastRowBorder": false,
        "scroll": true,
        "head": [
          {
            "text": "Location"
          },
          {
            "text": "6‑in‑1",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "MenB",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "Pneumococcal",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "Rotavirus",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "91.30%"
            },
            {
              "text": "91.00%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "88.80%"
            }
          ],
          [
            {
              "text": "Yorkshire"
            },
            {
              "text": "91.90%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "94.20%"
            },
            {
              "text": "89.20%"
            }
          ],
          [
            {
              "text": "Leeds"
            },
            {
              "text": "88.40%"
            },
            {
              "text": "88.50%"
            },
            {
              "text": "92.20%"
            },
            {
              "text": "85.60%"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "width": "one-half"
      },
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Leeds\n    </h2>\n    <div class=\"nhsuk-card__actions\">\n      <a class=\"nhsuk-link\" href=\"#/view/leeds\">Edit<span class=\"nhsuk-u-visually-hidden\"> (Leeds)</span></a>\n    </div>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n      <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-card-caption\">\n        <table class=\"nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n          <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\" id=\"scrolling-card-caption\">\n            Vaccine types (12 months)<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n          </caption>\n          <thead class=\"nhsuk-table__head\">\n            <tr class=\"nhsuk-table__row\">\n              <th class=\"nhsuk-table__header\" scope=\"col\">\n                Location\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" data-sort data-sort-next=\"descending\">\n                6‑in‑1\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" data-sort data-sort-next=\"descending\">\n                MenB\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" data-sort data-sort-next=\"descending\">\n                Pneumococcal\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" data-sort data-sort-next=\"descending\">\n                Rotavirus\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"nhsuk-table__body\">\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                England\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.30%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.00%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                93.10%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.80%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                Yorkshire\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.90%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                91.80%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                94.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                89.20%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\">\n              <td class=\"nhsuk-table__cell\">\n                Leeds\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.40%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                88.50%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                92.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\">\n                85.60%\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable as a card",
      "description": "responsive",
      "context": {
        "card": {
          "heading": {
            "text": "Leeds",
            "size": "m"
          },
          "actions": {
            "items": [
              {
                "text": "Edit",
                "href": "#/view/leeds"
              }
            ]
          }
        },
        "caption": {
          "id": "scrolling-card-caption",
          "text": "Vaccine types (12 months)",
          "size": "s"
        },
        "lastRowBorder": false,
        "scroll": true,
        "head": [
          {
            "text": "Location"
          },
          {
            "text": "6‑in‑1",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "MenB",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "Pneumococcal",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "Rotavirus",
            "format": "numeric",
            "align": "left",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "91.30%"
            },
            {
              "text": "91.00%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "88.80%"
            }
          ],
          [
            {
              "text": "Yorkshire"
            },
            {
              "text": "91.90%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "94.20%"
            },
            {
              "text": "89.20%"
            }
          ],
          [
            {
              "text": "Leeds"
            },
            {
              "text": "88.40%"
            },
            {
              "text": "88.50%"
            },
            {
              "text": "92.20%"
            },
            {
              "text": "85.60%"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "width": "one-half"
      },
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__heading-container\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Leeds\n    </h2>\n    <div class=\"nhsuk-card__actions\">\n      <a class=\"nhsuk-link\" href=\"#/view/leeds\">Edit<span class=\"nhsuk-u-visually-hidden\"> (Leeds)</span></a>\n    </div>\n  </div>\n  <div class=\"nhsuk-card__content\">\n    <div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n      <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-card-caption\">\n        <table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border nhsuk-table--sortable\" data-module=\"nhsuk-table\" role=\"table\">\n          <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\" id=\"scrolling-card-caption\">\n            Vaccine types (12 months)<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n          </caption>\n          <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n            <tr class=\"nhsuk-table__row\" role=\"row\">\n              <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n                Location\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" role=\"columnheader\" data-sort data-sort-next=\"descending\">\n                6‑in‑1\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" role=\"columnheader\" data-sort data-sort-next=\"descending\">\n                MenB\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" role=\"columnheader\" data-sort data-sort-next=\"descending\">\n                Pneumococcal\n              </th>\n              <th class=\"nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left\" scope=\"col\" role=\"columnheader\" data-sort data-sort-next=\"descending\">\n                Rotavirus\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"nhsuk-table__body\">\n            <tr class=\"nhsuk-table__row\" role=\"row\">\n              <td class=\"nhsuk-table__cell\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Location </span>England\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">6‑in‑1 </span>91.30%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">MenB </span>91.00%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Pneumococcal </span>93.10%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Rotavirus </span>88.80%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\" role=\"row\">\n              <td class=\"nhsuk-table__cell\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Location </span>Yorkshire\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">6‑in‑1 </span>91.90%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">MenB </span>91.80%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Pneumococcal </span>94.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Rotavirus </span>89.20%\n              </td>\n            </tr>\n            <tr class=\"nhsuk-table__row\" role=\"row\">\n              <td class=\"nhsuk-table__cell\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Location </span>Leeds\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">6‑in‑1 </span>88.40%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">MenB </span>88.50%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Pneumococcal </span>92.20%\n              </td>\n              <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left\" role=\"cell\">\n                <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Rotavirus </span>85.60%\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable (full width)",
      "context": {
        "caption": {
          "id": "scrolling-sortable-full-width-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation",
            "sort": "ascending"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-sortable-full-width-caption\">\n    <table class=\"nhsuk-table nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-sortable-full-width-caption\">\n        Childhood vaccination coverage by nation<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable (full width)",
      "description": "striped",
      "context": {
        "caption": {
          "id": "scrolling-sortable-full-width-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation",
            "sort": "ascending"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<div class=\"nhsuk-scroll\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-sortable-full-width-caption\">\n    <table class=\"nhsuk-table nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-sortable-full-width-caption\">\n        Childhood vaccination coverage by nation<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "scrolling sortable (full width)",
      "description": "reverse",
      "context": {
        "caption": {
          "id": "scrolling-sortable-full-width-caption",
          "text": "Childhood vaccination coverage by nation",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "scroll": true,
        "head": [
          {
            "text": "Nation",
            "sort": "ascending"
          },
          {
            "text": "2013 to 2014",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2014 to 2015",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2015 to 2016",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2016 to 2017",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2017 to 2018",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2018 to 2019",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2019 to 2020",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2020 to 2021",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2021 to 2022",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2022 to 2023",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2023 to 2024",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "2024 to 2025",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "England"
            },
            {
              "text": "94.34%"
            },
            {
              "text": "94.23%"
            },
            {
              "text": "93.56%"
            },
            {
              "text": "93.41%"
            },
            {
              "text": "93.12%"
            },
            {
              "text": "92.09%"
            },
            {
              "text": "92.57%"
            },
            {
              "text": "92.04%"
            },
            {
              "text": "91.84%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.22%"
            },
            {
              "text": "91.30%"
            }
          ],
          [
            {
              "text": "Northern Ireland"
            },
            {
              "text": "97.48%"
            },
            {
              "text": "96.84%"
            },
            {
              "text": "97.22%"
            },
            {
              "text": "97.04%"
            },
            {
              "text": "96.20%"
            },
            {
              "text": "94.52%"
            },
            {
              "text": "94.45%"
            },
            {
              "text": "94.53%"
            },
            {
              "text": "93.52%"
            },
            {
              "text": "93.10%"
            },
            {
              "text": "91.80%"
            },
            {
              "text": "91.00%"
            }
          ],
          [
            {
              "text": "Scotland"
            },
            {
              "text": "97.51%"
            },
            {
              "text": "97.39%"
            },
            {
              "text": "97.15%"
            },
            {
              "text": "96.77%"
            },
            {
              "text": "96.51%"
            },
            {
              "text": "95.80%"
            },
            {
              "text": "96.23%"
            },
            {
              "text": "96.54%"
            },
            {
              "text": "96.32%"
            },
            {
              "text": "95.55%"
            },
            {
              "text": "94.84%"
            },
            {
              "text": "94.50%"
            }
          ],
          [
            {
              "text": "Wales"
            },
            {
              "text": "96.70%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.57%"
            },
            {
              "text": "96.34%"
            },
            {
              "text": "95.92%"
            },
            {
              "text": "95.42%"
            },
            {
              "text": "95.77%"
            },
            {
              "text": "95.56%"
            },
            {
              "text": "95.18%"
            },
            {
              "text": "94.47%"
            },
            {
              "text": "94.19%"
            },
            {
              "text": "94.10%"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "width": "full",
        "layout": "background-blue"
      },
      "html": "<div class=\"nhsuk-scroll nhsuk-scroll--reverse\" data-module=\"nhsuk-scroll\">\n  <div class=\"nhsuk-scroll__content\" role=\"region\" aria-labelledby=\"scrolling-sortable-full-width-caption\">\n    <table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\" id=\"scrolling-sortable-full-width-caption\">\n        Childhood vaccination coverage by nation<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n            Nation\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2013 to 2014\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2014 to 2015\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2015 to 2016\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2016 to 2017\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2017 to 2018\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2018 to 2019\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2019 to 2020\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2020 to 2021\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2021 to 2022\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2022 to 2023\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2023 to 2024\n          </th>\n          <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n            2024 to 2025\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            England\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.41%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.12%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.09%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            92.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.30%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Northern Ireland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.48%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.22%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.04%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.20%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.45%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.53%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.52%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            93.10%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            91.00%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Scotland\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.39%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            97.15%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.51%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.80%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.23%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.54%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.32%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.55%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.84%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.50%\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Wales\n          </th>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.70%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.57%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            96.34%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.92%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.42%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.77%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.56%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            95.18%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.47%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.19%\n          </td>\n          <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n            94.10%\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "sortable",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "compact": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "striped",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "striped compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "compact": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "responsive",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--sortable\" data-module=\"nhsuk-table\" role=\"table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\" role=\"columnheader\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>11:00\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>11:30\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>13:10\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>13:40\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>14:20\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "responsive compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "compact": true,
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--sortable\" data-module=\"nhsuk-table\" role=\"table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\" role=\"columnheader\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>11:00\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>11:30\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>13:10\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>13:40\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>14:20\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "responsive striped",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "responsive": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\" role=\"table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\" role=\"columnheader\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>11:00\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>11:30\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>13:10\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>13:40\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>14:20\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "responsive striped compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "compact": true,
        "responsive": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\" role=\"table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\" role=\"columnheader\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>11:00\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>11:30\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>13:10\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>13:40\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Time </span>14:20\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Date of birth </span>18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "reverse",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "reverse compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "compact": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "reverse striped",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable",
      "description": "reverse striped compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00"
            },
            {
              "text": "Laura Stone"
            },
            {
              "text": "4 January 1986"
            }
          ],
          [
            {
              "text": "11:30"
            },
            {
              "text": "Emma Katie-Brown"
            },
            {
              "text": "7 February 1976"
            }
          ],
          [
            {
              "text": "13:10"
            },
            {
              "text": "David Chen"
            },
            {
              "text": "19 March 1981"
            }
          ],
          [
            {
              "text": "13:40"
            },
            {
              "text": "Michael Thompson"
            },
            {
              "text": "6 December 1964"
            }
          ],
          [
            {
              "text": "14:20"
            },
            {
              "text": "Juan Martinez"
            },
            {
              "text": "18 April 1975"
            }
          ]
        ],
        "compact": true,
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "compact": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--sortable\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "striped",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "striped compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "compact": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--sortable nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "responsive",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--sortable\" role=\"table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" role=\"columnheader\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" role=\"columnheader\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "responsive compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "compact": true,
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--sortable\" role=\"table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" role=\"columnheader\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" role=\"columnheader\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "responsive striped",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--sortable nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" role=\"columnheader\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" role=\"columnheader\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "responsive striped compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "compact": true,
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--sortable nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" role=\"columnheader\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" role=\"columnheader\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Name </span>Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Last log in </span>1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\"></span><a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "reverse",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--sortable\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "reverse compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "compact": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--sortable\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "reverse striped",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--sortable nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable server-side",
      "description": "reverse striped compact",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name",
            "href": "#",
            "sort": "descending",
            "width": "one-half"
          },
          {
            "text": "Last log in",
            "href": "#",
            "sort": true,
            "align": "right",
            "width": "one-third",
            "classes": "nhsuk-u-nowrap"
          },
          {
            "visuallyHiddenText": "Action"
          }
        ],
        "rows": [
          [
            {
              "text": "Zadie Munroe"
            },
            {
              "text": "7 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Zadie Munroe"
            }
          ],
          [
            {
              "text": "Yolanda Pierce"
            },
            {
              "text": "13 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Yolanda Pierce"
            }
          ],
          [
            {
              "text": "Xanthe Beaumont"
            },
            {
              "text": "19 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Xanthe Beaumont"
            }
          ],
          [
            {
              "text": "Wendell Shaw"
            },
            {
              "text": "25 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Wendell Shaw"
            }
          ],
          [
            {
              "text": "Val Cruz"
            },
            {
              "text": "1 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Val Cruz"
            }
          ],
          [
            {
              "text": "Uta Brennan"
            },
            {
              "text": "7 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Uta Brennan"
            }
          ],
          [
            {
              "text": "Tamsin Foley-Whitworth"
            },
            {
              "text": "14 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Tamsin Foley-Whitworth"
            }
          ],
          [
            {
              "text": "Stellan Park"
            },
            {
              "text": "20 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Stellan Park"
            }
          ],
          [
            {
              "text": "Ro Nkosi"
            },
            {
              "text": "28 June 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Ro Nkosi"
            }
          ],
          [
            {
              "text": "Reuben Tate"
            },
            {
              "text": "1 May 2026"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": "details for Reuben Tate"
            }
          ]
        ],
        "compact": true,
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--sortable nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-half\" scope=\"col\" data-sort aria-sort=\"descending\">\n        <a class=\"nhsuk-link\" href=\"#\">Name</a>\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap\" scope=\"col\" data-sort>\n        <a class=\"nhsuk-link\" href=\"#\">Last log in</a>\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Zadie Munroe\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Zadie Munroe</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Yolanda Pierce\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        13 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Yolanda Pierce</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Xanthe Beaumont\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        19 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Xanthe Beaumont</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wendell Shaw\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        25 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Wendell Shaw</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Val Cruz\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Val Cruz</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Uta Brennan\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        7 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Uta Brennan</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tamsin Foley-Whitworth\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        14 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Tamsin Foley-Whitworth</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Stellan Park\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        20 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Stellan Park</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Ro Nkosi\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        28 June 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Ro Nkosi</span></a>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Reuben Tate\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right\">\n        1 May 2026\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change<span class=\"nhsuk-u-visually-hidden\"> details for Reuben Tate</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable with numeric format",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "New charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable with numeric format",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "New charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable with numeric format and missing data",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "New charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable with numeric format and missing data",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "New charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable nhsuk-table--striped\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable with numeric format and sort values",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item",
            "sort": "ascending"
          },
          {
            "text": "Current charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          },
          {
            "text": "New charge",
            "format": "numeric",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "sortValue": "3",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25",
              "sortValue": "31.25"
            },
            {
              "text": "£32.05",
              "sortValue": "32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "sortValue": "12",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60",
              "sortValue": "111.60"
            },
            {
              "text": "£114.50",
              "sortValue": "114.50"
            }
          ],
          [
            {
              "text": "HRT",
              "sortValue": "100"
            },
            {
              "text": "£19.30",
              "sortValue": "19.30"
            },
            {
              "text": "£19.80",
              "sortValue": "19.80"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" data-sort-value=\"3\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" data-sort-value=\"31.25\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" data-sort-value=\"32.05\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" data-sort-value=\"12\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" data-sort-value=\"111.60\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" data-sort-value=\"114.50\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" data-sort-value=\"100\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" data-sort-value=\"19.30\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" data-sort-value=\"19.80\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable with sort values",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "sort": true,
            "sortNext": "descending"
          }
        ],
        "rows": [
          [
            {
              "text": "11:00am",
              "sortValue": "11:00"
            },
            {
              "text": "Laura Stone",
              "sortValue": "Stone, Laura"
            },
            {
              "text": "4 January 1986",
              "sortValue": "1986-01-04"
            }
          ],
          [
            {
              "text": "11:30am",
              "sortValue": "11:30"
            },
            {
              "text": "Emma Katie-Brown",
              "sortValue": "Katie-Brown, Emma"
            },
            {
              "text": "7 February 1976",
              "sortValue": "1976-02-07"
            }
          ],
          [
            {
              "text": "1:10pm",
              "sortValue": "13:10"
            },
            {
              "text": "David Chen",
              "sortValue": "Chen, David"
            },
            {
              "text": "19 March 1981",
              "sortValue": "1981-03-19"
            }
          ],
          [
            {
              "text": "1:40pm",
              "sortValue": "13:40"
            },
            {
              "text": "Michael Thompson",
              "sortValue": "Thompson, Michael"
            },
            {
              "text": "6 December 1964",
              "sortValue": "1964-12-06"
            }
          ],
          [
            {
              "text": "2:20pm",
              "sortValue": "14:20"
            },
            {
              "text": "Juan Martinez",
              "sortValue": "Martinez, Juan"
            },
            {
              "text": "18 April 1975",
              "sortValue": "1975-04-18"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort data-sort-next=\"descending\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" data-sort-value=\"11:00\">\n        11:00am\n      </th>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"Stone, Laura\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"1986-01-04\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" data-sort-value=\"11:30\">\n        11:30am\n      </th>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"Katie-Brown, Emma\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"1976-02-07\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" data-sort-value=\"13:10\">\n        1:10pm\n      </th>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"Chen, David\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"1981-03-19\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" data-sort-value=\"13:40\">\n        1:40pm\n      </th>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"Thompson, Michael\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"1964-12-06\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" data-sort-value=\"14:20\">\n        2:20pm\n      </th>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"Martinez, Juan\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\" data-sort-value=\"1975-04-18\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "sortable with string items",
      "context": {
        "caption": "Appointments",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Time",
            "sort": "ascending"
          },
          {
            "text": "Name",
            "sort": true
          },
          {
            "text": "Date of birth",
            "classes": "nhsuk-u-nowrap"
          }
        ],
        "rows": [
          [
            "11:00",
            "Laura Stone",
            "4 January 1986"
          ],
          [
            "11:30",
            "Emma Katie-Brown",
            "7 February 1976"
          ],
          [
            "13:10",
            "David Chen",
            "19 March 1981"
          ],
          [
            "13:40",
            "Michael Thompson",
            "6 December 1964"
          ],
          [
            "14:20",
            "Juan Martinez",
            "18 April 1975"
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--sortable\" data-module=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Appointments<span class=\"nhsuk-u-visually-hidden\"> (Column headers are sortable)</span>\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort aria-sort=\"ascending\">\n        Time\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" data-sort>\n        Name\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"col\">\n        Date of birth\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:00\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Laura Stone\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        4 January 1986\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        11:30\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Emma Katie-Brown\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        7 February 1976\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:10\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        David Chen\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        19 March 1981\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        13:40\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Michael Thompson\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        6 December 1964\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        14:20\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Juan Martinez\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        18 April 1975\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with 0 rows",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n</table>\n"
    },
    {
      "name": "with 0 rows",
      "description": "responsive",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n</table>\n"
    },
    {
      "name": "with 1 row",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with 1 row",
      "description": "responsive",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Cold sores\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with 2 rows",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with 2 rows",
      "description": "responsive",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Eczema\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with array items",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          "Skin symptoms",
          "Possible cause"
        ],
        "rows": [
          [
            "Blisters on lips or around the mouth",
            "Cold sores"
          ],
          [
            [
              "Itchy",
              "dry",
              "cracked",
              "sore"
            ],
            "Eczema"
          ],
          [
            "Itchy blisters",
            [
              "Shingles",
              "chickenpox"
            ]
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        3 to 5 months (weighing more than 5kg)\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "compact",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "compact": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        3 to 5 months (weighing more than 5kg)\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        3 to 5 months (weighing more than 5kg)\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "striped compact",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "compact": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        3 to 5 months (weighing more than 5kg)\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "responsive",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\" role=\"columnheader\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\" role=\"columnheader\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span><span>3 to 5 months (weighing more than 5kg)</span>\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "responsive compact",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "compact": true,
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\" role=\"columnheader\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\" role=\"columnheader\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span><span>3 to 5 months (weighing more than 5kg)</span>\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "responsive striped",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "responsive": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\" role=\"columnheader\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\" role=\"columnheader\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span><span>3 to 5 months (weighing more than 5kg)</span>\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "responsive striped compact",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "compact": true,
        "responsive": true,
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\" role=\"columnheader\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\" role=\"columnheader\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span><span>3 to 5 months (weighing more than 5kg)</span>\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Age </span>10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How much? </span>15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">How often? </span>Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "reverse",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        3 to 5 months (weighing more than 5kg)\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "reverse compact",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "compact": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        3 to 5 months (weighing more than 5kg)\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "reverse striped",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        3 to 5 months (weighing more than 5kg)\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with column widths",
      "description": "reverse striped compact",
      "context": {
        "caption": {
          "text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Age",
            "width": "one-third"
          },
          {
            "text": "How much?",
            "width": "one-quarter"
          },
          {
            "text": "How often?"
          }
        ],
        "rows": [
          [
            {
              "html": "3 to 5 months (weighing more than 5kg)"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "6 to 11 months"
            },
            {
              "text": "2.5ml (50mg)"
            },
            {
              "text": "Max 3 to 4 times in 24 hours"
            }
          ],
          [
            {
              "text": "1 to 3 years"
            },
            {
              "text": "5ml (100mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "4 to 6 years"
            },
            {
              "text": "7.5ml (150mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "7 to 9 years"
            },
            {
              "text": "10ml (200mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ],
          [
            {
              "text": "10 to 11 years"
            },
            {
              "text": "15ml (300mg)"
            },
            {
              "text": "Max 3 times in 24 hours"
            }
          ]
        ],
        "compact": true,
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Ibuprofen 100mg/5ml liquid dosages for children by age\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-third\" scope=\"col\">\n        Age\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-u-width-one-quarter\" scope=\"col\">\n        How much?\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        How often?\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        3 to 5 months (weighing more than 5kg)\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 to 11 months\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        2.5ml (50mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 to 4 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        1 to 3 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        5ml (100mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        4 to 6 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        7.5ml (150mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        7 to 9 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        10ml (200mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 to 11 years\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        15ml (300mg)\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Max 3 times in 24 hours\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with custom HTML",
      "context": {
        "caption": "Nunjucks macro options",
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name"
          },
          {
            "text": "Type"
          },
          {
            "text": "Description"
          }
        ],
        "rows": [
          [
            {
              "text": "id"
            },
            {
              "text": "string"
            },
            {
              "text": "The ID of the table."
            }
          ],
          [
            {
              "text": "rows"
            },
            {
              "text": "array"
            },
            {
              "html": "<strong>Required.</strong> The rows within the table component.\n<a href=\"#/macro-options\">See macro options for rows</a>."
            }
          ],
          [
            {
              "text": "head"
            },
            {
              "text": "array"
            },
            {
              "html": "Can be used to add a row of table header cells (<code>&lt;th&gt;</code>) at the top of the table component.\n<a href=\"#/macro-options\">See macro options for head</a>."
            }
          ],
          [
            {
              "text": "caption"
            },
            {
              "text": "string"
            },
            {
              "text": "Caption text."
            }
          ],
          [
            {
              "text": "captionClasses"
            },
            {
              "text": "string"
            },
            {
              "text": "Classes for caption text size. Classes should correspond to the available typography heading classes."
            }
          ],
          [
            {
              "text": "firstCellIsHeader"
            },
            {
              "text": "string"
            },
            {
              "html": "If set to <code>true</code>, the first cell in each row will be a table header (<code>&lt;th&gt;</code>)."
            }
          ],
          [
            {
              "text": "classes"
            },
            {
              "text": "string"
            },
            {
              "text": "Classes to add to the table container."
            }
          ],
          [
            {
              "text": "attributes"
            },
            {
              "text": "object"
            },
            {
              "text": "\tHTML attributes (for example data attributes) to add to the table container."
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Nunjucks macro options\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Name\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Type\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Description\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        id\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        string\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        The ID of the table.\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        rows\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        array\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <strong>Required.</strong> The rows within the table component.\n        <a href=\"#/macro-options\">See macro options for rows</a>.\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        head\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        array\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Can be used to add a row of table header cells (<code>&lt;th&gt;</code>) at the top of the table component.\n        <a href=\"#/macro-options\">See macro options for head</a>.\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        caption\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        string\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Caption text.\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        captionClasses\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        string\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Classes for caption text size. Classes should correspond to the available typography heading classes.\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        firstCellIsHeader\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        string\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        If set to <code>true</code>, the first cell in each row will be a table header (<code>&lt;th&gt;</code>).\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        classes\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        string\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Classes to add to the table container.\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        attributes\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        object\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        HTML attributes (for example data attributes) to add to the table container.\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with empty items",
      "context": {
        "caption": {
          "text": "Vaccinations given",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Date"
          },
          {
            "text": "Vaccine"
          },
          {
            "text": "",
            "visuallyHiddenText": "Action"
          },
          false
        ],
        "rows": [
          [
            {
              "text": "10 July 2024"
            },
            {
              "text": "RSV"
            },
            {
              "href": "#",
              "text": "Change",
              "visuallyHiddenText": false
            },
            false
          ],
          false
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Vaccinations given\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Date\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Vaccine\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Action</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 July 2024\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        RSV\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <a class=\"nhsuk-link\" href=\"#\">Change</a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with empty items and string items",
      "context": {
        "caption": {
          "text": "Vaccinations given",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          "Date",
          "Vaccine",
          false
        ],
        "rows": [
          [
            "10 July 2024",
            "RSV",
            false
          ],
          true
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Vaccinations given\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Date\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Vaccine\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 July 2024\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        RSV\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with first cell as header",
      "context": {
        "firstCellIsHeader": true,
        "lastRowBorder": false,
        "head": [
          {
            "text": "Day of the week"
          },
          {
            "text": "Opening hours"
          }
        ],
        "rows": [
          [
            {
              "text": "Monday"
            },
            {
              "text": "9am to 6pm"
            }
          ],
          [
            {
              "text": "Tuesday"
            },
            {
              "text": "9am to 6pm"
            }
          ],
          [
            {
              "text": "Wednesday"
            },
            {
              "text": "9am to 6pm"
            }
          ],
          [
            {
              "text": "Thursday"
            },
            {
              "text": "9am to 6pm"
            }
          ],
          [
            {
              "text": "Friday"
            },
            {
              "text": "9am to 6pm"
            }
          ],
          [
            {
              "text": "Saturday"
            },
            {
              "text": "9am to 1pm"
            }
          ],
          [
            {
              "text": "Sunday"
            },
            {
              "text": "Closed"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--no-last-row-border\">\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Day of the week\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Opening hours\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Monday\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Tuesday\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Wednesday\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Thursday\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Friday\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Saturday\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        9am to 1pm\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Sunday\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Closed\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with missing data",
      "context": {
        "caption": {
          "text": "Vaccinations given",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Date"
          },
          {
            "text": "Vaccine"
          },
          {
            "text": "Product"
          }
        ],
        "rows": [
          [
            {
              "text": "10 July 2024"
            },
            {
              "text": "RSV"
            },
            {
              "text": "Abrysvo"
            }
          ],
          [
            {
              "text": "6 September 2023"
            },
            {
              "text": "Flu"
            },
            {
              "text": "No data",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Vaccinations given\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Date\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Vaccine\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Product\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 July 2024\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        RSV\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        Abrysvo\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 September 2023\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Flu\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with number items",
      "context": {
        "caption": {
          "text": "Vaccination count",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          "Date",
          "Vaccine",
          "Count"
        ],
        "rows": [
          [
            "10 July 2024",
            "RSV",
            0
          ],
          [
            "6 September 2023",
            "Flu",
            89
          ],
          [
            "15 October 2023",
            "MMR",
            44
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Vaccination count\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Date\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Vaccine\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Count\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        10 July 2024\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        RSV\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        0\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        6 September 2023\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Flu\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        89\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        15 October 2023\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        MMR\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        44\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "striped compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "responsive",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "responsive compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "responsive striped",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "responsive striped compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "reverse",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "reverse compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "reverse striped",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format",
      "description": "reverse striped compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "£114.50"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £114.50\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "striped",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "striped compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "responsive",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "responsive compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "responsive striped",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "responsive striped compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Item </span>HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Current charge </span>£19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">New charge </span>£19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "reverse",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "reverse compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "reverse striped",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format and missing data",
      "description": "reverse striped compact",
      "context": {
        "caption": {
          "text": "Prescription prepayment certificate (PPC) charges",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Item"
          },
          {
            "text": "Current charge",
            "format": "numeric"
          },
          {
            "text": "New charge",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "3-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£31.25"
            },
            {
              "text": "£32.05"
            }
          ],
          [
            {
              "text": "12-month",
              "classes": "nhsuk-u-nowrap"
            },
            {
              "text": "£111.60"
            },
            {
              "text": "No data",
              "format": "string",
              "classes": "nhsuk-u-secondary-text-colour"
            }
          ],
          [
            {
              "text": "HRT"
            },
            {
              "text": "£19.30"
            },
            {
              "text": "£19.80"
            }
          ]
        ],
        "compact": true,
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--striped\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Prescription prepayment certificate (PPC) charges\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Item\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Current charge\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        New charge\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        3-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £31.25\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £32.05\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-nowrap\" scope=\"row\">\n        12-month\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £111.60\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour\">\n        No data\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        HRT\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.30\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        £19.80\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format (full width, past day)",
      "context": {
        "caption": "Past day",
        "head": [
          {
            "text": "Case manager"
          },
          {
            "text": "Cases opened",
            "format": "numeric"
          },
          {
            "text": "Cases closed",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "3"
            },
            {
              "text": "0"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1"
            },
            {
              "text": "0"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "2"
            },
            {
              "text": "0"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Past day\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Case manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases opened\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases closed\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        3\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        0\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        0\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        2\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        0\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format (full width, past month)",
      "context": {
        "caption": "Past month",
        "head": [
          {
            "text": "Case manager"
          },
          {
            "text": "Cases opened",
            "format": "numeric"
          },
          {
            "text": "Cases closed",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "98"
            },
            {
              "text": "95"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "122"
            },
            {
              "text": "131"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "126"
            },
            {
              "text": "142"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Past month\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Case manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases opened\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases closed\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        98\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        95\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        122\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        131\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        126\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        142\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format (full width, past week)",
      "context": {
        "caption": "Past week",
        "head": [
          {
            "text": "Case manager"
          },
          {
            "text": "Cases opened",
            "format": "numeric"
          },
          {
            "text": "Cases closed",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "24"
            },
            {
              "text": "18"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "16"
            },
            {
              "text": "20"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            },
            {
              "text": "27"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Past week\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Case manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases opened\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases closed\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        18\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        16\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        20\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        27\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with numeric format (full width, past year)",
      "context": {
        "caption": "Past year",
        "head": [
          {
            "text": "Case manager"
          },
          {
            "text": "Cases opened",
            "format": "numeric"
          },
          {
            "text": "Cases closed",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            },
            {
              "text": "1472"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            },
            {
              "text": "1083"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "1539"
            },
            {
              "text": "1265"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {
        "width": "full"
      },
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Past year\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Case manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases opened\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases closed\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1472\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1083\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1539\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1265\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--no-border\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--no-border\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "striped",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--no-border nhsuk-table--striped\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "striped compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--no-border nhsuk-table--striped\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "responsive",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--no-border\" role=\"table\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "responsive compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--no-border\" role=\"table\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "responsive striped",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--no-border nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "responsive striped compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--no-border nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "reverse",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--no-border\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "reverse compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--no-border\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "reverse striped",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--no-border nhsuk-table--striped\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without border",
      "description": "reverse striped compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "border": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--no-border nhsuk-table--striped\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--no-last-row-border\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--no-last-row-border\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "striped",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--striped\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "striped compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--no-last-row-border nhsuk-table--striped\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "responsive",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border\" role=\"table\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "responsive compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--no-last-row-border\" role=\"table\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "responsive striped",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "responsive striped compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "responsive": true,
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--no-last-row-border nhsuk-table--striped\" role=\"table\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\" role=\"columnheader\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\" role=\"row\">\n      <td class=\"nhsuk-table__cell\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Manager </span>Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\" role=\"cell\">\n        <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Cases </span>24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "reverse",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--no-last-row-border\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "reverse compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--no-last-row-border\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "reverse striped",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--no-last-row-border nhsuk-table--striped\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "without last row border",
      "description": "reverse striped compact",
      "context": {
        "caption": {
          "visuallyHiddenText": "Cases per manager"
        },
        "lastRowBorder": false,
        "head": [
          {
            "text": "Manager"
          },
          {
            "text": "Cases",
            "format": "numeric"
          }
        ],
        "rows": [
          [
            {
              "text": "David Francis"
            },
            {
              "text": "1380"
            }
          ],
          [
            {
              "text": "Paul Farmer"
            },
            {
              "text": "1129"
            }
          ],
          [
            {
              "text": "Rita Patel"
            },
            {
              "text": "24"
            }
          ]
        ],
        "compact": true,
        "striped": true,
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<table class=\"nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--no-last-row-border nhsuk-table--striped\">\n  <caption class=\"nhsuk-u-visually-hidden\">Cases per manager</caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Manager\n      </th>\n      <th class=\"nhsuk-table__header nhsuk-table__header--numeric\" scope=\"col\">\n        Cases\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        David Francis\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1380\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Paul Farmer\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        1129\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <td class=\"nhsuk-table__cell\">\n        Rita Patel\n      </td>\n      <td class=\"nhsuk-table__cell nhsuk-table__cell--numeric\">\n        24\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with string items",
      "context": {
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          "Skin symptoms",
          "Possible cause"
        ],
        "rows": [
          [
            "Blisters on lips or around the mouth",
            "Cold sores"
          ],
          [
            "Itchy, dry, cracked, sore",
            "Eczema"
          ],
          [
            "Itchy blisters",
            "Shingles, chickenpox"
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Impetigo can look similar to other skin conditions\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Skin symptoms\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Possible cause\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blisters on lips or around the mouth\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Cold sores\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy, dry, cracked, sore\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Eczema\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Itchy blisters\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        Shingles, chickenpox\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with tags",
      "context": {
        "caption": "Tags",
        "firstCellIsHeader": true,
        "head": [
          "Name",
          "Colour",
          "Tag"
        ],
        "rows": [
          [
            "Default",
            "None",
            {
              "html": "<strong class=\"nhsuk-tag\">Default</strong>\n"
            }
          ],
          [
            "Red",
            {
              "html": "<var class=\"nhsuk-body-s\">red</var>"
            },
            {
              "html": "<strong class=\"nhsuk-tag nhsuk-tag--red\">Rejected</strong>\n"
            }
          ],
          [
            "Blue",
            {
              "html": "<var class=\"nhsuk-body-s\">blue</var>"
            },
            {
              "html": "<strong class=\"nhsuk-tag nhsuk-tag--blue\">Pending</strong>\n"
            }
          ],
          [
            "Green",
            {
              "html": "<var class=\"nhsuk-body-s\">green</var>"
            },
            {
              "html": "<strong class=\"nhsuk-tag nhsuk-tag--green\">New</strong>\n"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption\">\n    Tags\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Name\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Colour\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Tag\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Default\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        None\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <strong class=\"nhsuk-tag\">Default</strong>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Red\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        <var class=\"nhsuk-body-s\">red</var>\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <strong class=\"nhsuk-tag nhsuk-tag--red\">Rejected</strong>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Blue\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        <var class=\"nhsuk-body-s\">blue</var>\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <strong class=\"nhsuk-tag nhsuk-tag--blue\">Pending</strong>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"row\">\n        Green\n      </th>\n      <td class=\"nhsuk-table__cell\">\n        <var class=\"nhsuk-body-s\">green</var>\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <strong class=\"nhsuk-tag nhsuk-tag--green\">New</strong>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "with word breaks",
      "context": {
        "caption": {
          "text": "Users",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "head": [
          {
            "text": "Name"
          },
          {
            "text": "Email address"
          },
          {
            "text": "Status"
          },
          {
            "visuallyHiddenText": "Actions"
          }
        ],
        "rows": [
          [
            {
              "text": "Stephanie Meyer",
              "classes": "nhsuk-u-text-break-word"
            },
            {
              "text": "stephanie.meyer9@test.com",
              "classes": "nhsuk-u-text-break-word"
            },
            {
              "html": "<strong class=\"nhsuk-tag nhsuk-tag--green\">Active</strong>\n"
            }
          ],
          [
            {
              "text": "Aleksandrina Featherstonehaugh-Whitehead",
              "classes": "nhsuk-u-text-break-word"
            },
            {
              "text": "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com",
              "classes": "nhsuk-u-text-break-word"
            },
            {
              "html": "<strong class=\"nhsuk-tag nhsuk-tag--grey\">Inactive</strong>\n"
            }
          ],
          [
            {
              "text": "Karen Francis",
              "classes": "nhsuk-u-text-break-word"
            },
            {
              "text": "karen.francis@example.com",
              "classes": "nhsuk-u-text-break-word"
            },
            {
              "html": "<strong class=\"nhsuk-tag nhsuk-tag--blue\">Thisisaverylongwaytosaythatsomethingisincomplete</strong>\n"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<table class=\"nhsuk-table\">\n  <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n    Users\n  </caption>\n  <thead class=\"nhsuk-table__head\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Name\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Email address\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        Status\n      </th>\n      <th class=\"nhsuk-table__header\" scope=\"col\">\n        <span class=\"nhsuk-u-visually-hidden\">Actions</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"nhsuk-table__body\">\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-text-break-word\" scope=\"row\">\n        Stephanie Meyer\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-break-word\">\n        stephanie.meyer9@test.com\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <strong class=\"nhsuk-tag nhsuk-tag--green\">Active</strong>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-text-break-word\" scope=\"row\">\n        Aleksandrina Featherstonehaugh-Whitehead\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-break-word\">\n        aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <strong class=\"nhsuk-tag nhsuk-tag--grey\">Inactive</strong>\n      </td>\n    </tr>\n    <tr class=\"nhsuk-table__row\">\n      <th class=\"nhsuk-table__header nhsuk-u-text-break-word\" scope=\"row\">\n        Karen Francis\n      </th>\n      <td class=\"nhsuk-table__cell nhsuk-u-text-break-word\">\n        karen.francis@example.com\n      </td>\n      <td class=\"nhsuk-table__cell\">\n        <strong class=\"nhsuk-tag nhsuk-tag--blue\">Thisisaverylongwaytosaythatsomethingisincomplete</strong>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
    },
    {
      "name": "as a card",
      "context": {
        "card": true,
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "lastRowBorder": false,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__content\">\n    <table class=\"nhsuk-table nhsuk-table--no-last-row-border\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n        Impetigo can look similar to other skin conditions\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Skin symptoms\n          </th>\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Possible cause\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Blisters on lips or around the mouth\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Cold sores\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy, dry, cracked, sore\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Eczema\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy blisters\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Shingles, chickenpox\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "as a card",
      "description": "striped",
      "context": {
        "card": true,
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "lastRowBorder": false,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__content\">\n    <table class=\"nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--striped\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n        Impetigo can look similar to other skin conditions\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Skin symptoms\n          </th>\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Possible cause\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Blisters on lips or around the mouth\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Cold sores\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy, dry, cracked, sore\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Eczema\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy blisters\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Shingles, chickenpox\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "as a card",
      "description": "responsive",
      "context": {
        "card": true,
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "m"
        },
        "firstCellIsHeader": true,
        "lastRowBorder": false,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__content\">\n    <table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border\" role=\"table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--m\">\n        Impetigo can look similar to other skin conditions\n      </caption>\n      <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n        <tr class=\"nhsuk-table__row\" role=\"row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n            Skin symptoms\n          </th>\n          <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n            Possible cause\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\" role=\"row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Blisters on lips or around the mouth\n          </th>\n          <td class=\"nhsuk-table__cell\" role=\"cell\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Cold sores\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\" role=\"row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy, dry, cracked, sore\n          </th>\n          <td class=\"nhsuk-table__cell\" role=\"cell\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Eczema\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\" role=\"row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy blisters\n          </th>\n          <td class=\"nhsuk-table__cell\" role=\"cell\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Shingles, chickenpox\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "as a card (feature)",
      "context": {
        "card": {
          "heading": {
            "text": "Other conditions like impetigo",
            "size": "m"
          },
          "variant": "feature"
        },
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "s"
        },
        "firstCellIsHeader": true,
        "lastRowBorder": false,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Other conditions like impetigo\n    </h2>\n    <table class=\"nhsuk-table nhsuk-table--no-last-row-border\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\">\n        Impetigo can look similar to other skin conditions\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Skin symptoms\n          </th>\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Possible cause\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Blisters on lips or around the mouth\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Cold sores\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy, dry, cracked, sore\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Eczema\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy blisters\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Shingles, chickenpox\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "as a card (feature)",
      "description": "striped",
      "context": {
        "card": {
          "heading": {
            "text": "Other conditions like impetigo",
            "size": "m"
          },
          "variant": "feature"
        },
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "s"
        },
        "firstCellIsHeader": true,
        "lastRowBorder": false,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "striped": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Other conditions like impetigo\n    </h2>\n    <table class=\"nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--striped\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\">\n        Impetigo can look similar to other skin conditions\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Skin symptoms\n          </th>\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Possible cause\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Blisters on lips or around the mouth\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Cold sores\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy, dry, cracked, sore\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Eczema\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy blisters\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Shingles, chickenpox\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "as a card (feature)",
      "description": "responsive",
      "context": {
        "card": {
          "heading": {
            "text": "Other conditions like impetigo",
            "size": "m"
          },
          "variant": "feature"
        },
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "s"
        },
        "firstCellIsHeader": true,
        "lastRowBorder": false,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ],
        "responsive": true
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Other conditions like impetigo\n    </h2>\n    <table class=\"nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border\" role=\"table\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\">\n        Impetigo can look similar to other skin conditions\n      </caption>\n      <thead class=\"nhsuk-table__head\" role=\"rowgroup\">\n        <tr class=\"nhsuk-table__row\" role=\"row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n            Skin symptoms\n          </th>\n          <th class=\"nhsuk-table__header\" scope=\"col\" role=\"columnheader\">\n            Possible cause\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\" role=\"row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Blisters on lips or around the mouth\n          </th>\n          <td class=\"nhsuk-table__cell\" role=\"cell\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Cold sores\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\" role=\"row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy, dry, cracked, sore\n          </th>\n          <td class=\"nhsuk-table__cell\" role=\"cell\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Eczema\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\" role=\"row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\" role=\"rowheader\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Skin symptoms </span>Itchy blisters\n          </th>\n          <td class=\"nhsuk-table__cell\" role=\"cell\">\n            <span class=\"nhsuk-table__heading\" aria-hidden=\"true\">Possible cause </span>Shingles, chickenpox\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    },
    {
      "name": "as a card (feature) with deprecated options",
      "context": {
        "heading": "Other conditions like impetigo",
        "headingLevel": 3,
        "caption": {
          "text": "Impetigo can look similar to other skin conditions",
          "size": "s"
        },
        "firstCellIsHeader": true,
        "lastRowBorder": false,
        "panel": true,
        "head": [
          {
            "text": "Skin symptoms"
          },
          {
            "text": "Possible cause"
          }
        ],
        "rows": [
          [
            {
              "text": "Blisters on lips or around the mouth"
            },
            {
              "text": "Cold sores"
            }
          ],
          [
            {
              "text": "Itchy, dry, cracked, sore"
            },
            {
              "text": "Eczema"
            }
          ],
          [
            {
              "text": "Itchy blisters"
            },
            {
              "text": "Shingles, chickenpox"
            }
          ]
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Other conditions like impetigo\n    </h3>\n    <table class=\"nhsuk-table nhsuk-table--no-last-row-border\">\n      <caption class=\"nhsuk-table__caption nhsuk-table__caption--s\">\n        Impetigo can look similar to other skin conditions\n      </caption>\n      <thead class=\"nhsuk-table__head\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Skin symptoms\n          </th>\n          <th class=\"nhsuk-table__header\" scope=\"col\">\n            Possible cause\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"nhsuk-table__body\">\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Blisters on lips or around the mouth\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Cold sores\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy, dry, cracked, sore\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Eczema\n          </td>\n        </tr>\n        <tr class=\"nhsuk-table__row\">\n          <th class=\"nhsuk-table__header\" scope=\"row\">\n            Itchy blisters\n          </th>\n          <td class=\"nhsuk-table__cell\">\n            Shingles, chickenpox\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n"
    }
  ]
}