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:

Contact information
Newsletter subscription
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:

Contact information specific for the City of Ghent theme or separate website
Newsletter subscription for specific newsletters for the City of Ghent theme or separate website
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:

Address information (name of location, street, street number, box number, postal code, city, country)
Telephone number
E-mail address
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

Ready

View
Info
HTML
Context
Assets


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

Handle: @theme-footer--social
Preview:
- With layout
- Component only
Filesystem Path: components/41-organisms/theme-footer/theme-footer.twig
References (7): @heading, @list, @image, @paragraph, @subscribe, @link, @highlight


        
        <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
}

File:

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