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.
<section class="enrollment-wrapper " style="background-image: url('../../college-dls/utsa/images/Future-Roadrunner.png');">
<div class="container">
<div class="enrollment-content text-center">
<h2>Interested in Health, <br> Community or Policy?</h2>
<p>Reach out today to find out more about our programs</p>
<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" aria-hidden="true"></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" aria-hidden="true"></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 <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</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 */
<section class="enrollment-wrapper " style="background-image: url('{{path '/college-dls/utsa/images/Future-Roadrunner.png'}}');">
<div class="container">
<div class="enrollment-content text-center">
<h2>Interested in Health, <br> Community or Policy?</h2>
<p>Reach out today to find out more about our programs</p>
<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" aria-hidden="true"></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" aria-hidden="true"></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 <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>