<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>
{#
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 '@image' %}
{% 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>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
image_url: /images/placeholders/osu-bux-5.jpg
image_alt_text: Graduates performing the O-H-I-O pose
cta_header: Call-to-Action Headline
cta_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.
button_link: '#'
button_text: Call to Action
.bux-cta-in-page {
text-align: center;
margin: auto;
margin-top: $sp-16;
margin-bottom: $sp-16;
border-top: 2px solid $gray-light-80;
border-bottom: 2px solid $gray-light-80;
padding-top: $sp-32;
padding-bottom: $sp-32;
&__text {
margin-bottom: $sp-16;
}
.bux-image {
max-width: 300px;
aspect-ratio: 16/9;
object-fit: cover;
margin: auto;
padding-bottom: $sp-24;
}
}
No notes defined.