Components menu
Contact details
The contact details component includes space for normal contact details and links to an organisation’s email, social media and other direct contact details.
About this component
When using the component, you should make sure that the order of the contact details are based on user needs, with the most used contact method first.
Good practice is to provide one email or phone number so the user doesn’t have to decide which is best for their query.
It is useful to use a logo with a social media address, such as a Twitter logo with a Twitter address, to make it easy to identify. If including more than one link to a social media platform these can be grouped together under a single logo.
Why we use this component
Giving contact details their own distinct design pattern, separate from the rest of the content on a web page, helps users quickly identify contact details when needed.
It also helps users to quickly skip past this content if they don’t need it.
Use the address tag to wrap any contact details that relate to the page’s content - as this can provide additional semantic meaning.
Links to social media accounts should include the name of the social media platform. Also show the account name if there is the need to distinguish between multiple links to the same social media platform.
Where space is limited use the sr-only class to reduce the link text that is visible to users who are not using screen reader software.
Only use logos for social media links, for all other contact types use text labels.
Contact
- Address
-
Scottish Environment Protection Agency (SEPA)
Angus Smith Building
6 Parklands Avenue
Eurocentral
Holytown
North Lanarkshire
ML1 4WQ - email@sepa.scot
- Phone
-
03000 99 66 99
Find out about call charges - Out of hours
- 0123 456 7001
- Website
- www.sepa.scot
- Follow
HTML
<div class="contact-details">
<address>
<dl>
<div class="contact-details--item">
<dt>Address</dt>
<dd translate="no">
Scottish Environment Protection Agency (SEPA)<br />
Angus Smith Building<br />
6 Parklands Avenue<br />
Eurocentral<br />
Holytown<br />
North Lanarkshire<br />
ML1 4WQ
</dd>
</div>
<div class="contact-details--item">
<dt>Email</dt>
<dd translate="no">
<a href="mailto:email@sepa.scot">email@sepa.scot</a>
</dd>
</div>
<div class="contact-details--item">
<dt>Phone</dt>
<dd>
03000 99 66 99<br />
<a href="https://www.gov.uk/call-charges">Find out about call charges</a>
</dd>
</div>
<div class="contact-details--item">
<dt>Out of hours</dt>
<dd>0123 456 7001</dd>
</div>
<div class="contact-details--item">
<dt>Website</dt>
<dd>
<a href="https://www.sepa.scot">www.sepa.scot</a>
</dd>
</div>
<div class="contact-details--item">
<dt>Follow</dt>
<dd class="contact-details--social-item" translate="no">
<i class="contact-details--social-icon fa-brands fa-x-twitter fa-xl" aria-hidden="true"></i>
<a class="contact-details--social-link" href="http://twitter.com/ScottishEPA">X Twitter</a>
</dd>
<dd class="contact-details--social-item" translate="no">
<i class="contact-details--social-icon fa-brands fa-facebook fa-xl" aria-hidden="true"></i>
<a class="contact-details--social-link" href="http://www.facebook.com/pages/Scottish-Environment-Protection-Agency-SEPA/170274626335436">Facebook</a>
</dd>
<dd class="contact-details--social-item" translate="no">
<i class="contact-details--social-icon fa-brands fa-youtube fa-xl" aria-hidden="true"></i>
<a class="contact-details--social-link" href="https://www.youtube.com/user/SEPAView/">YouTube</a>
</dd>
<dd class="contact-details--social-item" translate="no">
<i class="contact-details--social-icon fa-brands fa-linkedin fa-xl" aria-hidden="true"></i>
<a class="contact-details--social-link" href="https://uk.linkedin.com/company/scottish-environment-protection-agency">LinkedIn</a>
</dd>
</div>
</dl>
</address>
</div>
CSS
/* Contact details
------------------------------------ */
.contact-details--item {
margin-top: 1rem;
}
.contact-details--item dt {
font-weight: 600;
}
.contact-details--item dd {
margin-top: 0;
margin-left: 0;
margin-bottom: .5rem;
}
.contact-details--item dt:not(.sr-only)+.contact-details--social-item {
margin-top: .5rem;
margin-bottom: .5rem;
}
.contact-details--social-icon {
color: var(--scottish-teal);
}
.contact-details--social-link {
margin-left: 1rem;
}