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--secondary au-body au-body--dark">
    <div class="health-band__container">
        <div class="row">
            <h2 class="col-xs-12">Did you know?</h2>
        </div>
        <div class="row">
            <div class="col-sm-4 stat">
                <div class="wrapper">
                    <p class="au-display-xxxl">94.14%</p>
                    <p class="au-display-md--text">of people think dinosaurs are awesome</p>
                    <div class="stat__trend">
                        <span class="svg-inline--fa">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                <path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path>
                            </svg>
                        </span>
                        <p class="stat__trend-value">13% increase in 2019</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 stat stat--no-trend">
                <div class="wrapper">
                    <p class="au-display-xxxl">100%</p>
                    <p class="au-display-md--text">of dinosaurs are extinct</p>
                </div>
            </div>
            <div class="col-sm-4 stat">
                <div class="wrapper">
                    <p class="au-display-xxxl">$8.6 million</p>
                    <p class="au-display-md--text">is spent every year on dinosaur
                        containment</p>
                    <div class="stat__trend">
                        <span class="svg-inline--fa">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                <path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path>
                            </svg>
                        </span>
                        <p class="stat__trend-value">25% decrease over 2017-19</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <p>Source: Australian Bureau of Dinosaurs</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <a href="#" class="au-cta-link">More amazing dinosaur facts</a>
            </div>
        </div>
    </div>
</div>