On content types where both about and contact us sections can be added, they are grouped together in a single combined section.
<!-- 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">
<div class="embedded-media">
<!-- Map code -->
<!-- COMPONENT: Embedded media - Map -->
<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&layer=mapnik&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&mlon=-2.32798#map=18/51.37990/-2.32798">View Larger Map</a></small>
<!-- End component: Embedded media - Map -->
</div>
<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 -->
<hr class="divider">
</div>
</footer>
</section>
<!-- End section: About us -->
<!-- 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 -->