Calls To Action

This pattern is used for call to action links to allows user to navigate around the site.

Contents

Pink CTA

The Pink CTA includes a right chevron at the beginning of link.

<div class="cr-cta-link" role="navigation">
  <a class="cr-cta-link__link" href="http://www.cancerresearchuk.org/about-cancer/breast-cancer/about">
    <i class="cr-cta-link__icon" aria-hidden="true"></i>
    <span class="cr-cta-link__text">Find out about breast cancer</span>
  </a>
</div>

Print icon with call to action

The Print icon with call to action includes a right icon at the beginning of the link.

How it would be used:

Print page 
<div class="cr-print-link">
  <a href="#" id="cr-print-link__link">
    <i class="cr-i cr-i--print" aria-hidden="true"></i>Print page
  </a>
</div>