How to set your Section as a jumbotron in Cascade

Create a jumbotron

Any section in a page can be a jumbotron. Jumbotrons have more breathing room, larger text, options for unique backgrounds, and additional layout features.

  • Choose Jumbotron as the Section style of a Section

Jumbotrons aren't page titles

Avoid using jumbotrons as page titles. Instead, let the page title do its job and use jumbotrons in your content to focus on important links and calls to action.

Basic example

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


Options for changing the background of a Jumbotron in Cascade

Change it up

White never goes out of style, but you can choose from one of the other background options available, or use your own.

Other options include:

  • Grey
  • Primary
  • Custom image


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


Primary backgrounds use a green texture from the University's visual identity. Text is reversed to white for legibility. The brightness 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.

By default images are darkened with an overlay to ensure legibility in combination with white text. You can change the overlay ("Default","Light" or "None") and the text colour ("Light" or "Dark") to best suit your image/content combintation. 

Always ensure there is enough contrast between the background image and your text. Lack of contrast can make your content inaccessible.


How to center Jumbotron content in Cascade

Move it to the middle

By default content is always aligned to the left, but you can choose to center the content inside a jumbotron when you want to give it additional focus. Centered content works best when the amount of content is minimal—large chunks of centered content are difficult to read.

To center the content in your jumbotron:

  • Choose Yes next to Center contents


Here I am in the middle.

Full screen

How to make a full-screen Jumbotron in Cascade

Make it really jumbo

You can force a jumbotron to fill the entire screen regardless of the amount of content inside it. 

Full-screen jumbotrons maximize white space so the content inside is the user's immediate and unhindered focus. This should not be done without care and purpose.

To make your jumbotron full screen:

  • Select Yes next to Make jumbotron fill screen

Full screen

Use with caution!

Vertical alignment

Options for vertically aligning Jumbotron content in Cascade

Move it to where it makes sense

Full-screen jumbotrons provide the additional option of vertically aligning content to the top, middle (default), or bottom.

Bottom alignment is a nice way to get users' eyes moving down, leading them into the content below the Jumbotron. If you're using a custom background this might also help you avoid conflicts between the focal point of your image and the content of your Jumbotron.

Top alignment keeps users' eyes at the top of the page and is therefore only useful in very unique circumstances.

Vertically aligned

I'm down here at the bottom.

Get creative

Experiment and try things, like using a GIF as your background image. But always keep your users in mind. Don't use large files that will take forever to download.