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 dark-background">
<div class="gentinfo-block-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
{% include '@paragraph' with {
'text': gentinfo.description
} %}
{% include '@paragraph' with {
'text': '<i class="icon-clock" aria-hidden="true"></i>' ~ gentinfo.open
} %}
{% include '@list' with {
'type': 'icon-list',
'modifier': 'inline',
'icon_items': [
'<i class="icon-phone" aria-hidden="true"></i><a class="no-icon" href="tel:' ~ gentinfo.phone.machine ~ '">' ~ gentinfo.phone.label ~ '</a>',
'<i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:' ~ gentinfo.email ~ '">' ~ gentinfo.email ~ '</a>',
'<i class="icon-subscribe" aria-hidden="true"></i><a class="no-icon" href="https://stad.gent/contact">' ~ gentinfo.form ~ '</a>'
]
} %}
</div>
{% include '@button' with { 'text': gentinfo.chat, 'type': 'secondary', 'modifier': 'gentinfo-chat-button icon-chat-round icon-left' } %}
</div>
</div>
{# Useful links #}
<div class="footer--column">
{% include '@heading' with {
'heading': 'h4',
'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 {
'heading': 'h4',
'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 dark-background">
<div class="gentinfo-block-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
<p>Do you have questions, suggestions, complaints, ... about the City of Ghent? We are here for you!</p>
<p><i class="icon-clock" aria-hidden="true"></i>Monday to Saturday from 8.00 am until 7.00 pm.</p>
<ul class="icon-list inline">
<li><i class="icon-phone" aria-hidden="true"></i><a class="no-icon" href="tel:+32 9 210 10 10">09 210 10 10</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
<li><i class="icon-subscribe" aria-hidden="true"></i><a class="no-icon" href="https://stad.gent/contact">Contact form</a></li>
</ul>
</div>
<button type="button" class="button button-secondary gentinfo-chat-button icon-chat-round icon-left ">
Chat with us
</button>
</div>
</div>
<div class="footer--column">
<h4>Useful links</h4>
<ul class="">
<li><a href="https://jobs.gent.be/">Vacancies</a></li>
<li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">City plan</a></li>
<li><a href="https://persruimte.stad.gent/nl">City of Ghent newsroom</a></li>
</ul>
</div>
<div class="footer--column">
<h4>Follow the city of Ghent</h4>
<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">Terms of use</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/met-respect-voor-uw-privacy">Privacy</a></li>
<li><a href="https://stad.gent/nl/responsible-disclosure">Responsible disclosure</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/toegankelijkheidsverklaring-stad-gent">Accessibility statement</a></li>
<li><a href="#">Cookie settings</a></li>
</ul>
</div>
<div class="footer--column partnership">
<span>In cooperation with District09</span><i aria-hidden="true" class="icon-district09"></i>
</div>
</div>
</section>
{
"gentinfo": {
"title": "gentinfo",
"description": "Do you have questions, suggestions, complaints, ... about the City of Ghent? We are here for you!",
"open": "Monday to Saturday from 8.00 am until 7.00 pm.",
"phone": {
"label": "09 210 10 10",
"machine": "+32 9 210 10 10"
},
"email": "gentinfo@stad.gent",
"form": "Contact form",
"chat": "Chat with us"
},
"disclaimer": {
"title": "Useful links",
"links": [
"Vacancies",
"City plan",
"City of Ghent newsroom"
]
},
"social": {
"title": "Follow the city of Ghent"
},
"bottom": {
"partnership": "In cooperation with District09",
"links": [
"Terms of use",
"Privacy",
"Responsible disclosure",
"Accessibility statement",
"Cookie settings"
]
}
}
.footer {
margin: 60px -20px 0;
@include desktop() {
margin-top: 280px;
}
h4 {
margin-top: 0;
margin-bottom: 15px;
}
.content-container {
display: flex;
flex-wrap: wrap;
max-width: calc(#{$bp-max-content} + 53px);
@media (min-width: $bp-max-content + 53px) {
max-width: $bp-max-content;
padding-right: 0;
padding-left: 0;
gap: $grid-gutter-width;
}
}
.footer-top {
background-color: transparent;
@include desktop {
@include theme('background-color', 'color-tertiary-light', 'footer-background-color');
}
.content-container {
padding-top: 0;
@include desktop {
padding-bottom: 70px;
}
}
.footer--column {
@include theme('background-color', 'color-tertiary-light', 'footer-background-color');
@include col(12);
flex: 0 0 auto;
padding: 20px 20px 60px;
// Gentinfo column.
&:first-of-type {
padding-bottom: 20px;
background-color: transparent;
}
&:nth-of-type(2) {
margin-top: -74px;
padding-top: 90px;
padding-bottom: 20px;
}
@include tablet {
width: 50%;
margin-top: -74px;
padding-top: 90px;
// Gentinfo column.
&:first-of-type {
@include col(12);
margin-top: 0;
padding-top: 0;
background-color: transparent;
}
}
@include breakpoint(1223px) {
padding-right: 0;
padding-left: 0;
// Gentinfo column.
&:first-of-type {
padding-right: 20px;
}
}
@include desktop {
@include col(3);
margin-top: 58px;
margin-bottom: 0;
padding-bottom: 20px;
&:nth-of-type(2),
&:nth-of-type(3) {
margin-top: 0;
}
// Gentinfo column.
&:first-of-type {
@include col(6);
order: 1;
margin-top: 0;
}
}
@include breakpoint(1224px) {
// Gentinfo column.
&:first-of-type {
padding-right: 0;
padding-left: 0;
}
}
a {
@include medium-text;
}
}
ul {
margin: 0;
list-style: none;
}
.social-list ul {
margin: 0 -5px;
}
}
.footer-bottom {
@include small-text;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 20px;
gap: 20px;
@media (min-width: $bp-max-content + 53px) {
padding: 20px 0;
}
&.content-container {
justify-content: space-between;
}
ul {
@include small-text();
margin: 0;
list-style: none;
}
li {
margin-bottom: 4px;
@include tablet {
display: inline-block;
padding: 0 8px;
&:first-of-type {
padding-left: 0;
}
}
}
.partnership {
@include small-text();
line-height: 150%;
i.icon-district09 {
margin-left: 10px;
font-size: 1.4rem;
vertical-align: middle;
}
}
.footer--column {
order: 2;
width: 100%;
&.partnership {
order: 1;
}
@include desktop {
width: auto;
}
}
}
///
/// Links in the footer should never have icons.
///
[class*="cs--"] & a {
&[href^="http://"]:not(.no-icon):not(.tag),
&[href^="https://"]:not(.no-icon):not(.tag) {
margin-right: inherit;
&::after {
content: none;
}
}
}
}