Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/functional.html#call-highlight-component
Like the CTA, 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. In addition, this component allows for either a right or left sided image.
CTA Media Image: Our standard image size is 600px (width) by 400px (height), 72 ppi (pixels per inch) jpeg or png.
<section class="content-img-design pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="ratio ratio-16x9">
<lite-youtube videotitle="Really Important Video" videoid="dQw4w9WgXcQ" nocookie="true" autoload="true">
<a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Really Important Video"</a>
</lite-youtube>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Headline</h2>
<div class="paragraph-text">
<h3 class='h5'>Some heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<div class='row'>
<div class='col'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</div>
</div>
</div>
<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>
</div>
</div>
</div>
</section>
/* components/02-components/06-call-to-actions/02-call-to-action-image/call-to-action-image.scss */
/* BEGIN call-to-action-image.scss */
.content-img-design {
// .heading-paragraph-design p {
// margin-bottom:50px;
// }
.images-design img {
width: 100%;
height: 100%;
}
.heading-paragraph-design .blue-action-btn {
.action-btn {
margin-bottom: 5px;
}
}
.heading-paragraph-design {
h3 {
color: $orange-a11y;
font-size: 2.25rem;
}
h4 {
color: $blue;
font-size: 2rem;
}
h5 {
color: $blue;
font-size: 1.75rem;
}
h6 {
color: $blue;
font-size: 1.5rem;
}
}
&.offset-left::after {
margin-left: auto;
}
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
}
// Orange Variant
&.orange-offset-bg {
padding-top: 40px;
padding-bottom: 40px;
position: relative;
z-index: 0;
// .row {
// margin: 0px;
// }
.heading-paragraph-design {
h2, h3 {
color: $white;
}
h4, h5, h6 {
color: $blue;
}
.blue-action-btn>.action-btn:hover, .blue-action-btn>.action-btn:focus {
background-color: $grey-c;
}
}
.paragraph-text {
color: $white;
a {
color:$white;
&:hover {
color: $blue;
}
}
}
&::after {
content: '';
background-color: $orange-a11y !important;
z-index: -1;
max-width: 71vw;
background: -o-repeating-linear-gradient( 45deg, $transpa, $transpa 2px, $transpb 4px, $transpa 7px);
background: repeating-linear-gradient( 45deg, $transpa, $transpa 2px, $transpb 4px, $transpa 7px);
@include media-breakpoint-down(md) {
max-width: 100vw;
}
}
}
// Blue Variant
&.blue-offset-bg {
padding-top: 40px;
padding-bottom: 40px;
position: relative;
z-index: 0;
// .row {
// margin: 0px;
// }
.heading-paragraph-design {
h2, h3 {
color: $white;
}
h4, h5, h6 {
color: $orange;
}
.orange-action-btn>.action-btn:hover, .orange-action-btn>.action-btn:focus {
background-color: $grey-c;
}
}
.paragraph-text {
color: $white;
a {
color:$white;
&:hover {
color: $blue;
}
}
}
&::after {
content: '';
background-color: $blue !important;
z-index: -1;
max-width: 71vw;
background: -o-repeating-linear-gradient( 45deg, $transpa, $transpa 2px, $transpb 4px, $transpa 7px);
background: repeating-linear-gradient( 45deg, $transpa, $transpa 2px, $transpb 4px, $transpa 7px);
@include media-breakpoint-down(md) {
max-width: 100vw;
}
}
.orange-action-btn>.action-btn {
margin-bottom: 5px;
}
}
.heading-paragraph-design, .images-design {
@extend .py-2;
@extend .px-2;
}
}
/* Dark Mode - CTA Image */
@include color-mode(dark) {
.content-img-design {
.heading-paragraph-design {
.h3 {
color: $orange;
}
.h4, .h5, .h6 {
color: $grey;
}
.blue-action-btn .action-btn {
&:hover {
color: $white;
}
}
.paragraph-text p, ul li, ol li, div {
color: $white;
}
}
&.grey-bg .heading-paragraph-design {
.h3, .h4, .h5, .h6 {
color: $blue;
}
.paragraph-text p, ul li, ol li, div {
color: $blue;
}
}
&.orange-offset-bg .heading-paragraph-design {
.h3 {
color: $white;
}
.h4, .h5, .h6 {
color: $grey-e;
}
}
.paragraph-text p {
color: $white;
}
}
}
/* Dark Mode - CTA Image END */
@include media-breakpoint-down(md) {
.content-img-design {
.heading-paragraph-design .action-btn {
width: 100%;
display: block;
}
}
}
/* END call-to-action-image.scss */
<section class="content-img-design pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="ratio ratio-16x9">
{{ render '@video-embed' }}
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">{{ headline }}</h2>
<div class="paragraph-text">
{{{ content }}}
</div>
<div class="blue-action-btn">
{{#each actions}}
{{#if @first}}
<a href="{{ url }}" class="action-btn"> {{ text }} <i class="fas fa-arrow-right"
aria-hidden="true"></i></a>
{{/if}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
</section>