White always remains the default light background colour.
Dark
Container class:
qh-container-bg-dark
Light
Container class:
qh-container-bg-light
Light – grey
Container class:
qh-container-bg-light-grey
Dark – alternative
Container class:
qh-container-bg-dark-alt
Usage guidelines
When to use container backgrounds
- Use on landing page and main topic pages to break up topics or to highlight key information
When not to use it
- Don’t apply to a container if the page has left hand side navigation (use Content cards)
- Avoid overuse. White should be the default background.
- Don’t use the same colour container as the previous container (except if using default white containers)
Examples
Dark background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tellus nulla, venenatis et tellus et, varius laoreet ipsum. Maecenas tincidunt, odio in laoreet fringilla, elit metus fringilla enim, sit amet vulputate neque nibh vitae dui.
Lorem ipsum
Curabitur massa odio, venenatis eu varius sit amet, ultricies ac felis. Curabitur mollis ligula non velit maximus interdum.
Light background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tellus nulla, venenatis et tellus et, varius laoreet ipsum. Maecenas tincidunt, odio in laoreet fringilla, elit metus fringilla enim, sit amet vulputate neque nibh vitae dui.
Lorem ipsum
Curabitur massa odio, venenatis eu varius sit amet, ultricies ac felis. Curabitur mollis ligula non velit maximus interdum.
Light background grey
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tellus nulla, venenatis et tellus et, varius laoreet ipsum. Maecenas tincidunt, odio in laoreet fringilla, elit metus fringilla enim, sit amet vulputate neque nibh vitae dui.
Lorem ipsum
Curabitur massa odio, venenatis eu varius sit amet, ultricies ac felis. Curabitur mollis ligula non velit maximus interdum.
Dark background – alternative (with optional image)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tellus nulla, venenatis et tellus et, varius laoreet ipsum. Maecenas tincidunt, odio in laoreet fringilla, elit metus fringilla enim, sit amet vulputate neque nibh vitae dui.
Lorem ipsum
Curabitur massa odio, venenatis eu varius sit amet, ultricies ac felis. Curabitur mollis ligula non velit maximus interdum.