<link media="all" rel="stylesheet" href="/assets/themes/default/css/footer.css?cb=">
<footer class="site-footer " data-module="footer">
<div class="grid-container site-footer__container">
<div class="grid-x site-footer__content">
<div class="site-footer__nav-container">
<div class="site-footer__nav-columns">
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Component</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
About us
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
What’s covered
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Here for you</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Support
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Contact us
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Submit a claim
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Component</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
About us
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
What’s covered
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Pricing
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
FAQs
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Here for you</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Support
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Contact us
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Submit a claim
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Component</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
About us
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Here for you</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Support
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Contact us
</a>
</li>
</ul>
</nav>
</div>
<div class="site-footer__social-and-richtext-container">
<nav class="site-footer__social-links js-social-links">
<h2 class="site-footer__links-title">Follow us on social</h2>
<div class="site-footer__social-links-container">
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="facebook" rel="noopener">
<span class="icon-facebook"></span> <span class="text">Facebook</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="twitter" rel="noopener">
<span class="icon-twitter"></span> <span class="text">Twitter</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="instagram" rel="noopener">
<span class="icon-instagram"></span> <span class="text">Instagram</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="youtube" rel="noopener">
<span class="icon-youtube"></span> <span class="text">YouTube</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="pinterest" rel="noopener">
<span class="icon-pinterest"></span> <span class="text">Pinterest</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="tripadvisor" rel="noopener">
<span class="icon-tripadvisor"></span> <span class="text">TripAdvisor</span>
</a>
</div>
</nav>
<div class="site-footer__rich-text" role="complementary">
<h2 class="site-footer__links-title">richTextBlockTitle</h2>
<div class="site-footer__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="site-footer__logo">
<a href="/" class="site-footer__logo--link" title="Default alt">
<img src="/media/logo.svg" alt="Default alt" loading="lazy" />
</a>
</div>
</div>
</div>
<div class="grid-container">
<div class="site-footer__footer">
<ul class="site-footer__hygiene-links">
<li class="site-footer__hygiene-link-item">
<a href="#" class="site-footer__hygiene-link">
Privacy Statement
</a>
</li>
<li class="site-footer__hygiene-link-item">
<a href="#" class="site-footer__hygiene-link">
Disclaimer
</a>
</li>
<li class="site-footer__hygiene-link-item">
<a href="#" class="site-footer__hygiene-link">
General Terms and Condition
</a>
</li>
<li class="site-footer__hygiene-link-item">
<a href="#" class="site-footer__hygiene-link">
Sitemap
</a>
</li>
</ul>
<div class="site-footer__copyright">
<p class="site-footer__copyright-text">Default 2019 ©</p>
<p class="site-footer__company-info-text">Site Name Address | Registered company No. 12345678</p>
</div>
</div>
</div>
</footer>
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/footer.css?cb={{cacheBuster}}">
<footer class="site-footer {{#unless socialLinks}}site-footer--no-social{{/unless}} {{#unless richTextBlock}}site-footer--no-rich-text{{/unless}}" data-module="footer">
<div class="grid-container site-footer__container">
<div class="grid-x site-footer__content">
<div class="site-footer__nav-container">
{{#if navigationColumns}}
<div class="site-footer__nav-columns">
{{#each navigationColumns}}
<nav class="site-footer__nav" role="navigation">
{{#if title}}
<h2 class="site-footer__links-title">
{{#if titleLink}}
<a href="{{titleLink}}">{{title}}</a>
{{else}}
{{title}}
{{/if}}
</h2>
{{/if}}
<ul class="site-footer__list">
{{#each links}}
<li class="site-footer__item">
<a href="{{url}}" class="site-footer__link" {{#if target}}target="{{target}}" {{/if}}>
{{text}}
</a>
</li>
{{/each}}
</ul>
</nav>
{{/each}}
</div>
{{/if}}
<div class="site-footer__social-and-richtext-container">
{{#if socialLinks}}
<nav class="site-footer__social-links js-social-links">
{{#if socialLinksTitle}}
<h2 class="site-footer__links-title">{{socialLinksTitle}}</h2>
{{/if}}
<div class="site-footer__social-links-container">
{{> @social-links socialLinks }}
</div>
</nav>
{{/if}}
{{#if richTextBlock}}
<div class="site-footer__rich-text" role="complementary">
{{#if richTextBlockTitle}}
<h2 class="site-footer__links-title">{{richTextBlockTitle}}</h2>
{{/if}}
<div class="site-footer__text">{{{richTextBlock}}}</div>
</div>
{{/if}}
</div>
</div>
<div class="site-footer__logo">
{{#if logoUrl}}
{{#if logoLink}}
<a href="{{logoLink}}" class="site-footer__logo--link" title="{{logoAltText}}">
{{/if}}
{{^logoLink}}
<a href="/" class="site-footer__logo--link" title="{{logoAltText}}">
{{/logoLink}}
<img src="{{logoUrl}}" alt="{{logoAltText}}" loading="lazy" />
</a>
{{/if}}
</div>
</div>
</div>
<div class="grid-container">
<div class="site-footer__footer">
{{#if hygieneLinks}}
<ul class="site-footer__hygiene-links">
{{#each hygieneLinks}}
<li class="site-footer__hygiene-link-item">
<a href="{{url}}" class="site-footer__hygiene-link">
{{text}}
</a>
</li>
{{/each}}
</ul>
{{/if}}
<div class="site-footer__copyright">
<p class="site-footer__copyright-text">{{copyrightText}}</p>
<p class="site-footer__company-info-text">{{companyInfoText}}</p>
</div>
</div>
</div>
</footer>
{
"theme": "default",
"firstInstance": true,
"copyrightText": "Default 2019 ©",
"companyInfoText": "Site Name Address | Registered company No. 12345678",
"logoLink": "/",
"logoUrl": "/media/logo.svg",
"logoAltText": "Default alt",
"siteName": "Default",
"navigationColumns": [
{
"title": "Component",
"titleLink": "#",
"links": [
{
"text": "About us",
"url": "#"
},
{
"text": "What’s covered",
"url": "#"
}
]
},
{
"title": "Here for you",
"titleLink": "#",
"links": [
{
"text": "Support",
"url": "#"
},
{
"text": "Contact us",
"url": "#"
},
{
"text": "Submit a claim",
"url": "#"
}
]
},
{
"title": "Component",
"titleLink": "#",
"links": [
{
"text": "About us",
"url": "#"
},
{
"text": "What’s covered",
"url": "#"
},
{
"text": "Pricing",
"url": "#"
},
{
"text": "FAQs",
"url": "#"
}
]
},
{
"title": "Here for you",
"titleLink": "#",
"links": [
{
"text": "Support",
"url": "#"
},
{
"text": "Contact us",
"url": "#"
},
{
"text": "Submit a claim",
"url": "#"
}
]
},
{
"title": "Component",
"titleLink": "#",
"links": [
{
"text": "About us",
"url": "#"
}
]
},
{
"title": "Here for you",
"titleLink": "#",
"links": [
{
"text": "Support",
"url": "#"
},
{
"text": "Contact us",
"url": "#"
}
]
}
],
"hygieneLinks": [
{
"text": "Privacy Statement",
"url": "#"
},
{
"text": "Disclaimer",
"url": "#"
},
{
"text": "General Terms and Condition",
"url": "#"
},
{
"text": "Sitemap",
"url": "#"
}
],
"socialLinksTitle": "Follow us on social",
"socialLinks": [
{
"text": "Facebook",
"url": "#",
"type": "facebook"
},
{
"text": "Twitter",
"url": "#",
"type": "twitter"
},
{
"text": "Instagram",
"url": "#",
"type": "instagram"
},
{
"text": "YouTube",
"url": "#",
"type": "youtube"
},
{
"text": "Pinterest",
"url": "#",
"type": "pinterest"
},
{
"text": "TripAdvisor",
"url": "#",
"type": "tripadvisor"
}
],
"richTextBlockTitle": "richTextBlockTitle",
"richTextBlock": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
}
import SocialLinks from '../../../../js/utils/social-links';
import addToDataLayer from '../../../../js/utils/datalayer';
class Footer {
constructor(module) {
new SocialLinks(module.querySelector('.js-social-links'));
const links = module.querySelectorAll('a:not(.js-social-link)');
links.forEach((link) => {
link.addEventListener('click', () => {
addToDataLayer({
'event': 'link.click',
'linkName': unescape(link.innerHTML).trim(),
'linkType': 'footer nav',
});
});
});
}
}
export default (module) => new Footer(module);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
@import '../social-links';
%colwidth {
width: 100%;
@include breakpoint(medium) {
margin: 0;
width: 25%;
.site-footer--no-social & {
width: 33%;
}
}
}
.site-footer {
$this: &;
background: $color-footer-bg;
box-sizing: border-box;
padding: rem(19) 0 rem(50);
position: relative;
width: 100%;
@include breakpoint(medium) {
padding-top: rem(87);
text-align: left;
}
&__company-info {
margin-left: 0;
position: relative;
}
&__container {
padding-bottom: rem(18);
@include breakpoint(medium) {
padding-bottom: 0;
}
}
&__content {
justify-content: space-between;
@include breakpoint(medium) {
padding-bottom: rem(84);
}
}
&__nav-container {
display: flex;
justify-content: flex-end;
width: 100%;
@include breakpoint(medium) {
order: 2;
width: 75%;
}
}
&__nav-columns {
width: 100%;
@include breakpoint(medium) {
break-inside: avoid;
column-count: 3;
width: 75%;
#{$this}--no-social#{$this}--no-rich-text & {
width: 100%;
}
}
}
&__social-and-richtext-container {
width: 100%;
@include breakpoint(medium) {
width: 25%;
}
#{$this}--no-social#{$this}--no-rich-text & {
display: none;
}
}
&__social-links {
padding-bottom: rem(20);
width: 100%;
}
&__copyright {
margin: 0;
width: 100%;
@include breakpoint(medium) {
margin-top: 0;
order: 1;
text-align: left;
width: 25%;
}
}
&__footer {
display: flex;
}
&__copyright-text {
@extend %p--fine;
}
&__company-info-text {
@extend %p--fine;
}
&__hygiene-links {
@extend %p--small;
padding-bottom: rem(30);
width: 100%;
@include breakpoint(medium) {
order: 2;
padding-bottom: 0;
text-align: right;
width: 75%;
}
}
&__hygiene-link-item {
display: block;
@include breakpoint(medium) {
display: inline-block;
padding-right: rem(32);
&:last-child {
padding-right: 0;
}
}
}
&__hygiene-link {
color: $color-footer;
display: inline-block;
padding-bottom: rem(10);
&:link {
color: $color-footer-link;
}
&:visited {
color: $color-footer-visited;
}
&:hover {
color: $color-footer-hover;
}
&:active {
color: $color-footer-active;
}
}
&__item {
padding-bottom: rem(10);
}
&__link {
box-sizing: border-box;
color: $color-footer;
&:link {
color: $color-footer-link;
}
&:visited {
color: $color-footer-visited;
}
&:hover {
color: $color-footer-hover;
}
&:active {
color: $color-footer-active;
}
}
&__links {
margin-bottom: rem(30);
@include breakpoint(medium) {
margin-bottom: 0;
}
}
&__links-title {
@extend %heading04;
}
&__logo {
width: 100%;
@include breakpoint(medium) {
order: 1;
width: 25%;
}
&--link {
display: block;
margin: rem(30) auto;
width: rem(152);
@include breakpoint(medium) {
margin: 0;
width: 110px;
}
}
}
&__social-links-container {
padding-bottom: rem(10);
}
&__text {
@extend %p--body;
padding-bottom: rem(30);
}
}
No notes defined.