name: Action link
description: Use action links to help users get to the next stage of a journey quickly.
shared_accessibility_criteria:
  - link
examples:
  default:
    data:
      text: Go to NHS 111 online
      href: "/page"
  with_bottom_margin:
    data:
      text: Look at this margin
      href: "/page"
      margin_bottom: 9
  with_data_attributes:
    data:
      text: "Coronavirus (COVID-19)"
      href: "/page"
      data:
        attr_test: "hasDataAttribute"
  with_js_classes:
    description: Use `js-` prefixed classes only as interaction hooks – to query and operate on elements via JavaScript. Classes are added to the link itself.
    data:
      text: "Coronavirus (COVID-19)"
      href: "/page"
      classes: 'js-hook'
  with_no_wrapping_text:
    data:
      text: "Coronavirus (COVID-19):"
      nowrap_text: what you need to do
      href: "/page"
  with_light_text:
    data:
      text: "Coronavirus (COVID-19)"
      href: "/page"
      light_text: true
    context:
      dark_background: true
  with_transparent_svg:
    data:
      text: Find out what you need to do
      href: "/page"
      light_text: true
      transparent_icon: true
    context:
      dark_background: true
  with_subtext:
    data:
      text: Emergency something
      href: "/page"
      subtext: This is about the emergency
  with_subtext_on_a_dark_background:
    data:
      text: Emergency something
      href: "/page"
      subtext: This is about the emergency that is happening right now unfortunately so pay attention
      light_text: true
    context:
      dark_background: true
  mobile_subtext:
    description: Lock the subtext beneath the main text, so the component with subtext always appears as it does on mobile.
    data:
      text: Try not to panic now
      href: "/page"
      subtext: "The thing that is happening is pretty scary but we'll get through it"
      mobile_subtext: true
  with_link_on_subtext:
    description: The subtext can also be a link if required. The link on the main text is optional.
    data:
      text: Remain calm
      subtext: Better things are ahead
      subtext_href: "/page"
  with_link_on_subtext_on_a_dark_background:
    data:
      text: Remain calm
      subtext: Better things are ahead
      subtext_href: "/page"
      light_text: true
    context:
      dark_background: true
  white_arrow:
    data:
      text: Find out how to stay safe and help prevent the spread
      href: "/something"
      white_arrow: true
      light_text: true
    context:
      dark_background: true
  blue_arrow:
    data:
      text: Find out how to stay safe and help prevent the spread
      href: "/something"
      blue_arrow: true
  simple_arrow:
    data:
      text: Getting financial help and keeping your business safe
      href: "/financial-help"
      simple: true
  simple_light_arrow:
    data:
      text: Getting financial help and keeping your business safe
      href: "/financial-help"
      light_text: true
      simple_light: true
    context:
      dark_background: true
  with_small_icon:
    data:
      text: Coronavirus (COVID-19)
      href: "/my-test-page"
      small_icon: true
  with_dark_icon:
    data:
      text: Coronavirus (COVID-19)
      href: "/my-test-page"
      dark_icon: true
  with_brexit_icon_and_custom_font_size:
    data:
      text: Guidance for businesses
      href: "/guidance-for-businesses"
      brexit_icon: true
      font_size: m
  with_nhs_icon:
    data:
      text: Something about the NHS
      subtext: Perhaps you'd like to click here
      subtext_href: "/page"
      mobile_subtext: true
      nhs_icon: true