<div class="hero theme--consumer theme--dark" style="background-image: url('/mocks/img/hero.jpg');">
<img class="hero__image" src=/mocks/img/hero.jpg alt=a fancy buidling />
<div class="hero__primary theme--consumer theme--dark">
<div class="hero__text">
<h1 class="headline-2 h-text-color-black">Vill du snabbt få förslag på rätt ventilation?</h1>
<a class="button button--ghost" href=#>Lär mer</a>
</div>
</div>
<div class="hero__secondary">
<p class="hero__image-text h-text-color-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mauris ultricies elit suscipit porttitor.</p>
</div>
</div>
<div class="hero{{#if theme}} theme--{{theme}}{{/if}}{{#if darkTheme}} theme--dark{{/if}}" style="background-image: url('{{image.src}}');">
<img class="hero__image" src={{image.src}} alt={{image.alt}} />
<div class="hero__primary{{#if theme}} theme--{{theme}}{{/if}}{{#if darkTheme}} theme--dark{{/if}}">
<div class="hero__text">
<h1 class="headline-2 {{#if textColor}} h-text-color-{{textColor}}{{/if}}">{{title}}</h1>
{{#if link}}
<a class="button button--ghost" href={{link.href}}>{{link.text}}</a>
{{/if}}
</div>
</div>
<div class="hero__secondary">
<p class="hero__image-text{{#if textColor}} h-text-color-{{textColor}}{{/if}}">{{imageText}}</p>
</div>
{{#if circularImage}}
<div class="hero__image-circular" style="background-image: url({{circularImage.src}});"></div>
{{/if}}
</div>
{
"title": "Vill du snabbt få förslag på rätt ventilation?",
"imageText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mauris ultricies elit suscipit porttitor.",
"image": {
"src": "/mocks/img/hero.jpg",
"alt": "a fancy buidling"
},
"theme": "consumer",
"darkTheme": true,
"textColor": "black",
"link": {
"text": "Lär mer",
"href": "#"
}
}
$imageRatioDesktop: 436 / 1430;
.hero {
position: relative;
margin-bottom: size(2);
@include breakpoint($m) {
display: flex;
min-height: #{$imageRatioDesktop * 100}vw;
min-width: #{$imageRatioDesktop * 100}vw;
background-size: cover;
background-position: left center;
}
@include breakpoint($xxl) {
min-height: #{$imageRatioDesktop * 1430}px;
}
}
.hero__primary {
padding: size(8) size(4);
@include breakpoint($m) {
width: percentage(6 / 12);
}
@include breakpoint($l) {
border-right: size(1) solid $color-white;
display: flex;
width: col-span(4);
padding: size(8) size(4);
}
@include color-theme {
background: $arg-theme-color;
}
// IE 11 height fix
@include breakpoint($m) {
min-height: #{$imageRatioDesktop * 100}vw;
}
@include breakpoint($xxl) {
min-height: #{$imageRatioDesktop * 1430}px;
}
}
.hero__secondary {
display: none;
flex: 1;
padding: size(2) size(2);
border-left: size(1) solid $color-white;
@include breakpoint($m) {
display: block;
}
}
.hero__image-text {
color: $color-white;
text-align: right;
}
.hero__image-circular {
display: none;
width: size(17);
height: size(17);
position: absolute;
border-radius: 100%;
right: size(4);
bottom: size(-8.5);
object-fit: cover;
z-index: 1;
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
background-color: white;
@include breakpoint($m) {
display: block;
}
}
.hero__image {
display: block;
min-height: 30vh;
min-width: 30vw;
object-fit: cover;
@include breakpoint($m) {
display: none;
}
}
.hero-logotypes-wrapper {
display: flex;
width: 100%;
justify-content: flex-end;
}
.hero-logotypes-wrapper-inner {
width: 100vw;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 24px;
gap: 16px;
}
.hero-logotypes-wrapper-inner div {
display: flex;
width: calc(50% - 8px);
align-items: center;
}
.hero-logotypes-wrapper-inner img {
margin: auto;
max-height: 72px;
}
@include breakpoint($m) {
.hero-logotypes-wrapper-inner {
max-width: 1075px;
justify-content: flex-end;
}
.hero-logotypes-wrapper-inner div {
min-height: 72px;
width: 232px;
}
}
No notes defined.