Hero banner configurations can be separated into two categories: content and style. Content refers to the text elements within the banner. Style refers to the sizing and coloring of the banner itself.
The default state of a banner looks like the image below. The content is left-justified and placed at the bottom left corner of the banner. The background uses the color blend component for a gradient background. The content inside is typically a level 1 heading. Content configuration will control the placement of the text. Style configurations will control the background and the sizing of the banner on the page.
The hero banner has three position options: center, bottom left, top left. If nothing is specified, bottom left is used and is the recommended option. To position the text use the
jumbotron-content-center class or the
jumbotron-content-top-left class. Both of these options will adjust the text accordingly.
The white text you see in the images is completely up to you. The banner content is simply just a container that can hold whatever text you want. We recommend you use a bolded level 1 heading. If an intro sentence is desired it should use the lead class.
There are three properties you can configure with the hero banners which are: background, height, and content style. By default hero banners will continue to grow in size as the browser width grows. This is typically a non-issue, but you can use the
jumbotron-narrow class to set a maximum width at 1920px.
If you are using the color blend component, all available options can be used on the banner. You could also remove the
color-blend class and use a
bg-[color] class for a solid color look. If you want to use an image instead of a color, remove any classes affecting color and add the
jumbotron-image-full class. Additionally you must set a
background-image property on the jumbotron.
If you are using a background image, you will often have to darken the image so that the text meets accessibility guidelines. This is done by adding an empty
div with the class
Banner image without overlay
Banner image with overlay
By default hero banners will be a minimum height of 300px on larger screens and 200px on smaller screens. That is a minimum height so the height will adjust as content forces it to expand. These defaults, while recommended, don't always work and can easily be altered. These can be set with a pixel unit (px) or a viewport height unit (vh).
Most often if you need to adjust the height of the banner area it will be because you are using an image and need it to be larger. Simply add a
data-height="###px" attribute to the jumbotron and that will set the height of the jumbotron at larger screen sizes. Smaller screen sizes will still default to 200px unless explicitly set with a
If you set a jumbotron using a viewport height, it will affect all screen sizes. Heights are set with the
data-height="##vh" attribute. The
vh is essentially a percentage, so 100vh will set the jumbotron to 100% of the screen height. We automatically take into account the navigation area of the page for you so that the jumbotron should sit flush at the bottom of the page.
We recommend that if you are using this method you only use
90vh to prevent users from thinking there is no content below the image. We also discourage the usage of large images like this except on very unique and specific pages with highly targeted purposes.
Content Style Configuration
By default banner content is simply place inside the hero banner. If you want to use an image that you do not want to darken with an overlay, there is an alternate style for the content. You can place it in an overlay bar at the bottom of the image.
Other Banner Types
You can also simply use an image set to full width at the top of the page to function as a banner. While this is simple and works, care must be taken when designing the banner to ensure it is legible at all screen sizes. Unlike a jumbotron where the content is controlled with browser styling, images with embedded text simply get smaller on smaller screen sizes and can become illegible if they get too small.