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">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>Plain</h2>
                <p>Plain text band. </p>
            </div>
        </div>
    </div>
</div>

<div class="health-band health-band--neutral-1">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>Neutral 1</h2>
                <p>Plain text band. </p>
            </div>
        </div>
    </div>
</div>

<div class="health-band health-band--neutral-2">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>Neutral 2</h2>
                <p>Plain text band. </p>
            </div>
        </div>
    </div>
</div>