Contact Us

<p>This is just a specific demo of a box with an abstitle, see that component for source of truth.</p>

<div class="grid  grid--spaced">
    <div class="col-reverse  col-1/3  col-1/4@tablet-wide">

        <div class="box  box--with-abstitle  box--bg-greyblue-superlight">
            <div class="box__figure">
                <img src="https://picsum.photos/500/500?random=1" alt="person" />
            </div>
            <div class="box__content">
                <div class="box__abstitle  title">
                    <h4 class="h4">Contact Us</h4>
                </div>
                <h5 class="box__title  margin-y-none">Katie Holdcroft</h5>
                <p>Representative for Austria</p>

                <ul class="list--icon-bullets">
                    <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
                    <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
                    <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
                    <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
                </ul>

                <p class="font-sm">For further advice, you can contact our Central Enquiries Team.</p>
            </div>
        </div>

    </div>
    <div class="col-2/3  col-3/4@tablet-wide">

        <div class="box  box--with-abstitle  box--bg-greyblue-superlight">
            <div class="box__figure">
                <img src="https://picsum.photos/500/200?random=2" alt="person" />
            </div>
            <div class="box__content">
                <div class="box__abstitle  title">
                    <h4 class="h4">Any Questions?</h4>
                </div>

                <ul class="list--icon-bullets  list--inline">
                    <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
                    <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
                    <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
                    <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
                </ul>

                <p class="font-sm">For further advice, you can contact our Central Enquiries Team.</p>
            </div>
        </div>

    </div>
</div>