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.

We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Components

Contact details

Last updated
16 June 2023 - see all updates
A template for displaying contact details in a consistent way across different pages.
Open this example in a new window

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/x.svg" alt="" aria-hidden="true" />
                    <a class="ds_contact-details__social-link" href="#">X</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.

Open this example in a new window

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/x.svg" alt="" aria-hidden="true" />
                            <a class="ds_contact-details__social-link" href="#">
                                @ScotGovFM<span class="visually-hidden"> on X</span>
                            </a>
                        </dd>
                        <dd class="ds_contact-details__social-item" translate="no">
                            <a class="ds_contact-details__social-link" href="#">
                                @JohnSwinney<span class="visually-hidden"> on X</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)

First published
19 August 2020
Last updated
16 June 2023 - show all updates

  1. Updated to support multiple columns and social media accounts, along with other minor code changes.

Back to top