Skip to main content

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.


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

Background Colors

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

Full Width

Block - Text and Image

This content type includes an image and associated text, with an option to include a call-to-action button.

The image can be positioned on the left or right side, and the text block width can be set to half or two-thirds of the container width. This content type works in all page layouts, including landing pages. Background color options include primary red, light gray, and white.

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