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--neutral-1">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>The best dinosaurs</h2>
            </div>
        </div>
        <div class="row standard-gap">
            <div class="col-sm-6">
                <div class=" health-card health-card--light">
                    <div class="health-card__image health-card__image--full-width">

                        <div class="image-outer">
                            <div class="image-placeholder" style="max-width: 800px;">
                                <div style="padding-top: 56.25%;"></div>
                            </div>
                            <div class="image-wrapper image-loading">
                                <div class="image">
                                    <img width="800" height="450" data-src="../../images/trex_16x9.jpg">
                                </div>
                            </div>
                        </div>

                    </div>
                    <h3 id="ageing-and-aged-care">Tyrannosaurus</h3>
                    <div class="au-display-md--text standard-gap">
                        <p>Tyrannosaurus is a genus of coelurosaurian theropod dinosaur. The species Tyrannosaurus rex (rex meaning "king" in Latin), often called T. rex or colloquially T-Rex, is one of the most well-represented of the large theropods.
                        </p>
                    </div>
                    <div class="au-cta-link">
                        <a href="#">Learn more</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 standard-gap--mobile-only">
                <div class=" health-card health-card--light">
                    <div class="health-card__image health-card__image--full-width">

                        <div class="image-outer">
                            <div class="image-placeholder" style="max-width: 800px;">
                                <div style="padding-top: 56.25%;"></div>
                            </div>
                            <div class="image-wrapper image-loading">
                                <div class="image">
                                    <img width="800" height="450" data-src="../../images/trex_16x9.jpg">
                                </div>
                            </div>
                        </div>

                    </div>
                    <h3 id="ageing-and-aged-care">Tyrannosaurus</h3>
                    <div class="au-display-md--text standard-gap">
                        <p>Tyrannosaurus is a genus of coelurosaurian theropod dinosaur. The species Tyrannosaurus rex (rex meaning "king" in Latin), often called T. rex or colloquially T-Rex, is one of the most well-represented of the large theropods.
                        </p>
                    </div>
                    <div class="au-cta-link">
                        <a href="#">Learn more</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>