Skip to main content

Styled Links

Use a styled link to navigate a user to a different web page. A styled link is a hyperlink or an anchor link that visually looks like a button.

The HTML syntax uses the anchor element(with the `href` attribute) rather than the button element.

Navigate user to external web page:
To navigate the user to an external web page use the HTML attribute of target and the value of "_blank". The HTML syntax that will take the user to the external web page is: target=”_blank”.

The primary styled link should be used for the main call to action on a web page. For example, to navigate the user to another web page where they can complete their task.

<a class="button primary" href="#" role="button">Primary Styled Link</a>

For an important action there can be more than one styled link on a web page, even if there is already a primary styled link. All secondary styled links used on a page must be the same height as the primary styled link.

<a class="button primary" href="#" role="button">Secondary styled link</a>

Use the styled link with the right arrow icon to navigate user to the next page. Use the styled link with the left arrow icon to navigate user to the previous page. IcoMoon - Pixel Perfect Icon Solutions: https://icomoon.io/app/#/select

  • import icons from fonts/selection.json
  • and add a new one.
<a class="button primary icon-left" href="#" role="button">
  Download
  <i class="bcc-font_download" aria-hidden="true"></i>
</a>

<a class="button primary icon-left" href="#" role="button">
  Previous
  <i class="bcc-font_left" aria-hidden="true"></i>
</a>

<a class="button primary icon-right" href="#" role="button">
  Next
  <i class="bcc-font_right" aria-hidden="true"></i>
</a>

Styled link with help text​

Apply help text below a styled link when you want to add further information to help with accessibility and guidance.

All complaints are confidential
<div class="button-no-group">
  <a class="button primary icon-right" href="#" role="button">
    Primary Styled Link
    <i class="bcc-font_right" aria-hidden="true"></i>
  </a>
  <small class="lightcopy">All complaints are confidential</small>
</div>

Styled link group with help text​

Apply group of styled links with help text when you want to add further information to help with accessibility and guidance.

All complaints are confidential
All complaints are confidential
All complaints are confidential
<div class="button-group">
  <div class="is-d-flex is-flex-column">
    <a class="button primary icon-right" href="#" role="button">
      Styled link group
      <i class="bcc-font_right" aria-hidden="true"></i>
    </a>
    <small class="lightcopy">All complaints are confidential</small>
  </div>
</div>

Styled link with hint text​

Use a styled link with hint text when you want to help the user understand more context about the call to action.

If you'd still like to make a complaint or give feedback complete our online form.
<div class="button-group">
  <small class="lightcopy">
    If you'd still like to make a complaint or give feedback complete our online
    form.
  </small>
</div>
<div class="button-no-group">
    <a class="button primary icon-right" href="#" role="button">
      Primary Styled link
      <i class="bcc-font_right" aria-hidden="true"></i>
    </a>
</div>