City of Ghent Style Guide

Theme footer

The theme footer shows specific contact information, newsletter subscription and/or social media links.

When to use this component

Use the theme footer when the following conditions apply:

  • The web page is about a specific City of Ghent theme or the web page is part of a separate website.
  • The City of Ghent theme or separate website has specfic contact information, newsletter subscription and/or social media links specific for that City of Ghent theme or that separate website.

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.

When not to use this component

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.

Components

The theme footer is a combination of one or more of the following 3 components:

  1. Contact information
  2. Newsletter subscription
  3. Social media

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:

  1. Contact information specific for the City of Ghent theme or separate website
  2. Newsletter subscription for specific newsletters for the City of Ghent theme or separate website
  3. Social media links to specific social media channels of the City of Ghent theme or separate website

Each of these components can only once be present in the theme footer.

The following - and no more - 7 combinations can be used:

  • Contact information only
  • Newsletter subscription only
  • Social media only
  • Contact information + Newsletter subscription
  • Contact information + Social media
  • Newsletter subscription + Social media
  • Contact information + Newsletter subscription + Social media

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

Contact information in the theme footer can include the following types of contact information, in the following order:

  1. Address information (name of location, street, street number, box number, postal code, city, country)
  2. Telephone number
  3. E-mail address
  4. Link to a contact form, website URL or web page

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.

Technical usage

  • This organism must be included in a top-level footer landmark.
  • It must always be succeeded by the general footer organism.

Theme Footer: Social 

{% set blockContact %}
  <div class="contact">
    {% include '@heading' with {
    'type': '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-document" 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 '@heading' with {
          'type': 'h3',
          'heading_text': 'Subscribe to the newsletter of'~ ' ' ~ theme
          } %}

          {% 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'
          } %}

          {% include '@link' with {
            'link': 'javascript:(void);',
            'text': 'View the list and subscribe to one of our newsletters',
            'modifier': 'standalone-link'
          } %}
        {% endset %}

        {% include "@highlight" with {
          content: content,
          modifier: 'left',
          classes: ['newsletter']
        } %}

      {% endif %}
      {% if social %}
        <div class="social">
          {% include '@heading' with {
          'type': 'h3',
          '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="social">
                <h3>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
}
  • Content: 
    .theme-footer {
  @include theme('background-color', 'color-primary--lighten-5', 'theme-footer-background-color');
  @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');

  width: calc(100% + (2 * #{$gutter-width}));
  margin-right: -1rem;
  margin-left: -1rem;
  padding: 0;
  border-bottom: 2px solid;

  + .footer {
    margin-top: 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 {
      @include desktop-and-below {
        margin-right: auto;
        margin-left: auto;
      }

      width: auto;
      height: 8rem;
    }

    + .newsletter,
    + .social,
    + .contact {
      padding-top: 0;

      @include tablet {
        padding-top: 2.4rem;
      }
    }
  }

  .contact {
    margin-right: auto;

    @include desktop {
      padding-right: 2rem;
    }

    .icon-list {
      margin: 0;

      li:last-of-type {
        margin-bottom: 0;
      }

      @include desktop {
        column-gap: gutter();
        column-count: 2;
      }
    }

    &:only-child .icon-list {
      @include tablet {
        column-gap: gutter();
        column-count: 2;
      }
    }
  }

  .social {
    @include tablet {
      flex-shrink: 0;
      width: $bp-mobile;
    }

    @include tablet {
      &:only-child {
        width: auto;
        text-align: center;
      }
    }

    h3 {
      max-width: 100%;
    }

    .social-list {
      ul {
        width: calc(100% + 1rem);
        margin: 0 -.5rem;

        a {
          &,
          &[download]:not(.button),
          &[href^="http://"]:not(.button),
          &[href^="https://"]:not(.button) {
            @include theme('background-color', 'color-secondary', 'theme-footer-social-media-icon-background');
          }
        }
      }
    }
  }

  .newsletter {
    flex-grow: 1;
    border-radius: 0;
    font-size: .8rem;

    @include desktop {
      padding-right: 2rem;
    }

    .highlight__inner {
      padding: 9.4rem 0 0;
      background-color: transparent;

      &::before {
        @include spot-image('letter-light', 8rem);
        top: 1.4rem;
      }

      @include tablet {
        min-height: 8rem;
        padding-top: 0;
        padding-left: 10rem;

        &::before {
          top: calc(50% - 4rem);
          right: auto;
          left: 0;
        }
      }
    }

    .subscribe {
      // 5/12 of max content-container width
      max-width: calc(#{$bp-max-content} / 12 * 5);
    }
  }

  .logo + .newsletter {
    .highlight__inner {
      padding-top: 0;

      &::before {
        display: none;
      }

      @include tablet {
        padding-left: 0;
      }
    }
  }

  .content-container {
    padding: 0 $gutter-width;

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

  .top {
    @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
    border-bottom: 2px solid;
  }

  .top,
  .bottom {
    @include tablet {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    @include desktop {
      flex-wrap: nowrap;
    }

    .newsletter,
    .contact {
      &:not(:last-of-type) {
        @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
        border-bottom: 2px solid;

        @include desktop {
          border-bottom: 0;
        }
      }
    }
  }

  ///
  /// External links other than group Ghent get an indicator.
  ///
  a {
    @extend %a-remove-indicator;
  }
}
  • URL: /components/raw/theme-footer/_theme-footer.scss
  • Filesystem Path: components/41-organisms/theme-footer/_theme-footer.scss
  • Size: 3.8 KB