CTA Collection

Beta

A CTA Collection is two or more calls-to-action that appear in a row.

CTA Collection Variants#

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' %}
                <i class="icon icon-{{ link.icon }}"></i>
                {% endif %}
                {{link.name}}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

With Icons#

<div class="bux-cta-collection bux-cta-collection--icons">
  <ul>
      <li>
          <a class="bux-cta-collection__link" href='#'>
              <i class="icon icon-graph-pie"></i>
              Ipsum Dolar
          </a>
      </li>
      <li>
          <a class="bux-cta-collection__link" href='#'>
              <i class="icon icon-user"></i>
              Larenoto
          </a>
      </li>
      <li>
          <a class="bux-cta-collection__link" href='#'>
              <i class="icon icon-envelope"></i>
              Curabitur libero
          </a>
      </li>
      <li>
          <a class="bux-cta-collection__link" href='#'>
              <i class="icon icon-graph-pie"></i>
              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' %}
                <i class="icon icon-{{ link.icon }}"></i>
                {% 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' %}
                <i class="icon icon-{{ link.icon }}"></i>
                {% endif %}
                {{link.name}}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

Usage#

When to use#

A CTA Collection provides high emphasis — for the primary, most important, or most common action on a screen. It appears visually similar to a Tile, but does not allow for images (like the Image Tile).
You can choose if you have an icon in front of the text or not. In mobile, the icon will not show.

When to use something else#

If your call to action text is long then you might do a series of buttons or use Tiles or Cards.

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.