Hero

Hero

Heros are a simple element that can serve as a main call to action to your site visitors. The vertical size of the hero element is based on the amount of text included plus some additional padding. There are various display options for these that are detailed below. Background colors are handled by the different background classes.

Dark Gray Hero with Left Aligned Text

Dark Gray Hero with Right Aligned Text

Dark Gray Hero with Center Aligned Text

Hero with Background Image and Overlay

The overlay can be used on heros with background images to help make the text easier to read.

Hero with White Text, Background Image and Overlay

The text and overlay color of the hero can be changed by using the appropriate classes.

Small Hero

A small hero style is available for using as site alerts or placing in smaller regions. This style reduces the padding of the element and does not increase the base font size.