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.
- Hero - Options include a background image, caption, caption positioning, and dimming level.
- Block - Include a backround image or color, heading, call-to-action button, and text.
- Gradient - Use a gradient background in place of an image.
- Video - Requires the URL for a video on a hosting service.
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
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.
.lead style to paragraph tags to increase the text size.
Here's a straight-up jumbotron with a cool gradient fade.
The block, gradient, and video Jumbotrons offer a Call-to-action button option.
Another example of the Jumbotron Block, with the "light" background color applied.