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>Top tasks</h2>
            </div>
        </div>
        <div class="row">
            <ul class="health-card-list health-card-list--matchheight">
                <li class="col-sm-3">
                    <a class="
health-card
health-card--centered
health-card--shadow
health-card--top-highlight
health-card--cta
colour1
" href="#">
                        <div class="health-card__image">
                            <span class="svg-inline--fa">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
    </span>
                        </div>
                        <h3 class="health-card__title au-display-md au-display--heavy">
                            Find your favourite dinosaur
                        </h3>
                    </a>
                </li>
                <li class="col-sm-3">
                    <a class="
health-card
health-card--centered
health-card--shadow
health-card--top-highlight
health-card--cta
health-card--colour2
" href="#">
                        <div class="health-card__image">
                            <span class="svg-inline--fa">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
    </span>
                        </div>
                        <h3 class="health-card__title au-display-md au-display--heavy">
                            Compare yourself to the largest dinosaur
                        </h3>
                    </a>
                </li>
                <li class="col-sm-3">
                    <a class="
health-card
health-card--centered
health-card--shadow
health-card--top-highlight
health-card--cta
health-card--colour3
" href="#">
                        <div class="health-card__image">
                            <span class="svg-inline--fa">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
    </span>
                        </div>
                        <h3 class="health-card__title au-display-md au-display--heavy">
                            Take our dinosaur quiz
                        </h3>
                    </a>
                </li>
                <li class="col-sm-3">
                    <a class="
health-card
health-card--centered
health-card--shadow
health-card--top-highlight
health-card--cta
health-card--colour4
" href="#">
                        <div class="health-card__image">
                            <span class="svg-inline--fa">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
    </span>
                        </div>
                        <h3 class="health-card__title au-display-md au-display--heavy">
                            Learn more about dinosaurs
                        </h3>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>