Use the contact details component to show contact information of an entity, location or person on a detail page.
Do not use the contact details component to show other information than contact information.
The contact details component can include the following types of contact information, in the following order:
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.
The contact details component has two different styles that can be used:
See the examples.
<section class="contact-details contact-details--with-image">
{% include '@heading' with {
'heading': 'h2',
'heading_class': 'h3',
'heading_text': 'Contact details'
} %}
<div class="contact-details-columns">
<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 class="no-icon" href="tel:+32 9 266 50 00" alt="Person tel">09 266 50 00</a>',
'<i class="icon-phone" aria-hidden="true"></i><a class="no-icon" 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 class="no-icon" 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 class="no-icon" href="mailto:jane.doe@stad.gent" alt="Person mail link">jane.doe@stad.gent</a>',
'<i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:jane.doe@stad.gent" alt="Person mail link">jane.doe@stad.gent</a>',
'<i class="icon-url" aria-hidden="true"></i><a class="no-icon" href="http://stad.gent" alt="Website link">http://stad.gent</a>',
'<i class="icon-url" aria-hidden="true"></i><a class="no-icon" 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/400x400&text=1:1+(400x400)',
'alt_text': 'Person avatar',
'ratio': null
} %}
</div>
</div>
</div>
</section>
<section class="contact-details contact-details--with-image">
<h2 class="h3">Contact details</h2>
<div class="contact-details-columns">
<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 class="no-icon" 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 class="no-icon" 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 class="no-icon" 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 class="no-icon" href="mailto:jane.doe@stad.gent" alt="Person mail link">jane.doe@stad.gent</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:jane.doe@stad.gent" alt="Person mail link">jane.doe@stad.gent</a></li>
<li><i class="icon-url" aria-hidden="true"></i><a class="no-icon" href="http://stad.gent" alt="Website link">http://stad.gent</a></li>
<li><i class="icon-url" aria-hidden="true"></i><a class="no-icon" 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/400x400&text=1:1+(400x400)" alt="Person avatar" /></figure>
</div>
</div>
</div>
</section>
/* No context defined. */
$avatar-width: 280px;
.contact-details {
&--with-image {
.contact-details-columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.contact-details-column {
flex-grow: 1;
width: 100%;
@include tablet {
@include col(6);
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;
}
}
}
}
}
h2,
h3 {
margin-bottom: 30px;
}
ul {
@include medium-text();
max-width: 630px;
margin-bottom: 45px;
@include desktop {
margin-bottom: 0;
}
}
}