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

• Ipsum Dolar
• Larenoto
• Curabitur libero
• Nulla rutrum nulla

<div class="bux-cta-collection">
  <ul>
    <li>
      <a class="bux-cta-collection__link" href="#" rel="noopener">
        Ipsum Dolar
      </a>
    </li>
    <li>
      <a class="bux-cta-collection__link" href="#" rel="noopener">
        Larenoto
      </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>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

CTA Collection

Available variables:

- modifier:     Sets the style variant of the componet. Allowed values: 
                null, icons, standard-icons, gray  
- links:        An array containing the values for each displayed link
- link.url:     URL for the link
- link.name:    Display name for the link.
- link.icon:    If using icons modifier, takes the machine-name of the BUX icon
                library. If using the standard-icons modifier, takes a URL for
                an SVG icon.
#}


<div class="bux-cta-collection{% if modifier %} bux-cta-collection--{{modifier}}{% endif %}">
    <ul>
        {% for link in links %}
        <li>
            {% embed '@link' with {
                base_class: 'bux-cta-collection__link',
                link_url: link.url
            } %}
                {% block content %}
                    {% 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}}
                {% endblock %}
            {% endembed %}
        </li>
        {% endfor %}
    </ul>
</div>

With UI Icons

• Ipsum Dolar
• Larenoto
• Curabitur libero
• Nulla rutrum nulla

<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 Dolar
      </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>
        Larenoto
      </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>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

CTA Collection

Available variables:

- modifier:     Sets the style variant of the componet. Allowed values: 
                null, icons, standard-icons, gray  
- links:        An array containing the values for each displayed link
- link.url:     URL for the link
- link.name:    Display name for the link.
- link.icon:    If using icons modifier, takes the machine-name of the BUX icon
                library. If using the standard-icons modifier, takes a URL for
                an SVG icon.
#}


<div class="bux-cta-collection{% if modifier %} bux-cta-collection--{{modifier}}{% endif %}">
    <ul>
        {% for link in links %}
        <li>
            {% embed '@link' with {
                base_class: 'bux-cta-collection__link',
                link_url: link.url
            } %}
                {% block content %}
                    {% 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}}
                {% endblock %}
            {% endembed %}
        </li>
        {% endfor %}
    </ul>
</div>

With Standard Icons

• Ipsum Dolar
• Larenoto
• Curabitur libero
• Nulla rutrum nulla

<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="" />
        Ipsum Dolar
      </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="" />
        Larenoto
      </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="" />
        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="" />
        Nulla rutrum nulla
      </a>
    </li>
  </ul>
</div>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

CTA Collection

Available variables:

- modifier:     Sets the style variant of the componet. Allowed values: 
                null, icons, standard-icons, gray  
- links:        An array containing the values for each displayed link
- link.url:     URL for the link
- link.name:    Display name for the link.
- link.icon:    If using icons modifier, takes the machine-name of the BUX icon
                library. If using the standard-icons modifier, takes a URL for
                an SVG icon.
#}


<div class="bux-cta-collection{% if modifier %} bux-cta-collection--{{modifier}}{% endif %}">
    <ul>
        {% for link in links %}
        <li>
            {% embed '@link' with {
                base_class: 'bux-cta-collection__link',
                link_url: link.url
            } %}
                {% block content %}
                    {% 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}}
                {% endblock %}
            {% endembed %}
        </li>
        {% endfor %}
    </ul>
</div>

With Grey Background

• Ipsum Dolar
• Larenoto
• Curabitur libero
• Nulla rutrum nulla

<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 Dolar
      </a>
    </li>
    <li>
      <a class="bux-cta-collection__link bux-cta-collection__link--gray" href="#" rel="noopener">
        Larenoto
      </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>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

CTA Collection

Available variables:

- modifier:     Sets the style variant of the componet. Allowed values: 
                null, icons, standard-icons, gray  
- links:        An array containing the values for each displayed link
- link.url:     URL for the link
- link.name:    Display name for the link.
- link.icon:    If using icons modifier, takes the machine-name of the BUX icon
                library. If using the standard-icons modifier, takes a URL for
                an SVG icon.
#}


<div class="bux-cta-collection{% if modifier %} bux-cta-collection--{{modifier}}{% endif %}">
    <ul>
        {% for link in links %}
        <li>
            {% embed '@link' with {
                base_class: 'bux-cta-collection__link',
                link_url: link.url
            } %}
                {% block content %}
                    {% 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}}
                {% endblock %}
            {% endembed %}
        </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.