Contact Us Section on Support Page

A section for contact details for a support page

A maximum of 3 badge items can be added into this section

The section should include:

  • A heading
  • A summary paragraph
  • A coloured devider
  • Badges item(s)
<!-- SECTION STARTS: How to contact us -->
<section class="contact-us bg-cornflower-60-dark large-padding">
    <footer class="section-footer text-center">
        <div class="row column">
            <div class="flex-wrapper">
                <div class="single-item">
                    <p class="related-information">We are available between 09:30 and 16:00 GMT, Monday to Friday<sup>*</sup></p>
                    <p class="smallprint"><sup>*</sup>Excluding <a href="https://www.gov.uk/bank-holidays">UK bank holidays</a> and <a href="http://www.bath.ac.uk/publications/academic-year-charts/">University holidays</a></p>
                    <hr class="divider" />
                </div>
            </div>
        </div>
    </footer>
    <div class="row column">
        <div class="flex-wrapper">
            <!-- COMPONENT START: Mobile Icon -->
            <div class="badge-item text-center">
                <p class="badge-label">Call us on<br>
                    <strong>+44 (0)1225 383019</strong>
                </p>
                <a class="badge-button" href="tel:+441225383019">
                    <img src="https://www.bath.ac.uk/lens/109/assets/university-of-bath/images/icons/icon-phone.svg" alt="A mobile telephone">
                </a>
            </div>
            <!-- COMPONENT END: Mobile Icon -->
            <!-- COMPONENT START: Chat Icon -->
            <div class="badge-item text-center">
                <p class="badge-label">Chat with us on<br><strong>Live Chat</strong></p>
                <a href="javascript:GeckoChat.boot(); GeckoChat.open();" class="badge-button">
                    <img src="https://www.bath.ac.uk/lens/109/assets/university-of-bath/images/icons/icon-chat.svg" alt="Two speech balloons overlapping to suggest conversation">
                </a>
            </div>
            <!-- COMPONENT END: Chat Icon -->
            <!-- COMPONENT START: Email Icon -->
            <div class="badge-item text-center">
                <p class="badge-label">Email us at<br><strong>admissions@bath.ac.uk</strong></p>
                <a href="mailto:admissions@bath.ac.uk?subject=Enquiry%20about%20undergraduate%20courses" class="badge-button">
                    <img src="https://www.bath.ac.uk/lens/109/assets/university-of-bath/images/icons/icon-mail.svg" alt="An envelope">
                </a>
            </div>
            <!-- COMPONENT END: Email Icon -->
        </div>
    </div>
</section>
<!-- SECTION ENDS: How to contact us -->
  • Handle: @contact-us-on-support-page
  • Preview:
  • Filesystem Path: components/recipes/about-and-contact/contact-us-on-support-page/contact-us-on-support-page.hbs
  • References (3): @call, @chat, @email