Site Footer

<footer class="site-footer">

    <div class="wrapper  wrapper--gutter">

        <ul class="site-footer__sections">

            <li class="site-footer__section  site-footer__section--primary    u-width-1-of-2-from-medium  u-width-1-of-3-from-large">

                <a href="/">

                    <img alt="Understanding Patient Data" class="site-footer__logo" src="../../images/logo.svg">

                </a>

                <ul class="site-footer__socials  grid    gutter  gutter--small">

                    <li class="grid__item    gutter__item">

                        <a class="site-footer__social-link" href="#link-to-twitter">

                            <svg class="svg-icon svg-icon--circular site-footer__social-icon" xmlns="http://www.w3.org/2000/svg" title="Follow us on Twitter">

                                <title>Follow us on Twitter</title>

                                <use xlink:href="#svg-icon-twitter" />

                            </svg>

                        </a>

                    <!-- /li -->

                    <li class="grid__item    gutter__item">

                        <a class="site-footer__social-link" href="#link-to-linkedin">

                            <svg class="svg-icon svg-icon--circular site-footer__social-icon" xmlns="http://www.w3.org/2000/svg" title="Follow us on LinkedIn">

                                <title>Follow us on LinkedIn</title>

                                <use xlink:href="#svg-icon-linkedin" />

                            </svg>

                        </a>

                    <!-- /li -->

                    <li class="grid__item    gutter__item">

                        <a class="site-footer__social-link" href="#link-to-facebook">

                            <svg class="svg-icon svg-icon--circular site-footer__social-icon" xmlns="http://www.w3.org/2000/svg" title="Follow us on Facebook">

                                <title>Follow us on Facebook</title>

                                <use xlink:href="#svg-icon-facebook" />

                            </svg>

                        </a>

                    <!-- /li -->

                </ul>

            <!-- /li -->

            <li class="site-footer__section    u-width-1-of-2-from-medium  u-width-1-of-3-from-large">

                <span class="site-footer__text  site-footer__text--title">Contact us</span>

                <dl class="list-bare">

                    <dt class="u-visually-hidden">Telephone</dt>

                    <dd>

                        <a class="site-footer__text  site-footer__text--phone" href="tel:+4420786118646">+44 207 8611 8646</a>

                    </dd>

                    <dt class="u-visually-hidden">Email</dt>

                    <dd>

                        <a class="site-footer__text" href="mailto:hello@understandingpatientdata.org.uk">hello@understandingpatientdata.org.uk</a>

                    </dd>

                </dl>

            <!-- /li -->

            <li class="site-footer__section   u-width-1-of-2-from-medium  u-width-1-of-3-from-large">

                <form>

                    <label class="site-footer__text  site-footer__text--title" for="subscribe">Join our mailing list</label>

                    <input class="site-footer__input" id="subscribe" placeholder="Email address" required type="email"><!-- Avoid whitespace between elements

            --><button class="site-footer__submit" type="submit">Sign up</button>

                </form>

            <!-- /li -->

        </ul>

        <div class="site-footer__details">

            <span class="site-footer__detail">Copyright 2017 Wellcome Trust Ltd.</span>

            <ul class="site-footer__detail    list-delimited">

                <li>

                    <a href="#link-to-ts-and-cs">Terms &amp; conditions</a>

                </li>

                <li>

                    <a href="#link-to-privacy-policy">Privacy policy</a>

                </li>

            </ul>

            <a class="site-footer__hactar" href="http://hactar.is/">

                <img alt="Made by Hactar" src="../../images/made-by-hactar.svg">

            </a>

        </div>

    </div>

</footer>