Skip to main content

JCU Web Framework

The living style guide for University web applications.

Overlay

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.

Contents

Examples

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.

Standard

Define an overlay with .jcu-overlay and colourise with .jcu-bg--black-75pc:

Standard, black, 75% opacity overlay

The overlay will expand to fit the contents, since it's just a block element.

<div class="jcu-overlay jcu-bg--black-75pc">
  <h2>Standard, black, 75% opacity overlay</h2>
  <p>The overlay will expand to fit the contents, since it's just a block element.</p>
</div>

Transparent

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.

Transparent overlay

The overlay will expand to fit the contents, since it's just a block element.

<div class="jcu-overlay">
  <h2>Transparent overlay</h2>
  <p>The overlay will expand to fit the contents, since it's just a block element.</p>
</div>

Coloured

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.

Red, 50% opacity overlay

Use different opacities or colours depending on the background.

<div class="jcu-overlay jcu-bg--red-50pc">
  <h2>Red, 50% opacity overlay</h2>
  <p>Use different opacities or colours depending on the background.</p>
</div>

Plain styling

Use the .jcu-overlay--plain class as a mix-in to remove the rounded corner and shrink the padding for a simpler appearance.

Plain border styled overlay

<div class="jcu-overlay jcu-overlay--plain jcu-bg--black-75pc">
  <p>Plain border styled overlay</p>
</div>