<!--
Advanced banner component
- Uses the QLD banner pattern
- Includes alternate styling, breadcrumbs, and a right-aligned hero image
-->
<section
id="banner-advanced-158451"
class="
qld__banner
qld__banner__advanced
qld__banner--alt
qld__banner--breadcrumbs
qld__banner--has-hero
qld__banner--hero-right
"
>
<!--
Mobile breadcrumb pattern
- Displays a simplified back-style breadcrumb on smaller screens
-->
<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>
<!-- Main banner container -->
<div class="container-fluid">
<div class="qld__banner__wrapper">
<div class="qld__banner__main row">
<!--
Hero image column
- Full width on extra small screens
- Reduced width on medium to extra large screens
-->
<div class="qld__banner__hero col-xs-12 col-md-7 col-lg-5 col-xl-4">
<!--
Decorative/visual banner image
- Applied as a background image
- Given an accessible image role and label
-->
<div
class="qld__banner__image"
style="background-image: url('https://www.designsystem.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>
<!-- Banner text content column -->
<div class="qld__banner__content col-xs-12 col-md-6 col-lg-7">
<!--
Tablet breadcrumb pattern
- Simplified back-style breadcrumb for tablet layouts
-->
<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">
<!-- 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>
<!--
Desktop breadcrumb trail
- Full breadcrumb path shown on larger screens
- Includes the current page as the final non-linked item
-->
<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>
<!-- Breadcrumb separator -->
<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>
<!-- Breadcrumb separator -->
<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>
<!-- Breadcrumb separator -->
<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>
<!-- Current page -->
<li
aria-current="page"
class="qld__breadcrumbs__item"
style="overflow: hidden;"
>
Advance banners
</li>
</ol>
</nav>
<!-- Main banner heading -->
<h1>Banner advanced</h1>
<!-- Supporting banner summary text -->
<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>