Use the hero module to create full-width image areas, optionally with overlaid text elements.

Background Positioning

Use these modifier classes to control the anchor point of a hero's background (think of them like values of the background-position property in CSS.

Note that this works for all types of backgrounds: images, videos, and iframes alike.

  • hero--bg-top-left
  • hero--bg-top-center
  • hero--bg-top-right
  • hero--bg-top-right
  • hero--bg-top-right
  • hero--bg-center-left
  • hero--bg-center
  • hero--bg-center-right
  • hero--bg-bottom-left
  • hero--bg-bottom-center
  • hero--bg-bottom-right

Sizing

There are two general approaches to setting the height of a hero element: fixed height and fixed pixel aspect ratio (PAR). Know when to use which, and employ modifier classes to achieve unique sizes.

Examples

Basic

Lorem Ipsum Dolor

consectetur adipisicing elit

Hero With Overlay

An overlay helps increase contrast between the background and the overlaid text elements.

Lorem Ipsum Dolor

consectetur adipisicing elit

Hero With Video Background

Lorem Ipsum Dolor

consectetur adipisicing elit

Stacked Hero Content

This hero background and content are visually separated on mobile.

Lorem Ipsum Dolor

consectetur adipisicing elit