Contact details
Sample HTML
<div class="ds_contact-details">
<h2 class="ds_contact-details__title">Contact</h2>
<address>
<dl>
<div class="ds_contact-details__item">
<dt>Address</dt>
<dd translate="no">
Scottish Government<br />
St Andrew's House<br />
Regent Road<br />
Edinburgh<br />
EH1 3DG
</dd>
</div>
<div class="ds_contact-details__item">
<dt>Email</dt>
<dd translate="no"><a href="mailto:email@gov.scot">email@gov.scot</a></dd>
</div>
<div class="ds_contact-details__item">
<dt>Phone</dt>
<dd>
0123 456 7000<br />
Main line is open 8am to 5pm<br />
<a href="https://www.gov.uk/call-charges">Find out about call charges on GOV.UK</a>
</dd>
</div>
<div class="ds_contact-details__item">
<dt>Out of hours</dt>
<dd>
0123 456 7001
</dd>
</div>
<div class="ds_contact-details__item">
<dt>Fax</dt>
<dd>
0123 456 7002
</dd>
</div>
<div class="ds_contact-details__item">
<dt>Website</dt>
<dd>
<a href="https://www.gov.scot">www.gov.scot</a>
</dd>
</div>
<div class="ds_contact-details__item">
<dt>Follow</dt>
<dd class="ds_contact-details__social-item" translate="no">
<img class="ds_contact-details__social-icon" src="/assets/images/icons/social/facebook.svg" alt="" aria-hidden="true" />
<a class="ds_contact-details__social-link" href="#">Facebook</a>
</dd>
<dd class="ds_contact-details__social-item" translate="no">
<img class="ds_contact-details__social-icon" src="/assets/images/icons/social/twitter.svg" alt="" aria-hidden="true" />
<a class="ds_contact-details__social-link" href="#">Twitter</a>
</dd>
<dd class="ds_contact-details__social-item" translate="no">
<img class="ds_contact-details__social-icon" src="/assets/images/icons/social/flickr.svg" alt="" aria-hidden="true" />
<a class="ds_contact-details__social-link" href="#">Flickr</a>
</dd>
<dd class="ds_contact-details__social-item" translate="no">
<img class="ds_contact-details__social-icon" src="/assets/images/icons/social/linkedin.svg" alt="" aria-hidden="true" />
<a class="ds_contact-details__social-link" href="#">LinkedIn</a>
</dd>
<dd class="ds_contact-details__social-item" translate="no">
<img class="ds_contact-details__social-icon" src="/assets/images/icons/social/instagram.svg" alt="" aria-hidden="true" />
<a class="ds_contact-details__social-link" href="#">Instagram</a>
</dd>
<dd class="ds_contact-details__social-item" translate="no">
<img class="ds_contact-details__social-icon" src="/assets/images/icons/social/youtube.svg" alt="" aria-hidden="true" />
<a class="ds_contact-details__social-link" href="#">YouTube</a>
</dd>
</div>
</dl>
</address>
</div>About this component
Use the contact details component to show users ways to get in touch with your organisation. A contact details component can include:
-
a physical address
-
an email address
-
a telephone number
-
links to social media accounts
-
any other direct contact method
You should base the order of contact methods on user needs. Put the most used contact method first.
It is good practice to not provide more than one email address or telephone number. The user won't have to decide which is best for their query.
Use a logo with social media items, such as a Facebook logo with a Facebook address. This helps users to identify the link. If you have more than one link to the same social media platform, group them under a single logo.
Why we use this component
A prominent block for contact details helps users to find it when scanning the page.
It also helps users to skip past this content if they don’t need it.
Other versions of this component
You can split contact details can over two columns if using the component in a layout that is wide enough.
Sample HTML
<div class="ds_contact-details">
<h2 class="ds_contact-details__title">Contact</h2>
<address>
<div class="ds_contact-details-grid">
<div class="ds_contact-details__list">
<dl>
<div class="ds_contact-details__item">
<dt>Address</dt>
<dd translate="no">
First Minister<br />
Scottish Government<br />
St Andrew's House<br />
Regent Road<br />
Edinburgh<br />
EH1 3DG
</dd>
</div>
<div class="ds_contact-details__item">
<dt>Email</dt>
<dd translate="no"><a class="ds_break-word" href="mailto:firstminister@gov.scot">firstminister@gov.scot</a></dd>
</div>
</dl>
</div>
<div class="ds_contact-details__list">
<dl>
<div class="ds_contact-details__item">
<dt>Follow</dt>
<dd class="ds_contact-details__social-item" translate="no">
<img class="ds_contact-details__social-icon" src="/assets/images/icons/social/twitter.svg" alt="" aria-hidden="true" />
<a class="ds_contact-details__social-link" href="#">
@ScotGovFM<span class="visually-hidden"> on Twitter</span>
</a>
</dd>
<dd class="ds_contact-details__social-item" translate="no">
<a class="ds_contact-details__social-link" href="#">
@HumzaYousaf<span class="visually-hidden"> on Twitter</span>
</a>
</dd>
</div>
</dl>
</div>
</div>
</address>
</div>Implementation
Use the address tag to wrap any contact details that relate to the page’s content. This provides more semantic meaning.
Links to social media accounts should include the name of the social media platform. Show the account name if you have more than one link to the same social media platform. This helps users to know what each link is.
You can shorten the link text with the visually-hidden class if there is not much space in your layout. This saves space but keeps the full text available to screen reader users.
Only use logos for social media links, for all other contact types use text labels.
Evidence
Around 3% of internal searches on mygov.scot are for contact details.
Google's 'smart search' results can return contact details. About four times more people find Disclosure Scotland’s contact details from the mygov.scot website in a Google ‘smart search’ results page than they do on mygov.scot itself.
Website analytics
You can track internal links in contact details using the page path and the previous page path.
You can track external clicks links in contact details through the original page path, the external link URL, the click text and a data attribute describing the element.
The Design System’s ‘tracking’ script adds the data attributes.
Live example
Deputy First Minister's profile (gov.scot)
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback