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>Browse topic for</h2>
</div>
</div>
<div class="row">
<ul class="health-card-list health-card-list--matchheight">
<li class="col-sm-6">
<a class="health-card health-card--solid-half health-card--shadow health-card--colour1" href="#">
<h3 class="health-card__title au-display-md">Children</h3>
<div class="health-card__text">
<p>Activities for children to learn about dinosaurs.</p>
</div>
</a>
</li>
<li class="col-sm-6">
<a class="health-card health-card--solid-half health-card--shadow health-card--colour2" href="#">
<h3 class="health-card__title au-display-md">Teenages</h3>
<div class="health-card__text">
<p>Get your teenager out of the house with a trip to your local dinosaur museum</p>
</div>
</a>
</li>
<li class="col-sm-6">
<a class="health-card health-card--solid-half health-card--shadow health-card--colour3" href="#">
<h3 class="health-card__title au-display-md">Adults</h3>
<div class="health-card__text">
<p>When was the last time you watched Jurrasic Park?</p>
</div>
</a>
</li>
<li class="col-sm-6">
<a class="health-card health-card--solid-half health-card--shadow health-card--colour4" href="#">
<h3 class="health-card__title au-display-md">Seniors</h3>
<div class="health-card__text">
<p>Dinosaurs are for people of all ages.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>