<footer class="supt-footer">
<div class="supt-footer__main">
<div class="supt-footer__container container">
<div class="supt-footer__row row">
<div class="supt-footer__col col-sm-6 col-md-3">
<p class="supt-footer__col-title">Useful links</p>
<nav class="supt-footer__links">
<span>
<a href="#" class="supt-footer__link">Contact us</a>
</span>
<span>
<a href="#" class="supt-footer__link">Compliance programme</a>
</span>
<span>
<a href="#" class="supt-footer__link">Exercise your rights</a>
</span>
</nav>
</div>
<div class="supt-footer__col col-sm-6 col-md-3">
<p class="supt-footer__col-title">Documentation</p>
<nav class="supt-footer__links">
<span>
<a href="#" class="supt-footer__link">Technical</a>
</span>
</nav>
</div>
<div class="supt-footer__col col-sm-6 col-md-3">
<p class="supt-footer__col-title">Follow us</p>
<nav class="supt-footer__links">
<span>
<a href="#" class="supt-footer__link">LinkedIn</a>
</span>
</nav>
</div>
<div class="supt-footer__col col-sm-6 col-md-3">
<p class="supt-footer__col-title">Customer sites</p>
<span class="supt-button supt-footer__country-picker-button">
<button class="supt-button__link">
<span class="supt-button__title">
Select your country
</span>
</button>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Select your country
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="supt-footer__bottom">
<div class="supt-footer__container container">
<div class="supt-footer__row row">
<p class="supt-footer__copyright col-md-auto">©2024 Verisure Sàrl, chemin Jean-Baptiste Vandelle 3, 1290 Versoix, Geneva
<span>/</span>
Website by
<a href="https://superhuit.ch/" target="_blank">superhuit.ch</a>
</p>
<nav class="supt-footer__links col-md-auto">
<a href="#" class="supt-footer__link">Cookies policy</a>
<span>/</span>
<a href="#" class="supt-footer__link">Legal notice</a>
<span>/</span>
<a href="#" class="supt-footer__link">Disclosure policy</a>
</nav>
</div>
</div>
</div>
</footer>
No notes defined.
<footer class="supt-footer">
<div class="supt-footer__main">
<div class="supt-footer__container container">
<div class="supt-footer__row row">
{% for column in columns %}
<div class="supt-footer__col col-sm-6 col-md-3">
<p class="supt-footer__col-title">{{ column.title }}</p>
{% if column.links %}
<nav class="supt-footer__links">
{% for link in column.links %}
<span>
<a href="{{ link.href }}" class="supt-footer__link">{{ link.text }}</a>
</span>
{% endfor %}
</nav>
{% endif %}
{% if column.cta %}
{% include 'atoms/buttons/button/button.twig' with column.cta|merge({
class: 'supt-footer__country-picker-button'
}) %}
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="supt-footer__bottom">
<div class="supt-footer__container container">
<div class="supt-footer__row row">
<p class="supt-footer__copyright col-md-auto">{{ copyright }}
<span>/</span>
Website by
<a href="https://superhuit.ch/" target="_blank">superhuit.ch</a>
</p>
<nav class="supt-footer__links col-md-auto">
{% for legal in legal %}
{% if loop.index > 1 %}
<span>/</span>
{% endif %}
<a href="{{ legal.href }}" class="supt-footer__link">{{ legal.text }}</a>
{% endfor %}
</nav>
</div>
</div>
</div>
</footer>
{
"columns": [
{
"title": "Useful links",
"links": [
{
"text": "Contact us",
"href": "#"
},
{
"text": "Compliance programme",
"href": "#"
},
{
"text": "Exercise your rights",
"href": "#"
}
]
},
{
"title": "Documentation",
"links": [
{
"text": "Technical",
"href": "#"
}
]
},
{
"title": "Follow us",
"links": [
{
"text": "LinkedIn",
"href": "#"
}
]
},
{
"title": "Customer sites",
"cta": {
"title": "Select your country"
}
}
],
"copyright": "©2024 Verisure Sàrl, chemin Jean-Baptiste Vandelle 3, 1290 Versoix, Geneva",
"legal": [
{
"text": "Cookies policy",
"href": "#"
},
{
"text": "Legal notice",
"href": "#"
},
{
"text": "Disclosure policy",
"href": "#"
}
]
}
.supt-footer {
background-color: $color-grey-background;
padding-top: $spacing-12;
@media (min-width: $breakpoint-md) {
padding-top: $spacing-16;
}
.supt-footer__links {
display: flex;
}
&__col-title {
@extend %t-body-s;
font-weight: $font-weight-medium;
}
&__link {
@extend %t-body-s, %link-underline-reversed;
outline: none;
}
.supt-footer__main {
border-top: 1px solid $color-grey-2;
border-bottom: 1px solid $color-grey-2;
padding-block: $spacing-12;
@media (min-width: $breakpoint-md) {
padding-block: $spacing-16 $spacing-28;
}
.supt-footer__row {
row-gap: $spacing-10;
}
.supt-footer__col {
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: $spacing-4;
&-title {
font-weight: $font-weight-medium;
}
}
.supt-footer__links {
flex-direction: column;
align-items: flex-start;
row-gap: $spacing-2;
@media (min-width: $breakpoint-md) {
row-gap: $spacing-1;
}
.supt-footer__link {
color: $color-grey-5;
}
}
}
.supt-footer__bottom {
@extend %t-body-xs;
color: $color-grey-5;
padding-block: $spacing-4;
@media (min-width: $breakpoint-md) {
padding-block: $spacing-6;
}
.supt-footer__row {
justify-content: space-between !important;
row-gap: $spacing-4;
}
.supt-footer__copyright {
span {
margin-inline: $spacing-2;
@media (min-width: $breakpoint-md) {
margin-inline: $spacing-2;
}
}
a {
@extend %link-underline;
outline: none;
}
}
.supt-footer__links {
display: flex;
gap: $spacing-2-5;
.supt-footer__link {
display: inline-flex;
color: inherit;
}
}
.supt-footer__link {
@extend %t-body-xs;
}
}
}
import { COUNTRY_PICKER_EVENT } from "@/components/molecules/country-picker";
export class Footer {
$element: Element;
constructor($element: Element) {
this.$element = $element;
const $countryPickerButton = $element.querySelector('.supt-footer__country-picker-button') as HTMLElement;
if ($countryPickerButton) {
$countryPickerButton.addEventListener('click', this.toggleCountryPicker.bind(this));
}
}
toggleCountryPicker() {
document.dispatchEvent(COUNTRY_PICKER_EVENT);
}
}