Example Banners for USU Extension Websites
Component-Generated Banner with Heading and Subheading
Component-Generated Banner with Background Image, Heading and Subheading and Button
Banner with Headings, Description and Button
<div class="jumbotron-fluid jumbotron-full jumbotron-full-image" style="background-image: url("background-image-url.jpg"); background-position: right bottom;" data-height="60vh">
<div class="jumbotron-content container">
<div class="row">
<div class="col-auto">
<div class="px-4 pb-4 pt-2 shadow bg-t-white">
<h1 class=" text-blue h1 mt-0 text-bold"><span class="h3 mt-0">Your Preheading</span><br/>Main Heading</h1>
<p class="h4 text-blue my-0">Supporting tagline or message here.</p>
<a class="btn btn-info btn-lg mt-2" title="Link Title for Accessibility" href="/path-to-page">Call to Action Button</a>
</div>
</div>
</div>
</div>
</div>Banner with Heading and Description
Main Heading
A supporting message or description for this section.
<div class="jumbotron-fluid jumbotron-full jumbotron-full-image jumbotron-content-bottom-left" style="background-image: url("background-image-url.jpg"); " data-height="60vh" data-type="6">
<div class="jumbotron-content container h-bold">
<div class="row">
<div class="col-auto">
<div class="p-4 shadow bg-t-white">
<h1 class="display-4 h1">Main Heading</h1>
<p class="lead xl">A supporting message or description for this section.</p>
<!-- Optionally add a button by uncommenting the line below --> <!-- <a class="btn btn-outline-info btn-lg mt-2" href="/path-to-page"><span>Call to Action</span></a> -->
</div>
</div>
</div>
</div>
</div>Banner with Heading and Two Buttons
<div class="jumbotron-fluid jumbotron-full jumbotron-full-image jumbotron-content-bottom-left" style="background-image: url("image-url.jpg");" data-height="60vh" data-type="6">
<div class="jumbotron-content container h-bold">
<div class="row">
<div class="col-auto">
<div class="p-4 shadow bg-t-white">
<h1 class="display-4 h1">Main Heading</h1>
<a class="btn btn-info btn-lg mt-2 mr-2" href="/path-to-page-1"><span>Primary Action</span></a> <a class="btn btn-outline-info btn-lg mt-2" href="/path-to-page-2"><span>Secondary Action</span></a>
</div>
</div>
</div>
</div>
</div>Banner with Logo, Heading and Button
Main Heading
Primary Action<div class="jumbotron-fluid jumbotron-full jumbotron-full-image jumbotron-content-bottom-left" style="background-image: url("img-url.jpg");" data-height="60vh">
<div class="jumbotron-content container h-bold">
<div class="row">
<div class="col-auto">
<div class="p-4 shadow bg-t-white">
<div class="row d-flex">
<div class="col-md-auto pr-md-4 text-center mb-3 mb-lg-0 align-content-center"><img src="logo-url.png" alt="Logo Alt Text" width="150px"></div>
<div class="col-md ml-md-0 pl-md-0 text-md-left text-center align-content-center">
<h1 class="display-4 h1">Main Heading</h1>
<!-- Optional tagline --> <!-- <p class="lead">A brief supporting message can go here.</p> --> <a class="btn btn-info btn-lg mt-2" href="/path-to-page"><span>Primary Action</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Banner with Split Heading
Preheading
Main Heading
<div class="jumbotron-fluid jumbotron-full jumbotron-full-image jumbotron-content-bottom-left" style="background-image: url("background-image-url.jpg");" data-height="60vh" data-type="6">
<div class="jumbotron-content container h-bold">
<div class="row">
<div class="col-auto">
<div class="p-4 shadow bg-t-white">
<h1><span class="h1 font-weight-light xl">Preheading</span><br/><span class="font-weight-bold display-4">Main Heading</span></h1>
</div>
</div>
</div>
</div>
</div>Simple Banner with Heading
Main Heading
<div class="jumbotron-fluid jumbotron-full jumbotron-full-image jumbotron-content-bottom-left" style="background-image: url("img-url.jpg"); background-position: center center;" data-height="60vh" data-type="6">
<div class="jumbotron-content container h-bold">
<div class="row">
<div class="col-auto">
<div class="p-4 shadow bg-t-white">
<h1 class="display-4 h1">Main Heading</h1>
</div>
</div>
</div>
</div>
</div>Banner with Background Image Only
<div class="jumbotron-fluid jumbotron-full jumbotron-full-image jumbotron-content-bottom-left" style="background: url("image-url.jpg") center center / cover no-repeat;" data-height="40vh">
<div class="jumbotron-content container"> </div>
</div>eBanner Properties
Banner Content Position Classes
To position banner content, use .jumbotron-content-bottom-left to align it to the bottom left, or .jumbotron-content-center to center it vertically and to align it to the the left.
Viewport Heights
For banners with text, set the data-height property to 50vh or 60vh. Without text, start with 40vh.
Background Image Position
Set the background image position to top, bottom, or center vertically, and left, right, or center horizontally. Start with center for both.
Bootstrap Display Headings
To increase the size and prominence of headings, use Bootstrap 4 display classes: display-1 to display-4, with lower numbers representing larger sizes.
Normal H1
Display-4 H1
Display-3 H1
Display-2 H1
Display-1 H1
Banner Background-Image Selection Guidelines
Since background images in these banners are cropped dynamically based on screen size and height, it's important to choose images thoughtfully. Look for images with visual interest throughout, like clusters of flowers, foliage, or close-up shots of groups of food items. Finance-related images like cash, coins, calculators, or notebooks also work well. Group shots of people with different eye levels and plenty of space around them tend to display effectively. Be careful using headshots, as they are often cropped awkwardly.