CTA Collection

Ready

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=#>
                Ipsum Dolar
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href=#>
                Larenoto
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href=#>
                Curabitur libero
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href=#>
                Nulla rutrum nulla
            </a>
        </li>
    </ul>
</div>

<div class="bux-cta-collection 
            {% if modifier %}
            bux-cta-collection--{{modifier}}
            {% endif %}
            ">
    <ul>
        {% for link in links %}
        <li>
            <a class="bux-cta-collection__link" href={{link.url}}>
                {% if modifier == 'icons' %}
                <span class="icon icon-{{ link.icon }}" aria-hidden="true"></span>
                {% endif %}
                {% if modifier == 'standard-icons' %}
                <img class="standard-icon" src="{{ link.icon }}" alt="" />
                {% endif %}
                {{link.name}}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

With UI Icons#

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

<div class="bux-cta-collection 
            {% if modifier %}
            bux-cta-collection--{{modifier}}
            {% endif %}
            ">
    <ul>
        {% for link in links %}
        <li>
            <a class="bux-cta-collection__link" href={{link.url}}>
                {% if modifier == 'icons' %}
                <span class="icon icon-{{ link.icon }}" aria-hidden="true"></span>
                {% endif %}
                {% if modifier == 'standard-icons' %}
                <img class="standard-icon" src="{{ link.icon }}" alt="" />
                {% endif %}
                {{link.name}}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

With Standard Icons#

<div class="bux-cta-collection bux-cta-collection--standard-icons">
  <ul>
      <li>
          <a class="bux-cta-collection__link" href="#">
              <img class="standard-icon" src="/img/location" alt="" />
              Ipsum Dolar
          </a>
      </li>
      <li>
          <a class="bux-cta-collection__link" href="#">
              <img class="standard-icon" src="/img/location" alt="" />
              Larenoto
          </a>
      </li>
      <li>
          <a class="bux-cta-collection__link" href="#">
              <img class="standard-icon" src="/img/location" alt="" />
              Curabitur libero
          </a>
      </li>
      <li>
          <a class="bux-cta-collection__link" href="#">
              <img class="standard-icon" src="/img/location" alt="" />
              Nulla rutrum nulla
          </a>
      </li>
  </ul>
</div>

<div class="bux-cta-collection 
            {% if modifier %}
            bux-cta-collection--{{modifier}}
            {% endif %}
            ">
    <ul>
        {% for link in links %}
        <li>
            <a class="bux-cta-collection__link" href={{link.url}}>
                {% if modifier == 'icons' %}
                <span class="icon icon-{{ link.icon }}" aria-hidden="true"></span>
                {% endif %}
                {% if modifier == 'standard-icons' %}
                <img class="standard-icon" src="{{ link.icon }}" alt="" />
                {% endif %}
                {{link.name}}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

With Grey Background#

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

<div class="bux-cta-collection 
            {% if modifier %}
            bux-cta-collection--{{modifier}}
            {% endif %}
            ">
    <ul>
        {% for link in links %}
        <li>
            <a class="bux-cta-collection__link" href={{link.url}}>
                {% if modifier == 'icons' %}
                <span class="icon icon-{{ link.icon }}" aria-hidden="true"></span>
                {% endif %}
                {% if modifier == 'standard-icons' %}
                <img class="standard-icon" src="{{ link.icon }}" alt="" />
                {% endif %}
                {{link.name}}
            </a>
        </li>
        {% endfor %}
    </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
- If you have 6 or more CTAs, consider using a Link List or Cards
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.