<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>
<a href=#>Varför Swegon</a>
</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>
<a href=#>Jobb och karriär</a>
</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>
<a href=#>Varför Swegon</a>
</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>
<a href=#>Jobb och karriär</a>
</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__logo">
<div class="row">
<div class="col">
<a href="#" class="footer__logo-link">
<img src="/mocks/img/swegon-air-academy.svg" class="footer__logo-image" alt="#" />
</a>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="row row--align-center 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">
<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>
</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>
<a href={{this.href}}>{{this.title}}</a>
</li>
{{/each}}
</ul>
{{/if}}
{{#if hubspot}}
<div class="footer__hubspot">
{{{hubspot}}}
</div>
{{/if}}
</div>
{{/each}}
{{/with}}
</div>
</div>
<div class="footer__logo">
<div class="row">
<div class="col">
<a href="{{logo.link}}" class="footer__logo-link">
<img src="{{logo.src}}" class="footer__logo-image" alt="#" />
</a>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="row row--align-center 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">
<ul class="footer__bottom-link-list footer__bottom-link-list--social">
{{#each socialLinks}}
<li>
<a href={{this.href}} title="{{this.title}}" target="_blank">
<img src="{{this.icon}}" alt="{{this.alt}}">
</a>
</li>
{{/each}}
</ul>
</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": "#"
},
{
"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": "#"
},
{
"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": "#"
},
{
"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": "#"
},
{
"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"
}
.footer__top {
background: $color-green-pale;
padding: size(3);
@include spacing-main-inner;
.col {
margin-bottom: size(3);
}
@include breakpoint($l) {
padding: size(7);
}
@include spacing-main-inner;
@include color-theme {
background: rgba($arg-theme-color, 0.3);
}
.theme--blue & {
background-color: $color-blue-3;
}
}
.footer__top-link-list {
list-style: none;
margin: 0;
padding: 0;
font-size: size(2.5);
line-height: size(4);
a {
color: $color-green-dark;
@include color-theme {
color: $arg-theme-color;
}
}
}
.footer__bottom {
padding: size(2) 0;
background: $color-gray-1;
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__logo {
padding: size(3) 0;
background: $color-green;
@include breakpoint($xl) {
padding: size(3.5) 0;
}
@include spacing-main-inner;
@include color-theme {
background-color: $color-white;
}
}
.footer__logo-link {
display: block;
}
.footer__logo-image {
display: block;
height: 28px;
@include breakpoint($xl) {
height: 36px;
}
}
.footer__bottom-link-list {
list-style: none;
margin: 0;
padding: 0;
a {
color: $color-green-dark;
@include color-theme {
color: $arg-theme-color;
}
}
li {
display: inline-block;
margin-right: size(2);
clear: both;
}
}
.footer__bottom-link-list--social {
margin-top: size(2);
@include breakpoint($m) {
margin: 0 0 0 size(2);
}
}
.footer__heading {
@include color-theme {
color: $color-black;
}
}
No notes defined.