Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/functional.html#call-highlight-component
This component is designed to be full-width (Section) and has a short headline and optional short message. The focus here is on the action button. Up to two different actions are supported, but for most use cases only one should be used.
<section class="headline-text-btn-wrapper">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Headline</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> Last Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
/* components/02-components/06-call-to-actions/01-call-to-action-buttons/call-to-action-buttons.scss */
/* BEGIN call-to-action-buttons.scss */
/* padding was missing from the white background option (default variant) */
.headline-text-btn-wrapper {
.container > .row {
@extend .py-5;
@extend .px-2;
}
.paragraph-text p {
color: $blue;
}
.orange-action-btn, .blue-action-btn{
margin-bottom:5px
}
.heading-wrapper h4 {
font-size: 32px;
// color: $blue;
font-weight: 700;
}
.headline-text-orange-btns {
background-color: $orange-a11y;
background: -o-repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 7px, rgba(255, 255, 255, 0.1) 7px);
background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 7px, rgba(255, 255, 255, 0.1) 7px);
padding: 51px 30px;
}
// Grey Variant
&.grey-bg {
.heading-wrapper h2 {
color: $blue;
}
.paragraph-text p {
color: $blue;
}
}
// Orange Variant
&.orange-a11y-bg {
.heading-wrapper h2 {
color: $white;
}
// .heading-wrapper {
// color: $white;
// }
.paragraph-text p {
color: $white;
}
.blue-action-btn>.action-btn:hover, .blue-action-btn>.action-btn:focus {
background-color: $grey-c;
}
}
// Blue Variant
&.blue-bg {
.heading-wrapper h2 {
color: $white;
}
p {
color: $white;
}
.orange-action-btn>.action-btn:hover, .orange-action-btn>.action-btn:focus {
background-color: $grey-c;
}
}
.headline-text-blue-bg-wrapper .orange-action-btn {
margin-bottom: 5px;
}
.paragraph-text p {
line-height: 1.5;
}
@include media-breakpoint-up(lg) {
.headline-text-btn-wrapper {
padding: 45px 0px;
}
}
@include media-breakpoint-down(lg) {
.heading-wrapper .display-block {
display: inline-block;
}
}
}
/* Dark Mode - CTA Buttons Styles */
@include color-mode(dark) {
.headline-text-btn-wrapper .paragraph-text p {
color: $white;
}
.headline-text-btn-wrapper.grey-bg .paragraph-text p {
color: $blue;
}
.blue-action-btn .action-btn {
color:$white;
&:hover {
background-color: $orange-a11y;
}
}
.orange-a11y-bg .blue-action-btn .action-btn {
color:$white;
&:hover {
background-color: $grey-c;
}
}
.orange-action-btn .action-btn {
color:$white;
&:hover {
background-color: $grey-c;
}
}
.headline-text-btn-wrapper .blue-action-btn a.action-btn {
&:hover {
color: $white;
}
}
.headline-text-btn-wrapper.grey-bg .blue-action-btn a.action-btn {
color: $white;
&:hover {
background-color: $orange-a11y;
}
}
}
/* CTA Buttons END */
@include media-breakpoint-down(lg) {
.heading-wrapper {
margin-bottom: 20px;
}
.heading-wrapper h4 {
font-size: 24px;
margin-bottom: 20px;
}
}
/* END call-to-action-buttons.scss */
<section class="headline-text-btn-wrapper">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">{{ headline }}</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>{{ text }}</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
{{#each actions}}
<div class="blue-action-btn">
<a href="{{ url }}" class="action-btn"> {{ text }} <i class="fas fa-arrow-right"
aria-hidden="true"></i></a>
</div>
{{/each}}
</div>
</div>
</div>
</section>