Skip to main content

CTA Collection

Displays two or more calls-to-action that appear in a row

A CTA Collection provides high emphasis – for the primary, most important, or most common actions among content. An icon can provide meaning or clarification when paired with a CTA. However, it is not required. All icons are hidden on mobile devices.

Examples​

Default​

<div class="bux-cta-collection">
  <ul>
    <li>
      <a class="bux-cta-collection__link" href="#" rel="noopener">
        Ipsum dolor
      </a>
    </li>
    <li>
      <a class="bux-cta-collection__link" href="#" rel="noopener">Curabitur</a>
    </li>
    <li>
      <a class="bux-cta-collection__link" href="#" rel="noopener">
        Curabitur libero
      </a>
    </li>
    <li>
      <a class="bux-cta-collection__link" href="#" rel="noopener">
        Nulla rutrum nulla
      </a>
    </li>
  </ul>
</div>

With UI Icons​

<div class="bux-cta-collection bux-cta-collection--icons">
  <ul>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--icons"
        href="#"
        rel="noopener"
      >
        <span class="icon icon-graph-pie" aria-hidden="true"></span>
        Ipsum dolor
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--icons"
        href="#"
        rel="noopener"
      >
        <span class="icon icon-user" aria-hidden="true"></span>
        Curabitur
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--icons"
        href="#"
        rel="noopener"
      >
        <span class="icon icon-envelope" aria-hidden="true"></span>
        Curabitur libero
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--icons"
        href="#"
        rel="noopener"
      >
        <span class="icon icon-graph-pie" aria-hidden="true"></span>
        Nulla rutrum nulla
      </a>
    </li>
  </ul>
</div>

With Standard Icons​

<div class="bux-cta-collection bux-cta-collection--standard-icons">
  <ul>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--standard-icons"
        href="#"
        rel="noopener"
      >
        <img
          class="standard-icon"
          src="/images/placeholders/grad_cap_icon_standard.svg"
          alt=""
          height=""
          width=""
        />
        Ipsum dolor
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--standard-icons"
        href="#"
        rel="noopener"
      >
        <img
          class="standard-icon"
          src="/images/placeholders/grad_cap_icon_standard.svg"
          alt=""
          height=""
          width=""
        />
        Curabitur
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--standard-icons"
        href="#"
        rel="noopener"
      >
        <img
          class="standard-icon"
          src="/images/placeholders/grad_cap_icon_standard.svg"
          alt=""
          height=""
          width=""
        />
        Curabitur libero
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--standard-icons"
        href="#"
        rel="noopener"
      >
        <img
          class="standard-icon"
          src="/images/placeholders/grad_cap_icon_standard.svg"
          alt=""
          height=""
          width=""
        />
        Nulla rutrum nulla
      </a>
    </li>
  </ul>
</div>

With Grey Background​

<div class="bux-cta-collection bux-cta-collection--gray">
  <ul>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--gray"
        href="#"
        rel="noopener"
      >
        Ipsum dolor
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--gray"
        href="#"
        rel="noopener"
      >
        Curabitur
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--gray"
        href="#"
        rel="noopener"
      >
        Curabitur libero
      </a>
    </li>
    <li>
      <a
        class="bux-cta-collection__link bux-cta-collection__link--gray"
        href="#"
        rel="noopener"
      >
        Nulla rutrum nulla
      </a>
    </li>
  </ul>
</div>

Usage​

Dos​

  • Use occasionally; limit to one per page
  • Use near the top of the page, ideally on a Landing page layout, following a Hero Image, Featured Card or other visual component
  • Use 2-5 CTAs, staying within a single line
  • Keep text action-oriented and concise
  • Use Icons if they are relevant and meaningful
  • Use the default (white background) variant if other components on the page have visual emphasis
  • Use the gray background variant if other components on the page lack visual emphasis

Don’ts​

  • Don’t use a CTA Collection more than once per page
  • Don’t overuse this component for links; rely on other components
  • Don’t include Icons if they are irrelevant to the text

Implementation Notes​

  • Recommended quantity of CTAs is 2-5, staying within a single line, not breaking to two lines
  • In mobile they will stack individually on top of each other

Accessibility​

  • Make sure people understand the purpose of each of the links
  • Ensure that icons’ empty alt attribute (alt="") is not removed and that it remains empty. This hides the icons from assistive technology and is desirable because their meaning should be redundant to the text in the link.
Back to top