All websites and all pages must include the footer.
The footer component contains the following elements:
The Gentinfo contact information in itself contains the following elements:
The footer always refers to the City of Ghent in a general level.
Within a website, the footer always stays the same.
All other elements in the footer are fixed and should be included as is. The Gentinfo contact information, social media links and the mention of District09 should stay the same for every website using the City of Ghent Style Guide.
The style and the layout cannot be changed in anyway.
In the examples the footer component is shown as it should be included in different languages.
<section class="footer">
<h2 class="visually-hidden">{{ 'Footer' }}</h2>
<div class="footer-top">
<div class="content-container">
{# Gentinfo #}
<div class="footer--column">
<div class="gentinfo-block">
<div class="gentinfo-block-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
{% include '@paragraph' with {
'text': gentinfo.description
} %}
{% include '@list' with {
'type': 'icon-list',
'icon_items': [
'<i class="icon-phone" aria-hidden="true"></i><a href="tel:' ~ gentinfo.phone.machine ~ '">' ~ gentinfo.phone.label ~ '</a>',
'<i class="icon-envelope" aria-hidden="true"></i><a href="mailto:' ~ gentinfo.email ~ '">' ~ gentinfo.email ~ '</a>',
'<i class="icon-document" aria-hidden="true"></i><a href="https://stad.gent/contact">' ~ gentinfo.form ~ '</a>'
]
} %}
</div>
{% include '@button' with { 'text': gentinfo.chat, 'type': 'primary', 'modifier': 'gentinfo-chat-button button icon-chat-round' } %}
</div>
</div>
{# Useful links #}
<div class="footer--column">
{% include '@heading' with {
'type': 'h3',
'heading_text': disclaimer.title
} %}
{% include "@list" with
{
"type": 'unordered',
"items": [
'<a href="https://jobs.gent.be/">' ~ disclaimer.links[0] ~ '</a>',
'<a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">' ~ disclaimer.links[1] ~ '</a>',
'<a href="https://persruimte.stad.gent/nl">' ~ disclaimer.links[2] ~ '</a>'
]
} %}
</div>
{# Social #}
<div class="footer--column">
{% include '@heading' with {
'type': 'h3',
'heading_text': social.title
} %}
<div class="social-list">
{% include "@list" with
{
"type": "unordered",
"items": [
'<a href="https://www.facebook.com/stadsbestuurgent"><i aria-hidden="true" class="icon-facebook"></i><span class="visually-hidden">Facebook</span></a>',
'<a href="https://www.twitter.com/stadgent"><i aria-hidden="true" class="icon-twitter"></i><span class="visually-hidden">Twitter</span></a>',
'<a href="https://www.linkedin.com/company/stad-gent"><i aria-hidden="true" class="icon-linkedin"></i><span class="visually-hidden">LinkedIn</span></a>',
'<a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw"><i aria-hidden="true" class="icon-youtube"></i><span class="visually-hidden">Youtube</span></a>',
'<a href="https://www.instagram.com/stadgent/"><i aria-hidden="true" class="icon-instagram"></i><span class="visually-hidden">Instagram</span></a>'
]
} %}
</div>
</div>
</div>
</div>
<div class="footer-bottom content-container">
<div class="footer--column">
{% include "@list" with
{
"type": 'unordered',
"items": [
'<a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/gebruiksvoorwaarden-website-stad-gent">' ~ bottom.links[0] ~ '</a>',
'<a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/met-respect-voor-uw-privacy">' ~ bottom.links[1] ~ '</a>',
'<a href="https://stad.gent/nl/responsible-disclosure">' ~ bottom.links[2] ~ '</a>',
'<a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/toegankelijkheidsverklaring-stad-gent">' ~ bottom.links[3] ~ '</a>',
'<a href="#">' ~ bottom.links[4] ~ '</a>',
]
} %}
</div>
{# Partnership #}
<div class="footer--column partnership">
<span>{{ bottom.partnership }}</span><i aria-hidden="true" class="icon-district09"></i>
</div>
</div>
</section>
<section class="footer">
<h2 class="visually-hidden">Footer</h2>
<div class="footer-top">
<div class="content-container">
<div class="footer--column">
<div class="gentinfo-block">
<div class="gentinfo-block-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
<p class="">Joignable du lundi au samedi de 8 heures à 19 heures.</p>
<ul class="icon-list ">
<li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10">09 210 10 10</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
<li><i class="icon-document" aria-hidden="true"></i><a href="https://stad.gent/contact">Formulaire de contact</a></li>
</ul>
</div>
<button type="button" class="button button-primary gentinfo-chat-button button icon-chat-round ">
Chatter avec Gentinfo
</button>
</div>
</div>
<div class="footer--column">
<h3>Liens utiles</h3>
<ul class="">
<li><a href="https://jobs.gent.be/">Postes vacants</a></li>
<li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">Plan de la ville</a></li>
<li><a href="https://persruimte.stad.gent/nl">Espace presse de la Ville de Gand</a></li>
</ul>
</div>
<div class="footer--column">
<h3>Suivez la ville de Gand</h3>
<div class="social-list">
<ul class="">
<li><a href="https://www.facebook.com/stadsbestuurgent"><i aria-hidden="true" class="icon-facebook"></i><span class="visually-hidden">Facebook</span></a></li>
<li><a href="https://www.twitter.com/stadgent"><i aria-hidden="true" class="icon-twitter"></i><span class="visually-hidden">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/company/stad-gent"><i aria-hidden="true" class="icon-linkedin"></i><span class="visually-hidden">LinkedIn</span></a></li>
<li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw"><i aria-hidden="true" class="icon-youtube"></i><span class="visually-hidden">Youtube</span></a></li>
<li><a href="https://www.instagram.com/stadgent/"><i aria-hidden="true" class="icon-instagram"></i><span class="visually-hidden">Instagram</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-bottom content-container">
<div class="footer--column">
<ul class="">
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/gebruiksvoorwaarden-website-stad-gent">Conditions d'utilisation</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/met-respect-voor-uw-privacy">Vie privée</a></li>
<li><a href="https://stad.gent/nl/responsible-disclosure">Divulgation responsable</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/toegankelijkheidsverklaring-stad-gent">Déclaration d'accessibilité</a></li>
<li><a href="#">Paramètres des cookies</a></li>
</ul>
</div>
<div class="footer--column partnership">
<span>En collaboration avec District09</span><i aria-hidden="true" class="icon-district09"></i>
</div>
</div>
</section>
{
"gentinfo": {
"title": "gentinfo",
"description": "Joignable du lundi au samedi de 8 heures à 19 heures.",
"phone": {
"label": "09 210 10 10",
"machine": "+32 9 210 10 10"
},
"email": "gentinfo@stad.gent",
"form": "Formulaire de contact",
"chat": "Chatter avec Gentinfo"
},
"disclaimer": {
"title": "Liens utiles",
"links": [
"Postes vacants",
"Plan de la ville",
"Espace presse de la Ville de Gand"
]
},
"social": {
"title": "Suivez la ville de Gand"
},
"bottom": {
"partnership": "En collaboration avec District09",
"links": [
"Conditions d'utilisation",
"Vie privée",
"Divulgation responsable",
"Déclaration d'accessibilité",
"Paramètres des cookies"
]
}
}
.footer {
margin-top: 4rem;
margin-right: -$gutter-width;
margin-left: -$gutter-width;
.content-container {
display: flex;
flex-wrap: wrap;
max-width: calc(#{$bp-max-content} + 54px);
padding: 0 $gutter-width;
@media (min-width: $bp-max-content + 54px) {
max-width: $bp-max-content;
padding-right: 0;
padding-left: 0;
}
}
.footer-top {
@include theme('background-color', 'color-primary--lighten-5', 'footer-background-color');
margin-bottom: 1.2rem;
.content-container {
padding-top: 2rem;
@include desktop {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.footer--column {
flex: 0 0 auto;
width: span(12 of 12);
margin-bottom: 2.6rem;
@include tablet {
width: span(6 of 12);
&:nth-of-type(2) {
margin-right: $gutter-width;
}
&:first-of-type {
width: span(12 of 12);
}
}
@include desktop {
width: span(3 of 12);
margin-top: 1.4rem;
margin-bottom: 0;
&:nth-of-type(3) {
margin-right: $gutter-width;
}
&:first-of-type {
order: 1;
width: span(6 of 12);
margin-top: 0;
}
}
}
ul {
margin: 0;
list-style: none;
}
.social-list ul {
width: calc(100% + 1rem);
margin: 0 -.5rem;
}
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
@include desktop {
justify-content: flex-start;
}
ul {
margin: 0;
font-size: .6rem;
list-style: none;
text-align: center;
}
li {
margin-bottom: .2rem;
@include tablet {
display: inline-block;
padding: 0 .4rem;
&:first-of-type {
padding-left: 0;
}
}
}
.partnership {
font-size: .7rem;
i.icon-district09 {
margin-left: .5rem;
font-size: 1.3rem;
line-height: 1.6rem;
vertical-align: middle;
}
}
.footer--column {
width: 100%;
margin-bottom: 1.2rem;
text-align: center;
@include desktop {
order: 2;
width: auto;
&.partnership {
order: 1;
margin-right: $gutter-width;
}
}
}
}
///
/// Links in the footer should never have icons.
///
[class*="cs--"] & a {
&::after {
content: none;
}
}
}