<div class="hero-wrapper" style="background-image: url('/img/maxresdefault.jpg');">
<div class="hero-content right">
<h2>This is the Heading</h2>
<div>
<img src="/img/maxresdefault.jpg" alt="volcano" />
</div>
<p class="hero-text-container">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.</p>
<div class="hero-buttons">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Action 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">Action Button 2</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end hero-_buttons -->
</div><!-- end hero-content -->
</div>
{% set has_content = false %}
{%- if hero_heading['#markup'] or hero_description['#markup'] or button['#markup'] -%}
{% set has_content = true %}
{%- endif -%}
<div class="hero-wrapper" style="background-image: url('{{ hero_src_img }}');">
<div class="hero-content {{ align_text }}{% if (has_content) %} background_color{% endif %}">
{% block headings %}
{% if (hero_heading) %}
<h2>{{ hero_heading }}</h2>
{% endif %}
{% endblock headings %}
<div>
<img src="{{ hero_src_img }}" alt="{{ hero_img_alt }}" />
</div>
{% block cms_override_text %}
{% if (hero_description) %}
<p class="hero-text-container">{{ hero_description }}</p>
{% endif %}
{% endblock cms_override_text %}
<div class="hero-buttons">
{% block hero_buttons %}
{% for button in buttons %}
{% include "@a_tag" with button only %}
{% endfor %}
{% endblock hero_buttons %}
</div><!-- end hero-_buttons -->
</div><!-- end hero-content -->
</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": "right",
"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.