Page Headers

Jumbotron

A jumbotron is the big hero section that appears on landing pages. There should only ever be one Jumbotron per page, and it should always be directly below the main navigation.

By default Jumbotron’s background will be the $theme-color as defined in _variables.scss, but this can be overridden by changing the background color in _page-headers.scss.

.jumbotron {
  background-color: $theme-color;
}

Jumbotron also has a built in drop shadow on the bottom inner edge that is 30px high. To remove this, an write an override to hide the :after pseudo element that generates this shadow:

.jumbotron {
  &:after {
    display: none;
  }
}

Minitron

For subpages, you may want to extend the color and style of the Jumbotron, but you won’t need something quite as primary. For this, you can use the Minitron.