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

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 the colorBlend class to define the background colors.

Height

The data-height attribute is used to set the jumbotron height. If a vh value is set, the height will be the vh minus the navigation bar. That is how you can use a 100vh height which will always make the banner the height of the screen. Using a px 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 and jumbo-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.