Skip to main content

UniversityMarketing and Communications

Jumbotron Hero - The caption is optional, and can be positioned to the left or right. You can also apply a custom setting to the dimming level for the background image, as needed.

Jumbotron

Get Web Support Create a Ticket

The Jumbotron offers four varieties: Hero, Block, Gradient, and Video.

The Jumbotron is well-suited to positioning at the top of the page just below the header. If you're currently using the Hero content type, consider switching to the Jumbotron to take advantage of its expanded display options. The Sidebar Breakout Landing page layouts allow the full width of the page for content in the main area, and the jumbotron can take full advantage of that space.

  1. Hero - Options include a background image, caption, caption positioning, and dimming level.
  2. Block - Include a backround image or color, heading, call-to-action button, and text.
  3. Gradient - Use a gradient background in place of an image.
  4. Video - Requires the URL for a video on a hosting service.

Video Jumbotron

The video Jumbotron can be positioned at the top of the page below the header, or in the main body of the page.

SCU Design System

Jumbotron Block

The Block can use a background image or a selection of background colors.
It's also flexible in height, and will adjust based on the content within it.


Apply the .lead style to paragraph tags to increase the text size.

Jumbotron Gradient

Here's a straight-up jumbotron with a cool gradient fade.


The block, gradient, and video Jumbotrons offer a Call-to-action button option.

SCU Design System

Background Colors

Another example of the Jumbotron Block, with the "light" background color applied.