Jumbotron Page Title
The modified jumbotron at the top of the page will automatically adjust to the set height minus the header.
Jumbotron Page Title
The modified jumbotron at the top of the page will automatically adjust to the set height minus the header.
Jumbotron Page Title
The modified jumbotron at the top of the page will automatically adjust to the set height minus the header.
Jumbotron Page Title
The modified jumbotron at the top of the page will automatically adjust to the set height minus the header.
Jumbotron Page Title
The modified jumbotron at the top of the page will automatically adjust to the set height minus the header.
Jumbotron Page Title
The modified jumbotron at the top of the page will automatically adjust to the set height minus the header.
Jumbotron Page Title
Jumbotron Page Title
The modified jumbotron at the top of the page will automatically adjust to the set height minus the header.
Jumbotron Page Title
Please click to play video.
Banners
The template provides a few different banner types that all basically use the jumbotron as their main element type. Images by themselves can be a banner, but aren't great for accessibilty reasons. If the image has limited text great, but images with lots of text should be avoided. Below are many banner options, and many can be combined with other template elements like the video replacement to show videos. Please avoid the use of carousels. They aren't great for usability and require many considerations in regards to accessibility and usability.
Prebuilt Jumbotron Banner Types
Without Images
Jumbotron Classes and Options
Essentially banner's using the jumbotron
classes can be altered by added classes to the div
. Options are listed below.
- Color
- The color is always set on the parent div. It is recommended to use the
bg-[color]
classes or thecolorBlend
class to define the background colors. - Height
- The
data-height
attribute is used to set the jumbotron height. If avh
value is set, the height will be the vh minus the navigation bar. That is how you can use a100vh
height which will always make the banner the height of the screen. Using apx
height will force it to that height. All banners will grow in height beyond the set heigh if the content needs more room. - Images
- When using the
jumbotron-full-image
class a background image must be set on the div. This can be done inline, unless you need different images at different breakpoints. - Overlay
- Adding an empty div with the class
jumbotron-overlay
will create a darkened overlay over the entire jumbotron area. - More Content Arrow
- Adding a div with the class
jumbotron-more
will put the div at the jumbotron ready to accept content, ideally an icon indicating more content. - Position Content
- The classes
jumbo-content-top-left
andjumbo-content-top-right
will position the content div in the respective locations. Top left can work but bottom left is preferred.
Video Banners
- Jumbotron with video to play in overlay
- Looping Background Video
- Looping Background Video - Play Full Version
Content can be added inside a looping background video. However if you want that content to be removed on play, additional Javascript must be added. Content must be removed when the playing.usu.video-banner
is fired and should be replace when the restarting.usu.video-banner
is fired. If only a single item is added, then it will be removed and replaced automatically.
Other Banners
Carousel's can still be used, however they are discouraged. Simply embed the default carousel and it will work as expected. Images can be placed by themselves in place of a banner as long as they are set to 100% width, which can easily be done with the w-100
class.
In Page Content
All of the items noted on this page can be used anywhere on the page as well (not just at the top). The caveat with jumbotrons is with the height. If you decide to use a vh
to set the height just remember the total height will be the vh
value minus the header height. For that reason it is best to use px
heights lower on the page.