<nav class="au-skip-link" aria-label="skip links navigation">
    <a class="au-skip-link__link" href="#content">Skip to main content</a>
    <a class="au-skip-link__link" href="#nav">Skip to main navigation</a>
</nav>

<div class="au-body">
    <header class="au-header au-header--simple pillars-container" role="banner">
        <div class="container">
            <div id="pillars"></div>
            <div class="row">
                <div class="col-sm-5">
                    <a href="/" title="Home" rel="home" class="au-header__logo">
                        <img src="../../images/logo.svg" alt="Australia Government Department of Health and Aged Care" class="au-header__logo-image au-responsive-media-img" width="600" height="146" />
                    </a>
                    <div class="au-sronly">
                        <p>Australian Government Department of Health and Aged Care</p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--
     Output inline style for image for more granular control
     Preferably add to CSS but this depends on the implementation
  -->
    <style>
        .health-sub-header--campaign {
            background-image: url('https://picsum.photos/id/867/1920/700') !important; // reqd to override .au-body--dark bg
        }
    </style>

    <div class="health-sub-header health-sub-header--campaign au-body au-body--dark">
        <div class="container">
            <div class="row">
                <div class="health-sub-header__content col-sm-7">
                    <h1>Save the Tyrannosaurus</h1>
                    <p class="au-introduction">
                        Tyrannosaurus is a genus of coelurosaurian theropod dinosaur. The species Tyrannosaurus rex (rex meaning &quot;king&quot; in Latin), often called T. rex or colloquially T-Rex, is one of the most well-represented of the large theropods.
                    </p>
                    <p>
                        <a class="au-btn au-btn--dark au-btn--large" href="#">
                            Help save the T-Rex
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="container health-content health-content--flush">
        <div class="row">
            <div class="health-band">
                <div class="health-band__container">
                    <div class="row">
                        <div class="col-xs-12">
                            <h2>Featured resource</h2>
                        </div>
                    </div>
                    <div class="row standard-gap">
                        <div class="col-sm-3 col-xs-4">

                            <div class="image--link image--border">
                                <a href="#">
                                    <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="https://picsum.photos/1600/900">
                                            </div>
                                        </div>
                                    </div>

                                </a>
                            </div>

                        </div>
                        <div class="col-sm-9 col-xs-8">
                            <h3><a href="#">Tyrannosaurus</a></h3>
                            <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>
                </div>
            </div>

            <div class="health-band health-band--primary au-body au-body--dark">
                <div class="health-band__container">
                    <div class="row">
                        <div class="col-sm-4">
                            <h2>Dinosaur escape hotline</h2>
                        </div>
                        <div class="col-sm-8 standard-gap--mobile-only">
                            <a href="tel:1800 671 811" class="au-display-lg au-display--inline">
                                <span class="svg-inline--fa">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
                                    </svg>
                                </span>
                                1800 671 811
                            </a>
                            <p>
                                Call us on 1800 671 811 if you spot a dinosaur on the loose.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="health-band">
                <div class="health-band__container">
                    <div class="row">
                        <div class="col-xs-12">
                            <h2>Your stories</h2>
                        </div>
                    </div>
                    <div class="row standard-gap">
                        <div class="col-sm-4">
                            <div class="health-video">
                                <div class="health-video__preview">

                                    <div class="image--link image--border">
                                        <a href="#">
                                            <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="https://picsum.photos/800/450">
                                                    </div>
                                                </div>
                                            </div>

                                        </a>
                                    </div>
                                    <div class="health-video__preview__length health-video__preview__length--small">
                                        <span class="svg-inline--fa">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z" />
                                            </svg>
                                        </span>
                                        3:35
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="health-video">
                                <div class="health-video__preview">

                                    <div class="image--link image--border">
                                        <a href="#">
                                            <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="https://picsum.photos/800/450">
                                                    </div>
                                                </div>
                                            </div>

                                        </a>
                                    </div>
                                    <div class="health-video__preview__length health-video__preview__length--small">
                                        <span class="svg-inline--fa">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z" />
                                            </svg>
                                        </span>
                                        3:35
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="health-video">
                                <div class="health-video__preview">

                                    <div class="image--link image--border">
                                        <a href="#">
                                            <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="https://picsum.photos/800/450">
                                                    </div>
                                                </div>
                                            </div>

                                        </a>
                                    </div>
                                    <div class="health-video__preview__length health-video__preview__length--small">
                                        <span class="svg-inline--fa">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z" />
                                            </svg>
                                        </span>
                                        3:35
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row standard-gap">
                        <div class="col-xs-12 text--align-right">
                            <a href="#" class="au-cta-link">View more videos</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="container standard-gap print--hide">
        <div class="row">
            <p class="col-xs-12">
                <a class="link-help-improve" href="#" rel="nofollow" aria-controls="block-webform-client-block-1291" aria-expanded="false">
                    Is there anything wrong with this page?
                </a>
            </p>
        </div>
    </div>

</div>

<footer class="au-footer au-footer--dark au-body au-body--dark" role="contentinfo">
    <div class="container">
        <nav class="au-footer__navigation row" aria-label="footer">
            <div class="col-sm-6 col-md-3 au-footer__navigation-section">
                <h3>About Dinosaurs</h3>
                <ul class="au-link-list">
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Corporate reporting</a></li>
                    <li><a href="#">Portfolio agencies</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3 au-footer__navigation-section">
                <h3>Using our websites</h3>
                <ul class="au-link-list">
                    <li><a href="#">About our website</a></li>
                    <li><a href="#">Accessibility</a></li>
                    <li><a href="#">Copyright</a></li>
                    <li><a href="#">Disclaimer</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Social media</a></li>
                    <li><a href="#">RSS feed</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3 au-footer__navigation-section">
                <h3>Follow us</h3>
                <ul class="au-link-list">
                    <li><a href="#">Media centre</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">LinkedIn</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Youtube</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3 au-footer__navigation-section">
                <h3>Help us improve</h3>
                <p>We are always looking for ways to improve our website.</p>
                <a href="#" class="au-btn au-btn--secondary au-btn--dark standard-gap">Provide feedback</a>
            </div>
        </nav>
        <div class="au-footer__end">
            <div class="row">
                <div class="col-xs-12">
                    <p><small>© Commonwealth of Australia</small></p>
                </div>
            </div>
        </div>
    </div>
</footer>

<button class="health-back-to-top ">
    <a class="au-btn au-btn--secondary" href="#">
        <span class="svg-inline--fa fa-fw">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
            </svg>
        </span>
        Back to top
    </a>
</button>

No notes defined.