Hero banners are used on landing pages.
The main headline in the hero banner is the h1 heading for the page.
This is a hero banner for landing pages
<div class="ds-block ds-block--full-width">
<div class="ds-hero">
<div class="ds-hero__content">
<div class="ds-hero__image">
<img src="{{ site.url }}/ltu-components/src/banner/snippets/images/Students-walking-outside-LIMs-building.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__text">
<h1>International students</h1>
<p class="h2">Studying at La Trobe is a uniquely Australian experience.</h2>
<p>At La Trobe, we offer an Australian experience like no other. Our friendly, multicultural campuses are based in beautiful settings ranging from native bushland to inner-city metropolitan. What are you waiting for?</p>
<p class="ds-hero__button-group"><a href="#" class="ds-btn-primary ds-icon-chevron-right">Find your course</a> <a href="#" class="ds-btn-secondary ds-icon-chevron-right">Contact us</a></p>
</div>
</div>
</div>
</div>This is a hero banner for landing pages
<div class="ds-block ds-block--full-width">
<div class="ds-hero">
<div class="ds-hero__content">
<div class="ds-hero__image">
<img src="/ltu-components/src/banner/snippets/images/disc-business.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__text">
<h1>Business and commerce</h1>
<p>The world of business is rapidly changing. Our degrees give you the complete toolkit to lead the digital transformation, not just follow it.</p>
<p class="ds-hero__button-group"><a href="#" class="ds-btn-primary ds-icon-chevron-right">View course</a> <a href="#" class="ds-btn-secondary ds-icon-chevron-down">Enquire nows</a></p>
</div>
</div>
</div>
</div>Alternative version for images that do not suit full bleed include modifier ds-hero--image-right
<div class="ds-block ds-block--full-width">
<div class="ds-hero ds-hero--image-right">
<div class="ds-hero__content">
<div class="ds-hero__image">
<img src="/ltu-components/src/banner/snippets/images/Rollerblading-student-cropped.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__text">
<h1>International students</h1>
<p class="h2">Studying at La Trobe is a uniquely Australian experience.</h2>
<p>At La Trobe, we offer an Australian experience like no other. Our friendly, multicultural campuses are based in beautiful settings ranging from native bushland to inner-city metropolitan. What are you waiting for?</p>
<p class="ds-hero__button-group"><a href="#" class="ds-btn-primary ds-icon-chevron-right">Find your course</a> <a href="#" class="ds-btn-secondary ds-icon-chevron-right">Contact us</a></p>
</div>
</div>
</div>
</div>