Preceding section

The background colour that sits behind the promo-panel is set by this section that precedes it.

In this example the background colour is the default white.

<section class="qld__body">

Promo panel section

The promo panel's section colour class determines the colour of the content container. This promo panel is using the light modifier class.

<section class="qld__body qld__body--light qld__promo-panel">Copy

Following section

The margin for sections that follow a promo panel are adjusted so that they are puled under promo panel container.

This is done by giving the following section a negative margin-top value of 64px (4rem).

To ensure there is still space between the promo panel and content within the following section the padding-top value of the following section is also increased from 64px (4rem) to 128px (8rem) to accomodate for the new negative margin.

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

Last updated: March 2025

Back to top