Health Design System

Band: Cards Audience

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