<!--
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">
-->
<!-- Dark Coloured advance banner -->
<section id="banner-advanced-158564" class="qld__banner qld__banner__advanced qld__banner--dark qld__banner--breadcrumbs qld__banner--has-hero">
<style>
@media (min-width: 699px) {
#banner-advanced-158564 {
background-image: url("https://www.designsystem.qld.gov.au/__data/assets/image/0014/110273/Background-Image-Dark.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
}
}
</style>
<!-- Mobile breadcrumb pattern -->
<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">
<!-- Back chevron icon -->
<svg class="qld__icon" xmlns="http://www.w3.org/2000/svg">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-left"></use>
</svg>
<!-- Link back to the parent banner page -->
<a href="https://www.designsystem.qld.gov.au/components/banner" class="qld__breadcrumbs__link">
Banner
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="qld__banner__wrapper">
<div class="qld__banner__main row">
<div class="qld__banner__hero col-xs-12 qld__banner__hero--scale col-md-6 col-lg-5 col-xl-5">
<div class="qld__banner__image qld__banner__image--mobile-hide"style="background-image: url('./?a=');"role="img"aria-label=""></div>
<div class="qld__banner__image qld__banner__image--background qld__banner__image--desktop-hide" style="background-image: url('https://www.designsystem.qld.gov.au/__data/assets/image/0025/158632/Mobile_backround_example.png');" role="img" aria-label=""
></div>
</div>
<div class="qld__banner__content col-xs-12 col-md-6 col-lg-7">
<!-- Tablet breadcrumb pattern -->
<nav class="qld__breadcrumbs qld__banner__breadcrumbs qld__banner__breadcrumbs--tablet" aria-label="breadcrumb" data-path="./?a=169317:dist/mysource_files/img/QLD-icons.svg">
<div class="qld__link-list qld__link-list--inline">
<div class="qld__breadcrumbs__item">
<svg class="qld__icon" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-left"></use></svg>
<a href="https://www.designsystem.qld.gov.au/components/banner" class="qld__breadcrumbs__link">
Banner
</a>
</div>
</div>
</nav>
<!-- Desktop breadcrumb trail -->
<nav class="qld__breadcrumbs qld__banner__breadcrumbs qld__banner__breadcrumbs--desktop" aria-label="breadcrumb" data-path="./?a=169317:dist/mysource_files/img/QLD-icons.svg" style="max-width: 636px;">
<ol class="qld__breadcrumbs__list--desktop qld__link-list qld__link-list--inline" style="max-width: 636px;"><li class="qld__breadcrumbs__item">
<a href="https://www.designsystem.qld.gov.au" class="qld__breadcrumbs__link">Home</a>
</li><svg class="qld__icon" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-right"></use></svg><li class="qld__breadcrumbs__item">
<a href="https://www.designsystem.qld.gov.au/components" class="qld__breadcrumbs__link">Components</a>
</li><svg class="qld__icon" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-right"></use></svg><li class="qld__breadcrumbs__item">
<a href="https://www.designsystem.qld.gov.au/components/banner" class="qld__breadcrumbs__link">Banner</a>
</li><svg class="qld__icon" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-right"></use></svg><li aria-current="page" class="qld__breadcrumbs__item" style="overflow: hidden;">
Background image
</li>
</ol>
</nav>
<!-- Content -->
<h1>Background image</h1>
<div class="qld__banner__content--body qld__abstract">
<p>Dark colour with background image</p>
</div>
</div>
</div>
</div>
</div>
</section>