City of Ghent Style Guide - Version 3.1.1

Footer

Footer

When to use this component

All websites and all pages must include the footer.

The footer should be used as is.

See the specific requirements for the City of Ghent website and for separate websites below.

How it works

The footer component is the last visible component on every page. The position of the footer is fixed on the page.

The footer is fully responsive and shows the same content and functionalitiy on all screen resolutions.

The footer component contains the following elements:

  • Gentinfo contact information (fixed)
  • Useful links (fixed)
  • Postal address (fixed)
  • Social media links (fixed)
  • Mention of Digipolis (fixed)

The Gentinfo contact information in itself contains the following fixed elements:

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

Specific requirements for the City of Ghent website and for separate websites are listed below.

Requirements

City of Ghent website

The footer on the City of Ghent website should always be used as is. The elements, style, layout and content in the footer cannot be changed in anyway.

In the examples the footer component is shown as it should be included in different languages.

Other requirements:

  • The footer on the City of Ghent website and on pages within City of Ghent themes should always stay the same.
  • The footer always refers to the City of Ghent in a general level.
  • The components in the footer are fixed and must always be included.
  • The links in the footer always refer to the same web pages.
  • The social media links always refer to the social media pages of the City of Ghent in a general level.
  • The language button that opens a popup with links to the other language versions must always be included.

Separate websites

  • The footer on a separate website should always stay the same within the separate website.
  • The footer always refers to the City of Ghent in a general level.
  • The components in the footer are fixed and must always be included.
    • The only exceptions are:
      • The useful links. There can be more or less of them.
      • The chat function (“Chat with Gentinfo”) can be omitted. This is a functional decision specific for the separate website.
      • The language button that opens the popup with links to the other language versions can be omitted if this is not necessary or not applicable for the separate website.
        • In the popup with links to the other language versions, there can also be more or less language versions depending on which languages are or aren’t supported by the separate website.
    • The postal address, Gentinfo contact information, social media links and mention of Digipolis cannot be altered, this should stay the same als on the City of Ghent website and City of Ghent themes.
  • The links in the footer always refer to the same web pages.
  • The social media links always refer to the social media pages of the City of Ghent in a general level.

Usage

  • This organism must be included in a top-level footer landmark.
  • It can be preceded by the theme-footer section.
<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">
            <h2 class="visually-hidden">Gentinfo</h2>
            {% include '@image' with {
              src: '/styleguide/img/svg/gentinfo-logo.svg' | path,
              modifier: 'gentinfo-logo',
              alt_text: 'Gentinfo',
              ratio: null
            } %}

            {% 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 ~ '" alt="Gentinfo tel link">' ~ gentinfo.phone.label ~ '</a>',
                '<i class="icon-envelope" aria-hidden="true"></i><a href="mailto:' ~ gentinfo.email ~ '" alt="Gentinfo mail link">' ~ gentinfo.email ~ '</a>',
                '<i class="icon-document" aria-hidden="true"></i><a href="#">' ~ gentinfo.form ~ '</a>'
              ]
            } %}
          </div>

          {% include '@button' with { 'text': gentinfo.chat, 'type': 'primary', 'modifier': 'gentinfo-chat-button button icon-chat-round' } %}
        </div>
      </div>

      {# Disclaimer #}
      <div class="footer--column">
        <div class="dg-block-disclaimer">
          {% include '@heading' with {
            'type': 'h2',
            '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>',
                '<a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info">' ~ disclaimer.links[3] ~ '</a>',
                '<a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/met-respect-voor-uw-privacy">' ~ disclaimer.links[4] ~ '</a>',
              ]
            }
          %}
        </div>
      </div>

      {# Post address #}
      <div class="footer--column">
        <div class="dg-block-post-address">
          {% include '@heading' with {
            'type': 'h2',
            'heading_text': address.title
          } %}
          <address>
            {{ address.name }}<br/>
            {{ address.street }}<br/>
            {{ address.city }}
          </address>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-bottom content-container">

    {# Partnership #}
    <div class="footer--column">
      <div class="db-block-partnership">
        {% include '@paragraph' with {
          'text': bottom.partnership
        } %}
        <i aria-hidden="true" class="icon-digipolis"></i>
      </div>
    </div>

    {# Social media #}
    <div class="footer--column">
      <div class="dg-blocks-social">
        <span>{{ bottom.social }}</span>
        <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>
</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">
                    <div class="gentinfo-block-content">
                        <h2 class="visually-hidden">Gentinfo</h2>
                        <figure class="gentinfo-logo"><img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" /></figure>
                        <p class="">We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm.</p>

                        <ul class="icon-list ">
                            <li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10" alt="Gentinfo tel link">09 210 10 10</a></li>
                            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">gentinfo@stad.gent</a></li>
                            <li><i class="icon-document" aria-hidden="true"></i><a href="#">Contact form</a></li>
                        </ul>

                    </div>

                    <button type="button" class="button button-primary gentinfo-chat-button button icon-chat-round ">
                        Chat with Gentinfo
                    </button>
                </div>
            </div>

            <div class="footer--column">
                <div class="dg-block-disclaimer">
                    <h2>Useful links</h2>

                    <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>
                        <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info">Legal information</a></li>
                        <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/met-respect-voor-uw-privacy">Privacy</a></li>
                    </ul>

                </div>
            </div>

            <div class="footer--column">
                <div class="dg-block-post-address">
                    <h2>Postal address</h2>
                    <address>
                        City of Ghent<br />
                        Botermarkt 1<br />
                        9000 Ghent
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom content-container">

        <div class="footer--column">
            <div class="db-block-partnership">
                <p class="">In cooperation with Digipolis</p>
                <i aria-hidden="true" class="icon-digipolis"></i>
            </div>
        </div>

        <div class="footer--column">
            <div class="dg-blocks-social">
                <span>Follow the City of Ghent on social media</span>
                <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>


<!-- 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">
                    <div class="gentinfo-block-content">
                        <h2 class="visually-hidden">Gentinfo</h2>
                        <figure class="gentinfo-logo"><img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" /></figure>
                        <p class="">Bereikbaar van maandag tot en met zaterdag van 8 tot 19 uur.</p>

                        <ul class="icon-list ">
                            <li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10" alt="Gentinfo tel link">09 210 10 10</a></li>
                            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">gentinfo@stad.gent</a></li>
                            <li><i class="icon-document" aria-hidden="true"></i><a href="#">Contactformulier</a></li>
                        </ul>

                    </div>

                    <button type="button" class="button button-primary gentinfo-chat-button button icon-chat-round ">
                        Chat met Gentinfo
                    </button>
                </div>
            </div>

            <div class="footer--column">
                <div class="dg-block-disclaimer">
                    <h2>Nuttige links</h2>

                    <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>
                        <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info">Juridische info</a></li>
                        <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/met-respect-voor-uw-privacy">Privacy</a></li>
                    </ul>

                </div>
            </div>

            <div class="footer--column">
                <div class="dg-block-post-address">
                    <h2>Postadres</h2>
                    <address>
                        Stad Gent<br />
                        Botermarkt 1<br />
                        9000 Gent
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom content-container">

        <div class="footer--column">
            <div class="db-block-partnership">
                <p class="">In samenwerking met Digipolis</p>
                <i aria-hidden="true" class="icon-digipolis"></i>
            </div>
        </div>

        <div class="footer--column">
            <div class="dg-blocks-social">
                <span>Volg de Stad Gent op sociale media</span>
                <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>


<!-- 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">
                    <div class="gentinfo-block-content">
                        <h2 class="visually-hidden">Gentinfo</h2>
                        <figure class="gentinfo-logo"><img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" /></figure>
                        <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" alt="Gentinfo tel link">09 210 10 10</a></li>
                            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">gentinfo@stad.gent</a></li>
                            <li><i class="icon-document" aria-hidden="true"></i><a href="#">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">
                <div class="dg-block-disclaimer">
                    <h2>Liens utiles</h2>

                    <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>
                        <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info">Informations juridiques</a></li>
                        <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/met-respect-voor-uw-privacy">Confidentialité</a></li>
                    </ul>

                </div>
            </div>

            <div class="footer--column">
                <div class="dg-block-post-address">
                    <h2>Adresse postale</h2>
                    <address>
                        Ville de Gand<br />
                        Botermarkt 1<br />
                        9000 Gand
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom content-container">

        <div class="footer--column">
            <div class="db-block-partnership">
                <p class="">En collaboration avec Digipolis</p>
                <i aria-hidden="true" class="icon-digipolis"></i>
            </div>
        </div>

        <div class="footer--column">
            <div class="dg-blocks-social">
                <span>Suivez la Ville de Gand sur les réseaux sociaux</span>
                <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>


<!-- 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">
                    <div class="gentinfo-block-content">
                        <h2 class="visually-hidden">Gentinfo</h2>
                        <figure class="gentinfo-logo"><img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" /></figure>
                        <p class="">Von Montag bis Samstag von 8 Uhr bis 19 Uhr erreichbar.</p>

                        <ul class="icon-list ">
                            <li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10" alt="Gentinfo tel link">09 210 10 10</a></li>
                            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">gentinfo@stad.gent</a></li>
                            <li><i class="icon-document" aria-hidden="true"></i><a href="#">Kontaktformular</a></li>
                        </ul>

                    </div>

                    <button type="button" class="button button-primary gentinfo-chat-button button icon-chat-round ">
                        Chat mit Gentinfo
                    </button>
                </div>
            </div>

            <div class="footer--column">
                <div class="dg-block-disclaimer">
                    <h2>Nützliche Links</h2>

                    <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>
                        <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info">Rechtliche Informationen</a></li>
                        <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/met-respect-voor-uw-privacy">Datenschutz</a></li>
                    </ul>

                </div>
            </div>

            <div class="footer--column">
                <div class="dg-block-post-address">
                    <h2>Postanschrift</h2>
                    <address>
                        Der Stadt Gent<br />
                        Botermarkt 1<br />
                        9000 Gent
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom content-container">

        <div class="footer--column">
            <div class="db-block-partnership">
                <p class="">In Zusammenarbeit mit Digipolis</p>
                <i aria-hidden="true" class="icon-digipolis"></i>
            </div>
        </div>

        <div class="footer--column">
            <div class="dg-blocks-social">
                <span>Der Stadt Gent in den sozialen Medien folgen</span>
                <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>


/* En */
{
  "gentinfo": {
    "title": "gentinfo",
    "description": "We can be reached from Monday to Saturday, from 8.00 am to 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 Gentinfo"
  },
  "disclaimer": {
    "title": "Useful links",
    "links": [
      "Vacancies",
      "City plan",
      "City of Ghent newsroom",
      "Legal information",
      "Privacy"
    ]
  },
  "address": {
    "title": "Postal address",
    "name": "City of Ghent",
    "street": "Botermarkt 1",
    "city": "9000 Ghent"
  },
  "bottom": {
    "partnership": "In cooperation with Digipolis",
    "social": "Follow the City of Ghent on social media"
  }
}


/* Nl */
{
  "gentinfo": {
    "title": "gentinfo",
    "description": "Bereikbaar van 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 Gentinfo"
  },
  "disclaimer": {
    "title": "Nuttige links",
    "links": [
      "Vacatures",
      "Stadsplan",
      "Persruimte Stad Gent",
      "Juridische info",
      "Privacy"
    ]
  },
  "address": {
    "title": "Postadres",
    "name": "Stad Gent",
    "street": "Botermarkt 1",
    "city": "9000 Gent"
  },
  "bottom": {
    "partnership": "In samenwerking met Digipolis",
    "social": "Volg de Stad Gent op sociale media"
  }
}


/* Fr */
{
  "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",
      "Informations juridiques",
      "Confidentialité"
    ]
  },
  "address": {
    "title": "Adresse postale",
    "name": "Ville de Gand",
    "street": "Botermarkt 1",
    "city": "9000 Gand"
  },
  "bottom": {
    "partnership": "En collaboration avec Digipolis",
    "social": "Suivez la Ville de Gand sur les réseaux sociaux"
  }
}


/* De */
{
  "gentinfo": {
    "title": "gentinfo",
    "description": "Von 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": "Chat mit Gentinfo"
  },
  "disclaimer": {
    "title": "Nützliche Links",
    "links": [
      "Stellenangebote",
      "Stadtplan",
      "Presseinformationen Stadt Gent",
      "Rechtliche Informationen",
      "Datenschutz"
    ]
  },
  "address": {
    "title": "Postanschrift",
    "name": "Der Stadt Gent",
    "street": "Botermarkt 1",
    "city": "9000 Gent"
  },
  "bottom": {
    "partnership": "In Zusammenarbeit mit Digipolis",
    "social": "Der Stadt Gent in den sozialen Medien folgen"
  }
}
  • Content: 
    // General footer styling.
.footer {
  margin-top: 4rem;

  .footer-top {
    @include theme('background-color', 'color-primary--lighten-5', 'footer-background-color');

    width: calc(100% + 2 * #{$gutter-width});
    margin-right: -$gutter-width;
    margin-left: -$gutter-width;

    > .content-container {
      display: flex;
      flex-wrap: wrap;
      max-width: calc(#{$bp-max-content} + 54px);
      margin-bottom: 1rem;
      padding: 0 $gutter-width 1.5rem;

      @include desktop {
        padding-top: 4rem;
        padding-bottom: 4rem;
      }

      @media (min-width: $bp-max-content + 54px) {
        max-width: $bp-max-content;
        padding: 4rem 0;
      }
    }

    .footer--column {
      width: 100%;

      @include phablet {
        flex: 1 0 auto;
        width: span(6 of 12);
      }

      @include desktop {
        width: span(2 of 12);
      }

      &:nth-of-type(3) {
        display: flex;

        @include desktop {
          justify-content: center;
          width: span(2 of 12);
        }
      }

      &:first-of-type {
        width: 100%;

        @include phablet {
          width: span(12 of 12);
          margin-top: 1.2rem;
          margin-bottom: .4rem;
        }

        @include desktop {
          order: 1;
          width: span(7 of 12);
          margin-top: 0;
        }
      }
    }
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: .8rem;
    overflow: hidden;

    @include desktop {
      flex-wrap: nowrap;
    }

    .footer--column {
      width: 100%;
      line-height: 1rem;

      // Left column.
      &:first-child {
        order: 2;

        @include desktop {
          order: 1;
          width: span(4 of 12);
        }
      }

      // Right column.
      &:last-child {
        order: 1;
        margin-bottom: 1.8rem;

        @include phablet {
          margin-bottom: 0;
        }

        @include desktop {
          width: span(8 of 12);
        }
      }
    }
  }

  .dg-block-post-address,
  .dg-block-disclaimer {
    margin-top: 2.2rem;
    margin-left: 1.2rem;

    @include desktop {
      margin-left: 0;
    }
  }

  .dg-blocks-social,
  .db-block-partnership {
    height: 2rem;

    @include phablet {
      margin-bottom: .4rem;
    }
  }

  .db-block-partnership {
    justify-content: center;
    width: 100%;

    @include desktop {
      justify-content: flex-start;
    }
  }

  ///
  /// Links in the footer should never have icons.
  ///
  [class*="cs--"] & a {
    &::after {
      content: none;
    }
  }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/41-organisms/footer/_footer.scss
  • Size: 2.6 KB