<div class="hero-usp-wrapper" data-hero-size="">
<div class="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">
<div class="hero-title-small">ich bin ein titel</div>
<h1 class="hero-title">lorem ipsum dolor sit amet consecteur diallo lorem.</h1>
<div class="quicklinks" data-scrollable="false">
<div class="row">
<div class="col-6 col-sm-6 col-md-3">
<div class="quicklink-item left">
<div class="quicklink-item-icon"><i class="fas fa-ice-cream"></i></div>
<div class="label-title quicklink-item-title">title here</div>
<div class="quicklink-item-text">lorem impsum dolor sit amet consecteur diallo lorem</div>
<a href="#lorem" class="overlay-link"></a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3">
<div class="quicklink-item left">
<div class="quicklink-item-icon"><i class="fas fa-ice-cream"></i></div>
<div class="label-title quicklink-item-title">title here</div>
<div class="quicklink-item-text">lorem impsum dolor sit amet consecteur diallo lorem</div>
<a href="#lorem" class="overlay-link"></a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3">
<div class="quicklink-item left">
<div class="quicklink-item-icon"><i class="fas fa-ice-cream"></i></div>
<div class="label-title quicklink-item-title">title here</div>
<div class="quicklink-item-text">lorem impsum dolor sit amet consecteur diallo lorem</div>
<a href="#lorem" class="overlay-link"></a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3">
<div class="quicklink-item left">
<div class="quicklink-item-icon"><i class="fas fa-ice-cream"></i></div>
<div class="label-title quicklink-item-title">title here</div>
<div class="quicklink-item-text">lorem impsum dolor sit amet consecteur diallo lorem</div>
<a href="#lorem" class="overlay-link"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-usp-wrapper" data-hero-size="{{ size }}">
<div class="hero-background">
<div class="hero-background-dimmer" style="opacity: {{ dimmer_opacity }}"></div>
{% if img_class %}
<div class="hero-background-image lazy-bg {{ img_class }}"></div>
{% else %}
<div class="hero-background-image" style="background-image: url('{{ media_src }}')"></div>
{% endif %}
</div>
<div class="hero-inner">
<div class="container">
<div class="hero-title-small">{{ title }}</div>
<h1 class="hero-title">{{ text }}</h1>
{% render "@components/02-components/quicklinks/quicklinks/quicklinks.twig" with {
items: items,
col: col,
sm_col: sm_col,
md_col: md_col,
scrollable: scrollable,
overlay_link: overlay_link
} %}
</div>
</div>
</div>
{
"title": "ich bin ein titel",
"text": "lorem ipsum dolor sit amet consecteur diallo lorem.",
"media_src": "https://picsum.photos/1900/1200",
"img_class": "",
"link_href": "#lorem",
"link_text": "lorem",
"link_target": "_self",
"dimmer_opacity": "0.6",
"size": "",
"col": "col-6",
"sm_col": "col-sm-6",
"md_col": "col-md-3",
"lg_col": "",
"scrollable": false,
"items": [
{
"$quicklink-item--usp": null,
"icon_id": "fa-arrow-right",
"text": "lorem impsum dolor sit amet consecteur diallo lorem",
"href": "#lorem",
"align": "left",
"overlay_link": true
},
{
"$quicklink-item--usp": null,
"icon_id": "fa-arrow-right",
"text": "lorem impsum dolor sit amet consecteur diallo lorem",
"href": "#lorem",
"align": "left",
"overlay_link": true
},
{
"$quicklink-item--usp": null,
"icon_id": "fa-arrow-right",
"text": "lorem impsum dolor sit amet consecteur diallo lorem",
"href": "#lorem",
"align": "left",
"overlay_link": true
},
{
"$quicklink-item--usp": null,
"icon_id": "fa-arrow-right",
"text": "lorem impsum dolor sit amet consecteur diallo lorem",
"href": "#lorem",
"align": "left",
"overlay_link": true
}
]
}
.hero-usp-wrapper {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
@media screen and (max-width: 991px) {
height: 420px;
}
.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;
}
}
.hero-inner {
display: flex;
//min-height: 60vh;
min-height: 60rem;
align-items: flex-start;
padding-bottom: 0;
padding-top: 4rem;
@include media-breakpoint-up(sm) {
align-items: flex-start;
}
@include media-breakpoint-up(md) {
align-items: center;
}
@media screen and (max-width: 991px) {
min-height: 420px;
}
}
.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;
margin-bottom: 4rem;
}
.hero-title-small {
color: $primary;
@extend .label-title;
max-width: 50rem;
font-family: "Effra";
margin-bottom: 0;
}
.quicklink-item-text {
color: #fff;
font-size: 1.6rem !important;
line-height: 2.2rem !important;
}
&[data-hero-size="medium"] {
.hero-inner {
min-height: 60vh;
}
}
&[data-hero-size="auto"] {
.hero-inner {
min-height: 0;
padding-bottom: 8rem;
padding-top: 8rem;
}
}
.btn {
height: 3.5rem;
}
}
There are no notes for this item.