<div class="h-clearfix h-hidden-m-down">
<ul class="breadcrumbs">
<li class="breadcrumbs__item"><a href="#">Start</a></li>
<li class="breadcrumbs__item"><a href="#">Products</a></li>
<li class="breadcrumbs__item"><a href="#">Categories</a></li>
<li class="breadcrumbs__item"><a href="#">Product</a></li>
</ul>
</div>
<section class="panel theme--grey
panel--compact ">
<div class="panel__inner">
<div class="row row--justify-around">
<div class="col col--span-12 col--span-m-10 col--span-l-8 col--no-gutter h-text-align-center-m">
<h2>Så hjälper WISE dig genom hela byggprocessen</h2>
</div>
</div>
<div class="interactive-image">
<img class="interactive-image__image" src="/mocks/img/interactive-image.jpg" />
<button class="hotspot" aria-controls="panel-systemval" aria-expanded="false" style="left: 51.4%; top: 79%;">
<div class="hotspot__inner">
<div class="hotspot__label">1. Systemval</div>
<div class="hotspot__dot">
<span class="hotspot__icon hotspot__icon--plus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-plus"></use>
</svg>
</span>
<span class="hotspot__icon hotspot__icon--minus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-minus"></use>
</svg>
</span>
</div>
</div>
</button>
<button class="hotspot" aria-controls="panel-projektering" aria-expanded="false" style="left: 32%; top: 53%;">
<div class="hotspot__inner">
<div class="hotspot__label">2. Projektering</div>
<div class="hotspot__dot">
<span class="hotspot__icon hotspot__icon--plus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-plus"></use>
</svg>
</span>
<span class="hotspot__icon hotspot__icon--minus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-minus"></use>
</svg>
</span>
</div>
</div>
</button>
<button class="hotspot" aria-controls="panel-installation" aria-expanded="false" style="left: 32.8%; top: 17%;">
<div class="hotspot__inner">
<div class="hotspot__label">3. Installation</div>
<div class="hotspot__dot">
<span class="hotspot__icon hotspot__icon--plus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-plus"></use>
</svg>
</span>
<span class="hotspot__icon hotspot__icon--minus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-minus"></use>
</svg>
</span>
</div>
</div>
</button>
<button class="hotspot" aria-controls="panel-driftsattning" aria-expanded="false" style="left: 55.7%; top: 17%;">
<div class="hotspot__inner">
<div class="hotspot__label">4. Driftsättning</div>
<div class="hotspot__dot">
<span class="hotspot__icon hotspot__icon--plus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-plus"></use>
</svg>
</span>
<span class="hotspot__icon hotspot__icon--minus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-minus"></use>
</svg>
</span>
</div>
</div>
</button>
<button class="hotspot" aria-controls="panel-drift" aria-expanded="false" style="left: 61%; top: 48.6%;">
<div class="hotspot__inner">
<div class="hotspot__label">5. Drift</div>
<div class="hotspot__dot">
<span class="hotspot__icon hotspot__icon--plus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-plus"></use>
</svg>
</span>
<span class="hotspot__icon hotspot__icon--minus">
<svg class="icon " focusable="false">
<use xlink:href="#icon-minus"></use>
</svg>
</span>
</div>
</div>
</button>
</div>
<div class="interactive-image-tabs " role="tablist">
<div class="interactive-image-tabs__navigation">
<button aria-controls="panel-systemval" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
1. Systemval
<svg class="icon interactive-image-tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<button aria-controls="panel-projektering" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
2. Projektering
<svg class="icon interactive-image-tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<button aria-controls="panel-installation" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
3. Installation
<svg class="icon interactive-image-tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<button aria-controls="panel-driftsattning" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
4. Driftsättning
<svg class="icon interactive-image-tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<button aria-controls="panel-drift" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
5. Drift
<svg class="icon interactive-image-tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
</div>
<div class="interactive-image-tabs__content">
<button aria-controls="panel-systemval" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
1. Systemval
<svg class="icon tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div role="tabpanel" class="interactive-image-tabs__content-item" id="panel-systemval" aria-hidden="true" aria-labelledby="1. Systemval">
<div class="row row--justify-center">
<div class="col col--span-12 col--span-xxl-10 col--no-gutter col--top-gutter-m">
<div class="row row--justify-between">
<div class="col col--span-12 col--span-m-7 col--span-xl-7 col--no-gutter col--gutter-large-l h-margin-bottom-3">
<h3 class="headline-3">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum mattis arcu at sollicitudin. Aenean quis ante bibendum, suscipit enim et, pharetra arcu. Proin eleifend laoreet est, eu fermentum leo porttitor non. Donec id ex mauris. Nam elementum tellus ante, quis tincidunt tortor volutpat ut. Etiam ut nibh eget est semper lacinia. Sed non justo eu leo dignissim consectetur pulvinar sed arcu. Etiam at metus vel turpis mattis commodo ac eu ligula. Etiam convallis mauris sem, a gravida ex finibus eu. Etiam eu pulvinar lorem, eu dictum orci. Aliquam eros sapien, commodo non nulla sed, venenatis rhoncus tortor. Aenean non ipsum id mauris fermentum rutrum. Vestibulum aliquam at eros condimentum euismod. Etiam ut lorem euismod, porttitor dui ac, maximus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<div class="video-player video-player--cover" data-video-id=tMRqsKzuMd4 aria-busy="false">
<div class="video-player__youtube"></div>
<button class="video-player__cover" style="background-image: url(/mocks/img/video-cover.jpg);">
<span class="video-player__label">
Play video (2 min)
</span>
</button>
<div class="video-player__overlay">
<div class="video-player__overlay-content">
<p>Du måste godkänna <a href="#">cookies för marknadsföring</a> om du vill visa den här typen av innehåll från Swegon.</p>
<button class="button button--cover video-player__overlay-button ">
<span class="button__label">Jag godkänner</span>
</button>
</div>
<div class="progress-indicator video-player__loader"></div>
</div>
</div>
</div>
<div class="col col--span-12 col--span-m-4 col--span-xl-4 col--no-gutter col--gutter-large-l h-margin-bottom-1">
<h4 class="headline-5">Relaterade länkar</h4>
<ul class="unstyled">
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Swegon ESBO</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Leveransbestämmelser och garantier</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Snabbguiden</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Typrum</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Systemguiden</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button aria-controls="panel-projektering" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
2. Projektering
<svg class="icon tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div role="tabpanel" class="interactive-image-tabs__content-item" id="panel-projektering" aria-hidden="true" aria-labelledby="2. Projektering">
<div class="row row--justify-center">
<div class="col col--span-12 col--span-xxl-10 col--no-gutter col--top-gutter-m">
<div class="row row--justify-between">
<div class="col col--span-12 col--span-m-7 col--span-xl-7 col--no-gutter col--gutter-large-l h-margin-bottom-3">
<h3 class="headline-3">Vivamus a erat risus</h3>
<p>Vivamus a erat risus. Suspendisse vel tortor a tortor vestibulum lacinia non blandit massa. Suspendisse potenti. Etiam odio quam, cursus feugiat pretium eu, sollicitudin ac ex. Sed imperdiet lorem leo, id elementum orci egestas in. Donec nec vestibulum augue, at feugiat metus. In mollis dictum ex, quis aliquam felis finibus ac. Donec ac varius risus. Fusce iaculis felis dolor, nec elementum ex blandit sit amet. Sed imperdiet nisl eu pharetra venenatis. In vitae malesuada quam, ac lobortis lorem. Aenean commodo dui sit amet lectus scelerisque vehicula. Ut libero mauris, porttitor sit amet metus sed, accumsan pulvinar nunc. Nulla consequat fringilla ipsum sit amet fringilla. Ut facilisis arcu in enim congue tristique.</p>
<img src="/mocks/img/air-cooling-unit.jpg" alt="" />
</div>
<div class="col col--span-12 col--span-m-4 col--span-xl-4 col--no-gutter col--gutter-large-l h-margin-bottom-1">
<h4 class="headline-5">Relaterade länkar</h4>
<ul class="unstyled">
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Swegon ESBO</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Leveransbestämmelser och garantier</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Snabbguiden</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Typrum</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Systemguiden</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button aria-controls="panel-installation" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
3. Installation
<svg class="icon tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div role="tabpanel" class="interactive-image-tabs__content-item" id="panel-installation" aria-hidden="true" aria-labelledby="3. Installation">
<div class="row row--justify-center">
<div class="col col--span-12 col--span-xxl-10 col--no-gutter col--top-gutter-m">
<div class="row row--justify-between">
<div class="col col--span-12 col--span-m-7 col--span-xl-7 col--no-gutter col--gutter-large-l h-margin-bottom-3">
<h3 class="headline-3">In placerat</h3>
<p>In placerat, felis id scelerisque porttitor, risus turpis sagittis mauris, quis tincidunt lectus erat vel lorem. Aenean tincidunt ligula a justo ultricies eleifend. Vestibulum odio velit, aliquet sit amet sapien id, posuere porttitor est. Proin commodo mattis placerat. Fusce dictum diam nec augue bibendum sagittis. Suspendisse elementum lectus congue egestas tempus. Cras auctor nulla lacus, quis ullamcorper dui laoreet nec. Phasellus ac congue velit, sit amet venenatis est. Cras consequat vitae nisi nec blandit. Vestibulum ut nisl consequat, tempor turpis vel, cursus velit. Etiam sed pretium leo. Ut orci mi, dictum vitae nisi id, sagittis ornare libero. Suspendisse vel auctor sapien. Aliquam ullamcorper placerat elit.</p>
<div class="video-player video-player--cover" data-video-id=tMRqsKzuMd4 aria-busy="false">
<div class="video-player__youtube"></div>
<button class="video-player__cover" style="background-image: url(/mocks/img/video-cover.jpg);">
<span class="video-player__label">
Play video (2 min)
</span>
</button>
<div class="video-player__overlay">
<div class="video-player__overlay-content">
<p>Du måste godkänna <a href="#">cookies för marknadsföring</a> om du vill visa den här typen av innehåll från Swegon.</p>
<button class="button button--cover video-player__overlay-button ">
<span class="button__label">Jag godkänner</span>
</button>
</div>
<div class="progress-indicator video-player__loader"></div>
</div>
</div>
</div>
<div class="col col--span-12 col--span-m-4 col--span-xl-4 col--no-gutter col--gutter-large-l h-margin-bottom-1">
<h4 class="headline-5">Relaterade länkar</h4>
<ul class="unstyled">
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Swegon ESBO</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Leveransbestämmelser och garantier</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Snabbguiden</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Typrum</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Systemguiden</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button aria-controls="panel-driftsattning" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
4. Driftsättning
<svg class="icon tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div role="tabpanel" class="interactive-image-tabs__content-item" id="panel-driftsattning" aria-hidden="true" aria-labelledby="4. Driftsättning">
<div class="row row--justify-center">
<div class="col col--span-12 col--span-xxl-10 col--no-gutter col--top-gutter-m">
<div class="row row--justify-between">
<div class="col col--span-12 col--span-m-7 col--span-xl-7 col--no-gutter col--gutter-large-l h-margin-bottom-3">
<h3 class="headline-3">In sagittis lacinia pulvinar</h3>
<p>In sagittis lacinia pulvinar. Nullam scelerisque tellus vitae urna finibus aliquam. Morbi tempor ut lectus quis lobortis. Nulla congue nisi in sapien lacinia, elementum commodo elit dapibus. Curabitur quis risus ornare, sodales enim id, sollicitudin augue. Aliquam dictum urna est, at volutpat lorem pulvinar ut. Mauris mollis vel elit ac hendrerit. Vestibulum dui ligula, consectetur nec maximus eget, finibus eget tortor. Mauris congue magna nec sapien bibendum pulvinar.</p>
<img src="/mocks/img/air-cooling-unit.jpg" alt="" />
</div>
<div class="col col--span-12 col--span-m-4 col--span-xl-4 col--no-gutter col--gutter-large-l h-margin-bottom-1">
<h4 class="headline-5">Relaterade länkar</h4>
<ul class="unstyled">
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Swegon ESBO</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Leveransbestämmelser och garantier</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Snabbguiden</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Typrum</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Systemguiden</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button aria-controls="panel-drift" aria-expanded="false" role="tab" class="interactive-image-tabs__button">
5. Drift
<svg class="icon tabs__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div role="tabpanel" class="interactive-image-tabs__content-item" id="panel-drift" aria-hidden="true" aria-labelledby="5. Drift">
<div class="row row--justify-center">
<div class="col col--span-12 col--span-xxl-10 col--no-gutter col--top-gutter-m">
<div class="row row--justify-between">
<div class="col col--span-12 col--span-m-7 col--span-xl-7 col--no-gutter col--gutter-large-l h-margin-bottom-3">
<h3 class="headline-3">Suspendisse vel tortor a tortor vestibulum</h3>
<p>Vivamus a erat risus. Suspendisse vel tortor a tortor vestibulum lacinia non blandit massa. Suspendisse potenti. Etiam odio quam, cursus feugiat pretium eu, sollicitudin ac ex. Sed imperdiet lorem leo, id elementum orci egestas in. Donec nec vestibulum augue, at feugiat metus. In mollis dictum ex, quis aliquam felis finibus ac. Donec ac varius risus. Fusce iaculis felis dolor, nec elementum ex blandit sit amet. Sed imperdiet nisl eu pharetra venenatis. In vitae malesuada quam, ac lobortis lorem. Aenean commodo dui sit amet lectus scelerisque vehicula. Ut libero mauris, porttitor sit amet metus sed, accumsan pulvinar nunc. Nulla consequat fringilla ipsum sit amet fringilla. Ut facilisis arcu in enim congue tristique.</p>
<p>In sagittis lacinia pulvinar. Nullam scelerisque tellus vitae urna finibus aliquam. Morbi tempor ut lectus quis lobortis. Nulla congue nisi in sapien lacinia, elementum commodo elit dapibus. Curabitur quis risus ornare, sodales enim id, sollicitudin augue. Aliquam dictum urna est, at volutpat lorem pulvinar ut. Mauris mollis vel elit ac hendrerit. Vestibulum dui ligula, consectetur nec maximus eget, finibus eget tortor. Mauris congue magna nec sapien bibendum pulvinar.</p>
<div class="video-player video-player--cover" data-video-id=tMRqsKzuMd4 aria-busy="false">
<div class="video-player__youtube"></div>
<button class="video-player__cover" style="background-image: url(/mocks/img/video-cover.jpg);">
<span class="video-player__label">
Play video (2 min)
</span>
</button>
<div class="video-player__overlay">
<div class="video-player__overlay-content">
<p>Du måste godkänna <a href="#">cookies för marknadsföring</a> om du vill visa den här typen av innehåll från Swegon.</p>
<button class="button button--cover video-player__overlay-button ">
<span class="button__label">Jag godkänner</span>
</button>
</div>
<div class="progress-indicator video-player__loader"></div>
</div>
</div>
</div>
<div class="col col--span-12 col--span-m-4 col--span-xl-4 col--no-gutter col--gutter-large-l h-margin-bottom-1">
<h4 class="headline-5">Relaterade länkar</h4>
<ul class="unstyled">
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Swegon ESBO</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Leveransbestämmelser och garantier</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Snabbguiden</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Typrum</span>
</a>
</li>
<li class="h-margin-bottom-2"><a href="" class="link ">
<span class="link__label">Systemguiden</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="h-clearfix h-hidden-m-down">
{{render "@breadcrumbs"}}
</div>
{{ render "@interactive-image-block"}}
{
"marketSelectorModal": {
"id": "market-selector",
"closeLabel": "Stäng"
},
"hero": {
"theme": "grey",
"modifiers": "compact, no-padding-bottom",
"title": "Så hjälper WISE dig genom hela byggprocessen"
}
}
No notes defined.