<section class="homepage_hero right ">
<div class="hero_text">
<h2>This is Page Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="hero-buttons">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Action Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end hero-buttons -->
</div><!-- end hero_text -->
<div class="hero_img" style="background-image: url('/img/maxresdefault.jpg');">
<div class="d-block d-lg-none">
<img src="/img/maxresdefault.jpg" alt="" />
</div>
</div>
<!-- end hero_img -->
</section>
{% set freeform = freeform|default(false) %}
{% set freeform_classes = freeform ? 'hero-freeform' : '' %}
<section class="homepage_hero {{ align_text }} {{ freeform_classes }}">
<div class="hero_text">
{% block headings %}
<h2>{{ hero_heading }}</h2>
{% endblock headings %}
<p>{% block cms_override_text %}{{ hero_text }}{% endblock cms_override_text %}</p>
<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_text -->
<div class="hero_img" style="background-image: url('{{ hero_img }}');">
<div class="d-block d-lg-none">
<img src="{{ hero_img }}" alt="{{ hero_img_alt }}"/>
</div>
</div>
<!-- end hero_img -->
</section>
{
"hero_img": "/img/maxresdefault.jpg",
"hero_heading": "This is Page Heading",
"hero_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
"align_text": "right",
"buttons": {
"1": {
"text": "Action Button",
"url": "#",
"color": "dark-grey"
}
}
}
.homepage_hero {
display: flex;
flex-direction: column;
margin: 0 0 $spacer 0;
@include media-breakpoint-up(lg) {
flex-direction: row;
flex-wrap: nowrap;
max-height: 600px;
overflow: hidden;
}
.hero_text {
order: 2;
background-color: $grey_lightest;
width: 100%;
max-width: 100%;
padding: $spacer;
z-index: 100;
.color-scheme-dark & {
background-color: $dark_mode_grey;
}
@include media-breakpoint-up(lg) {
max-width: 50%;
padding: $space_two;
}
h3 {
font-size: 1.875rem;
}
.hero-buttons {
margin: 0;
}
}
.hero_img {
order: 1;
aspect-ratio: 13 / 10;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
@include media-breakpoint-down(md) {
aspect-ratio: unset;
background-image: none !important;
}
@include media-breakpoint-up(lg) {
width: 50%;
}
img {
max-width: 100%;
}
}
&.left {
.hero_text {
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
@include media-breakpoint-up(lg) {
order: 1;
border-top: 0;
border-right: 3px solid $accent_color;
border-right: 3px solid var(--accent_color, $accent_color);
}
}
.hero_img {
@include media-breakpoint-up(lg) {
order: 2;
}
}
}
&.right {
.hero_text {
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
@include media-breakpoint-up(lg) {
order: 2;
border-top: 0;
border-left: 3px solid $accent_color;
border-left: 3px solid var(--accent_color, $accent_color);
}
}
.hero_img {
@include media-breakpoint-up(lg) {
order: 1;
}
}
}
&.hero-freeform {
.hero_img {
aspect-ratio: unset !important;
}
.hero_text {
padding: 4rem 2rem;
}
}
}
.main-content {
.homepage_hero {
margin-top: $space_and_half;
margin-bottom: $space_and_half;
}
}
Display homepage hero where image is 50% of the width along with the content. On a mobile display it becomes a stacked component.