BUX Component Development Platform

CTA in page 

<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
  • Content: 
    .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;
    }
}
  • URL: /components/raw/cta-in-page/_cta-in-page.scss
  • Filesystem Path: src/components/cta-in-page/_cta-in-page.scss
  • Size: 465 Bytes

No notes defined.