Overlay is a custom JCU component for colouring and design of content that’s designed to be placed on top of something else. This may be a JCU Card, a coloured background, or a situation where you need to distinguish between layers of content.
Heads up! All examples here are shown with a background. The background image is for illustration purposes only and does not form part of this component. If you’re looking to use background images yourself, however, see Utilities components.
Define an overlay with
.jcu-overlay and colourise with
If you’d like an overlay without any background, you can simply omit the colourisation.
Heads up! Take care with accessibility and that colours have sufficient contrast, especially against multicoloured backgrounds or background images.
Once you have an overlay, then add mix-in classes accordingly to change the style of overlay or colour and opacity. For full details about the colour palette, see Backgrounds.
.jcu-overlay--plain class as a mix-in to remove the rounded corner and
shrink the padding for a simpler appearance.