Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/functional.html#enrollment-option
The enrollment CTA was designed to be utilized in templates at the very bottom of every page directly before any site and global footer. For users that make it to this part of the page, it utilizes our three main CTA for enrollment audiences.
This component is designed to be a full-width (Section). There is one college variation enrollment-call-to-action–college for pages/sites that may need more college focused CTA wording.
Enrollment CTA Image: Our standard image size is 1600px (width) by 500px (height), 72 ppi (pixels per inch) jpeg or png.
<!-- Roadrunner Section -->
<section class="enrollment-wrapper" style="background-image: url('../../college-dls/utsa/images/Future-Roadrunner.png');">
<div class="container">
<div class="enrollment-content">
<span class="h5">Become a</span>
<h2>Roadrunner</h2>
<div class="roadrunner-btns">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12"> <a href="#" class="action-btn">Request Information <i class="fas fa-arrow-right"></i></a> </div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12"> <a href="#" class="action-btn">Visit Campus <i class="fas fa-arrow-right"></i></a> </div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12"> <a href="#" class="action-btn">Apply Now <i class="fas fa-arrow-right"></i></a> </div>
</div>
</div>
</div>
</div>
</section>
<!--End Roadrunner Section -->
/* components/02-components/06-call-to-actions/04-enrollment-call-to-action/enrollment-call-to-action.scss */
/* BEGIN enrollment-call-to-action.scss */
.enrollment-wrapper {
background-size: cover;
padding-top: 94px;
padding-bottom: 94px;
background-color: $blue;
// padding-left: 15px;
// padding-right: 15px;
.roadrunner-btns .action-btn {
padding-top: 22px;
padding-bottom: 22px;
background-color: $orange-a11y;
margin-bottom: 10px;
font-size: 20px;
color: $white;
width: 100%;
}
.action-btn:hover, .action-btn:focus {
background-color: $blue;
color: $white;
}
.roadrunner-btns .action-btn::after {
border-bottom: 80px solid rgba(255, 255, 255, 0.2);
}
h2, h4, h5 {
font-family: "kulturista-web", serif;
font-weight: 300;
color: $white;
}
.enrollment-content span.h5 {
font-size: 26px;
}
.enrollment-content h2 {
font-size: 5.5rem;
line-height: 110px;
font-weight: 500;
margin-top: 5px;
}
.roadrunner-btns {
margin-top: 95px;
}
.background-color-div {
height: 220px;
}
p {
font-size: 23px;
color: #fff;
text-align: center;
font-weight: 600;
}
@include media-breakpoint-down(lg) {
.roadrunner-btns .action-btn {
font-size: 14px;
padding-left: 10px;
padding-right: 10px;
}
.roadrunner-btns {
margin-top: 25px;
}
.enrollment-content h2 {
font-size: 4.5rem;
line-height: 1.55;
}
}
@include media-breakpoint-down(md) {
.enrollment-content h2 {
font-size: 3.5rem;
line-height: 1.25;
}
}
@include media-breakpoint-down(sm) {
.enrollment-content h2 {
font-size: 2.15rem;
line-height: 0.75;
}
}
@include media-breakpoint-down(lg) {
.background-color-div {
margin-bottom: 15px;
height: 220px;
}
}
}
/* END enrollment-call-to-action.scss */
<!-- Roadrunner Section -->
<section class="enrollment-wrapper" style="background-image: url('{{path '/college-dls/utsa/images/Future-Roadrunner.png'}}');">
<div class="container">
<div class="enrollment-content">
<span class="h5">{{ preheading }}</span>
<h2>{{ headline }}</h2>
<div class="roadrunner-btns">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12"> <a href="#" class="action-btn">{{ cta-action-01 }} <i class="fas fa-arrow-right"></i></a> </div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12"> <a href="#" class="action-btn">{{ cta-action-02 }} <i class="fas fa-arrow-right"></i></a> </div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12"> <a href="#" class="action-btn">{{ cta-action-03 }} <i class="fas fa-arrow-right"></i></a> </div>
</div>
</div>
</div>
</div>
</section>
<!--End Roadrunner Section -->