Contact block

The contact block component is a specific version of the call to action component that focuses on contacting a specific entity, location or person. The primary action is a telephone number or an e-mail address. The optional secondary action is a link to a page with all contact information of the specific entity, location or person.

When to use this component

Use the contact block component to show a telephone number or e-mail address of a specific entity, location or person on a detail page.

When not to use this component

Do not use the contact block component for contact blocks where the primary action is not a telephone number or an e-mail address or where the optional secondary action is not a link to a page with all contact information of the specific entity, location or person. In these case, use the general call to action component.

How it works

The contact block component consists of the following parts:

  • A title representing the contact block(required)
  • A spot illustration (required and fixed, depending on the type of the primary action)
  • A short text explaining the contact block (optional)
  • A primary action (required)
  • A secondary action (optional)

The primary action can be one of the following types:

  • A link to an e-mail address (mailto-link)
  • A link to a telephone number (tel-link)

The optional secondary action, when used, should always be a link to a web page (internal or external) with contact information of the specific entity, location or person the contact block is referring to.

When using a contact block, please note the following:

  • The optional short text explaining the contact block cannot contain links. A link can only be added to a contact block using the secondary action of the contact block. A contact block may never have more than two actions.
  • Use clear and distinct labels for the primary and secondary action of the contact block.

Behavior of this component

A contact block has a certain behavior:

  • On desktop resolutions and tablet in landscape mode, a contact block should always have a width of 10/12 based on the container. This means the container needs to make sure that contact blocks can never be bigger then 10/12 of itself.
  • On tablet in portrait mode and mobile resolutions, a contact block should always be the full width of the container.
  • The text in a contact block:
    • Should always have a max-width of 40 rems.
    • Can never be centered.
    • Can never be justified.
{% set content %}
    {%  if title %}
      {% include '@heading' with {
        'type': 'h2',
        'heading_text': title
      } %}
    {% endif %}

    {% if description %}
      {% include '@paragraph' with {
        'text': description
      } %}
    {% endif %}

    <ul class="links">
      {% if tel %}
        <li>
          {% include '@link' with {
            'text': 'Call '~tel,
            'link': 'tel:'~tel,
            'modifier': 'button button-primary'
          } %}
        </li>
      {% endif %}
      {% if email %}
        <li>
          {% include '@link' with {
            'text': 'Send an email to '~email,
            'link': 'mailto:'~email,
            'modifier': 'button button-primary'
          } %}
        </li>
      {% endif %}
      {% if link %}
        <li>
          {% include '@link' with {
            'text': 'Check all contact details',
            'link': '#'
          } %}
        </li>
      {% endif %}
    </ul>
{% endset %}

{% include "@highlight" with {
  content: content,
  modifier: 'left',
  classes: [
    'contact-block',
    tel ? 'tel' : '',
    email ? 'mail' : ''
  ]
} %}
<!-- Default -->
<section class="highlight contact-block tel  highlight--left">
    <div class="highlight__inner">
        <h2>Contact us</h2>

        <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>

        <ul class="links">
            <li>
                <a href='tel:09 123 45 67' class="button button-primary" title="Contact us">
                    Call 09 123 45 67</a>
            </li>
            <li>
                <a href='#' title="Contact us">
                    Check all contact details</a>
            </li>
        </ul>

    </div>
</section>

<!-- Contact Block With Email -->
<section class="highlight contact-block  mail highlight--left">
    <div class="highlight__inner">
        <h2>Contact us</h2>

        <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>

        <ul class="links">
            <li>
                <a href='mailto:info@stad.gent' class="button button-primary" title="Contact us">
                    Send an email to info@stad.gent</a>
            </li>
            <li>
                <a href='#' title="Contact us">
                    Check all contact details</a>
            </li>
        </ul>

    </div>
</section>

<!-- Contact Block Without Description -->
<section class="highlight contact-block tel  highlight--left">
    <div class="highlight__inner">
        <h2>Contact us</h2>

        <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>

        <ul class="links">
            <li>
                <a href='tel:09 123 45 67' class="button button-primary" title="Contact us">
                    Call 09 123 45 67</a>
            </li>
            <li>
                <a href='#' title="Contact us">
                    Check all contact details</a>
            </li>
        </ul>

    </div>
</section>

<!-- Contact Block Without Link -->
<section class="highlight contact-block  mail highlight--left">
    <div class="highlight__inner">
        <h2>Contact us</h2>

        <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>

        <ul class="links">
            <li>
                <a href='mailto:info@stad.gent' class="button button-primary" title="Contact us">
                    Send an email to info@stad.gent</a>
            </li>
            <li>
                <a href='#' title="Contact us">
                    Check all contact details</a>
            </li>
        </ul>

    </div>
</section>

/* Default */
{
  "title": "Contact us",
  "description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.",
  "tel": "09 123 45 67",
  "email": null,
  "link": "#"
}

/* Contact Block With Email */
{
  "title": "Contact us",
  "description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.",
  "tel": null,
  "email": "info@stad.gent",
  "link": "#"
}

/* Contact Block Without Description */
{
  "title": "Contact us",
  "description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.",
  "tel": "09 123 45 67",
  "email": null,
  "link": "#"
}

/* Contact Block Without Link */
{
  "title": "Contact us",
  "description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.",
  "tel": null,
  "email": "info@stad.gent",
  "link": "#"
}

  • Content:
    .contact-block {
    
      &.tel .inner-box::before, /// @deprecated
      &.tel .highlight__inner::before {
        @include spot-image('phone-light', 7rem);
      }
    
      &.mail .inner-box::before, /// @deprecated
      &.mail .highlight__inner::before {
        @include spot-image('mail-light', 7rem);
      }
    
      .inner-box, /// @deprecated
      .highlight__inner {
        li:last-of-type {
          margin-top: 1rem;
        }
      }
    }
    
  • URL: /components/raw/contact-block/_contact-block.scss
  • Filesystem Path: components/31-molecules/contact-block/_contact-block.scss
  • Size: 391 Bytes