Skip to main content

Link

Information: Documentation incomplete

This component still requires documentation.

Use the link component to allow users to navigate to an internal or external page.

Examples

Default

Open example in a new window
View HTML 
<a class="uhb-c-link" href="https://www.nhs.uk/service-search/find-a-gp">Find a GP</a>

Inverse

Open example in a new window
View HTML 
<a class="uhb-c-link uhb-c-link--inverse" href="https://www.nhs.uk/service-search/find-a-gp">Find a GP</a>

Icon

Open example in a new window
View HTML 
<a class="uhb-c-link" href="https://www.nhs.uk/service-search/find-a-gp">
  <svg class="uhb-c-icon uhb-c-icon--external-link" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M16 20H4V8H12L14 6H2V22H18V10L16 12V20Z M14 4V2H22V10H20V5.41L13.41 12L11.9999 10.5901L18.59 4H14Z"></path>
  </svg>
  Find a GP
</a>

Inverse

Open example in a new window
View HTML 
<a class="uhb-c-link uhb-c-link--skip" href="#main-content">Skip to main content</a>