<footer class="footer theme--blue">
<div class="footer__top">
<div class="row">
<div class="col col--span-12 col--span-m-6 col--span-xl-3">
<h4 class="footer__heading">Lär känna oss</h4>
<ul class="footer__top-link-list">
<li>
<button class='footer__sub-link-toggle' aria-expanded="false">
Varför Swegon
<svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
<use xlink:href="#icon-minus-thin"></use>
</svg>
<svg class="icon footer__icon footer__icon-plus" focusable="false">
<use xlink:href="#icon-plus-thin"></use>
</svg>
</button>
<ul class="footer__sub-link-list h-hidden-from-view">
<li>
<a href=#>Varför Swegon</a>
</li>
<li>
<a href=#>Varför Swegon</a>
</li>
</ul>
</li>
<li>
<a href=#>Referenser </a>
</li>
<li>
<a href=#>Guider </a>
</li>
<li>
<a href=#>Produkter & tjänster </a>
</li>
<li>
<a href=#>Support </a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-m-6 col--span-xl-3">
<h4 class="footer__heading">Lär känna oss</h4>
<ul class="footer__top-link-list">
<li>
<button class='footer__sub-link-toggle' aria-expanded="false">
Jobb och karriär
<svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
<use xlink:href="#icon-minus-thin"></use>
</svg>
<svg class="icon footer__icon footer__icon-plus" focusable="false">
<use xlink:href="#icon-plus-thin"></use>
</svg>
</button>
<ul class="footer__sub-link-list h-hidden-from-view">
<li>
<a href=#>Varför Swegon</a>
</li>
<li>
<a href=#>Varför Swegon</a>
</li>
</ul>
</li>
<li>
<a href=#>Om Swegon </a>
</li>
<li>
<a href=#>För leverantörer </a>
</li>
<li>
<a href=#>Swegon e-sales </a>
</li>
<li>
<a href=#>Allt om inomhusklimat (blogg) </a>
</li>
<li>
<a href=#>Bättre luft hemma (blogg) </a>
</li>
<li>
<a href=#>Press </a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-m-6 col--span-xl-3">
<h4 class="footer__heading">Lär känna oss</h4>
<ul class="footer__top-link-list">
<li>
<button class='footer__sub-link-toggle' aria-expanded="false">
Varför Swegon
<svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
<use xlink:href="#icon-minus-thin"></use>
</svg>
<svg class="icon footer__icon footer__icon-plus" focusable="false">
<use xlink:href="#icon-plus-thin"></use>
</svg>
</button>
<ul class="footer__sub-link-list h-hidden-from-view">
<li>
<a href=#>Varför Swegon</a>
</li>
<li>
<a href=#>Varför Swegon</a>
</li>
</ul>
</li>
<li>
<a href=#>Referenser </a>
</li>
<li>
<a href=#>Guider </a>
</li>
<li>
<a href=#>Produkter & tjänster </a>
</li>
<li>
<a href=#>Support </a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-m-6 col--span-xl-3">
<h4 class="footer__heading">Lär känna oss</h4>
<ul class="footer__top-link-list">
<li>
<button class='footer__sub-link-toggle' aria-expanded="false">
Jobb och karriär
<svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
<use xlink:href="#icon-minus-thin"></use>
</svg>
<svg class="icon footer__icon footer__icon-plus" focusable="false">
<use xlink:href="#icon-plus-thin"></use>
</svg>
</button>
<ul class="footer__sub-link-list h-hidden-from-view">
<li>
<a href=#>Varför Swegon</a>
</li>
<li>
<a href=#>Varför Swegon</a>
</li>
</ul>
</li>
<li>
<a href=#>Om Swegon </a>
</li>
<li>
<a href=#>För leverantörer </a>
</li>
<li>
<a href=#>Swegon e-sales </a>
</li>
<li>
<a href=#>Allt om inomhusklimat (blogg) </a>
</li>
<li>
<a href=#>Bättre luft hemma (blogg) </a>
</li>
<li>
<a href=#>Press </a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer__some-logo">
<div class="row">
<div class="col">
<ul class="footer__bottom-link-list footer__bottom-link-list--social">
<li>
<a href=# title="Youtube" target="_blank">
<img src="/mocks/img/youtube.svg" alt="Youtube icon">
</a>
</li>
<li>
<a href=# title="Linkedin" target="_blank">
<img src="/mocks/img/linkedin.svg" alt="Linkedin icon">
</a>
</li>
<li>
<a href=# title="Twitter" target="_blank">
<img src="/mocks/img/twitter.svg" alt="Twitter icon">
</a>
</li>
<li>
<a href=# title="Facebook" target="_blank">
<img src="/mocks/img/facebook.svg" alt="Facebook icon">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="row row--align-end row--justify-between">
<div class="col col--span-12 col--span-m-8 col--span-l-9">
<address>
<p>Swegon Group AB, JA Wettergrens gata 7, SE-421 30 Västra Frölunda, Tel +46 (0)31-89 58 00, Fax +46 (0)31-89 94 69, <a href='mailto:info@swegon.se'>info@swegon.se</a></p>
<ul class="footer__bottom-link-list">
<li>
<a href=#>Jobb och karriär</a>
</li>
<li>
<a href=#>Om Swegon</a>
</li>
<li>
<a href=#>För leverantörer</a>
</li>
</ul>
</address>
</div>
<div class="col col--span-12 col--span-m-4 col--span-l-3 h-text-align-right-m">
<a href="#" class="footer__logo-link">
<img src="/mocks/img/swegon-air-academy.svg" class="footer__logo-image" alt="#" />
</a>
</div>
</div>
</div>
</footer>
<footer class="footer {{additionalClasses}}">
<div class="footer__top">
<div class="row">
{{#with top}}
{{#each cols}}
<div class="col {{getmodifiers modifiers " col"}}">
<h4 class="footer__heading">{{title}}</h4>
{{#if links}}
<ul class="footer__top-link-list">
{{#each links}}
<li>
{{#unless children}}
<a href={{this.href}}>{{this.title}} </a>
{{/unless}}
{{#if children}}
<button class='footer__sub-link-toggle' aria-expanded="false">
{{this.title}}
{{>@icon id="minus-thin" additionalClasses="footer__icon footer__icon-minus h-hidden" }}
{{>@icon id="plus-thin" additionalClasses=" footer__icon footer__icon-plus" }}
</button>
<ul class="footer__sub-link-list h-hidden-from-view">
{{#each children}}
<li>
<a href={{this.href}}>{{this.title}}</a>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
{{#if hubspot}}
<div class="footer__hubspot">
{{{hubspot}}}
</div>
{{/if}}
</div>
{{/each}}
{{/with}}
</div>
</div>
<div class="footer__some-logo">
<div class="row">
<div class="col">
<ul class="footer__bottom-link-list footer__bottom-link-list--social">
{{#each bottom.socialLinks}}
<li>
<a href={{this.href}} title="{{this.title}}" target="_blank">
<img src="{{this.icon}}" alt="{{this.alt}}">
</a>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="row row--align-end row--justify-between">
{{#with bottom}}
<div class="col col--span-12 col--span-m-8 col--span-l-9">
<address>
<p>{{{adress}}}</p>
<ul class="footer__bottom-link-list">
{{#each links}}
<li>
<a href={{this.href}}>{{this.title}}</a>
</li>
{{/each}}
</ul>
</address>
</div>
<div class="col col--span-12 col--span-m-4 col--span-l-3 h-text-align-right-m">
<a href="{{../logo.link}}" class="footer__logo-link">
<img src="{{../logo.src}}" class="footer__logo-image" alt="#" />
</a>
</div>
{{/with}}
</div>
</div>
</footer>
{
"top": {
"cols": [
{
"title": "Lär känna oss",
"modifiers": [
"span-12",
"span-m-6",
"span-xl-3"
],
"links": [
{
"title": "Varför Swegon",
"href": "#",
"children": [
{
"title": "Varför Swegon",
"href": "#"
},
{
"title": "Varför Swegon",
"href": "#"
}
]
},
{
"title": "Referenser",
"href": "#"
},
{
"title": "Guider",
"href": "#"
},
{
"title": "Produkter & tjänster",
"href": "#"
},
{
"title": "Support",
"href": "#"
}
]
},
{
"title": "Lär känna oss",
"modifiers": [
"span-12",
"span-m-6",
"span-xl-3"
],
"links": [
{
"title": "Jobb och karriär",
"href": "#",
"children": [
{
"title": "Varför Swegon",
"href": "#"
},
{
"title": "Varför Swegon",
"href": "#"
}
]
},
{
"title": "Om Swegon",
"href": "#"
},
{
"title": "För leverantörer",
"href": "#"
},
{
"title": "Swegon e-sales",
"href": "#"
},
{
"title": "Allt om inomhusklimat (blogg)",
"href": "#"
},
{
"title": "Bättre luft hemma (blogg)",
"href": "#"
},
{
"title": "Press",
"href": "#"
}
]
},
{
"title": "Lär känna oss",
"modifiers": [
"span-12",
"span-m-6",
"span-xl-3"
],
"links": [
{
"title": "Varför Swegon",
"href": "#",
"children": [
{
"title": "Varför Swegon",
"href": "#"
},
{
"title": "Varför Swegon",
"href": "#"
}
]
},
{
"title": "Referenser",
"href": "#"
},
{
"title": "Guider",
"href": "#"
},
{
"title": "Produkter & tjänster",
"href": "#"
},
{
"title": "Support",
"href": "#"
}
]
},
{
"title": "Lär känna oss",
"modifiers": [
"span-12",
"span-m-6",
"span-xl-3"
],
"links": [
{
"title": "Jobb och karriär",
"href": "#",
"children": [
{
"title": "Varför Swegon",
"href": "#"
},
{
"title": "Varför Swegon",
"href": "#"
}
]
},
{
"title": "Om Swegon",
"href": "#"
},
{
"title": "För leverantörer",
"href": "#"
},
{
"title": "Swegon e-sales",
"href": "#"
},
{
"title": "Allt om inomhusklimat (blogg)",
"href": "#"
},
{
"title": "Bättre luft hemma (blogg)",
"href": "#"
},
{
"title": "Press",
"href": "#"
}
]
}
]
},
"logo": {
"src": "/mocks/img/swegon-air-academy.svg",
"link": "#"
},
"bottom": {
"adress": "Swegon Group AB, JA Wettergrens gata 7, SE-421 30 Västra Frölunda, Tel +46 (0)31-89 58 00, Fax +46 (0)31-89 94 69, <a href='mailto:info@swegon.se'>info@swegon.se</a>",
"links": [
{
"title": "Jobb och karriär",
"href": "#"
},
{
"title": "Om Swegon",
"href": "#"
},
{
"title": "För leverantörer",
"href": "#"
}
],
"socialLinks": [
{
"title": "Youtube",
"icon": "/mocks/img/youtube.svg",
"alt": "Youtube icon",
"href": "#"
},
{
"title": "Linkedin",
"icon": "/mocks/img/linkedin.svg",
"alt": "Linkedin icon",
"href": "#"
},
{
"title": "Twitter",
"icon": "/mocks/img/twitter.svg",
"alt": "Twitter icon",
"href": "#"
},
{
"title": "Facebook",
"icon": "/mocks/img/facebook.svg",
"alt": "Facebook icon",
"href": "#"
}
]
},
"additionalClasses": "theme--blue"
}
const footerLinks = document.querySelectorAll('.footer__top-link-list .footer__sub-link-toggle');
footerLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const minus = link.querySelector('.footer__icon-minus');
const plus = link.querySelector('.footer__icon-plus');
const subLinkList = link.nextElementSibling;
minus.classList.toggle('h-hidden');
plus.classList.toggle('h-hidden');
subLinkList.classList.toggle('h-hidden-from-view');
const isExpanded = link.getAttribute('aria-expanded') === 'true';
link.setAttribute('aria-expanded', String(!isExpanded));
});
});
.footer__top {
padding: size(3);
@include spacing-main-inner;
.col {
margin-bottom: size(3);
}
@include breakpoint($l) {
padding: 0 size(7) size(7) size(7);
margin-top: size(2);
}
@include spacing-main-inner;
&>div {
border-top: 1px solid $color-gray-1;
padding-top: size(5);
}
}
.footer__top-link-list {
list-style: none;
margin: 0;
padding: 0;
font-size: size(2.5);
line-height: size(4);
a {
color: $color-black;
@include color-theme {
color: $arg-theme-color;
}
}
}
.footer__bottom {
padding: size(2) 0;
font-size: size(1.75);
p {
margin-bottom: 0;
color: $color-gray-4;
line-height: size(3);
}
address {
font-style: normal;
}
a {
color: $color-green-dark;
@include color-theme {
color: $arg-theme-color;
}
}
@include spacing-main-inner;
}
.footer__some-logo {
padding: size(1) 0;
@include spacing-main-inner;
@include color-theme {
background-color: $color-white;
}
}
.footer__logo-link {
display: flex;
justify-content: start;
margin-top: 100px;
@include breakpoint($m) {
justify-content: end;
margin-top: 0;
}
}
.footer__logo-image {
display: block;
height: 28px;
@include breakpoint($xl) {
height: 36px;
}
}
.footer__bottom-link-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
column-gap: size(2);
a {
color: $color-green-dark;
@include color-theme {
color: $arg-theme-color;
}
}
li {
display: inline-block;
clear: both;
}
}
.footer__bottom-link-list--social {
margin-top: size(2);
align-items: center;
@include breakpoint($m) {
margin: 0;
}
}
.footer__heading {
@include color-theme {
color: $color-black;
}
}
.footer__icon {
width: 24px;
height: 24px;
}
.footer__sub-link-list {
list-style: none;
padding-left: size(2);
}
.footer__sub-link-toggle {
display: flex;
&:hover {
cursor: pointer;
}
}
import Footer from './Footer';
const els = document.querySelectorAll('.footer');
for (let el of els) {
new Footer(el);
}
No notes defined.