<div class="hero-wrapper " data-hero-size="">
<div class="hero-background" id="hero-background">
<div class="hero-background-dimmer" style="opacity: 0.6"></div>
<div class="hero-background-image" style="background-image: url('https://picsum.photos/1900/1200')"></div>
</div>
<div class="hero-inner">
<div class="container">
<h2 class="h1 hero-title-small">Sed ut perspiciatis unde omnis iste natus</h2>
<div class="hero-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.</div>
<a class="btn btn-primary" href="#lorem" target="_self">Mehr erfahren</a>
</div>
</div>
</div>
<div class="hero-wrapper {% if media_type == 'video' or media_type == 'video_youtube' %}hero-wrapper-video{% endif %}" data-hero-size="{{ size }}">
<div class="hero-background" id="hero-background"{% if media_type == 'video_youtube' %} style="background: url('https://img.youtube.com/vi/{{ video_id }}/maxresdefault.jpg') center center / cover no-repeat;"{% endif %}>
<div class="hero-background-dimmer" style="opacity: {{ dimmer_opacity }}"></div>
{% if media_type == 'image' %}
{% if img_class %}
<div class="hero-background-image {{ img_class }}"></div>
{% else %}
<div class="hero-background-image" style="background-image: url('{{ media_src }}')"></div>
{% endif %}
{% elseif media_type == 'video' %}
<video playsinline autoplay muted loop>
<source src="{{ media_src }}" type="video/mp4">
</video>
{% elseif media_type == 'video_youtube' %}
<div class="player hero-bg-video" data-property="{videoURL:'http://youtu.be/{{ video_id }}',showControls:false,showYTLogo:false,coverImage:'{{ media_src }}',containment:'#hero-background',autoPlay:true, mute:true, startAt:0, opacity:1, optimizeDisplay:true, anchor: 'center,center'}"></div>
{% endif %}
</div>
<div class="hero-inner">
<div class="container">
{% if text == '' %}
{% set title_class = 'hero-title' %}
{% else %}
{% set title_class = 'hero-title-small' %}
{% endif %}
{% if is_title_h1 %}
<h1 class="{{ title_class }}">{{ title }}</h1>
{% else %}
<h2 class="h1 {{ title_class }}">{{ title }}</h2>
{% endif %}
{% if text != '' %}
<div class="hero-text">{{ text }}</div>
{% endif %}
{% if link_href %}
<a class="btn btn-primary" href="{{ link_href }}" target="{{ link_target }}">{{ link_text }}</a>
{% endif %}
</div>
</div>
</div>
{
"title": "Sed ut perspiciatis unde omnis iste natus",
"is_title_h1": false,
"text": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.",
"media_type": "image",
"media_src": "https://picsum.photos/1900/1200",
"img_class": "",
"link_href": "#lorem",
"link_text": "Mehr erfahren",
"link_target": "_self",
"size": "",
"video_id": "",
"dimmer_opacity": "0.6"
}
.hero-wrapper {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
&.hero-wrapper-video{
background: $dark-blue !important;
opacity: 1;
}
.hero-background {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
.hero-background-dimmer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: $dark-blue;
z-index: 2;
opacity: 0.6;
}
.hero-background-image {
height: 100%;
width: 100%;
position: relative;
z-index: 1;
background-size: cover;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
}
.hero-inner {
display: flex;
min-height: calc(95vh - #{$header-mobile-height});
align-items: center;
padding-bottom: 4rem;
padding-top: 4rem;
@include media-breakpoint-up(sm) {
align-items: flex-start;
min-height: calc(95vh - #{$header-height} - #{$navigation-height});
}
@include media-breakpoint-up(md) {
align-items: center;
}
}
.container {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.hero-title {
color: #fff;
max-width: 50rem;
@extend .hero-title;
}
.hero-title-small {
color: #fff;
@extend .label-title;
max-width: 50rem;
font-family: "Effra";
}
.hero-text {
color: #fff;
max-width: 50rem;
@extend .title-medium;
font-style: italic;
margin-bottom: 0;
}
.btn {
margin-top: $space-b;
height: 3.5rem;
}
&[data-hero-size="medium"] {
.hero-inner {
min-height: 60vh;
}
}
&[data-hero-size="auto"] {
.hero-inner {
min-height: 0;
padding-bottom: 8rem;
padding-top: 8rem;
}
}
}
There are no notes for this item.