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.

Component

Contact details

Published 19 August 2020

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>

    <dl class="ds_contact-details__list">
        <div class="ds_contact-details__item">
            <dt>Address</dt>
            <dd translate="no">
                <address>
                    Scottish Government<br />
                    St. Andrew's House<br />
                    Regent Road<br />
                    Edinburgh<br />
                    EH1 3DG
                </address>
            </dd>
        </div>

        <div class="ds_contact-details__item">
            <dt>Email</dt>
            <dd><a href="mailto:#">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-5pm<br />
                <a href="https://www.gov.uk/call-charges">Find out about call charges</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  ds_contact-details__social">
            <dt class="visually-hidden">Social media</dt>
            <dd class="ds_contact-details__social-item">
                <a class="ds_contact-details__social-link" href="#">
                    <svg class="ds_contact-details__social-icon  ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#facebook"></use></svg>
                    Facebook
                </a>
            </dd>

            <dd class="ds_contact-details__social-item">
                <a class="ds_contact-details__social-link" href="#">
                    <svg class="ds_contact-details__social-icon  ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#twitter"></use></svg>
                    @scotgov
                </a>
            </dd>

            <dd class="ds_contact-details__social-item">
                <a class="ds_contact-details__social-link" href="#">
                    <svg class="ds_contact-details__social-icon  ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#flickr"></use></svg>
                    Flickr
                </a>
            </dd>

            <dd class="ds_contact-details__social-item">
                <a class="ds_contact-details__social-link" href="#">
                    <svg class="ds_contact-details__social-icon  ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#youtube"></use></svg>
                    YouTube
                </a>
            </dd>

            <dd class="ds_contact-details__social-item">
                <a class="ds_contact-details__social-link" href="#">
                    <svg class="ds_contact-details__social-icon  ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#blog"></use></svg>
                    Blog
                </a>
            </dd>
        </div>
    </dl>

</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 pattern, you should make sure that:

  • the order of the contact details are based on user needs, with the most used contact method at the top
  • only one contact email address is given

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.

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.

Evidence

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

Contact details components 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:

  • clicks on social media/email/telephone 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 the same way
  • phone numbers are not links by default, they are tagged with a data attribute and, if the user is on a mobile phone, can be automatically linked to make a call if the user’s browser supports this

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

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top