<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="health-release-status au-body au-body--dark">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <span class="health-release-status__icon health-release-status__icon--launch">
                    New
                </span>
                <div class="health-release-status--desktop">
                    Welcome to our new website. <a href="#">Learn more about it</a>. This
                    is still a work in progress, so please <a href="#">let us know what you
                        think</a>.
                </div>
                <div class="health-release-status--mobile">
                    Welcome to Health’s new website. <a href="#">Learn more about it</a>.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="au-body">
    <header class="au-header pillars-container" role="banner">
        <div class="container">
            <div id="pillars"></div>
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <a href="/" title="Home" rel="home" class="au-header__logo">
                        <img src="../../images/logo.svg" alt="Australia Government Department of Health" class="au-header__logo-image au-responsive-media-img" />
                    </a>
                    <div class="au-sronly">
                        <p>Australian Government Department of Health and Aged Care</p>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6">
                    <div class="health-sub-nav text--align-right">
                        <h3 class="au-sronly">Sub menu</h3>
                        <ul class="au-link-list au-link-list--inline">
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </div>
                    <div class="health-search health-search--global">
                        <form class="au-form">
                            <div class="health-search__form__input-wrapper">
                                <div class="au-form__item">
                                    <label class="au-sronly" for="search-field">Search</label>
                                    <input placeholder="Search this website" class="health-search__form__input au-text-input au-text-input au-text-input--block ui-autocomplete-input" size="30" type="text" id="search-field" name="funnelback_search_field" value="" maxlength="128" autocomplete="off">
                                </div>
                                <div class="health-loading"></div>
                            </div>
                            <input class="health-search__form__submit au-btn au-btn" type="submit" name="submit" value="Search">
                        </form>
                    </div>

                    <script language="JavaScript">
                        $(document).ready(function() {
                            health.searchAutocomplete('#search-field', dinosaurData);
                        });
                    </script>
                </div>
            </div>
        </div>
    </header>

    <nav class="au-main-nav " aria-label="main">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="main-nav-default" class="au-main-nav__content">
                        <button aria-controls="main-nav-default" class="au-main-nav__toggle au-main-nav__toggle--open" onclick="return AU.mainNav.Toggle( this )">
                            <span class="svg-inline--fa fa-fw">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
                                </svg>
                            </span>
                            Menu
                        </button>
                        <button class="au-main-nav__toggle au-main-nav__toggle--search au-main-nav__toggle--open">
                            <span class="svg-inline--fa fa-fw au-main-nav__toggle--search__closed">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                                </svg>
                            </span>
                            <span class="svg-inline--fa fa-fw au-main-nav__toggle--search__open">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
                                    <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
                                </svg>
                            </span>
                            Search
                        </button>
                        <div class="au-main-nav__menu">
                            <div class="au-main-nav__menu-inner">
                                <div class="au-main-nav__focus-trap-top"></div>
                                <button aria-controls="main-nav-default" class="au-main-nav__toggle au-main-nav__toggle--close" onclick="return AU.mainNav.Toggle( this )">
                                    <span class="svg-inline--fa fa-fw">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
                                            <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
                                        </svg>
                                    </span>
                                    Close
                                </button>
                                <ul class="au-link-list">
                                    <li class="active"><a href="#" aria-current="page">Home</a></li>
                                    <li><a href="#">Dinosaurs</a></li>
                                    <li><a href="#">Interesting facts</a></li>
                                    <li><a href="#">Resources</a></li>
                                </ul>
                                <div class="au-main-nav__focus-trap-bottom"></div>
                            </div>
                        </div>
                        <div class="au-main-nav__overlay" aria-controls="main-nav-default" onclick="return AU.mainNav.Toggle( this )">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="health-sub-header health-sub-header--dark">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-8">
                    <nav class="au-breadcrumbs" aria-label="Breadcrumb">
                        <h2 class="au-sronly">You are here</h2>
                        <ol class="au-link-list au-link-list--inline">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Dinosaurs</a></li>
                            <li><a href="#">Theropods</a></li>
                        </ol>
                    </nav>

                    <div class="health-sub-header__section-title">
                        <a class="au-direction-link au-direction-link--left" href="/about-us">About us</a>
                    </div>
                    <h1>Dinosaurs</h1>
                    <p class="au-introduction">
                        Dinosaurs are a diverse group of reptiles of the clade Dinosauria. They first appeared during the Triassic period, between 243 and 233.23 million years ago, although the exact origin and timing of the evolution of dinosaurs is the subject of active research.
                    </p>
                </div>
                <div class="col-xs-12 col-md-4">
                    <div class="health-toolbar">
                        <ul class="health-toolbar__items au-link-list au-link-list--inline">
                            <li>
                                <button id="health-toolbar__listen" href="#" class="au-btn au-btn--tertiary">
                                    <span class="svg-inline--fa fa-fw fa-left">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                            <path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z">
                                            </path>
                                        </svg>
                                    </span>Listen
                                </button>
                            </li>
                            <li>
                                <button id="health-toolbar__print" class="au-btn au-btn--tertiary">
                                    <span class="svg-inline--fa fa-fw fa-left">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                            <path d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z">
                                            </path>
                                        </svg>
                                    </span>Print
                                </button>
                            </li>
                            <li>
                                <button id="health-toolbar__share" class="au-btn au-btn--tertiary">
                                    <span class="svg-inline--fa fa-fw fa-left">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                            <path d="M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.551 96.551 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.301 96.301 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96-42.981-96-96-96z">
                                            </path>
                                        </svg>
                                    </span>Share
                                </button>
                                <div id="health-share-menu">
                                    <ul class="au-link-list">
                                        <li>
                                            <span class="svg-inline--fa fa-fw"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                    <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
                                                    </path>
                                                </svg></span>
                                            <a href="#">Twitter</a>
                                        </li>
                                        <li>
                                            <span class="svg-inline--fa fa-fw"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                                                    <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
                                                    </path>
                                                </svg></span>
                                            <a href="#">Facebook</a>
                                        </li>
                                        <li>
                                            <span class="svg-inline--fa fa-fw"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                    <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
                                                    </path>
                                                </svg></span>
                                            <a href="#">Email</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <script language="JavaScript">
                        $(document).ready(function() {
                            health.tooltip('#health-toolbar__share', {
                                html: document.getElementById("health-share-menu"),
                                trigger: 'click',
                                appendTo: $("#health-toolbar__share").parent('li')[0]
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>

    <style>
        .health-sub-header.health-sub-header--dark .health-toolbar .au-btn.au-btn--tertiary {
            color: #FFF;
        }
    </style>
    <div class="container health-content health-content--flush">
        <div class="row">
            <div class="health-band health-band--full-width-bg">
                <div class="health-band__container">
                    <h2>List of call-to-action cards</h2>
                    <div class="row">
                        <div class="col-xs-12 col-sm-3">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-3">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-3">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-3">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="health-band health-band--full-width-bg health-band--neutral">
                <div class="health-band__container">
                    <h2>List of image (vertical) cards</h2>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__image">
                                    <img src="https://picsum.photos/800/450" />
                                </div>
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__image">
                                    <img src="https://picsum.photos/800/450" />
                                </div>
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__image">
                                    <img src="https://picsum.photos/800/450" />
                                </div>
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h2>List of image (horizontal) cards</h2>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            <div class="health-card health-card--clickable health-card--shadow health-card--horizontal">
                                <div class="health-card__image">
                                    <img src="https://picsum.photos/800/450" />
                                </div>
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>This card presents image and body side-by-side.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <div class="health-card health-card--clickable health-card--shadow health-card--horizontal">
                                <div class="health-card__image">
                                    <img src="https://picsum.photos/800/450" />
                                </div>
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>This card presents image and body side-by-side.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row standard-gap">
                        <div class="col-xs-12 text--align-right">
                            <a href="#" class="au-cta-link">All news</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="au-accordion-group__controls">
                <button class="au-accordion-group__control" onclick="return AU.accordion.Open(document.querySelector('#accordion-group-1').getElementsByClassName('js-au-accordion'))">Open all</button>
                <button class="au-accordion-group__control" onclick="return AU.accordion.Close(document.querySelector('#accordion-group-1').getElementsByClassName('js-au-accordion'))">Close all</button>
            </div>

            <ul class="au-accordion-group" id="accordion-group-1">
                <li>
                    <section class="au-accordion">
                        <button class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-1-1" aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
                            Accordion title
                        </button>

                        <div class="au-accordion__body au-accordion--closed" id="accordion-1-1">
                            <div class="au-accordion__body-wrapper">
                                Duis lacinia sed mi ornare vulputate. Nam dictum eros at orci finibus, quis porttitor ante viverra. Proin et posuere urna, ut placerat nulla. Nam iaculis commodo nulla, at eleifend urna rutrum at. Mauris id aliquet nibh, et porta quam. Cras iaculis lorem eget faucibus consectetur. Ut nec scelerisque tortor. Pellentesque consectetur massa sapien, non mattis justo hendrerit a. Nunc pulvinar nibh ut lectus lacinia pharetra.
                            </div>
                        </div>
                    </section>
                </li>
                <li>
                    <section class="au-accordion">
                        <button class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-1-2" aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
                            Accordion title
                        </button>

                        <div class="au-accordion__body au-accordion--closed" id="accordion-1-2">
                            <div class="au-accordion__body-wrapper">
                                Duis lacinia sed mi ornare vulputate. Nam dictum eros at orci finibus, quis porttitor ante viverra. Proin et posuere urna, ut placerat nulla. Nam iaculis commodo nulla, at eleifend urna rutrum at. Mauris id aliquet nibh, et porta quam. Cras iaculis lorem eget faucibus consectetur. Ut nec scelerisque tortor. Pellentesque consectetur massa sapien, non mattis justo hendrerit a. Nunc pulvinar nibh ut lectus lacinia pharetra.
                            </div>
                        </div>
                    </section>
                </li>
                <li>
                    <section class="au-accordion">
                        <button class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-1-3" aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
                            Accordion title
                        </button>

                        <div class="au-accordion__body au-accordion--closed" id="accordion-1-3">
                            <div class="au-accordion__body-wrapper">
                                Duis lacinia sed mi ornare vulputate. Nam dictum eros at orci finibus, quis porttitor ante viverra. Proin et posuere urna, ut placerat nulla. Nam iaculis commodo nulla, at eleifend urna rutrum at. Mauris id aliquet nibh, et porta quam. Cras iaculis lorem eget faucibus consectetur. Ut nec scelerisque tortor. Pellentesque consectetur massa sapien, non mattis justo hendrerit a. Nunc pulvinar nibh ut lectus lacinia pharetra.
                            </div>
                        </div>
                    </section>
                </li>
            </ul>
            <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>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">
                <div class="health-band__container">
                    <div class="row">
                        <div class="col-xs-12">
                            <h2>Latest resources</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="health-card health-card--clickable health-card--shadow ">
                                <div class="health-card__body">
                                    <h2 class="health-card__title">
                                        <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                                    </h2>
                                    <div class="health-card__text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    </div>
                                    <div class="health-card__date">20 July 2019</div>
                                    <div class="health-card__tag">News</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 resources</a>
                        </div>
                    </div>
                </div>
            </div>
            <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>
            <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.