{
  "name": "Action link",
  "component": "action-link",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "text": "Find your nearest A&E",
        "href": "#"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-action-link"
      },
      "options": {},
      "html": "<a class=\"nhsuk-action-link\" href=\"#\">\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\">Find your nearest A&amp;E</span>\n</a>"
    },
    {
      "name": "default",
      "description": "reverse",
      "context": {
        "text": "Find your nearest A&E",
        "href": "#",
        "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=\"#\">\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\">Find your nearest A&amp;E</span>\n</a>"
    },
    {
      "name": "as a button",
      "context": {
        "text": "Find your nearest A&E",
        "element": "button"
      },
      "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\">Find your nearest A&amp;E</span>\n</button>"
    },
    {
      "name": "as a button",
      "description": "reverse",
      "context": {
        "text": "Find your nearest A&E",
        "element": "button",
        "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\">Find your nearest A&amp;E</span>\n</button>"
    }
  ]
}