<!--
Default (White): <section class="qld__banner">
Light: <section class="qld__banner qld__banner--light">
Alt: <section class="qld__banner qld__banner--alt">
Dark: <section class="qld__banner qld__banner--dark">
Dark-alt: <section class="qld__banner qld__banner--dark-alt">
-->
<!-- Alt Coloured advanced banner -->
<section
class="qld__banner qld__banner__advanced qld__banner--alt
qld__banner--breadcrumbs qld__banner--has-hero
qld__banner--hero-right">
<!-- Breadcrumbs navigation (mobile view) -->
<nav
class="qld__breadcrumbs qld__breadcrumbs--alt
qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile"
aria-label="breadcrumb">
<div class="qld__link-list qld__link-list--inline">
<div class="qld__breadcrumbs__item">
<!-- Breadcrumb link -->
<a href="javascript:void(0)" class="qld__breadcrumbs__link">
Banners
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="qld__banner__wrapper">
<div class="qld__banner__main row">
<!-- Hero image section -->
<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.design-system.health.qld.gov.au/__data/assets/image/0017/110276/Hero-placeholder-Crop.jpg');"
role="img"
aria-label="A customer smiling at his two children">
</div>
</div>
<!-- Content section -->
<div class="qld__banner__content col-xs-12 col-md-6 col-lg-7">
<!-- Breadcrumbs navigation (tablet view) -->
<nav
class="qld__breadcrumbs qld__banner__breadcrumbs
qld__banner__breadcrumbs--tablet"
aria-label="breadcrumb">
<div class="qld__link-list qld__link-list--inline">
<div class="qld__breadcrumbs__item">
<!-- Breadcrumb link -->
<a href="javascript:void(0)" class="qld__breadcrumbs__link">
Banners
</a>
</div>
</div>
</nav>
<!-- Breadcrumbs navigation (desktop view) -->
<nav
class="qld__breadcrumbs qld__banner__breadcrumbs
qld__banner__breadcrumbs--desktop"
aria-label="breadcrumb">
<ol class="qld__link-list qld__link-list--inline">
<li class="qld__breadcrumbs__item">
<!-- Breadcrumb link: Home -->
<a href="javascript:void(0)" class="qld__breadcrumbs__link">
Home
</a>
</li>
<li class="qld__breadcrumbs__item">
<!-- Breadcrumb link: Components -->
<a href="javascript:void(0)" class="qld__breadcrumbs__link">
Components
</a>
</li>
<li class="qld__breadcrumbs__item">
<!-- Breadcrumb link: Banners -->
<a href="javascript:void(0)" class="qld__breadcrumbs__link">
Banners
</a>
</li>
<li
aria-current="page"
class="qld__breadcrumbs__item"
style="overflow: hidden">
<!-- Current page -->
Right aligned image
</li>
</ol>
</nav>
<!-- Main heading -->
<h1>Banner advanced</h1>
<!-- Banner description -->
<div class="qld__banner__content--body qld__abstract">
<p>Alt colour with right aligned hero image</p>
</div>
</div>
</div>
</div>
</div>
</section>