<div class="health-band health-band--full-width-bg health-band--neutral">
<div class="health-band__container">
<h2>Neutral 1 full-width</h2>
<p>Full-width band using the default neutral grey colour.</p>
</div>
</div>
<div class="health-band health-band--full-width-bg health-band--neutral--darker">
<div class="health-band__container">
<h2>Neutral 2 full-width</h2>
<p>Full-width band using the darker neutral grey colour.</p>
</div>
</div>
<div class="health-band health-band--neutral">
<div class="health-band__container">
<h2>Neutral 1 contained</h2>
<p>Container-width band using the neutral neutral grey colour.</p>
</div>
</div>
<div class="health-band health-band--neutral--darker">
<div class="health-band__container">
<h2>Neutral 2 contained</h2>
<p>Container-width band using the darker neutral grey colour.</p>
</div>
</div>
<div class="health-band health-band--primary">
<div class="health-band__container">
<h2>Primary contained</h2>
<p>Container-width band using the primary colour.</p>
</div>
</div>
<div class="health-band health-band--secondary">
<div class="health-band__container">
<h2>Secondary contained</h2>
<p>Container-width band using the secondary colour.</p>
</div>
</div>
<div class="health-band health-band--tertiary">
<div class="health-band__container">
<h2>Tertiary contained</h2>
<p>Container-width band using the tertiary colour.</p>
</div>
</div>
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.