City of Ghent Style Guide

Footer

When to use this component

All websites and all pages must include the footer.

How it works

The footer component contains the following elements:

  • Gentinfo contact information
  • Useful links
  • Social media links
  • Legal links
  • Mention of District09

The Gentinfo contact information in itself contains the following elements:

  • A spot illustration
  • The Gentinfo typologo
  • Introduction to Gentinfo
  • Gentinfo telephone number with tel-link
  • Gentinfo e-mail address with mailto-link
  • Link to the Gentinfo contact form
  • Chat function

Requirements

The footer always refers to the City of Ghent in a general level.
Within a website, the footer always stays the same.

  • The useful links can be selected per website.
    There can be more or less of them and they can link to specific websites or pages that are relevant for that website.
  • The chat function (“Chat with Gentinfo”) can be omitted.
    This is a functional decision specific for the website.
  • All legal links showcased here are required, but the endpoints may be specific per website. We remind you that every city of Ghent website is legally required to have it’s own accessibility statement.

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.

Usage

  • The footer component is the last visible component on every page.
  • This organism must be included in a top-level footer landmark.
  • It can be preceded by the theme-footer section.

Footer 

<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>
 
<!-- En -->
<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>


<!-- Nl -->
<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>Heb je vragen, suggesties, meldingen of klachten, ... over de Stad Gent? We staan voor je klaar!</p>

                        <p><i class="icon-clock" aria-hidden="true"></i>Maandag tot en met zaterdag van 8 tot 19 uur</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">Contactformulier</a></li>
                        </ul>

                    </div>

                    <button type="button" class="button button-secondary gentinfo-chat-button icon-chat-round icon-left ">
                        Chat met ons
                    </button>
                </div>
            </div>

            <div class="footer--column">
                <h4>Nuttige links</h4>

                <ul class="">
                    <li><a href="https://jobs.gent.be/">Vacatures</a></li>
                    <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">Stadsplan</a></li>
                    <li><a href="https://persruimte.stad.gent/nl">Persruimte Stad Gent</a></li>
                </ul>

            </div>

            <div class="footer--column">
                <h4>Volg stad Gent</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">Gebruiksvoorwaarden</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">Toegankelijkheidsverklaring</a></li>
                <li><a href="#">Cookie-instellingen</a></li>
            </ul>

        </div>

        <div class="footer--column partnership">
            <span>In samenwerking met District09</span><i aria-hidden="true" class="icon-district09"></i>
        </div>
    </div>
</section>


<!-- Fr -->
<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>Vous avez des questions, des suggestions, des signalements ou des réclamations, ... concernant la Ville de Gand ? Nous sommes prêts pour vous!</p>

                        <p><i class="icon-clock" aria-hidden="true"></i>Joignable du lundi au samedi de 8 heures à 19 heures.</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">Formulaire de contact</a></li>
                        </ul>

                    </div>

                    <button type="button" class="button button-secondary gentinfo-chat-button icon-chat-round icon-left ">
                        Chatter avec nous
                    </button>
                </div>
            </div>

            <div class="footer--column">
                <h4>Liens utiles</h4>

                <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">
                <h4>Suivez la ville de Gand</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">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>


<!-- De -->
<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>Haben Sie Fragen, Anregungen, Berichte oder Beschwerden, ... über die Stadt Gent? Wir sind bereit für Sie!</p>

                        <p><i class="icon-clock" aria-hidden="true"></i>Montag bis Samstag von 8 Uhr bis 19 Uhr erreichbar.</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">Kontaktformular</a></li>
                        </ul>

                    </div>

                    <button type="button" class="button button-secondary gentinfo-chat-button icon-chat-round icon-left ">
                        Chatte mit uns
                    </button>
                </div>
            </div>

            <div class="footer--column">
                <h4>Nützliche Links</h4>

                <ul class="">
                    <li><a href="https://jobs.gent.be/">Stellenangebote</a></li>
                    <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">Stadtplan</a></li>
                    <li><a href="https://persruimte.stad.gent/nl">Presseinformationen Stadt Gent</a></li>
                </ul>

            </div>

            <div class="footer--column">
                <h4>Der Stadt Gent folgen</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">Nutzungsbedingungen</a></li>
                <li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/met-respect-voor-uw-privacy">Datenschutz</a></li>
                <li><a href="https://stad.gent/nl/responsible-disclosure">Verantwortungsvolle Offenlegung</a></li>
                <li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/toegankelijkheidsverklaring-stad-gent">Erklärung zur Zugänglichkeit der Website</a></li>
                <li><a href="#">Cookie-Einstellungen</a></li>
            </ul>

        </div>

        <div class="footer--column partnership">
            <span>In Zusammenarbeit mit District09</span><i aria-hidden="true" class="icon-district09"></i>
        </div>
    </div>
</section>


/* En */
{
  "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"
    ]
  }
}


/* Nl */
{
  "gentinfo": {
    "title": "gentinfo",
    "description": "Heb je vragen, suggesties, meldingen of klachten, ... over de Stad Gent? We staan voor je klaar!",
    "open": "Maandag tot en met zaterdag van 8 tot 19 uur",
    "phone": {
      "label": "09 210 10 10",
      "machine": "+32 9 210 10 10"
    },
    "email": "gentinfo@stad.gent",
    "form": "Contactformulier",
    "chat": "Chat met ons"
  },
  "disclaimer": {
    "title": "Nuttige links",
    "links": [
      "Vacatures",
      "Stadsplan",
      "Persruimte Stad Gent"
    ]
  },
  "social": {
    "title": "Volg stad Gent"
  },
  "bottom": {
    "partnership": "In samenwerking met District09",
    "links": [
      "Gebruiksvoorwaarden",
      "Privacy",
      "Responsible disclosure",
      "Toegankelijkheidsverklaring",
      "Cookie-instellingen"
    ]
  }
}


/* Fr */
{
  "gentinfo": {
    "title": "gentinfo",
    "description": "Vous avez des questions, des suggestions, des signalements ou des réclamations, ... concernant la Ville de Gand ? Nous sommes prêts pour vous!",
    "open": "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 nous"
  },
  "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"
    ]
  }
}


/* De */
{
  "gentinfo": {
    "title": "gentinfo",
    "description": "Haben Sie Fragen, Anregungen, Berichte oder Beschwerden, ... über die Stadt Gent? Wir sind bereit für Sie!",
    "open": "Montag bis Samstag von 8 Uhr bis 19 Uhr erreichbar.",
    "phone": {
      "label": "09 210 10 10",
      "machine": "+32 9 210 10 10"
    },
    "email": "gentinfo@stad.gent",
    "form": "Kontaktformular",
    "chat": "Chatte mit uns"
  },
  "disclaimer": {
    "title": "Nützliche Links",
    "links": [
      "Stellenangebote",
      "Stadtplan",
      "Presseinformationen Stadt Gent"
    ]
  },
  "social": {
    "title": "Der Stadt Gent folgen"
  },
  "bottom": {
    "partnership": "In Zusammenarbeit mit District09",
    "links": [
      "Nutzungsbedingungen",
      "Datenschutz",
      "Verantwortungsvolle Offenlegung",
      "Erklärung zur Zugänglichkeit der Website",
      "Cookie-Einstellungen"
    ]
  }
}
  • Content: 
    .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;
      }
    }
  }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/41-organisms/footer/_footer.scss
  • Size: 3.6 KB