<div class="hero-wrapper_banner" style="background-image: url('/img/maxresdefault.jpg');"></div>
<div class="hero-wrapper_banner" style="background-image: url('{{ hero_src_img }}');"></div>
{
"content_block": "yes",
"hero_src_img": "/img/maxresdefault.jpg",
"hero_img_alt": "volcano",
"hero_heading": "This is the Heading",
"hero_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.",
"align_text": "left",
"has_content": true,
"buttons": {
"1": {
"text": "Action Button 1",
"url": "#",
"color": "dark-grey"
},
"2": {
"text": "Action Button 2",
"url": "#",
"color": "dark-grey"
}
}
}
.hero {
&-wrapper {
position: relative;
margin-bottom: $space_and_half;
aspect-ratio: 8 / 3;
width: 100%; //this is for the styleguide the style on line 16 is for Drupal websites
display: inline-block;
background-size: cover;
background-position: center;
@include media-breakpoint-down(lg) {
aspect-ratio: 2 / 1;
}
@include media-breakpoint-down(sm) {
background-image: none !important;
}
// this is for the Drupal websites
main & {
width: calc(100% + 10vw);
margin-left: -5vw;
margin-top: $space_neg_one;
}
// this is for the heros within content of page
section#page-content & {
width: 100%;
margin-left: unset;
}
.hero-content {
position: unset;
z-index: 3;
&.background_color {
background-color: $white;
.color-scheme-dark & {
background-color: $dark_mode_grey;
}
}
@include media-breakpoint-up(md) {
position: absolute;
top: $space_two;
width: 40%;
margin: $spacer 0;
padding: $spacer;
overflow: hidden;
text-overflow: ellipsis;
&.left {
left: $space_seven;
}
&.right {
right: $space_seven;
}
}
@include media-breakpoint-only(md) {
&.left,
&.right {
width: unset;
left: $space_seven;
right: $space_seven;
}
}
.hero-text-container {
margin: 0 0 $space-one-half 0;
max-height: 9rem;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
}
.hero-image {
display: none;
margin-left: -$gutter_width;
margin-right: -$gutter_width;
@include media-breakpoint-up(md) {
display: block;
z-index: 1;
img {
width: 100%;
max-height: 480px;
}
}
}
&_banner {
position: relative;
margin-bottom: $space_and_half;
aspect-ratio: 1920 / 500;
width: 100%; //this is for the styleguide the style on line 16 is for Drupal websites
max-height: 500px;
display: inline-block;
background-size: cover;
background-position: center;
width: calc(100% + 10vw);
margin-left: -5vw;
margin-top: $space_neg_one;
}
}
&-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(md) {
padding: 0;
}
}
h3 {
color: $grey_darkest;
font-size: 1.1rem;
font-weight: bold;
padding: 0 $spacer;
@include media-breakpoint-up(md) {
padding: 0;
}
}
img {
@include img;
margin: $spacer 0;
z-index: 1;
main & {
margin: 0;
}
@include media-breakpoint-up(md) {
display: none !important;
}
}
p {
padding: 0 $spacer;
@include media-breakpoint-up(md) {
padding: 0;
}
}
}
&-buttons {
margin: 0 $spacer;
@include media-breakpoint-up(md) {
margin: 0;
}
.btn {
margin: $space_one_quarter 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;
// }
//}
}
}
}
.main-content {
.hero-wrapper {
margin-top: $space_and_half;
.hero-image {
margin-left: 0;
margin-right: 0;
}
}
}
.mobile_hero {
@include media-breakpoint-up(md) {
display: none !important;
}
img {
@include img;
margin: $spacer 0;
z-index: 1;
}
}
Display hero where image is the background and the content is overlayed on top. On a mobile display it becomes a stacked component.