Preceding section

<section class="qld__body">

Following section


<section class="qld__body qld__body--alt">

Code example

<!-- Dark Promo panel with contained image: <section class="qld__body qld__body--contained qld__promo-panel qld__body--light qld__promo-panel--image-right" > --> <section class="qld__body qld__body--contained qld__promo-panel qld__body--light qld__promo-panel--image-right"> <div class="container-fluid"> <div class="qld__promo-panel__container row"> <div class="qld__promo-panel__container-image"> <div class="qld__promo-panel__image" style="background-image: url(https://www.design-system.health.qld.gov.au/__data/assets/image/0017/110276/Hero-placeholder-Crop.jpg)"> </div> </div> <div class="qld__promo-panel__container-content"> <div class="qld__promo-panel__container-inner"> <h2 class="qld__display-xl" id="section__heading" tabindex="-1">Heading</h2> <div class="qld__abstract"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.</p> </div> </div> <ul class="qld__promo-panel__container-btn qld__banner__content--cta qld__link-list"> <li> <a class="qld__promo-panel__btn qld__btn qld__btn--secondary" data-type="class" href="./?a=">Secondary action button</a> </li> </ul> </div> </div> </div> </div> </section>