Lens design system

About Us

About us

A section containing information about a group, team or organisation.

The section can include a location, which can be either on or off-campus.

The section footer is optional and is only added if:

  • the section has a CTA
  • the About section is combined with a Contact section. A separating line is added to the footer to keep the sections distinct.
<!-- SECTION: About us -->
<section class="about-us small-padding stack-section">
    <header class="text-center">
        <div class="row column">
            <div class="section-header">
                <h1 class="section-heading">About us</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse, purus inceptos euismod cursus leo luctus class massa, vitae diam cum tempus laoreet id dui.</p>
            </div>
            <hr class="section-header-divider" />
        </div>
    </header>
    <div class="row column">
        <div class="flex-wrapper small-padding">
            <div class="card complex-card single-item text-center">
                <!-- COMPONENT: Embedded media - Map -->
                <div class="embedded-media">
                    <iframe scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-2.331386804580689%2C51.37818286327943%2C-2.324563264846802%2C51.381614790395275&amp;layer=mapnik&amp;marker=51.37989718489204%2C-2.327975034713745" style="border: 1px solid black" width="425" height="350" frameborder="0"></iframe><br><small><a href="http://www.openstreetmap.org/?mlat=51.37990&amp;mlon=-2.32798#map=18/51.37990/-2.32798">View Larger Map</a></small>
                </div>
                <!-- End component: Embedded media - Map -->
                <footer>
                    <address>
                        <span>Wessex House</span>
                        <span>University of Bath</span>
                        <span>Claverton Down</span>
                        <span>Bath</span>
                        <span>BA2 7AY</span>
                        <span>United Kingdom</span>
                    </address>
                </footer>
            </div>
        </div>
    </div>
    <footer class="small-padding text-center">
        <div class="row column">
            <!-- COMPONENT: Standard button -->
            <a href="#" class="button">Lorem ipsum dolor sit</a>
            <!-- End component: Standard button -->
        </div>
    </footer>
</section>
<!-- End section: About us -->