<footer class="footer section--wrapper" role="contentinfo" data-columns="3">
    <div class="content-container">
        <div class="row">
            <div class="footer--column">
                <div class="dg-block-post-address island">
                    <h3>Mailing address</h3>
                    <p class=""><span>City of Ghent</span><br>
                        <span> Botermarkt 1</span><br>
                        <span>9000 Ghent</span></p>
                </div>
                <ul class="dg-block-links island">
                    <li><a href='https://stad.gent/werken-ondernemen/werken/werken-bij-de-stad-gent/vacatures-en-solliciteren'>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=' http://persruimte.stad.gent/ '>Press room City of Ghent</a></li>
            <li><a href='https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info-en-privacy '>Legal info and privacy</a></li>
    </ul>
      </div>
      <div class="footer--column">
        <div class="dg-blocks-social island">
  <h3>Volg Stad Gent op</h3>
  <ul class="no-style">
            <li><a href="https://www.facebook.com/stadsbestuurgent" class="facebook">stadsbestuurgent</a></li>
            <li><a href="https://twitter.com/stadgent" class="twitter">@Stadgent</a></li>
            <li><a href="https://www.linkedin.com/company/stad-gent" class="linkedin">Stad Gent</a></li>
            <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" class="youtube">YouTube Stad Gent</a></li>
            <li><a href="https://www.instagram.com/stadgent/" class="instagram">@stadgent</a></li>
    </ul>
</div>
      </div>
      <div class="footer--column">
        <div class="db-block-partnership">
  <p class="">In cooperation with <i class="icon-digipolis"></i> Digipolis</p>
</div>
      </div>
    </div>
  </div>
</footer>
<footer class="footer section--wrapper" role="contentinfo" data-columns="3">
  <div class="content-container">
    <div class="row">
      <div class="footer--column">
        {% include '@post-address-block' %}
        {% include '@disclaimer-block' %}
      </div>
      <div class="footer--column">
        {% include '@social-media-block' %}
      </div>
      <div class="footer--column">
        {% include '@partnership-block' %}
      </div>
    </div>
  </div>
</footer>
/* No context defined for this component. */
  • Content:
    // General footer styling.
    footer.footer {
      padding: 1.5rem 0;
    
      h3 {
        margin-top: 0;
      }
    
      p {
        color: $color-gray;
      }
    
      .db-block-partnership {
        @include tablet {
          margin-top: 6rem;
        }
      }
    
      .footer--column .island {
        border: 0;
      }
    }
    
    // Footer 2 column layout.
    footer[data-columns="2"] {
      .footer--column {
        @include make-mobile-column(12);
        @include make-tablet-column(6);
        @include make-desktop-column(6);
      }
    }
    
    // Footer 3 column layout.
    footer[data-columns="3"] {
      .footer--column {
        @include make-mobile-column(12);
        @include make-tablet-column(6);
        @include make-desktop-column(4);
      }
    }
    
    // Footer 4 column layout.
    footer[data-columns="4"] {
      .footer--column {
        @include make-mobile-column(12);
        @include make-tablet-column(6);
        @include make-desktop-column(3);
      }
    
      .db-block-partnership {
        @include desktop {
          margin-top: 12.5rem;
        }
      }
    }
    
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/41-organisms/footer/_footer.scss
  • Size: 923 Bytes

Footer

Grid implementation

The Stad Gent footer can be used in 3 possible ways, as a:

  • 2 column layout
  • 3 column layout
  • 4 column layout

All versions are fully responsive and should be triggered based on the data-columns attribute on the wrapping div.

For example:

<footer class="section--wrapper" role="contentinfo" data-columns="4">

Will result in a footer with 4 columns on desktop, 2 columns on tablet and 1 column on mobile.

It is explicitly forbidden to use less then 2 or more then 4 columns in this footer organisme!

Components and examples

Components in the footer should be as defined by the styleguide. Examples of 2, 3 or 4 column layouts can be viewed in the style guide.