<!-- Alt Coloured advance banner -->
<section class="qld__banner qld__banner__advanced qld__banner--alt qld__banner--breadcrumbs qld__banner--has-hero qld__banner--hero-right">
<!-- Breadcrumbs navigation -->
<nav class="qld__breadcrumbs qld__breadcrumbs--alt qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile" aria-label="breadcrumb">
<ul class="qld__link-list qld__link-list--inline">
<li><a href="javascript:void(0)">Banners</a></li>
</ul>
</nav>
<div class="container-fluid">
<div class="qld__banner__wrapper">
<div class="qld__banner__main row">
<!-- Hero image -->
<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('./?a=110276');"></div>
</div>
<div class="qld__banner__content col-xs-12 col-md-6 col-lg-7">
<!-- Breadcrumbs navigation -->
<nav class="qld__breadcrumbs qld__banner__breadcrumbs qld__banner__breadcrumbs--desktop" aria-label="breadcrumb">
<ul class="qld__link-list qld__link-list--inline">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Components</a></li>
<li><a href="javascript:void(0)">Banners</a></li>
<li aria-current="page">Advance banners</li>
</ul>
</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>
</div>
</section>
Last updated: August 2023