Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Contact details

A template for displaying contact details in a consistent way across different pages.

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

The contact details component includes space for normal contact details and links to an organisation’s email, social media and other direct contact details.

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.

Other versions of this component

Contact details can be split over two columns if using the component in a layout that has sufficient width.

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 - 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 visually-hidden 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.

Evidence

Around 3% of internal searches on mygov.scot are for contact details.

Contact details can also be returned by Google in ‘smart search’ results. As an example, about four times the number of users find Disclosure Scotland’s contact details from the mygov.scot website in a Google ‘smart search’ results page than they do on mygov.scot.

Website analytics

To track this component:

  • phone numbers are not links by default, but some mobile browsers automatically detect phone numbers and convert them to links which can be tracked
  • clicks on social media/email/phone links can be tracked through the original page path, the external link URL, the click text and a data attribute describing the element
  • internal links can be tracked using the page path and the previous page path

The data attributes are added automatically by the Design System’s ‘tracking’ script

Live example

Deputy First Minister's profile (gov.scot)

Back to top