CTA in Page

Component status:Ready

This component displays a call-to-action among other content on a webpage.

A CTA in Page component displays an (optional) image, (required) title, (optional) body, and (required) Button. It is designed to appear in the Story Page template, but can be appear in other webpages. It is designed to be concise and clear, either interrupting body copy or as a final call-to-action.

Examples

Default

Call-to-Action Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis rhoncus ipsum. Ut eget blandit mauris, a malesuada felis. Integer in sagittis odio. Sed a odio eget tortor congue egestas. Sed lacinia dignissim libero.

Call to Action

<div class="bux-cta-in-page">
  <img
    class="bux-image bux-image--16x9"
    src="/images/placeholders/osu-bux-5.jpg"
    alt="Graduates performing the O-H-I-O pose"
  />

  <h2>Call-to-Action Headline</h2>

  <div class="bux-cta-in-page__text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis rhoncus
    ipsum. Ut eget blandit mauris, a malesuada felis. Integer in sagittis odio.
    Sed a odio eget tortor congue egestas. Sed lacinia dignissim libero.
  </div>

  <a class="bux-button" href="">Call to Action</a>
</div>

{#
Buckeye UX - version 1.1.0
Copyright (C) 2025 The Ohio State University
#}

{# 

CTA in page

Available variables:

image_url:      Optional. Sets image URL if used.
image_alt_text: Optional but required for image use.
heading_level:  Sets heading level. Default is 2.
cta_header:     Content of header.
cta_text:       Content of cta text.
button_url:     Link for CTA button.
button_text:    Label text for CTA button.

#}

<div class="bux-cta-in-page">

   {% if image_url and image_alt_text %}
        {% set class = "bux-image--16x9" %}
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% endif %}

    <h{{ heading_level|default(2) }}>{{ cta_header }}</h{{ heading_level|default(2) }}>


    {% if cta_text %}

    <div class="bux-cta-in-page__text">
        {{ cta_text }}
    </div>

    {% endif %}

    <a class="bux-button" href="{{ button_url }}">{{ button_text }}</a>
  
</div>

Usage

Dos

• Write a concise heading with a clear, concise (optional) description.
• Include an image, if possible, in order to help draw emphasis to this component.
• Use in moderation. Limit to two components on a single webpage because multiple will detract from the webpage’s main content.
  • If using one CTA within Page component on a webpage, it is best practice to use the Primary variant of the Button.
  • If using two CTA within Page components on a webpage, it is best practice to use the Alternate variant of the Button within each component.

Don’ts

• Don’t start content with this component. It is designed to either interrupt content or be a final call-to-action near the bottom of content on a webpage.

Accessibility

• The CTA in Page heading is coded as an h2 heading. This is built this way to follow the h1 heading of the page title. Since CTA in Page components are meant to break out from the content of the page the h2 heading should hold.