Health Design System

Band: Default

Bands

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--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>