<div class="slide-wrapper" style="background-image: url(/img/maxresdefault.jpg);">
<div class="slide-content background_color">
<h2>This is the Heading</h2>
<div class="mobile-image">
<img src="/img/maxresdefault.jpg" alt="" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo.
</p>
<div class="slider_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 slider_buttons -->
</div>
<!-- end slide-content -->
</div>
{% if (heading) or (description) or (buttons) %}
{% set has_content = true %}
{% endif %}
<div class="slide-wrapper" style="background-image: url({{ slide_src_img }});">
<div class="slide-content{% if (has_content) %} background_color{% endif %}">
{% block headings %}
<h2>{{ heading }}</h2>
{% endblock headings %}
<div class="mobile-image">
<img src="{{ slide_src_img }}" alt=""/>
</div>
<p>
{% block cms_override_text %}
{{ description }}
{% endblock cms_override_text %}
</p>
{% block slider_buttons %}
<div class="slider_buttons">
{% for button in buttons %}
{% include "@a_tag" with button only %}
{% endfor %}
</div>
<!-- end slider_buttons -->
{% endblock slider_buttons %}
</div>
<!-- end slide-content -->
</div>
{
"content_block": "yes",
"slide_src_img": "/img/maxresdefault.jpg",
"heading": "This is the Heading",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo.",
"buttons": {
"1": {
"text": "Button 1",
"url": "#",
"color": "dark-grey"
},
"2": {
"text": "Button 2",
"url": "#",
"color": "dark-grey"
}
}
}
.slide {
&-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;
display: inline-block;
background-size: cover;
background-position: center;
@include media-breakpoint-down(md) {
background-image: none !important;
}
.slide-content {
position: unset;
z-index: 3;
@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;
}
&.background_color {
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);
}
}
}
}
&-content {
z-index: 3;
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: "+ "
}
}
}
}
.slider_buttons {
padding: 0 $spacer;
@include media-breakpoint-up(lg) {
padding: 0;
}
}
}
@include media-breakpoint-up(md) {
&-decoration {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
overflow: hidden;
&::before {
content: '';
display: block;
position: relative;
right: -450px;
bottom: -450px;
width: 0;
height: 0;
border-style: solid;
opacity: 0.9;
border-width: 450px;
transform: rotate(45deg);
}
//&.teal {
// &::before {
// border-color: transparent transparent transparent $highlight-teal;
// }
//}
//
//&.red {
// &::before {
// border-color: transparent transparent transparent $red;
// }
//}
//
//&.gold {
// &::before {
// border-color: transparent transparent transparent $gold;
// }
//}
//
//&.grey_dark {
// &::before {
// border-color: transparent transparent transparent $grey_darkest;
// }
//}
}
}
}
.slick-initialized {
.slick-slide {
max-height: 1000px;
}
}
Display a single item for the carousel/slider.