Banner Configuration

Core Banner

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.

Content Configuration

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.

Style Configuration

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.

Background Configuration

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 jumbotron-overlay.

Height Configuration

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).

Pixel Height

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 data-xsheight="###px" attribute.

Viewport Height

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 80vh or 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.