The hero promo is for use on the La Trobe homepage.
The hero promo provides for a hero promotion with headline, sub-headline and one call to action.
The hero promo should not be confused with the hero banner, which acts as the main heading and introduction of a landing page.
Homepage hero promotion - for top of page
<div class="ds-block ds-block--full-width">
<div class="ds-hero-promo">
<div class="ds-hero-promo__image">
<img src="/ltu-components/test-pages/images/Rollerblading-student.jpg" alt="">
<!--
NOTE: Where possible You should use the image srcset attribute to provide for responsive images.
For La Trobe squiz matrix use this:
<img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
srcset="{ 480 wide variety URL } 480w,
{ 720 wide variety URL } 720w,
{ 1024 wide variety URL } 1024w,
{ 1280 wide variety URL } 1280w,
{ full size (2056) image URL } 2560w" sizes="100vw">
-->
</div>
<div class="ds-hero-promo__content">
<div class="ds-hero-promo__text">
<p class="ds-hero-promo__text__headline">Lock in your 2021 options</p>
<p class="ds-hero-promo__text__subheadline">Apply for the Aspire Early Admission Program</p>
<p class="ds-hero-promo__button-group"><a href="#" class="ds-btn-secondary ds-btn--light ds-icon-chevron-right">Applications close 31 August</a></p>
</div>
</div>
<div class="ds-hero-promo__gradient-overlay"></div>
</div>
</div>Homepage hero promotion - for top of page
<div class="ds-block ds-block--full-width">
<div class="ds-hero-promo ds-hero-promo--image-right">
<div class="ds-hero-promo__image">
<img src="/ltu-components/test-pages/images/Group-of-students-talking.jpg" alt="">
<!--
NOTE: Where possible You should use the image srcset attribute to provide for responsive images.
For La Trobe squiz matrix use this:
<img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
srcset="{ 480 wide variety URL } 480w,
{ 720 wide variety URL } 720w,
{ 1024 wide variety URL } 1024w,
{ 1280 wide variety URL } 1280w,
{ full size (2056) image URL } 2560w" sizes="100vw">
-->
</div>
<div class="ds-hero-promo__content">
<div class="ds-hero-promo__text">
<p class="ds-hero-promo__text__headline">Lock in your 2021 options</p>
<p class="ds-hero-promo__text__subheadline">Apply for the Aspire Early Admission Program</p>
<p class="ds-hero-promo__button-group"><a href="#" class="ds-btn-secondary ds-btn--light ds-icon-chevron-right">Applications close 31 August</a></p>
</div>
</div>
<div class="ds-hero-promo__gradient-overlay"></div>
</div>
</div>Homepage hero promotion - for top of page
<div class="ds-block ds-block--full-width">
<div class="ds-hero-promo ds-hero-promo--transparent-gradient">
<div class="ds-hero-promo__image">
<img src="/ltu-components/test-pages/images/Rollerblading-student.jpg" alt="">
<!--
NOTE: Where possible You should use the image srcset attribute to provide for responsive images.
For La Trobe squiz matrix use this:
<img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
srcset="{ 480 wide variety URL } 480w,
{ 720 wide variety URL } 720w,
{ 1024 wide variety URL } 1024w,
{ 1280 wide variety URL } 1280w,
{ full size (2056) image URL } 2560w" sizes="100vw">
-->
</div>
<div class="ds-hero-promo__content">
<div class="ds-hero-promo__text">
<p class="ds-hero-promo__text__headline">Lock in your 2021 options</p>
<p class="ds-hero-promo__text__subheadline">Apply for the Aspire Early Admission Program</p>
<p class="ds-hero-promo__button-group">
<!-- mobile button -->
<a href="#" class="ds-hero-promo__CTA-mobile ds-btn-secondary ds-btn--light ds-icon-chevron-right">Applications close 31 August</a>
<!-- tablet up button -->
<a href="#" class="ds-hero-promo__CTA-tablet-up ds-btn-primary ds-icon-chevron-right">Applications close 31 August</a>
</p>
</div>
</div>
<div class="ds-hero-promo__gradient-overlay"></div>
</div>
</div>Homepage hero promotion - for top of page
<div class="ds-block ds-block--full-width">
<div class="ds-hero-promo">
<div class="ds-hero-promo__image">
<img src="/ltu-components/test-pages/images/Rollerblading-student.jpg" alt="">
<!--
NOTE: Where possible You should use the image srcset attribute to provide for responsive images.
For La Trobe squiz matrix use this:
<img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
srcset="{ 480 wide variety URL } 480w,
{ 720 wide variety URL } 720w,
{ 1024 wide variety URL } 1024w,
{ 1280 wide variety URL } 1280w,
{ full size (2056) image URL } 2560w" sizes="100vw">
-->
</div>
<div class="ds-hero-promo__content">
<div class="ds-hero-promo__text">
<p class="ds-hero-promo__text__headline">Lock in your 2021 options</p>
<p class="ds-hero-promo__text__subheadline">Apply for the Aspire Early Admission Program</p>
<p class="ds-hero-promo__button-group"><a href="#" class="ds-btn-secondary ds-btn--light ds-icon-chevron-right" data-component="hero-promo">Applications close 31 August</a></p>
</div>
</div>
<div class="ds-hero-promo__gradient-overlay"></div>
</div>
</div>
<div class="ds-block">
<div class="ds-hero-promo__peakaboo">
<!-- Peakaboo box content -->
<div class="ds-block ds-block--narrow">
<h2 style="text-align: center;">Peekaboo box</h2>
<p style="text-align: center;">When viewport is greater than 1280px this box will push up over promo and have a shadow outline.</p>
</div>
</div>
</div>