City of Ghent Style Guide

Contact details

When to use this component

Use the contact details component to show contact information of an entity, location or person on a detail page.

When not to use this component

Do not use the contact details component to show other information than contact information.

How it works

The contact details component 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. Mobile phone number
  4. Fax number
  5. E-mail address
  6. Website URL

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 one or more items included when applicable. For instance: there can be multiple addresses or multiple telephone numbers. 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.

The contact details component can also optionally include an image of the entity, location or person. The image must be a square image.

Styles

The contact details component has two different styles that can be used:

  • The default version
  • The inverted, light version

See the examples.

Contact Details 

{% set content %}
  {% include '@heading' with {
    'type': 'h2',
    'heading_text': 'Contact details'
  } %}

    <div class="contact-details-column">
      {% include '@list' with {
          'type': 'icon-list',
          'icon_items': [
            '<i class="icon-marker" aria-hidden="true"></i><strong>Stadhuis</strong> — Botermarkt 1, 9000 Gent',
            '<i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+32 9 266 50 00" alt="Person tel">09 266 50 00</a>',
            '<i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 476 23 42 98" alt="Person mobile phone">0476 23 42 98</a>',
            '<i class="icon-fax" aria-hidden="true"></i><span><a href="tel:+32 9 266 50 19" alt="Person fax number">09 266 50 19</a> (Fax)</span>',
            '<i class="icon-envelope" aria-hidden="true"></i><a href="mailto:daniel.termont@stad.gent" alt="Person mail link">daniel.termont@stad.gent</a>',
            '<i class="icon-url" aria-hidden="true"></i><a href="http://stad.gent" alt="Website link">http://stad.gent</a>'
          ]
        }
      %}
    </div>

  <div class="contact-details-column">
    <div class="image-wrapper" data-ratio="1:1">
      {% include '@image' with {
        'src': 'https://via.placeholder.com/280x280&text=1:1+(280x280)',
        'alt_text': 'Person avatar',
        'ratio': null
      } %}
    </div>
  </div>
{% endset %}

{% include "@highlight" with {
  content: content,
  modifier: 'top',
  classes: [
    'contact-details',
    modifier is defined ? modifier : ''
  ]
} %}
 
<!-- Default -->
<section class="highlight contact-details  highlight--top">
    <div class="highlight__inner">
        <h2>Contact details</h2>

        <div class="contact-details-column">

            <ul class="icon-list ">
                <li><i class="icon-marker" aria-hidden="true"></i><strong>Stadhuis</strong> — Botermarkt 1, 9000 Gent</li>
                <li><i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+32 9 266 50 00" alt="Person tel">09 266 50 00</a></li>
                <li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 476 23 42 98" alt="Person mobile phone">0476 23 42 98</a></li>
                <li><i class="icon-fax" aria-hidden="true"></i><span><a href="tel:+32 9 266 50 19" alt="Person fax number">09 266 50 19</a> (Fax)</span></li>
                <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:daniel.termont@stad.gent" alt="Person mail link">daniel.termont@stad.gent</a></li>
                <li><i class="icon-url" aria-hidden="true"></i><a href="http://stad.gent" alt="Website link">http://stad.gent</a></li>
            </ul>

        </div>

        <div class="contact-details-column">
            <div class="image-wrapper" data-ratio="1:1">
                <figure><img src="https://via.placeholder.com/280x280&text=1:1+(280x280)" alt="Person avatar" /></figure>
            </div>
        </div>

    </div>
</section>


<!-- Inverted -->
<section class="highlight contact-details contact-details-inverted highlight--top">
    <div class="highlight__inner">
        <h2>Contact details</h2>

        <div class="contact-details-column">

            <ul class="icon-list contact-details-inverted">
                <li><i class="icon-marker" aria-hidden="true"></i><strong>Stadhuis</strong> — Botermarkt 1, 9000 Gent</li>
                <li><i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+32 9 266 50 00" alt="Person tel">09 266 50 00</a></li>
                <li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 476 23 42 98" alt="Person mobile phone">0476 23 42 98</a></li>
                <li><i class="icon-fax" aria-hidden="true"></i><span><a href="tel:+32 9 266 50 19" alt="Person fax number">09 266 50 19</a> (Fax)</span></li>
                <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:daniel.termont@stad.gent" alt="Person mail link">daniel.termont@stad.gent</a></li>
                <li><i class="icon-url" aria-hidden="true"></i><a href="http://stad.gent" alt="Website link">http://stad.gent</a></li>
            </ul>

        </div>

        <div class="contact-details-column">
            <div class="image-wrapper" data-ratio="1:1">
                <figure class="contact-details-inverted"><img src="https://via.placeholder.com/280x280&text=1:1+(280x280)" alt="Person avatar" class="contact-details-inverted" /></figure>
            </div>
        </div>

    </div>
</section>


/* Default: No context defined. */


/* Inverted */
{
  "modifier": "contact-details-inverted"
}
  • Content: 
    $avatar-width: 14rem;

.contact-details {
  &.highlight .highlight__inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

    > h2 {
      width: 100%;
    }

    &::before {
      @include spot-image('book-light', 7rem);
    }
  }

  &.contact-details-inverted {
    > .highlight__inner {
      @include theme('border-color', 'color-primary--lighten-4', 'contact-details-border-color');
      border-width: 2px 0;
      border-style: solid;

      [class*="cs--"] & {
        background-color: transparent;
      }

      &::before {
        @include spot-image('book', 7rem);
        box-shadow: none;
      }
    }

    .accolade {
      &::before,
      &::after {
        @include theme('background', 'color-secondary', 'contact-details-inverted-background-color');
      }
    }
  }

  &-column {
    flex-grow: 1;
    width: 100%;

    @include tablet {
      width: span(6 of 12);
      margin-right: $gutter-width;

      &:last-of-type:not(:first-of-type) {
        max-width: $avatar-width;
        margin-right: 0;
      }
    }

    .image-wrapper {
      img {
        @include tablet {
          max-width: $avatar-width;
        }
      }
    }
  }
}
  • URL: /components/raw/contact-details/_contact-details.scss
  • Filesystem Path: components/31-molecules/contact-details/_contact-details.scss
  • Size: 1.2 KB