City of Ghent Style Guide

Gentinfo

Gentinfo is the central point of contact for information about the city council and the city of Ghent.

When to use this component

Use the Gentinfo component to show Gentinfo contact information as a call-to-action on a page when it is relevant to the page and when a separate call-to-action for Gentinfo is useful for users.

The Gentinfo component should always be used as is. The elements, style, layout and content in the Gentinfo component cannot be changed in any way.

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

When not to use this component

  • Do not use the Gentinfo component to present other content than the Gentinfo contact information.
  • Do not use the Gentinfo component to present other call-to-actions. For other call-to-actions, use the call to action component.
  • Do not use the Gentinfo component when it is not relevant for the page.
  • Do not use the Gentinfo component at the bottom of the page right above the theme footer or the footer. The footer already includes the Gentinfo contact information also, therefore, placing the Gentinfo component right above the theme footer or the footer is unneccessary.

Note that the contact information of Gentinfo is also always included in the footer.

How it works

The Gentinfo component contains the following elements:

  • A spot illustration (fixed)
  • The Gentinfo typologo (fixed)
  • Introduction to Gentinfo (fixed)
  • Sentence about Gentinfo’s availability (fixed)
  • Gentinfo telephone number with tel-link (fixed)
  • Gentinfo e-mail address with mailto-link (fixed)
  • Link to the Gentinfo contact form (fixed)

Gentinfo: En 

{# Variables #}
{% if paragraphs is not defined %}
  {% set paragraphs = [
    'Do you have any questions, complaints, suggestions, notifications etc. concerning the City of Ghent? If this is the case, please contact Gentinfo.',
    'We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm.'
  ] %}
{% endif %}

{% if listItems is not defined %}
  {% set listItems = [
    '<i aria-hidden="true" class="icon-phone"></i><a href="tel:092101010">09 210 10 10</a>',
    '<i aria-hidden="true" class="icon-envelope"></i><a href="mailto:gentinfo@stad.gent">Gentinfo@stad.gent</a>',
    '<i aria-hidden="true" class="icon-document"></i><a href="#">Contact form</a>'
  ] %}
{% endif %}

{# Component #}
<div class="gentinfo {{ modifier }}">
  <div class="gentinfo-content">
    <h2 class="visually-hidden">Gent info</h2>

    {% include '@image' with {
      src: '/styleguide/img/svg/gentinfo-logo.svg' | path,
      modifier: 'gentinfo-logo',
      alt_text: 'Gent info',
      ratio: null
    } %}

    {% include '@paragraph' with {
      text: paragraphs[0]
    } %}

    {% include '@paragraph' with {
      text: paragraphs[1]
    } %}

    {% include '@list' with {
      'type': 'icon-list',
      'modifier': 'inline',
      'icon_items': listItems
    }
    %}

  </div>
</div>
 
<div class="gentinfo ">
    <div class="gentinfo-content">
        <h2 class="visually-hidden">Gent info</h2>

        <figure class="gentinfo-logo"><img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gent info" class="gentinfo-logo" /></figure>
        <p class="">Do you have any questions, complaints, suggestions, notifications etc. concerning the City of Ghent? If this is the case, please contact Gentinfo.</p>

        <p class="">We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm.</p>

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

    </div>
</div>
 
{
  "paragraphs": [
    "Do you have any questions, complaints, suggestions, notifications etc. concerning the City of Ghent? If this is the case, please contact Gentinfo.",
    "We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm."
  ],
  "listItems": [
    "<i aria-hidden=\"true\" class=\"icon-phone\"></i><a href=\"tel:092101010\">09 210 10 10</a>",
    "<i aria-hidden=\"true\" class=\"icon-envelope\"></i><a href=\"mailto:gentinfo@stad.gent\">Gentinfo@stad.gent</a>",
    "<i aria-hidden=\"true\" class=\"icon-document\"></i><a href=\"#\">Contact form</a>"
  ]
}
  • Content: 
    $gentinfo-icon-size: 8rem;

.gentinfo {
  @include theme('background-color', 'color-primary--lighten-5', 'gentinfo-background');
  margin: 3rem 0;
  padding: 2rem 1rem;

  .gentinfo-content {
    @include theme('background-color', 'color-secondary', 'gentinfo-content-background');
    @include theme-content('color-primary--lighten-5', 'gentinfo-content-shadow') {
      box-shadow: 0 8px 12px 0 $theme-color;
    }

    position: relative;
    max-width: $bp-max-content;
    min-height: $gentinfo-icon-size + 2rem;
    margin: 0 auto;
    padding: 1.2rem;

    &::before {
      @include spot-image('gentinfo', $gentinfo-icon-size);
      margin: 0 auto 1.5rem;
    }

    @include tablet {
      padding: 2.3rem 2.3rem 2.3rem 20rem;

      &::before {
        position: absolute;
        top: 50%;
        left: 10rem;
        margin-top: $gentinfo-icon-size / -2;
        margin-bottom: 0;
        margin-left: $gentinfo-icon-size / -2;
      }
    }
  }

  .gentinfo-logo {
    max-width: 9.5rem;
    margin-bottom: 1.2rem;
  }

  .icon-list.inline {
    > li {
      margin-bottom: .5rem;
    }
  }
}
  • URL: /components/raw/gentinfo/_gentinfo.scss
  • Filesystem Path: components/31-molecules/gentinfo/_gentinfo.scss
  • Size: 1.1 KB