No notes defined.
<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 "king" 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-fluid full-width">
<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="../../images/trex_16x9.jpg">
</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="../../images/trex_16x9.jpg">
</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="../../images/trex_16x9.jpg">
</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="../../images/trex_16x9.jpg">
</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>
- Handle: @campaign-page
- Preview:
- Filesystem Path: components/02-full_page_examples/campaign-page/campaign-page.hbs
- References (9): @skip, @header--simple, @sub-header--campaign, @band--featured, @band--hotline, @band--video-listing, @something-wrong, @footer, @back-to-top