USask background images

Download a variety of USask-branded background images to use on your website.

Create a jumbotron

Any Section in a page can be a jumbotron. 

  • Expand the Section style and layout group of your Section and select Jumbotron under Section style
How to set your Section as a jumbotron in Cascade

Examples

Below are examples highlighting some of the configuration options for jumbotrons.

Basic example

This is the default white jumbotron. White is clean, classic, and makes for the best readability.

Grey

Grey backgrounds use a subtle grey background from the University's visual identity.

Primary

Primary backgrounds use a green background from the University's visual identity. Text is reversed to white for legibility. The boldness of this background is good for calling out a really key piece of content.

Custom image

Use any image as the background for your jumbotron. Images are centered and scale automatically to fill the space. They are darkened with an overlay to ensure legibility in combination with white text.

You can change the overlay (Default (dark), Light or None) and the text colour (Light or Dark) to best suit your image/content combintation.

No overlay

This jumbotron has a background image with the Jumbotron overlay style set to None. The content is also centered by setting Center contents to Yes.

Don't do this

Careful using background images without an overlay. Ensure there is enough contrast between your content and your image.

Full screen

Choose Make jumbotron fill screen to fill the entire screen regardless of the amount of content inside it. 

Vertically aligned

You can vertically align your content to the top or bottom of a full-screen jumbotron.