<section class="panel
panel--image-background-m
panel--compact
panel--margin-bottom
panel--no-padding-vertical-m-down h-text-align-center-m">
<figure class="panel__figure">
<img src="/mocks/img/contact-page-bg.png" alt="" class="panel__image">
</figure>
<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">
<h1>Contact us</h1>
<div class="preamble">
There are different ways to contact us. Choose the option that suits you best.
</div>
</div>
</div>
</div>
</section>
<section class="panel
panel--compact
panel--no-padding-top ">
<div class="panel__inner">
<div class="tabs tabs--with-anchors" role="tablist">
<div class="
horizontal-scroller
" data-show-scroll-icon="">
<div class="horizontal-scroller__scroller">
<div class="tabs__navigation">
<button class="tabs__button" aria-controls="panel-ask-us" aria-expanded="true" role="tab">
Ask us
</button>
<button class="tabs__button" aria-controls="panel-helpdesk" aria-expanded="false" role="tab">
Helpdesk
</button>
<button class="tabs__button" aria-controls="panel-our-offices" aria-expanded="false" role="tab">
Our offices
</button>
<button class="tabs__button" aria-controls="panel-business-units" aria-expanded="false" role="tab">
Business units
</button>
<button class="tabs__button" aria-controls="panel-markets" aria-expanded="false" role="tab">
Markets
</button>
<button class="tabs__button" aria-controls="panel-find-a-person" aria-expanded="false" role="tab">
Find a person
</button>
<button class="tabs__button" aria-controls="panel-our-partners" aria-expanded="false" role="tab">
Our partners
</button>
</div>
</div>
</div>
<div class="tabs__content">
<div role="tabpanel" class="tabs__content-item" id="panel-ask-us" aria-hidden="false" aria-labelledby="tab-ask-us">
<section class="panel
panel--compact ">
<div class="panel__inner">
<div class="row row--justify-around h-text-align-center-m">
<div class="col col--span-12 col--span-s-8">
<h2>How can we help you?</h2>
</div>
</div>
<div class="row row--justify-center h-margin-top-3">
<div class="col col--span-12 col--span-l-10 col--span-xl-8">
<div class="accordion-list">
<div class="accordion-list--large">
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="lorem-ipsum-dolor-sit-amet" aria-expanded="false">
Ask us about life cycle cost
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum-dolor-sit-amet" aria-hidden="true" aria-labelledby="lorem-ipsum-dolor-sit-amet">
Content 1 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Ask us about life cycle cost
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
Content 1 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Ask us about life cycle cost
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
Content 1 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Ask us about life cycle cost
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
Content 1 here
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="lorem-ipsum-dolor-sit" aria-expanded="false">
Specification advice
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum-dolor-sit" aria-hidden="true" aria-labelledby="lorem-ipsum-dolor-sit">
Content 2 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Specification advice
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
Content 2 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Specification advice
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
Content 2 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Specification advice
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
Content 2 here
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="lorem-ipsum-dolor" aria-expanded="false">
Verify your solution?
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum-dolor" aria-hidden="true" aria-labelledby="lorem-ipsum-dolor">
Content 3 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Verify your solution?
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
Content 3 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Verify your solution?
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
Content 3 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Verify your solution?
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
Content 3 here
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="lorem-ipsum" aria-expanded="false">
Get a quote
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum" aria-hidden="true" aria-labelledby="lorem-ipsum">
Content 4 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Get a quote
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
Content 4 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Get a quote
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
Content 4 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Get a quote
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
Content 4 here
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="lorem" aria-expanded="false">
Technical support
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem" aria-hidden="true" aria-labelledby="lorem">
Content 5 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Technical support
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
Content 5 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Technical support
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
Content 5 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Technical support
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
Content 5 here
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="lorem-ipsum-eleifend" aria-expanded="false">
Other
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum-eleifend" aria-hidden="true" aria-labelledby="lorem-ipsum-eleifend">
Content 4 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Other
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
Content 4 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Other
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
Content 4 here
</div>
</div>
<div class="accordion accordion--no-animation">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Other
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
Content 4 here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-helpdesk" aria-hidden="true" aria-labelledby="tab-helpdesk">
<section class="panel theme--grey
panel--compact ">
<div class="panel__inner">
<div class="row row--justify-center">
<div class="col col--span-12 col--span-l-10 col--span-xl-10">
<h2 class="headline-1">Title text</h2>
<p>Lorem ipsum dolor sit amet consectetur. Ac mauris massa nisi nunc viverra. Augue venenatis at amet fermentum a mattis sagittis. Sodales congue sit sem integer donec erat. Eu velit metus integer accumsan fringilla neque neque. Porta ultricies in amet posuere ipsum amet.</p>
<div class="row">
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-4">
<div class="card ">
<a href="#" class="card__cta">
<div class="card__body">
<h4 class="card__title">
Lorem ipsum
</h4>
<p class="card__description">Lorem ipsum dolore sit amet</p>
</div>
</a>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-4">
<div class="card ">
<a href="#" class="card__cta">
<div class="card__body">
<h4 class="card__title">
Lorem ipsum 2
</h4>
<p class="card__description">Lorem ipsum dolore sit amet 2</p>
</div>
</a>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-4">
<div class="card ">
<a href="#" class="card__cta">
<div class="card__body">
<h4 class="card__title">
Lorem ipsum 3
</h4>
<p class="card__description">Lorem ipsum dolore sit amet 3</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-our-offices" aria-hidden="true" aria-labelledby="tab-our-offices">
<div class="row">
<section class="panel theme--white
panel--no-padding-top ">
<div class="panel__inner">
<div class="filters js-filters js-loader-overlay-holder" aria-controls="filter-documents-list">
<div class="h-margin-bottom-2">
<div class="row h-margin-top-3 h-margin-bottom-1 js-search-field-holder">
<div class="col col--span-12 col--span-l-7 col--span-xl-5">
<div class="form-item ">
<div class="search__field">
<input id="" type="text" class="search__input js-filter" aria-controls="filter-office-cards-grid" data-type="search" name="Search" placeholder="Search for city or postcode">
<button class="search__submit" type="submit"></button>
</div>
</div>
</div>
</div>
<div class="js-clear-filters-holder h-hidden-from-view row h-margin-top-1 h-margin-bottom-1 ">
<div class="col">
<a href="#" class="js-clear-filters">Clear filters</a>
</div>
</div>
</div>
<div class="h-margin-top-3">
<div class="row row--justify-between row--align-center">
<div class="col col--auto-width">
<p class="search-result-count"></p>
</div>
<div class="col col--auto-width">
</div>
</div>
</div>
<div class="row" id="filter-office-cards-grid">
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card contact-card--no-image ">
<div aria-controls="show-info-10" class="contact-card__media">
<strong class="contact-card__office-name">Borås</strong>
<figure class="contact-card__figure">
<img src="/mocks/img/contact-page-img1.png" alt="Contact Page Image" class="contact-card__image">
</figure>
</div>
<div id="show-info-10" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=# aria-controls="message-selector" role="button">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
Send mail
</a>
</li>
<li class="contact-list__item">
<a href=#panel-find-a-person data-params="?office=a-working-lab-goteborg">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div aria-controls="show-info-11" class="contact-card__media">
<strong class="contact-card__office-name">Gävle</strong>
<figure class="contact-card__figure">
<img src="/mocks/img/contact-page-img1.png" alt="Contact Page Image" class="contact-card__image">
</figure>
</div>
<div id="show-info-11" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=# aria-controls="message-selector" role="button">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
Send mail
</a>
</li>
<li class="contact-list__item">
<a href=#panel-find-a-person>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div aria-controls="show-info-12" class="contact-card__media">
<strong class="contact-card__office-name">Göteborg</strong>
<figure class="contact-card__figure">
<img src="/mocks/img/contact-page-img1.png" alt="Contact Page Image" class="contact-card__image">
</figure>
</div>
<div id="show-info-12" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=# aria-controls="message-selector" role="button">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
Send mail
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div aria-controls="show-info-13" class="contact-card__media">
<strong class="contact-card__office-name">Jönköping</strong>
<figure class="contact-card__figure">
<img src="/mocks/img/contact-page-img1.png" alt="Contact Page Image" class="contact-card__image">
</figure>
</div>
<div id="show-info-13" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=# aria-controls="message-selector" role="button">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
Send mail
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div aria-controls="show-info-14" class="contact-card__media">
<strong class="contact-card__office-name">Kalmar</strong>
<figure class="contact-card__figure">
<img src="/mocks/img/contact-page-img1.png" alt="Contact Page Image" class="contact-card__image">
</figure>
</div>
<div id="show-info-14" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=# aria-controls="message-selector" role="button">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
Send mail
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div aria-controls="show-info-15" class="contact-card__media">
<strong class="contact-card__office-name">Karlskoga</strong>
<figure class="contact-card__figure">
<img src="/mocks/img/contact-page-img1.png" alt="Contact Page Image" class="contact-card__image">
</figure>
</div>
<div id="show-info-15" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=# aria-controls="message-selector" role="button">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
Send mail
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div aria-controls="show-info-16" class="contact-card__media">
<strong class="contact-card__office-name">Karlstad</strong>
<figure class="contact-card__figure">
<img src="/mocks/img/contact-page-img1.png" alt="Contact Page Image" class="contact-card__image">
</figure>
</div>
<div id="show-info-16" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=# aria-controls="message-selector" role="button">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
Send mail
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div aria-controls="show-info-17" class="contact-card__media">
<strong class="contact-card__office-name">Kvänum</strong>
<figure class="contact-card__figure">
<img src="/mocks/img/contact-page-img1.png" alt="Contact Page Image" class="contact-card__image">
</figure>
</div>
<div id="show-info-17" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=# aria-controls="message-selector" role="button">
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
Send mail
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/template" id="office-card-data-tmpl">
<% forEach(results, function(result) { %>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card">
<div class="contact-card__media">
<strong class="contact-card__office-name"><%= result.label %></strong>
<figure class="contact-card__figure">
<img src="<%= result.image.src %>" alt="<%= result.image.alt %>" class="contact-card__image">
</figure>
</div>
<div class="show-info js-show-info">
<div class="show-info__wrapper js-show-info-wrapper" style="max-height: 0px;">
<div class="show-info__content">
<% if (result.additionalInfoTitle != null) { %>
<h4 class="additional-info-title"><%= result.additionalInfoTitle %></h4>
<% } %>
<% if (result.additionalInfoText != null) { %>
<div class="additional-info-text"><%= result.additionalInfoText %></div>
<% } %>
<ul class="contact-list">
<% forEach(result.contactLinks, function(link) { %>
<li class="contact-list__item">
<% if (link.tag === 'a') { %>
<a
href="<%= link.href %>"
<%= Object.entries(link.attributes || {}).map(function(item) {
return item[0] + "='" + item[1] + "'"
}).join(" ") %>
>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-<%= link.icon %>"></use>
</svg>
<%= link.description %>
</a>
<% } else { %>
<span>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-<%= link.icon %>"></use>
</svg>
<%= link.description %>
</span>
<% } %>
</li>
<% }); %>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text" style="display: none;">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<% }); %>
</script>
<div class="modal modal--form" aria-hidden="true" id="message-selector">
<div class="modal__inner">
<div class="modal__box">
<div class="modal__header">
<button aria-controls="message-selector" aria-label="Stäng" class="modal__close-button">
<svg class="icon modal__close-button-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="modal__content">
<div class="h-padding-bottom-4">
<h2>New message</h2>
<div id="form_40600">
<script>
document.addEventListener('DOMContentLoaded', function() {
hbspt.forms.create({
css: '',
portalId: "3433011",
formId: "cee49fbd-acb1-4054-9a44-74ea6ec39adc",
target: "#form_40600",
onFormSubmit: function($form) {
dataLayer.push({
'event': 'hubspot form submitted',
'hubspot form name': 'Technical support',
'hubspot form id': $form[0].id,
});
},
onFormReady: function($form) {
let event;
try {
event = new CustomEvent('onDynamicContentAdded');
} catch (e) {
event = document.createEvent('Event');
event.initEvent('onDynamicContentAdded', true, true);
};
window.dispatchEvent(event);
}
});
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="h-text-align-center">
<a class="button js-load-more h-hidden-from-view " href="/mocks/api/officeCards.json" aria-controls="filter-office-cards-grid" data-template-id="office-card-data-tmpl">
<span class="button__label">Ladda fler</span>
</a>
</div>
</div>
</div>
</section>
<script type="text/template" id="no-results-data-tmpl"></script>
</div>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-business-units" aria-hidden="true" aria-labelledby="tab-business-units">
<div class="row h-margin-top-3">
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div class="contact-card__body">
<div class="contact-card__top-img">
<img src="/mocks/img/contact-card-icon.png" alt="icon" class="contact-card__icon">
</div>
<strong class="contact-card__label">Air Diffusion - Diffusers/Grilles</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<h4 class="additional-info-title">Title</h4>
<div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=mailto:kungstensvent.anders@gmail.com>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-house"></use>
</svg>
Visit product page
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div class="contact-card__body">
<div class="contact-card__top-img">
<img src="/mocks/img/contact-card-icon2.png" alt="icon" class="contact-card__icon">
</div>
<strong class="contact-card__label">Ventilation, Heating & Cooling</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=mailto:kungstensvent.anders@gmail.com>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-house"></use>
</svg>
Visit product page
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div class="contact-card__body">
<div class="contact-card__top-img">
<img src="/mocks/img/contact-card-icon3.png" alt="icon" class="contact-card__icon">
</div>
<strong class="contact-card__label">Service and Maintenance</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=mailto:kungstensvent.anders@gmail.com>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-house"></use>
</svg>
Visit product page
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div class="contact-card__body">
<div class="contact-card__top-img">
<img src="/mocks/img/contact-card-icon4.png" alt="icon" class="contact-card__icon">
</div>
<strong class="contact-card__label">Naco Louvres</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=mailto:kungstensvent.anders@gmail.com>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-house"></use>
</svg>
Visit product page
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div class="contact-card__body">
<div class="contact-card__top-img">
<img src="/mocks/img/contact-card-icon5.png" alt="icon" class="contact-card__icon">
</div>
<strong class="contact-card__label">Actionair dampers/control panels</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=mailto:kungstensvent.anders@gmail.com>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div class="contact-card__body">
<div class="contact-card__top-img">
<img src="/mocks/img/contact-card-icon6.png" alt="icon" class="contact-card__icon">
</div>
<strong class="contact-card__label">Safeguard Systems</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=mailto:kungstensvent.anders@gmail.com>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card ">
<div class="contact-card__body">
<div class="contact-card__top-img">
<img src="/mocks/img/contact-card-icon7.png" alt="icon" class="contact-card__icon">
</div>
<strong class="contact-card__label">Waterloo - Grilles and Diffusers</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Kompanigatan 1-2, 553 05<br />Kalmar
</span>
</li>
<li class="contact-list__item">
<a href=tel:031 1234 5678>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile-alt"></use>
</svg>
031 1234 5678
</a>
</li>
<li class="contact-list__item">
<a href=mailto:kungstensvent.anders@gmail.com>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
<li class="contact-list__item">
<a href=#>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Find a person
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-markets" aria-hidden="true" aria-labelledby="tab-markets">
<div class="markets">
<div class="row">
<div class="col col--span-12 col--span-l-3">
<div class="markets-sidebar">
<h4>Swegon Group AB</h4>
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
JA Wettergrens gata 7, SE-421 30 Västra Frölunda, Stourbridge Road, Bridgnorth, Shropshire, WV15 5BB
</span>
</li>
<li class="contact-list__item">
<a href=+46(0)31-895800>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mobile"></use>
</svg>
Tel +46 (0)31-89 58 00
</a>
</li>
<li class="contact-list__item">
<a href=mailto:kungstensvent.anders@gmail.com>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
</ul>
</div>
</div>
<div class="col col--span-12 col--span-l-9 col--gutter-xlarge-l">
<div class="markets-links">
<h4>Swegon Markets</h4>
<ul class="flag-list">
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--be" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Belgium (België)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--be" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Belgium (Belgique)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--ca" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Canada</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--dk" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Denmark (Danmark)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--fi" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Finland</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--fr" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>France</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--de" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Germany (Deutschland)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--it" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Italy (Italia)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--no" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Norway (Norge)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--pl" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Poland (Polska)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--ru" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Russia (Россия)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--es" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Spain (España)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--ch" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Switzerland (Schweiz)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--ch" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Switzerland (Suisse)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--ch" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Switzerland (Svizzera)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--se" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>Sweden (Sverige)</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--gb" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>UK</span>
</a>
</li>
<li class="flag-list__item ">
<a class="flag-list__link flag-list__link--us" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
<span>United States</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-find-a-person" aria-hidden="true" aria-labelledby="tab-find-a-person">
<div class="row">
<section class="panel theme--white
panel--no-padding-top h-margin-top-2">
<div class="panel__inner">
<div class="filters js-filters js-loader-overlay-holder" aria-controls="filter-documents-list">
<div class="h-margin-bottom-2">
<div class="row h-margin-bottom-1 js-dropdowns-holder h-margin-top-2">
<div class="col col--span-12 col--span-xs-6 col--span-m-3">
<div class="form-item form-item--select ">
<select id="office" class="select__select js-filter" name="office" aria-controls="filter-persons-cards-grid" data-type="select">
<option class="select__option" value="" disabled selected>Office</option>
<option class="select__option" value="a-working-lab-goteborg">A Working Lab, Göteborg</option>
<option class="select__option" value="assemblin-uppsala">Assemblin, Uppsala</option>
</select>
</div>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-m-3">
<div class="form-item form-item--select ">
<select id="productArea" class="select__select js-filter" name="productArea" aria-controls="filter-persons-cards-grid" data-type="select">
<option class="select__option" value="" disabled selected>Product area</option>
<option class="select__option" value="2">Option 2</option>
<option class="select__option" value="3">Option 3</option>
</select>
</div>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-m-3">
<div class="form-item form-item--select ">
<select id="role" class="select__select js-filter" name="role" aria-controls="filter-persons-cards-grid" data-type="select">
<option class="select__option" value="" disabled selected>Role</option>
<option class="select__option" value="2">Option 2</option>
<option class="select__option" value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="js-clear-filters-holder h-hidden-from-view row h-margin-top-1 h-margin-bottom-1 h-margin-top-2">
<div class="col">
<a href="#" class="js-clear-filters">Clear filters</a>
</div>
</div>
</div>
<div class="h-margin-top-3">
<div class="row row--justify-between row--align-center">
<div class="col col--auto-width">
<p class="search-result-count"></p>
</div>
<div class="col col--auto-width">
</div>
</div>
</div>
<div class="row" id="">
</div>
<script type="text/template" id="card-data-tmpl">
<% forEach(results, function(result) { %>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="card card--fluid-layout">
<a href="<%= result.url %>" class="card__cta">
<figure class="card__figure">
<img src="<%= result.imageSrc %>" alt="<%= result.imageAlt %>" class="card__image">
</figure>
<div class="card__body">
<span class="card__follow-link">
<svg class="icon " focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</span>
<h4 class="card__title"><%= result.title %></h4>
<p class="card__date"><%= result.date %></p>
<p class="card__description"><%= result.description %></p>
</div>
</a>
</div>
</div>
<% }); %>
</script>
<div class="row filters-result-container" id="filter-persons-cards-grid">
<div class="row h-margin-top-3">
<div class="row row--justify-around h-text-align-center-m">
<div class="col col--span-12 col--span-s-8 h-text-align-center">No results message</div>
</div>
</div>
</div>
<script type="text/template" id="person-card-data-tmpl">
<% forEach(results, function(result) { %>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card contact-card--person">
<div class="contact-card__body">
<div class="contact-card__top-img">
<% if (result.image.src != null) { %>
<img src="<%= result.image.src %>" alt="<%= result.image.alt %>" class="contact-card__icon">
<% } %>
</div>
<strong class="contact-card__label"><%= result.label %></strong>
<div class="contact-card__bottom-body">
<div class="contact-card__role"><%= result.role %></div>
<div class="js-options-limiter" data-option-selector=".js-option" data-option-limit="3">
<% forEach(result.productAreas , function(productArea) { %>
<div class="js-option"><%= productArea %></div>
<% }); %>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="show-info js-show-info">
<div class="show-info__wrapper js-show-info-wrapper" style="max-height: 0px;">
<div class="show-info__content">
<ul class="contact-list">
<% forEach(result.contactLinks, function(link) { %>
<li class="contact-list__item">
<% if (link.tag === 'a') { %>
<a
href="<%= link.href %>"
<%= Object.entries(link.attributes || {}).map(function(item) {
return item[0] + "='" + item[1] + "'"
}).join(" ") %>
>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-<%= link.icon %>"></use>
</svg>
<%= link.description %>
</a>
<% } else { %>
<span>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-<%= link.icon %>"></use>
</svg>
<%= link.description %>
</span>
<% } %>
</li>
<% }); %>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text" style="display: none;">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<% }); %>
</script>
<div class="h-text-align-center">
<a class="button js-load-more h-hidden-from-view " href="/mocks/api/personCards.json" aria-controls="filter-persons-cards-grid" data-template-id="person-card-data-tmpl">
<span class="button__label">Ladda fler</span>
</a>
</div>
</div>
</div>
</section>
<script type="text/template" id="no-results-data-tmpl"></script>
</div>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-our-partners" aria-hidden="true" aria-labelledby="tab-our-partners">
<div class="row">
<section class="panel theme--white
panel--no-padding-top h-margin-top-2">
<div class="panel__inner">
<div class="filters js-filters js-loader-overlay-holder" aria-controls="filter-documents-list">
<div class="h-margin-bottom-2">
<div class="row h-margin-bottom-1 js-dropdowns-holder h-margin-top-2">
<div class="col col--span-12 col--span-xs-6 col--span-m-3">
<div class="form-item form-item--select ">
<select id="categorySelect1" class="select__select js-filter" name="Country" aria-controls="filter-partners-cards-grid" data-type="select">
<option class="select__option" value="" disabled selected>Country</option>
<option class="select__option" value="1">Option 1</option>
<option class="select__option" value="2">Option 2</option>
</select>
</div>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-m-3">
<div class="form-item form-item--select ">
<select id="categorySelect2" class="select__select js-filter" name="Product area" aria-controls="filter-partners-cards-grid" data-type="select">
<option class="select__option" value="" disabled selected>Product area</option>
<option class="select__option" value="2">Option 2</option>
<option class="select__option" value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="js-clear-filters-holder h-hidden-from-view row h-margin-top-1 h-margin-bottom-1 h-margin-top-2">
<div class="col">
<a href="#" class="js-clear-filters">Clear filters</a>
</div>
</div>
</div>
<div class="h-margin-top-3">
<div class="row row--justify-between row--align-center">
<div class="col col--auto-width">
<p class="search-result-count"></p>
</div>
<div class="col col--auto-width">
</div>
</div>
</div>
<div class="row" id="">
</div>
<script type="text/template" id="card-data-tmpl">
<% forEach(results, function(result) { %>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="card card--fluid-layout">
<a href="<%= result.url %>" class="card__cta">
<figure class="card__figure">
<img src="<%= result.imageSrc %>" alt="<%= result.imageAlt %>" class="card__image">
</figure>
<div class="card__body">
<span class="card__follow-link">
<svg class="icon " focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</span>
<h4 class="card__title"><%= result.title %></h4>
<p class="card__date"><%= result.date %></p>
<p class="card__description"><%= result.description %></p>
</div>
</a>
</div>
</div>
<% }); %>
</script>
<div class="row filters-result-container" id="filter-partners-cards-grid">
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card contact-card--no-icon ">
<div class="contact-card__body">
<strong class="contact-card__label">Partner, Country</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
City name
</span>
</li>
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-fan"></use>
</svg>
Product area
</span>
</li>
<li class="contact-list__item">
<a href=https://int.swegon.com/sv/kontaktsidor/#product-area-tab>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-globe"></use>
</svg>
Visit website
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card contact-card--no-icon ">
<div class="contact-card__body">
<strong class="contact-card__label">Partner, Country</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
City name
</span>
</li>
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-fan"></use>
</svg>
Product area
</span>
</li>
<li class="contact-list__item">
<a href=https://int.swegon.com/sv/kontaktsidor/#product-area-tab>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-globe"></use>
</svg>
Visit website
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card contact-card--no-icon ">
<div class="contact-card__body">
<strong class="contact-card__label">Partner, Country</strong>
</div>
<div id="" class="show-info js-show-info ">
<div class="show-info__wrapper js-show-info-wrapper">
<div class="show-info__content">
<ul class="contact-list">
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
City name
</span>
</li>
<li class="contact-list__item">
<span href=>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-fan"></use>
</svg>
Product area
</span>
</li>
<li class="contact-list__item">
<a href=https://int.swegon.com/sv/kontaktsidor/#product-area-tab>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-globe"></use>
</svg>
Visit website
</a>
</li>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/template" id="partner-card-data-tmpl">
<% forEach(results, function(result) { %>
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
<div class="contact-card contact-card--no-icon">
<div class="contact-card__body">
<strong class="contact-card__label"><%= result.label %></strong>
</div>
<div class="show-info js-show-info">
<div class="show-info__wrapper js-show-info-wrapper" style="max-height: 0px;">
<div class="show-info__content">
<ul class="contact-list">
<% forEach(result.contactLinks, function(link) { %>
<li class="contact-list__item">
<% if (link.tag === 'a') { %>
<a
href="<%= link.href %>"
<%= Object.entries(link.attributes || {}).map(function(item) {
return item[0] + "='" + item[1] + "'"
}).join(" ") %>
>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-<%= link.icon %>"></use>
</svg>
<%= link.description %>
</a>
<% } else { %>
<span>
<svg class="icon contact-list__icon" focusable="false">
<use xlink:href="#icon-<%= link.icon %>"></use>
</svg>
<%= link.description %>
</span>
<% } %>
</li>
<% }); %>
</ul>
</div>
</div>
<div class="show-info__btn-holder js-show-info-btn-holder">
<button class="show-info__btn js-show-info-btn">
<span class="show-info__btn-opened-text">
More info
</span>
<span class="show-info__btn-closed-text" style="display: none;">
Hide info
</span>
<svg class="icon show-info__btn-icon" focusable="false">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<% }); %>
</script>
<div class="h-text-align-center">
<a class="button js-load-more h-hidden-from-view " href="/mocks/api/partnerCards.json" aria-controls="filter-partners-cards-grid" data-template-id="partner-card-data-tmpl">
<span class="button__label">Ladda fler</span>
</a>
</div>
</div>
</div>
</section>
<script type="text/template" id="no-results-data-tmpl"></script>
</div>
</div>
</div>
</div>
</div>
</section>
{{>@one-column-block hero}}
{{#>@panel modifiers="compact, no-padding-top"}}
{{#>@tabs tabs}}
{{#each items}}
<div role="tabpanel" class="tabs__content-item" id="panel-{{ id }}" aria-hidden="{{#if active }}false{{else}}true{{/if}}" aria-labelledby="tab-{{ id }}">
{{#switch panelType}}
{{#case 'accordion'}}
{{#> @panel modifiers="compact"}}
<div class="row row--justify-around h-text-align-center-m">
<div class="col col--span-12 col--span-s-8">
<h2>How can we help you?</h2>
</div>
</div>
<div class="row row--justify-center h-margin-top-3">
<div class="col col--span-12 col--span-l-10 col--span-xl-8">
<div class="accordion-list">
{{#each forms}}
{{> @accordion this}}
{{/each}}
</div>
</div>
</div>
{{/@panel}}
{{/case}}
{{#case 'helpdesk'}}
{{#> @panel modifiers="compact" theme="grey"}}
<div class="row row--justify-center">
<div class="col col--span-12 col--span-l-10 col--span-xl-10">
<h2 class="headline-1">Title text</h2>
<p>{{{preamble}}}</p>
<div class="row">
{{#each links}}
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-4">
{{> @card this}}
</div>
{{/each}}
</div>
</div>
</div>
{{/@panel}}
{{/case}}
{{#case 'offices'}}
<div class="row">
{{render "@filters--with-offices" merge="true"}}
</div>
{{/case}}
{{#case 'units'}}
<div class="row h-margin-top-3">
{{#each units}}
<div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
{{>@contact-card this}}
</div>
{{/each}}
</div>
{{/case}}
{{#case 'markets'}}
{{>@market-sites this}}
{{/case}}
{{#case 'persons'}}
<div class="row">
{{render "@filters--with-persons" merge="true"}}
</div>
{{/case}}
{{#case 'partners'}}
<div class="row">
{{render "@filters--with-partners" merge="true"}}
</div>
{{/case}}
{{/switch}}
</div>
{{/each}}
{{/@tabs}}
{{/@panel}}
{
"marketSelectorModal": {
"id": "market-selector",
"closeLabel": "Stäng"
},
"hero": {
"modifiers": [
"image-background-m",
"compact",
"margin-bottom",
"no-padding-vertical-m-down"
],
"title": "Contact us",
"preamble": "There are different ways to contact us. Choose the option that suits you best.",
"image": {
"src": "/mocks/img/contact-page-bg.png",
"alt": ""
}
},
"tabs": {
"modifiers": "with-anchors",
"items": [
{
"title": "Ask us",
"id": "ask-us",
"active": true,
"panelType": "accordion",
"forms": [
{
"title": "Ask us about life cycle cost",
"id": "lorem-ipsum-dolor-sit-amet",
"expanded": false,
"modifiers": "no-animation",
"body": "Content 1 here"
},
{
"title": "Specification advice",
"id": "lorem-ipsum-dolor-sit",
"expanded": false,
"modifiers": "no-animation",
"body": "Content 2 here"
},
{
"title": "Verify your solution?",
"id": "lorem-ipsum-dolor",
"expanded": false,
"modifiers": "no-animation",
"body": "Content 3 here"
},
{
"title": "Get a quote",
"id": "lorem-ipsum",
"expanded": false,
"modifiers": "no-animation",
"body": "Content 4 here"
},
{
"title": "Technical support",
"id": "lorem",
"expanded": false,
"modifiers": "no-animation",
"body": "Content 5 here"
},
{
"title": "Other",
"id": "lorem-ipsum-eleifend",
"expanded": false,
"modifiers": "no-animation",
"body": "Content 4 here"
}
]
},
{
"title": "Helpdesk",
"id": "helpdesk",
"active": false,
"panelType": "helpdesk",
"preamble": "Lorem ipsum dolor sit amet consectetur. Ac mauris massa nisi nunc viverra. Augue venenatis at amet fermentum a mattis sagittis. Sodales congue sit sem integer donec erat. Eu velit metus integer accumsan fringilla neque neque. Porta ultricies in amet posuere ipsum amet.",
"links": [
{
"title": "Lorem ipsum",
"description": "Lorem ipsum dolore sit amet"
},
{
"title": "Lorem ipsum 2",
"description": "Lorem ipsum dolore sit amet 2"
},
{
"title": "Lorem ipsum 3",
"description": "Lorem ipsum dolore sit amet 3"
}
]
},
{
"title": "Our offices",
"id": "our-offices",
"active": false,
"panelType": "offices",
"offices": [
{
"label": "Borås",
"image": {
"src": "/mocks/img/contact-page-img1.png",
"alt": "Contact Page Image"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-office",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile",
"tag": "a"
},
{
"description": "Send mail",
"href": "#",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#panel-find-a-person",
"icon": "search-small",
"tag": "a"
}
]
},
{
"label": "Gävle",
"image": {
"src": "/mocks/img/contact-page-img1.png",
"alt": "Contact Page Image"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-office",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile",
"tag": "a"
},
{
"description": "Send mail",
"href": "#",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"label": "Göteborg",
"image": {
"src": "/mocks/img/contact-page-img1.png",
"alt": "Contact Page Image"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-office",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile",
"tag": "a"
},
{
"description": "Send mail",
"href": "#",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"label": "Jönköping",
"image": {
"src": "/mocks/img/contact-page-img1.png",
"alt": "Contact Page Image"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-office",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile",
"tag": "a"
},
{
"description": "Send mail",
"href": "#",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"label": "Kalmar",
"image": {
"src": "/mocks/img/contact-page-img1.png",
"alt": "Contact Page Image"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-office",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile",
"tag": "a"
},
{
"description": "Send mail",
"href": "#",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"label": "Karlskoga",
"image": {
"src": "/mocks/img/contact-page-img1.png",
"alt": "Contact Page Image"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-office",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile",
"tag": "a"
},
{
"description": "Send mail",
"href": "#",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"label": "Karlstad",
"image": {
"src": "/mocks/img/contact-page-img1.png",
"alt": "Contact Page Image"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-office",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile",
"tag": "a"
},
{
"description": "Send mail",
"href": "#",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"label": "Kvänum",
"image": {
"src": "/mocks/img/contact-page-img1.png",
"alt": "Contact Page Image"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-office",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile",
"tag": "a"
},
{
"description": "Send mail",
"href": "#",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
}
]
},
{
"title": "Business units",
"id": "business-units",
"active": false,
"panelType": "units",
"units": [
{
"image": {
"src": "/mocks/img/contact-card-icon.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-unit",
"label": "Air Diffusion - Diffusers/Grilles",
"additionalInfo": true,
"additionalInfoTitle": "Title",
"additionalInfoText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
},
{
"description": "Visit product page",
"href": "#",
"icon": "house",
"tag": "a"
}
]
},
{
"image": {
"src": "/mocks/img/contact-card-icon2.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-unit",
"label": "Ventilation, Heating & Cooling",
"role": "Role",
"text": "Product area",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
},
{
"description": "Visit product page",
"href": "#",
"icon": "house",
"tag": "a"
}
]
},
{
"image": {
"src": "/mocks/img/contact-card-icon3.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-unit",
"label": "Service and Maintenance",
"infoHolder": true,
"infoTitle": "Title",
"textFields": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent."
}
],
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
},
{
"description": "Visit product page",
"href": "#",
"icon": "house",
"tag": "a"
}
]
},
{
"image": {
"src": "/mocks/img/contact-card-icon4.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-unit",
"label": "Naco Louvres",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
},
{
"description": "Visit product page",
"href": "#",
"icon": "house",
"tag": "a"
}
]
},
{
"image": {
"src": "/mocks/img/contact-card-icon5.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-unit",
"label": "Actionair dampers/control panels",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"image": {
"src": "/mocks/img/contact-card-icon6.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-unit",
"label": "Safeguard Systems",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"image": {
"src": "/mocks/img/contact-card-icon7.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-unit",
"label": "Waterloo - Grilles and Diffusers",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
}
]
},
{
"title": "Markets",
"id": "markets",
"active": false,
"panelType": "markets",
"groupTitle": "Swegon Group AB",
"marketsTitle": "Swegon Markets",
"contactLinks": [
{
"description": "JA Wettergrens gata 7, SE-421 30 Västra Frölunda, Stourbridge Road, Bridgnorth, Shropshire, WV15 5BB",
"icon": "map-pin"
},
{
"description": "Tel +46 (0)31-89 58 00",
"href": "+46(0)31-895800",
"icon": "mobile",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
}
]
},
{
"title": "Find a person",
"id": "find-a-person",
"active": false,
"panelType": "persons",
"persons": [
{
"image": {
"src": "/mocks/img/alexander-miletti.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "default",
"label": "Air Diffusion - Diffusers/Grilles",
"role": "Role",
"text": "Product area",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"image": {
"src": "/mocks/img/alexander-miletti.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "default",
"label": "Ventilation, Heating & Cooling",
"role": "Role",
"text": "Product area",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
},
{
"image": {
"src": "/mocks/img/alexander-miletti.png",
"alt": "icon"
},
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "default",
"label": "Ventilation",
"role": "Role",
"text": "Product area",
"contactLinks": [
{
"description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
"icon": "map-pin"
},
{
"description": "031 1234 5678",
"href": "tel:031 1234 5678",
"icon": "mobile-alt",
"tag": "a"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
},
{
"description": "Find a person",
"href": "#",
"icon": "search-small",
"tag": "a"
}
]
}
]
},
{
"title": "Our partners",
"id": "our-partners",
"active": false,
"panelType": "partners",
"partners": [
{
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-partner",
"label": "Partner, Country",
"role": "Role",
"text": "Product area",
"contactLinks": [
{
"description": "City name",
"icon": "map-pin"
},
{
"description": "Product area",
"icon": "fan"
},
{
"description": "Visit website",
"href": "https://int.swegon.com/sv/kontaktsidor/#product-area-tab",
"icon": "globe",
"tag": "a"
}
]
},
{
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-partner",
"label": "Partner, Country",
"role": "Role",
"text": "Product area",
"contactLinks": [
{
"description": "City name",
"icon": "map-pin"
},
{
"description": "Product area",
"icon": "fan"
},
{
"description": "Visit website",
"href": "https://int.swegon.com/sv/kontaktsidor/#product-area-tab",
"icon": "globe",
"tag": "a"
}
]
},
{
"showMoreText": "More info",
"hideText": "Hide info",
"cardType": "as-partner",
"label": "Partner, Country",
"role": "Role",
"text": "Product area",
"contactLinks": [
{
"description": "City name",
"icon": "map-pin"
},
{
"description": "Product area",
"icon": "fan"
},
{
"description": "Visit website",
"href": "https://int.swegon.com/sv/kontaktsidor/#product-area-tab",
"icon": "globe",
"tag": "a"
}
]
}
]
}
]
}
}
No notes defined.