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.
{% 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"
}
$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;
}
}
}
}
}