<div class="cta-wrapper left" style="background-image: url('/img/maxresdefault.jpg');">
<div class="cta-content ">
<h2>This is the Heading</h2>
<div class="mobile-image">
<img src="/img/maxresdefault.jpg" alt="" />
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun.
<div class="cta_buttons">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button 1</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button 2</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
<!-- end cta_buttons -->
</div>
<!-- end cta-content -->
</div>
{% if (heading) or (description) or (buttons) %}
{% set has_content = true %}
{% endif %}
<div class="cta-wrapper {{ align_text }}" style="background-image: url('{{ cta_img }}');">
<div class="cta-content {% if cta_color %}{{ cta_color }}{% endif %}">
{% block title %}
<h2>{{ heading }}</h2>
{% endblock title %}
<div class="mobile-image">
<img src="{{ cta_img }}" alt=""/>
</div>
{% block body_content %}
{{ description }}
{% endblock body_content %}
{% block buttons %}
<div class="cta_buttons">
{% for button in buttons %}
{% include "@a_tag" with button only %}
{% endfor %}
</div>
<!-- end cta_buttons -->
{% endblock buttons %}
</div>
<!-- end cta-content -->
</div>
{
"content_block": "yes",
"cta_img": "/img/maxresdefault.jpg",
"heading": "This is the Heading",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun.",
"align_text": "left",
"buttons": {
"1": {
"text": "Button 1",
"url": "#",
"color": "dark-grey"
},
"2": {
"text": "Button 2",
"url": "#",
"color": "dark-grey"
}
}
}
.cta {
&-wrapper {
position: relative;
margin-bottom: $space_and_half;
aspect-ratio: 16 / 9;
width: 100%; //this is for the styleguide the style on line 16 is for Drupal websites
max-height: 1000px;
max-width: 60em;
display: inline-block;
background-size: cover;
background-position: center;
@include media-breakpoint-down(md) {
background-image: none !important;
}
}
&-content {
position: unset;
z-index: 3;
background-color: $white;
background-color: var(--white, $white);
.color-scheme-dark & {
background-color: $dark_mode_grey;
background-color: var(--dark_mode_grey, $dark_mode_grey);
}
@include media-breakpoint-up(lg) {
position: absolute;
bottom: 5%;
left: $space_seven;
width: 60%;
padding: $spacer;
overflow: hidden;
text-overflow: ellipsis;
}
@include media-breakpoint-up(xl) {
position: absolute;
bottom: 20%;
left: $space_seven;
width: 50%;
padding: $spacer;
overflow: hidden;
text-overflow: ellipsis;
}
h2 {
color: $lehigh_brown;
font-size: 1.5rem;
font-weight: bold;
padding: 0 $spacer;
.color-scheme-dark & {
color: $lehigh_brown_darkmode;
}
@include media-breakpoint-up(lg) {
padding: 0;
}
}
h3 {
color: $grey_darkest;
font-size: 1.1rem;
font-weight: bold;
padding: 0 $spacer;
.color-scheme-dark & {
color: $lehigh_brown_darkmode;
}
@include media-breakpoint-up(lg) {
padding: 0;
}
}
img {
@include img;
margin: $spacer 0;
z-index: 1;
@include media-breakpoint-up(lg) {
display: none !important;
}
}
p {
padding: 0 $spacer;
@include media-breakpoint-up(md) {
padding: 0;
}
&.read-more {
margin: $space_two 0 0 0;
a {
color: $grey_darkest;
font-weight: bold;
&::before {
content: "+ "
}
}
}
}
.btn {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
border: 1px solid $grey_darkest;
border: 1px solid var(--grey_darkest, $grey_darkest);
color: $white;
color: var(--white, $white);
&:hover,
&:focus {
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
background-color: $white;
background-color: var(--white, $white);
}
.color-scheme-dark & {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
border: 1px solid $grey_darkest;
border: 1px solid var(--grey_darkest, $grey_darkest);
color: $white;
color: var(--white, $white);
&:hover,
&:focus {
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
background-color: $white;
background-color: var(--white, $white);
}
}
}
.cta_buttons {
padding: 0 $spacer;
@include media-breakpoint-up(lg) {
padding: 0;
}
}
.right & {
right: 7rem;
left: unset;
}
.center & {
@include media-breakpoint-up(lg) {
left: 50%;
transform: translate(-50%, 0%);
}
}
&.white {
background-color: $white;
background-color: var(--white, $white);
color: $base-font;
color: var(--base-font, $base-font);
h2 {
color: $grey_darkest;
}
.btn {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
border: 1px solid $grey_darkest;
border: 1px solid var(--grey_darkest, $grey_darkest);
color: $white;
color: var(--white, $white);
&:hover,
&:focus {
background-color: $white;
background-color: var(--white, $white);
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
}
}
}
&.beige {
background-color: $gold_20;
background-color: var(--gold_20, $gold_20);
color: $base-font;
color: var(--base-font, $base-font);
h2 {
color: $grey_darkest;
}
.btn {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
border: 1px solid $grey_darkest;
border: 1px solid var(--grey_darkest, $grey_darkest);
color: $white;
color: var(--white, $white);
&:hover,
&:focus {
background-color: $white;
background-color: var(--white, $white);
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
}
}
}
&.teal {
background-color: $teal_60;
background-color: var(--teal_60, $teal_60);
color: $base-font;
color: var(--base-font, $base-font);
h2 {
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
}
.btn {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
border: 1px solid $grey_darkest;
border: 1px solid var(--grey_darkest, $grey_darkest);
color: $white;
color: var(--white, $white);
&:hover,
&:focus {
background-color: $white;
background-color: var(--white, $white);
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
}
}
}
&.dark_grey {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
color: $white;
color: var(--white, $white);
h2 {
color: $white;
color: var(--white, $white);
}
.btn {
background-color: $white;
background-color: var(--white, $white);
border: 1px solid $white;
border: 1px solid var(--white, $white);
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
&:hover,
&:focus {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
color: $white;
color: var(--white, $white);
}
}
}
&.blue {
background-color: $blue_60;
background-color: var(--blue_60, $blue_60);
color: $base-font;
color: var(--base-font, $base-font);
h2 {
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
}
.btn {
background-color: $white;
background-color: var(--white, $white);
border: 1px solid $white;
border: 1px solid var(--white, $white);
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
&:hover,
&:focus {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
color: $white;
color: var(--white, $white);
}
}
}
&.lehigh {
background-color: $lehigh_brown;
background-color: var(--lehigh_brown, $lehigh_brown);
color: $white;
color: var(--white, $white);
h2 {
color: $white;
color: var(--white, $white);
}
.btn {
background-color: $white;
background-color: var(--white, $white);
border: 1px solid $white;
border: 1px solid var(--white, $white);
color: $lehigh_brown;
color: var(--lehigh_brown, $lehigh_brown);
&:hover,
&:focus {
background-color: $lehigh_brown;
background-color: var(--lehigh_brown, $lehigh_brown);
color: $white;
color: var(--white, $white);
}
}
}
&.dark_blue {
background-color: $blue_k60;
background-color: var(--blue_k60, $blue_k60);
color: $white;
color: var(--white, $white);
h2 {
color: $white;
color: var(--white, $white);
}
.btn {
background-color: $white;
background-color: var(--white, $white);
border: 1px solid $white;
border: 1px solid var(--white, $white);
color: $blue_k60;
color: var(--blue_k60, $blue_k60);
&:hover,
&:focus {
background-color: $blue_k60;
background-color: var(--blue_k60, $blue_k60);
color: $white;
color: var(--white, $white);
}
}
}
}
}
.slick-initialized {
.slick-slide {
max-height: 1000px;
}
}
Display Call to Action with text on top of the image section white option.