Banner advanced

Alt colour with right aligned hero image and cta
Figma
<!-- 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