{
  "name": "Do and Don't list",
  "component": "do-dont-list",
  "fixtures": [
    {
      "name": "(do) with custom prefix",
      "context": {
        "title": "Do",
        "icon": "tick",
        "prefixText": "always",
        "items": [
          {
            "item": "cover blisters with a soft plaster or padded dressing"
          },
          {
            "item": "wash your hands before touching a burst blister"
          },
          {
            "item": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Do\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--tick\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        always cover blisters with a soft plaster or padded dressing\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        always wash your hands before touching a burst blister\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        always allow the fluid in a burst blister to drain before covering it with a plaster or dressing\n      </li>\n    </ul>\n  </div>\n</div>"
    },
    {
      "name": "(do) with deprecated options",
      "context": {
        "title": "Do",
        "icon": "tick",
        "items": [
          {
            "item": "cover blisters with a soft plaster or padded dressing"
          },
          {
            "item": "wash your hands before touching a burst blister"
          },
          {
            "item": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Do\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--tick\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        cover blisters with a soft plaster or padded dressing\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        wash your hands before touching a burst blister\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        allow the fluid in a burst blister to drain before covering it with a plaster or dressing\n      </li>\n    </ul>\n  </div>\n</div>"
    },
    {
      "name": "(do) with empty items",
      "context": {
        "title": "Do",
        "icon": "tick",
        "items": [
          {
            "text": "cover blisters with a soft plaster or padded dressing"
          },
          {
            "text": "wash your hands before touching a burst blister"
          },
          false
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Do\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--tick\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        cover blisters with a soft plaster or padded dressing\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        wash your hands before touching a burst blister\n      </li>\n    </ul>\n  </div>\n</div>"
    },
    {
      "name": "(don't)",
      "context": {
        "title": "Don't",
        "icon": "cross",
        "items": [
          {
            "text": "burst a blister yourself"
          },
          {
            "text": "peel the skin off a burst blister"
          },
          {
            "text": "pick at the edges of the remaining skin"
          },
          {
            "text": "wear the shoes or use the equipment that caused your blister until it heals"
          }
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Don&#39;t\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--cross\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not burst a blister yourself\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not peel the skin off a burst blister\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not pick at the edges of the remaining skin\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not wear the shoes or use the equipment that caused your blister until it heals\n      </li>\n    </ul>\n  </div>\n</div>"
    },
    {
      "name": "(don't) with custom prefix",
      "context": {
        "title": "Never",
        "icon": "cross",
        "prefixText": "never",
        "items": [
          {
            "text": "burst a blister yourself"
          },
          {
            "text": "peel the skin off a burst blister"
          },
          {
            "text": "pick at the edges of the remaining skin"
          },
          {
            "text": "wear the shoes or use the equipment that caused your blister until it heals"
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Never\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--cross\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        never burst a blister yourself\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        never peel the skin off a burst blister\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        never pick at the edges of the remaining skin\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        never wear the shoes or use the equipment that caused your blister until it heals\n      </li>\n    </ul>\n  </div>\n</div>"
    },
    {
      "name": "(don't) with deprecated options",
      "context": {
        "title": "Don't",
        "icon": "cross",
        "items": [
          {
            "item": "burst a blister yourself"
          },
          {
            "item": "peel the skin off a burst blister"
          },
          {
            "item": "pick at the edges of the remaining skin"
          },
          {
            "item": "wear the shoes or use the equipment that caused your blister until it heals"
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Don&#39;t\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--cross\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not burst a blister yourself\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not peel the skin off a burst blister\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not pick at the edges of the remaining skin\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not wear the shoes or use the equipment that caused your blister until it heals\n      </li>\n    </ul>\n  </div>\n</div>"
    },
    {
      "name": "(don't) with empty items",
      "context": {
        "title": "Don't",
        "icon": "cross",
        "items": [
          {
            "item": "burst a blister yourself"
          },
          {
            "item": "peel the skin off a burst blister"
          },
          {
            "item": "pick at the edges of the remaining skin"
          },
          false
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Don&#39;t\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--cross\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not burst a blister yourself\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not peel the skin off a burst blister\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        do not pick at the edges of the remaining skin\n      </li>\n    </ul>\n  </div>\n</div>"
    },
    {
      "name": "(don't) with hidden prefix",
      "context": {
        "title": "Don't",
        "icon": "cross",
        "hidePrefix": true,
        "items": [
          {
            "text": "avoid bursting a blister yourself"
          },
          {
            "text": "certainly don't peel the skin off a burst blister"
          },
          {
            "text": "absolutely do not pick at the edges of the remaining skin"
          },
          {
            "text": "please don't wear the shoes or use the equipment that caused your blister until it heals"
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Don&#39;t\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--cross\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        avoid bursting a blister yourself\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        certainly don&#39;t peel the skin off a burst blister\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        absolutely do not pick at the edges of the remaining skin\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--cross\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z\"/>\n        </svg>\n        please don&#39;t wear the shoes or use the equipment that caused your blister until it heals\n      </li>\n    </ul>\n  </div>\n</div>"
    },
    {
      "name": "default",
      "context": {
        "title": "Do",
        "icon": "tick",
        "items": [
          {
            "text": "cover blisters with a soft plaster or padded dressing"
          },
          {
            "text": "wash your hands before touching a burst blister"
          },
          {
            "text": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
          }
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Do\n    </h3>\n    <ul class=\"nhsuk-list nhsuk-list--tick\" role=\"list\">\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        cover blisters with a soft plaster or padded dressing\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        wash your hands before touching a burst blister\n      </li>\n      <li>\n        <svg class=\"nhsuk-icon nhsuk-icon--tick\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n          <path d=\"M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z\"/>\n        </svg>\n        allow the fluid in a burst blister to drain before covering it with a plaster or dressing\n      </li>\n    </ul>\n  </div>\n</div>"
    }
  ]
}
