Create full-width blocks with a background image to really help your campaigns stand out.
What are background images?
Background images can be used on full-width sections by adding the fw-image class to the element. You should combine these with background colours and text colours to make sure the content is readable.
It can look like this, with a background colour overlaid
<div class="full-width bg-lilac fw-image text-center">
<img alt="Tropical plants in the Temperate House at Kew Gardens" src="https://images.unsplash.com/photo-1646308070521-6a837a3a543e" />
<div class="container">
<h2 class="h1">Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="button">Button</a>
</div>
</div>
Or it can look like this, with no background colour
(But you need to be careful with the text colour)
<div class="full-width fw-image text-center clr-sand">
<img alt="Tropical plants in the Temperate House at Kew Gardens" src="https://images.unsplash.com/photo-1646308070521-6a837a3a543e" />
<div class="container">
<h2 class="h1">Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="button">Button</a>
</div>
</div>
It can even look like this, with a cheeky little wave at the bottom
<div class="full-width bg-turquoise fw-image text-center">
<img alt="Tropical plants in the Temperate House at Kew Gardens" src="https://images.unsplash.com/photo-1646308070537-93e4b51f41d0" />
<div class="container pb-tall">
<h2 class="h1">Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="full-width bg-sand wave-top">
<div class="container py-tall">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>