<section class="qld__banner qld__banner__advanced qld__banner--alt qld__banner--breadcrumbs qld__banner--has-hero qld__banner--hero-right qld__banner--nav">
<nav class="qld__breadcrumbs qld__breadcrumbs--alt
qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile" aria-label="breadcrumb">
<ol class="qld__link-list qld__link-list--inline">
<li>
<a href="https://www.designsystem.qld.gov.au/components/banners">
Banners
</a>
</li>
</ol>
</nav>
<div class="container-fluid">
<div class="qld__banner__wrapper">
<div class="qld__banner__main row">
<div class="qld__banner__hero col-xs-12 col-md-7 col-lg-5 col-xl-4">
<div class="qld__banner__image" style="background-image: url('https://www.designsystem.qld.gov.au/__data/assets/image/0017/110276/Hero-placeholder-Crop.jpg');"></div>
</div>
<div class="qld__banner__content col-xs-12 col-md-6 col-lg-7">
<nav class="qld__breadcrumbs qld__banner__breadcrumbs qld__banner__breadcrumbs--desktop" aria-label="breadcrumb" style="max-width: 1040.35px;">
<ol class="qld__link-list qld__link-list--inline" style="max-width: 1040.35px;">
<li>
<a href="https://www.designsystem.qld.gov.au">Home</a>
</li>
<li>
<a href="https://www.designsystem.qld.gov.au/components">Components</a>
</li>
<li>
<a href="https://www.designsystem.qld.gov.au/components/banners">Banners</a>
</li>
<li aria-current="page" style="overflow: hidden;">
CTAs Tiles
</li>
</ol>
</nav>
<h1>Banner advanced</h1>
<div class="qld__banner__content--body qld__abstract">
<p>Alt colour with right aligned hero image and cta</p>
</div>
</div>
</div>
<div class="qld__banner__nav qld__banner__nav--fix-right">
<nav class="qld__tile-nav qld__tile-nav--alt">
<ul class="qld__tile-nav__list">
<li class="qld__tile-nav__item">
<i class="fa-solid fa-heart" aria-hidden="true"></i>
<a href="javascript:void(0)" class="qld__tile-nav__link">Banner link 1</a>
</li>
<li class="qld__tile-nav__item">
<i class="fa-solid fa-viruses" aria-hidden="true"></i>
<a href="javascript:void(0)" class="qld__tile-nav__link">Banner link 2</a>
</li>
<li class="qld__tile-nav__item">
<i class="fa-solid fa-syringe" aria-hidden="true"></i>
<a href="javascript:void(0)" class="qld__tile-nav__link">Banner link 3</a>
</li>
<li class="qld__tile-nav__item">
<i class="fa-solid fa-hospital" aria-hidden="true"></i>
<a href="javascript:void(0)" class="qld__tile-nav__link">Banner link 4</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
Last updated: November 2024