The theme footer shows specific contact information, newsletter subscription and/or social media links.
Use the theme footer when the following conditions apply:
When these conditions apply, the theme footer can be used on all types of pages about the specific City of Ghent theme or on all types of pages on the separate website.
If used, the theme footer should always be placed just above the general footer.
Do not use the theme footer when the above conditions don’t apply.
Do not use the theme footer to present general contact information or general social media links for the City of Ghent. This information is already included in the general footer.
The theme footer is a combination of one or more of the following 3 components:
Each of these 3 components in the theme footer must contain content that applies specifically on the City of Ghent theme or separate website where it is used, in other words:
Each of these components can only once be present in the theme footer.
The following - and no more - 7 combinations can be used:
The theme footer should be used in one of those 7 combinations. The order of the components in the combinations should be respected.
Contact information in the theme footer can include the following types of contact information, in the following order:
The order is fixed. Each type of contact information is optional, however at least one of them should be included. For each type of contact information, there can be only be one item included, except for links, where multiple items can be included. In other words: there can be zero or one addresses, zero or one telephone numbers, zero or one e-mail addresses and one or more links. The order in which the types of contact information are included always stays the same.
The items are presented in a list with icons. Every item has its icon. The icon that is shown depends on the type of contact information that the item represents.
{% set blockContact %}
<div class="contact">
{% include '@heading' with {
'heading': 'h2',
'heading_class': 'h3',
'heading_text': 'Contact' ~ ' ' ~ theme
} %}
{% include '@list' with {
'type': 'icon-list',
'icon_items': [
'<i class="icon-marker" aria-hidden="true"></i><strong>City hall — </strong>Botermarkt 1, 9000 Gent',
'<i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+3292101060">09 210 10 60</a>',
'<i class="icon-envelope" aria-hidden="true"></i><a href="mailto:noreply@stad.gent">noreply@stad.gent</a>',
'<i class="icon-subscribe" aria-hidden="true"></i><a href="#">Contactform Ghent mobility</a>'
]
} %}
</div>
{% endset %}
{% set blockLogo %}
<div class="logo">
{% include '@image' with {
'src': '/styleguide/img/stock/puur_gent_logo.png' | path,
'alt_text': 'Puur Gent',
} %}
</div>
{% endset %}
<section class="theme-footer">
<h2 class="visually-hidden">{{ 'Theme footer' }}</h2>
<div class="content-container">
{% if (contact and newsletter) %}
{% set contactshown = true %}
<div class="top">
{{ logo ? blockLogo }}
{{ blockContact }}
</div>
{% endif %}
<div class="bottom">
{# Logo #}
{% if logo and not contactshown %}
{{ blockLogo }}
{% endif %}
{# Contact #}
{% if contact and not contactshown %}
{% set contactshown = true %}
{{ blockContact }}
{% endif %}
{# Newsletter #}
{% if newsletter %}
{% set content %}
{% include '@paragraph' with {
'text': 'Receive the most important mobility news in your mailbox.'
} %}
{% include '@subscribe' with {
label: 'Email address',
text: 'Subscribe',
id: 'subscribe-' ~ _self.name,
name: 'subscribe'
} %}
<div class="more-link">
{% include '@link' with {
'link': 'javascript:(void);',
'text': 'View the list and subscribe to one of our newsletters',
'modifier': 'standalone-link'
} %}
</div>
{% endset %}
{% include "@feature-block" with {
content: content,
modifier: 'secondary newsletter',
title: 'Subscribe to the newsletter of'~ ' ' ~ theme,
heading_type: 'h3'
} %}
{% endif %}
{% if social %}
<div class="social">
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': 'Follow this theme site on social media'
} %}
<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>
{% endif %}
</div>
</div>
</section>
<section class="theme-footer">
<h2 class="visually-hidden">Theme footer</h2>
<div class="content-container">
<div class="bottom">
<div class="logo">
<figure><img src="../../styleguide/img/stock/puur_gent_logo.png" alt="Puur Gent" /></figure>
</div>
<div class="social">
<h3 class="h4">Follow this theme site on social media</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>
</section>
{
"theme": "Ghent mobility",
"social": true,
"logo": true
}
.theme-footer {
margin: 6rem -1rem;
padding: 0;
.contact,
.newsletter,
.social,
.logo {
padding-top: 1.4rem;
padding-bottom: 1.4rem;
@include tablet {
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
}
.logo {
flex-shrink: 0;
text-align: center;
@include tablet {
margin-right: 2rem;
text-align: left;
}
img {
width: auto;
height: 10rem;
}
+ .social,
+ .contact {
padding-top: 0;
@include tablet {
padding-top: 2.4rem;
}
}
+ .newsletter {
padding: 40px 30px;
@include tablet {
padding: 60px 70px;
}
}
}
.contact {
@include medium-text();
margin-right: auto;
@include desktop {
padding-right: 40px;
}
h3 {
margin-bottom: 30px;
}
.icon-list {
@include medium-text();
margin: 0;
@include desktop {
column-gap: $gutter-width * 2;
column-count: 2;
}
li:last-of-type {
margin-bottom: 0;
}
li:not(:first-of-type) {
i {
@include theme('color', 'color-primary', 'link-color');
}
}
}
&:only-child .icon-list {
@include tablet {
column-count: 2;
}
}
}
.social {
@include tablet {
flex-shrink: 0;
width: 386px;
&:only-child {
width: auto;
}
}
h4 {
max-width: 100%;
margin-top: 0;
margin-bottom: 10px;
}
.social-list {
ul {
width: calc(100% + 20px);
a {
&,
&[download]:not(.button),
&[href^="http://"]:not(.button):not([href*="gent.be"]),
&[href^="https://"]:not(.button):not([href*="gent.be"]) {
@include theme('background-color', 'button-secondary-background');
}
}
}
li {
margin-bottom: 0;
padding: 0 10px 0 0;
&:last-child {
padding-right: 0;
}
}
}
}
.newsletter {
@include medium-text;
flex-grow: 1;
padding: 30px;
@include desktop {
max-width: 768px;
padding: 60px 70px;
}
.subscribe {
// 5/12 of max content-container width
max-width: calc(#{$bp-max-content} / 12 * 5);
}
.more-link {
margin-top: 30px;
}
&:not(:last-child) {
padding-bottom: 108px;
@include desktop {
padding-right: 120px;
padding-bottom: 60px;
}
}
+ .social {
@include theme('background-color', 'color-tertiary-pastel', 'theme-footer-social-background');
margin: -60px 20px 0;
padding: 30px;
.social-list {
ul {
width: calc(100% + 20px);
margin: 0;
a {
&,
&[download]:not(.button),
&[href^="http://"]:not(.button):not([href*="gent.be"]),
&[href^="https://"]:not(.button):not([href*="gent.be"]) {
@include theme('color', 'color-zero');
@include theme('background-color', 'color-none');
}
}
}
}
@include tablet {
margin: -60px auto 0;
padding: 67px;
}
@include desktop {
margin: 60px 0 0 -70px;
}
}
}
.content-container {
padding: 0 20px;
@media (min-width: $bp-max-content + 54px) {
padding-right: 0;
padding-left: 0;
}
}
.top,
.bottom {
@include tablet {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
@include desktop {
flex-wrap: nowrap;
}
}
.top {
& ~ .bottom {
margin-top: 12px;
@include tablet {
margin-top: 72px;
}
}
}
///
/// External links other than group Ghent get an indicator.
///
a {
@extend %a-remove-indicator;
}
}