{
  "name": "Action link",
  "component": "action-link",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "text": "Find your nearest A&E",
        "href": "#/find"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-action-link"
      },
      "options": {},
      "html": "<a class=\"nhsuk-action-link\" href=\"#/find\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right-circle\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z\"/>\n  </svg>\n  <span class=\"nhsuk-action-link__text\">\n    Find your nearest A&amp;E\n  </span>\n</a>\n"
    },
    {
      "name": "default",
      "description": "reverse",
      "context": {
        "text": "Find your nearest A&E",
        "href": "#/find",
        "variant": "reverse"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-action-link"
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<a class=\"nhsuk-action-link nhsuk-action-link--reverse\" href=\"#/find\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right-circle\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z\"/>\n  </svg>\n  <span class=\"nhsuk-action-link__text\">\n    Find your nearest A&amp;E\n  </span>\n</a>\n"
    },
    {
      "name": "opens in a new tab",
      "context": {
        "text": "Find your nearest A&E",
        "href": "#/find",
        "openInNewTab": true
      },
      "screenshot": false,
      "options": {},
      "html": "<a class=\"nhsuk-action-link\" href=\"#/find\" rel=\"noopener noreferrer\" target=\"_blank\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right-circle\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z\"/>\n  </svg>\n  <span class=\"nhsuk-action-link__text\">\n    Find your nearest A&amp;E\n  </span>\n</a>\n"
    },
    {
      "name": "with HTML",
      "context": {
        "html": "Start session<br>\n<span class=\"nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19\">(11 cases)</span>",
        "href": "#/start"
      },
      "screenshot": false,
      "options": {},
      "html": "<a class=\"nhsuk-action-link\" href=\"#/start\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right-circle\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z\"/>\n  </svg>\n  <span class=\"nhsuk-action-link__text\">\n    Start session<br>\n    <span class=\"nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19\">(11 cases)</span>\n  </span>\n</a>\n"
    },
    {
      "name": "with HTML",
      "description": "reverse",
      "context": {
        "html": "Start session<br>\n<span class=\"nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19\">(11 cases)</span>",
        "href": "#/start",
        "variant": "reverse"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<a class=\"nhsuk-action-link nhsuk-action-link--reverse\" href=\"#/start\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right-circle\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z\"/>\n  </svg>\n  <span class=\"nhsuk-action-link__text\">\n    Start session<br>\n    <span class=\"nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19\">(11 cases)</span>\n  </span>\n</a>\n"
    },
    {
      "name": "with HTML via call block",
      "context": {
        "href": "#/start"
      },
      "callBlock": "Start session<br>\n<span class=\"nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19\">(11 cases)</span>",
      "screenshot": false,
      "options": {},
      "html": "<a class=\"nhsuk-action-link\" href=\"#/start\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right-circle\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z\"/>\n  </svg>\n  <span class=\"nhsuk-action-link__text\">\n    Start session<br>\n    <span class=\"nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19\">(11 cases)</span>\n  </span>\n</a>\n"
    },
    {
      "name": "as a button",
      "context": {
        "text": "Find your nearest A&E",
        "type": "submit"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-action-link"
      },
      "options": {},
      "html": "<button class=\"nhsuk-action-link\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right-circle\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z\"/>\n  </svg>\n  <span class=\"nhsuk-action-link__text\">\n    Find your nearest A&amp;E\n  </span>\n</button>\n"
    },
    {
      "name": "as a button",
      "description": "reverse",
      "context": {
        "text": "Find your nearest A&E",
        "type": "submit",
        "variant": "reverse"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-action-link"
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-action-link nhsuk-action-link--reverse\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right-circle\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z\"/>\n  </svg>\n  <span class=\"nhsuk-action-link__text\">\n    Find your nearest A&amp;E\n  </span>\n</button>\n"
    }
  ]
}