Updates to Full bleed component - image overlay and background colour classes

[rnickr]

Our full bleed component makes the content within span the full width of the page. It's used to support promotional or marketing style pages that need extra visual impact. It's generally used with a background image or background colour.

Background images

At the minute background images need to be edited with colour overlays before being added to the component to ensure any text placed above it passes contrast ratios and is readable.

This creates extra work for content editors and also leads to a risk of images not having appropriate overlays added - people have to manually add these in an image editing tool.

We could create a class that adds an overlay via CSS to the component. This would make sure overlays are done consistently and saves time manually editing images to add them in.

Proposal is for the following:

• No overlay (default)
• Light overlay (for images overlaid with black text)
• Dark overlay (for images overlaid with white text)

Example settings of the overlay:

Background colours

The full bleed can also be used with background colours. At the minute the default colour is white which doesn't seem useful. The only other option is adding the class full-bleed--light which changes the background colour to #228096 if no background image is present:

The Comms team would like to add additional background colours to give the component more flexibility. Comms to discuss colours with Marketing and feedback.

[rnickr]

Request for background colours: Deep blue - dark overlay option #00436C, Soft cream light overlay option #DED5CA