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.

Technical usage

  • This organism must be included in a top-level footer landmark.
  • It must always be succeeded by the general footer organism.
{% set iconlist = [] %}
{% if contact.address %}
  {% set iconlist = iconlist|merge([
  '<i class="icon-marker" aria-hidden="true"></i>' ~ '<strong>' ~ contact.address.name ~  ' — ' ~ '</strong>' ~ contact.address.address
  ]) %}
{% endif %}
{% if contact.phone %}
  {% set iconlist = iconlist|merge([
  '<i class="icon-normalphone" aria-hidden="true"></i><a href="tel:'~ contact.phone.machine ~'">'~ contact.phone.human ~'</a>'
  ]) %}
{% endif %}
{% if contact.email %}
  {% set iconlist = iconlist|merge([
  '<i class="icon-envelope" aria-hidden="true"></i><a href="mailto:' ~ contact.email ~ '">' ~ contact.email ~'</a>'
  ]) %}
{% endif %}
{% if contact.form %}
  {% set iconlist = iconlist|merge([
  '<i class="icon-document" aria-hidden="true"></i><a href="' ~ contact.form.machine ~ '">' ~ contact.form.human ~'</a>'
  ]) %}
{% endif %}

<section class="theme-footer">
  <h2 class="visually-hidden">{{ 'Theme footer' }}</h2>
  <div class="content-container">
    {% if contact and newsletter %}
      <div class="top">
        {% if logo %}
          <div class="logo">
            {% include '@image' with {
              'src': '/styleguide/img/stock/puur_gent_logo.png' | path,
              'alt_text': 'Puur Gent',
            } %}
          </div>
        {% endif %}

        {% set contactshown = true %}
        <div class="contact">
          {% include '@heading' with {
          'type': 'h3',
          'heading_text': 'Contact'~ ' ' ~ theme
          } %}

          {% include '@list' with {
            'type': 'icon-list',
            'icon_items': iconlist
          } %}
        </div>
      </div>
    {% endif %}
    <div class="bottom">
      {% if contact and contactshown|default(false) == false %}
        {% if logo %}
          <div class="logo">
            {% include '@image' with {
              'src': '/styleguide/img/stock/puur_gent_logo.png' | path,
              'alt_text': 'Puur Gent',
            } %}
          </div>
        {% endif %}

        <div class="contact">
          {% include '@heading' with {
          'type': 'h3',
          'heading_text': 'Contact'~ ' ' ~ theme
          } %}

          {% include '@list' with {
            'type': 'icon-list',
            'icon_items': iconlist
          } %}
        </div>
      {% endif %}
      {% if newsletter %}
        <div class="newsletter box-left">
          <div class="inner-box">
            {% 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' ~ newsletter.uid,
            name: 'subscribe'
            } %}

            {% include '@link' with {
              'link': 'javascript:(void);',
              'text': 'View the list and subscribe to one of our newsletters',
              'modifier': 'standalone-link'
            } %}
          </div>
        </div>
      {% endif %}
      {% if social %}
        <div class="social">
          {% include '@heading' with {
          'type': 'h3',
          'heading_text': 'Follow this theme site on social media'
          } %}
          {% include '@social-list' %}
        </div>
      {% endif %}
    </div>
  </div>
</section>
<!-- Contact Newsletter Social -->
<section class="theme-footer">
            <h2 class="visually-hidden">Theme footer</h2>
            <div class="content-container">
                <div class="top">

                    <div class="contact">
                        <h3>Contact Ghent mobility</h3>

                        <ul class="icon-list ">
                            <li><i class="icon-marker" aria-hidden="true"></i><strong>City hall — </strong>Botermarkt 1, 9000 Gent</li>
                            <li><i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+3292101060">09 210 10 60</a></li>
                            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:noreply@stad.gent">noreply@stad.gent</a></li>
                            <li><i class="icon-document" aria-hidden="true"></i><a href="#">Contactform Ghent mobility</a></li>
                        </ul>

                    </div>
                </div>
                <div class="bottom">
                    <div class="newsletter box-left">
                        <div class="inner-box">
                            <h3>Subscribe to the newsletter of Ghent mobility</h3>

                            <p class="">Receive the most important mobility news in your mailbox.</p>

                            <form class="form subscribe">
                                <label for="subscribetheme-footer-1">Email address
                                </label>
                                <input type="email" id="subscribetheme-footer-1" name="subscribetheme-footer-1" class="email" required="true" />

                                <input type="submit" value="Subscribe" class="" />
                            </form>

                            <a href='javascript:(void);' class="standalone-link">
                                View the list and subscribe to one of our newsletters</a>
                        </div>
                    </div>
                    <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>

<!-- Contact -->
<section class="theme-footer">
            <h2 class="visually-hidden">Theme footer</h2>
            <div class="content-container">
                <div class="bottom">

                    <div class="contact">
                        <h3>Contact Ghent mobility</h3>

                        <ul class="icon-list ">
                            <li><i class="icon-marker" aria-hidden="true"></i><strong>City hall — </strong>Botermarkt 1, 9000 Gent</li>
                            <li><i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+3292101060">09 210 10 60</a></li>
                            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:noreply@stad.gent">noreply@stad.gent</a></li>
                            <li><i class="icon-document" aria-hidden="true"></i><a href="#">Contactform Ghent mobility</a></li>
                        </ul>

                    </div>
                </div>
            </div>
        </section>

<!-- Newsletter -->
<section class="theme-footer">
    <h2 class="visually-hidden">Theme footer</h2>
    <div class="content-container">
        <div class="bottom">
            <div class="newsletter box-left">
                <div class="inner-box">
                    <h3>Subscribe to the newsletter of Ghent mobility</h3>

                    <p class="">Receive the most important mobility news in your mailbox.</p>

                    <form class="form subscribe">
                        <label for="subscribetheme-footer-2">Email address
                        </label>
                        <input type="email" id="subscribetheme-footer-2" name="subscribetheme-footer-2" class="email" required="true" />

                        <input type="submit" value="Subscribe" class="" />
                    </form>

                    <a href='javascript:(void);' class="standalone-link">
                        View the list and subscribe to one of our newsletters</a>
                </div>
            </div>
        </div>
    </div>
</section>

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

<!-- Contact Newsletter -->
<section class="theme-footer">
            <h2 class="visually-hidden">Theme footer</h2>
            <div class="content-container">
                <div class="top">
                    <div class="logo">
                        <img src="../../styleguide/img/stock/puur_gent_logo.png" alt="Puur Gent" />

                    </div>

                    <div class="contact">
                        <h3>Contact Ghent mobility</h3>

                        <ul class="icon-list ">
                            <li><i class="icon-marker" aria-hidden="true"></i><strong>City hall — </strong>Botermarkt 1, 9000 Gent</li>
                            <li><i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+3292101060">09 210 10 60</a></li>
                            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:noreply@stad.gent">noreply@stad.gent</a></li>
                            <li><i class="icon-document" aria-hidden="true"></i><a href="#">Contactform Ghent mobility</a></li>
                        </ul>

                    </div>
                </div>
                <div class="bottom">
                    <div class="newsletter box-left">
                        <div class="inner-box">
                            <h3>Subscribe to the newsletter of Ghent mobility</h3>

                            <p class="">Receive the most important mobility news in your mailbox.</p>

                            <form class="form subscribe">
                                <label for="subscribetheme-footer-3">Email address
                                </label>
                                <input type="email" id="subscribetheme-footer-3" name="subscribetheme-footer-3" class="email" required="true" />

                                <input type="submit" value="Subscribe" class="" />
                            </form>

                            <a href='javascript:(void);' class="standalone-link">
                                View the list and subscribe to one of our newsletters</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<!-- Contact Social -->
<section class="theme-footer">
            <h2 class="visually-hidden">Theme footer</h2>
            <div class="content-container">
                <div class="bottom">
                    <div class="logo">
                        <img src="../../styleguide/img/stock/puur_gent_logo.png" alt="Puur Gent" />

                    </div>

                    <div class="contact">
                        <h3>Contact Ghent mobility</h3>

                        <ul class="icon-list ">
                            <li><i class="icon-marker" aria-hidden="true"></i><strong>City hall — </strong>Botermarkt 1, 9000 Gent</li>
                            <li><i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+3292101060">09 210 10 60</a></li>
                            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:noreply@stad.gent">noreply@stad.gent</a></li>
                            <li><i class="icon-document" aria-hidden="true"></i><a href="#">Contactform Ghent mobility</a></li>
                        </ul>

                    </div>
                    <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>

<!-- Newsletter Social -->
<section class="theme-footer">
    <h2 class="visually-hidden">Theme footer</h2>
    <div class="content-container">
        <div class="bottom">
            <div class="newsletter box-left">
                <div class="inner-box">
                    <h3>Subscribe to the newsletter of Ghent mobility</h3>

                    <p class="">Receive the most important mobility news in your mailbox.</p>

                    <form class="form subscribe">
                        <label for="subscribetheme-footer-4">Email address
                        </label>
                        <input type="email" id="subscribetheme-footer-4" name="subscribetheme-footer-4" class="email" required="true" />

                        <input type="submit" value="Subscribe" class="" />
                    </form>

                    <a href='javascript:(void);' class="standalone-link">
                        View the list and subscribe to one of our newsletters</a>
                </div>
            </div>
            <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>

/* Contact Newsletter Social */
{
  "theme": "Ghent mobility",
  "contact": {
    "address": {
      "name": "City hall",
      "address": "Botermarkt 1, 9000 Gent"
    },
    "phone": {
      "machine": "+3292101060",
      "human": "09 210 10 60"
    },
    "email": "noreply@stad.gent",
    "form": {
      "machine": "#",
      "human": "Contactform Ghent mobility"
    }
  },
  "newsletter": {
    "uid": "theme-footer-1"
  },
  "social": {}
}

/* Contact */
{
  "theme": "Ghent mobility",
  "contact": {
    "address": {
      "name": "City hall",
      "address": "Botermarkt 1, 9000 Gent"
    },
    "phone": {
      "machine": "+3292101060",
      "human": "09 210 10 60"
    },
    "email": "noreply@stad.gent",
    "form": {
      "machine": "#",
      "human": "Contactform Ghent mobility"
    }
  }
}

/* Newsletter */
{
  "theme": "Ghent mobility",
  "newsletter": {
    "uid": "theme-footer-2"
  }
}

/* Social */
{
  "theme": "Ghent mobility",
  "social": {}
}

/* Contact Newsletter */
{
  "theme": "Ghent mobility",
  "logo": true,
  "contact": {
    "address": {
      "name": "City hall",
      "address": "Botermarkt 1, 9000 Gent"
    },
    "phone": {
      "machine": "+3292101060",
      "human": "09 210 10 60"
    },
    "email": "noreply@stad.gent",
    "form": {
      "machine": "#",
      "human": "Contactform Ghent mobility"
    }
  },
  "newsletter": {
    "uid": "theme-footer-3"
  }
}

/* Contact Social */
{
  "theme": "Ghent mobility",
  "logo": true,
  "contact": {
    "address": {
      "name": "City hall",
      "address": "Botermarkt 1, 9000 Gent"
    },
    "phone": {
      "machine": "+3292101060",
      "human": "09 210 10 60"
    },
    "email": "noreply@stad.gent",
    "form": {
      "machine": "#",
      "human": "Contactform Ghent mobility"
    }
  },
  "social": {}
}

/* Newsletter Social */
{
  "theme": "Ghent mobility",
  "newsletter": {
    "uid": "theme-footer-4"
  },
  "social": {}
}

  • 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% + 2rem);
      margin-right: -1rem;
      margin-left: -1rem;
      padding: 0;
      border-bottom: 2px solid;
    
      + .footer {
        margin-top: 0;
      }
    
      .contact,
      .newsletter,
      .social,
      .logo {
        flex: 1;
        padding-top: 1.4rem;
        padding-bottom: 1.4rem;
    
        @include tablet {
          padding-top: 2.4rem;
          padding-bottom: 2.4rem;
        }
      }
    
      .logo {
        flex-basis: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        text-align: center;
    
        @include tablet {
          flex-basis: auto;
          flex-grow: 0;
          margin-right: 2rem;
          text-align: left;
        }
    
        img {
          height: 8rem;
        }
      }
    
      .contact {
        @include desktop {
          flex-basis: span(7 of 12);
          padding-right: 2rem;
        }
    
        .icon-list {
          margin: 0;
    
          li:last-of-type {
            margin-bottom: 0;
          }
    
          @include tablet {
            column-gap: gutter();
            column-count: 2;
          }
        }
      }
    
      .social {
        flex-basis: 100%;
        text-align: center;
    
        @include desktop {
          flex: 1;
          text-align: left;
    
          &:only-child {
            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-basis: 100%;
        border-radius: 0;
        font-size: .8rem;
    
        @include desktop {
          flex-basis: span(9 of 12);
          flex-grow: 0;
          padding-right: 2rem;
        }
    
        .inner-box {
          padding: 9.4rem 0 0;
          background-color: transparent;
    
          &::before {
            @include spot-image('letter-light', 8rem);
    
            top: 0;
            bottom: auto;
          }
    
          @include tablet {
            min-height: 8rem;
            padding-top: 0;
            padding-left: 10rem;
    
            &::before {
              right: auto;
              left: 0;
            }
          }
        }
    
        .subscribe {
          // 5/12 of max content-container width
          max-width: calc(#{$bp-max-content} / 12 * 5);
        }
      }
    
      .content-container {
        padding: 0 $gutter-width;
      }
    
      .top {
        @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
        border-bottom: 2px solid;
      }
    
      .top,
      .bottom {
        display: flex;
        flex-wrap: wrap;
    
        .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.1 KB