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 health-band--neutral-1">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Latest news</h2>
</div>
</div>
<div class="row">
<ul class="health-card-list">
<li class="col-sm-4">
<article class="health-card health-card--shadow">
<div class="wrapper">
<div class="health-card__image health-card__image--full-width image--link">
<a href="#">
<div class="image-outer">
<div class="image-placeholder" style="max-width: 800px;">
<div style="padding-top: 56.25%;"></div>
</div>
<div class="image-wrapper image-loading">
<div class="image">
<img width="800" height="450" data-src="../../images/trex_16x9.jpg">
</div>
</div>
</div>
</a>
</div>
<h3 class="health-card__title au-display-md">
<a href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
</h3>
<footer class="metadata metadata--inline">
20 July 2019
</footer>
</div>
</article>
</li>
<li class="col-sm-4">
<article class="health-card health-card--shadow">
<div class="wrapper">
<div class="health-card__image health-card__image--full-width image--link">
<a href="#">
<div class="image-outer">
<div class="image-placeholder" style="max-width: 800px;">
<div style="padding-top: 56.25%;"></div>
</div>
<div class="image-wrapper image-loading">
<div class="image">
<img width="800" height="450" data-src="../../images/trex_16x9.jpg">
</div>
</div>
</div>
</a>
</div>
<h3 class="health-card__title au-display-md">
<a href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
</h3>
<footer class="metadata metadata--inline">
20 July 2019
</footer>
</div>
</article>
</li>
<li class="col-sm-4">
<article class="health-card health-card--shadow">
<div class="wrapper">
<div class="health-card__image health-card__image--full-width image--link">
<a href="#">
<div class="image-outer">
<div class="image-placeholder" style="max-width: 800px;">
<div style="padding-top: 56.25%;"></div>
</div>
<div class="image-wrapper image-loading">
<div class="image">
<img width="800" height="450" data-src="../../images/trex_16x9.jpg">
</div>
</div>
</div>
</a>
</div>
<h3 class="health-card__title au-display-md">
<a href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
</h3>
<footer class="metadata metadata--inline">
20 July 2019
</footer>
</div>
</article>
</li>
</ul>
</div>
<div class="row standard-gap">
<div class="col-xs-12 text--align-right">
<a href="#" class="au-cta-link">All news</a>
</div>
</div>
</div>
</div>