Lens design system

Contact Us

Contact Us

A section for contact details for a group, team or organisation.

A maximum of 2 contact ‘cards’ can be added to the section. Each contact card includes:

  • contact title
  • email
  • phone

Social media accounts

A maximum of 7 Social media accounts can be added to the contact section. Only 1 of each account type can be used.

<!-- SECTION: Contact us -->
<section class="contact-us small-padding stack-section">
    <header class="text-center">
        <div class="row column">
            <div class="section-header">
                <h1 class="section-heading">Contact us</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit tempor est dictum nullam.</p>
            </div>
            <hr class="section-header-divider" />
        </div>
    </header>
    <div class="row column" data-equalizer="card-header" data-equalize-on="medium">
        <div class="flex-wrapper small-padding">
            <article class="card standard-card">
                <header data-equalizer-watch="card-header">
                    <h1>Amanda Person, Coordinator</h1>
                </header>
                <footer>
                    <ul class="no-bullet-list">
                        <li class="email"><a href="mailto:a.person@bath.ac.uk">a.person@bath.ac.uk</a></li>
                        <li class="telephone">01225 345678</li>
                    </ul>
                </footer>
            </article>
        </div>
        <!-- COMPONENT: Social media -->
        <div class="flex-wrapper small-padding">
            <!-- Facebook -->
            <a class="social-button facebook" href="https://www.facebook.com">Like us on Facebook</a>
            <!-- Twitter -->
            <a class="social-button twitter" href="https://www.twitter.com">Follow us on Twitter</a>
            <!-- Instagram -->
            <a class="social-button instagram" href="https://www.instagram.com">Follow us on Instagram</a>
            <!-- Sina Weibo -->
            <a class="social-button sinaweibo" href="https://www.weibo.com">Follow us on Sina Weibo</a>
            <!-- Snapchat -->
            <a class="social-button snapchat" href="https://www.snapchat.com">Follow us on SnapChat</a>
            <!-- WeChat -->
            <a class="social-button wechat" href="https://web.wechat.com/">Subscribe to us on WeChat</a>
            <!-- Youtube -->
            <a class="social-button youtube" href="https://www.youtube.com">Subscribe to us on YouTube</a>
        </div>
        <!-- End component: Social media -->
    </div>
</section>
<!-- End section: Contact us -->