Group components on full width landing pages
Landing pages are made up of several bands that provide a snapshot into further information. For example a Latest news band with the latest 3 news items.
<div class="health-band">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Latest resources</h2>
</div>
</div>
<div class="row">
<ul class="health-card-list">
<li class="col-sm-6">
<div class="health-card health-card--resource">
<div class="row">
<div class="col-xs-3">
<div class="image--border image--link">
<a href="#">
<img src="../../images/real_tall.jpg">
</a>
</div>
</div>
<div class="col-xs-9">
<h3 class="au-display-md">
<a href="#">Dinosaur factsheet</a>
</h3>
<div class="metadata metadata--inline au-display-sm--text">
<div class="health-field__item">20 July 2019</div>
<div class="health-field__item">Publication</div>
</div>
</div>
</div>
</div>
</li>
<li class="col-sm-6">
<div class="health-card health-card--resource">
<div class="row">
<div class="col-xs-3">
<div class="image--border image--link">
<a href="#">
<img src="../../images/real_tall.jpg">
</a>
</div>
</div>
<div class="col-xs-9">
<h3 class="au-display-md">
<a href="#">Dinosaur factsheet</a>
</h3>
<div class="metadata metadata--inline au-display-sm--text">
<div class="health-field__item">20 July 2019</div>
<div class="health-field__item">Publication</div>
</div>
</div>
</div>
</div>
</li>
<li class="col-sm-6">
<div class="health-card health-card--resource">
<div class="row">
<div class="col-xs-3">
<div class="image--border image--link">
<a href="#">
<img src="../../images/real_tall.jpg">
</a>
</div>
</div>
<div class="col-xs-9">
<h3 class="au-display-md">
<a href="#">Dinosaur factsheet</a>
</h3>
<div class="metadata metadata--inline au-display-sm--text">
<div class="health-field__item">20 July 2019</div>
<div class="health-field__item">Publication</div>
</div>
</div>
</div>
</div>
</li>
<li class="col-sm-6">
<div class="health-card health-card--resource">
<div class="row">
<div class="col-xs-3">
<div class="image--border image--link">
<a href="#">
<img src="../../images/real_tall.jpg">
</a>
</div>
</div>
<div class="col-xs-9">
<h3 class="au-display-md">
<a href="#">Dinosaur factsheet</a>
</h3>
<div class="metadata metadata--inline au-display-sm--text">
<div class="health-field__item">20 July 2019</div>
<div class="health-field__item">Publication</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="row standard-gap">
<div class="col-xs-12 text--align-right">
<a href="#" class="au-cta-link">View more resources</a>
</div>
</div>
</div>
</div>