Background Colours

Why use background colours?

Adding colour to your sections can help highlight specific areas for students and draw attention to key actions. It also jazzes up the page and makes it more lively, but it's important to use it carefully to ensure that everything is still readable and the page doesn't look like a hot mess.

How do I use them?

Apply background colours to full width sections, grid items and other components by using one of the classes from the table below. The font colour will be automatically adjusted so that everything is still legible.

Class name Colour
bg-black Black
bg-paper Paper
bg-white White
bg-pink Pink
bg-red Red
bg-orange Orange
bg-gradient Gradient