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.
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.
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.
The contact block component consists of the following parts:
The primary action can be one of the following types:
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:
A contact block has a certain behavior:
{% 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' : ''
]
} %}
<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>
{
"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 {
&.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;
}
}
}