<!--
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">
-->
<!-- Start of Dark Themed Banner Section -->
<!-- Advanced Banner Section -->
<section id="banner-advanced-example" class="qld__banner qld__banner__advanced qld__banner--dark qld__banner--has-hero">
<style>
/* Styles for screens wider than 699px */
@media (min-width:699px) {
#banner-advanced-example {
background-image: url('https://www.design-system.health.qld.gov.au/__data/assets/image/0014/110273/Background-Image-Dark.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
}
}
/* Override styles for screens wider than 1312px */
@media (min-width:1312px) {
#banner-advanced-example {
min-height: auto;
}
}
</style>
<!-- Main Container -->
<div class="container-fluid">
<div class="qld__banner__wrapper">
<!-- Main Row -->
<div class="qld__banner__main row">
<!-- Hero Section -->
<div class="qld__banner__hero col-xs-12 qld__banner__hero--scale col-md-6 col-lg-5 col-xl-4">
<!-- Desktop Background Image -->
<div
class="qld__banner__image qld__banner__image--mobile-hide"
style="background-image: url('./?a=');"
role="img"
aria-label="">
</div>
<!-- Mobile Background Image -->
<div
class="qld__banner__image qld__banner__image--background qld__banner__image--desktop-hide"
style="background-image: url('https://www.design-system.health.qld.gov.au/__data/assets/image/0025/158632/Mobile_backround_example.png');"
role="img"
aria-label="">
</div>
</div>
<!-- Content Section -->
<div class="qld__banner__content col-xs-12 col-md-6 col-lg-7">
<!-- Banner Title -->
<h1>Banner Advanced</h1>
<!-- Banner Description -->
<div class="qld__banner__content--body qld__abstract">
<p>Banner with background image and card links</p>
</div>
<!-- Card List -->
<ul class="qld__card-list qld__card-list--matchheight qld__banner__card-list">
<!-- Card Item 1 -->
<li class="col-xs-12">
<div class="qld__card qld__card__action qld__card--arrow qld__card--light">
<div class="qld__card__inner">
<div class="qld__card__content">
<div class="qld__card__content-inner">
<h2 class="qld__card__title qld__display-lg">
<a class="qld__card--clickable__link" href="javascript:void(0)">Banner link 1</a>
</h2>
</div>
<div class="qld__card__arrow"></div>
</div>
</div>
</div>
</li>
<!-- Card Item 2 -->
<li class="col-xs-12">
<div class="qld__card qld__card__action qld__card--arrow qld__card--light">
<div class="qld__card__inner">
<div class="qld__card__content">
<div class="qld__card__content-inner">
<h2 class="qld__card__title qld__display-lg">
<a class="qld__card--clickable__link" href="javascript:void(0)">Banner link 2</a>
</h2>
</div>
<div class="qld__card__arrow"></div>
</div>
</div>
</div>
</li>
<!-- Card Item 3 -->
<li class="col-xs-12">
<div class="qld__card qld__card__action qld__card--arrow qld__card--light">
<div class="qld__card__inner">
<div class="qld__card__content">
<div class="qld__card__content-inner">
<h2 class="qld__card__title qld__display-lg">
<a class="qld__card--clickable__link" href="javascript:void(0)">Banner link 3</a>
</h2>
</div>
<div class="qld__card__arrow"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>