Hero

Overview

The hero module is used for creating hero images (sometimes known as mantles or mantle images*): prominent, full-width visual elements that usually include a background image and text.

*As far as we can tell, this term is completely idiosyncratic to Nebo; nobody else in the industry calls them mantles. For this reason, we recommend using the more widely-used "hero".

Table of Contents

Fundamentals

HTML Structure

A hero element must contain at least two components: hero__background for displaying the background pattern or media, and hero__content for displaying overlaid text, buttons, etc.

Any background images or gradients should be applied to the hero__background directly, either inline or through custom modifier classes to the parent hero (e.g. hero--trees). Background videos and iframes should be included as child elements of the hero__background.

hero__content is a wrapper that controls padding and alignment of its inner HTML. As such, it is best for hero__content to contain only one direct child, often a container, although this can be modified to support more custom alignment of content elements.

Hero Sizing

There are two general approaches to setting the height of a hero element: fixed height and fixed pixel aspect ratio (PAR).

In the fixed height approach, the hero should be given a min-height property, along with an amount of top and bottom padding to account for overflowing content. The modifier classes below are provided as a starting point for fixed-height mantle sizing, but should be overridden, especially for larger breakpoints.

In the fixed PAR approach, the mantle is given a strict width-to-height ratio that cannot change, regardless of the size of the hero__content. This restriction is particularly useful for hero elements where no background cropping should occur, for example images or videos with focus towards the edges. Some popular PARs can be achieved using the following modifier classes:

Background Positioning

Just like with the background-position property in CSS, the anchor point of a hero__background can be controlled using the following modifiers:

  • 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

Notes:

  • The default background positioning is centered.
  • These positioning modifiers also control background <video> and <iframe> tags.
  • Only one background positioning modifier should be applied at a time. If different anchor points are required for various responsive breakpoints, a custom solution can be implemented using the hero-bg-pos mixin.

Content Alignment

The vertical alignment of hero__content can be controlled using the following modifiers:

  • hero--content-top
  • hero--content-center
  • hero--content-bottom

Notes:

  • The default content alignment is centered.
  • Horizontal alignment should be handled using either grid elements inside the hero__content, or custom CSS.

Examples

Basic Hero

Note the use of the hero--medium modifier to set the height of the mantle (see sizing).

Lorem Ipsum Dolor

consectetur adipisicing elit

Hero with Background Overlay

This hero makes use of the hero--overlay mixin to apply a dark overlay on top of the hero__background. This is used to increase contrast between the background and content. This mixin can be easily extended to support background images and gradients as well, which are particularly useful for covering up compression artifacts in background videos.

Lorem Ipsum Dolor

consectetur adipisicing elit

Hero with Video Background

Note the use of the hero--par-16-9 modifier to fix the aspect ratio of the hero at 16:9 (see sizing).

Lorem Ipsum Dolor

consectetur adipisicing elit

Responsive (e.g. Stackable) Mantle Content

This hero makes use of the hero--stacked mixin to visually separate the hero__background and hero__content on mobile.

Lorem Ipsum Dolor

consectetur adipisicing elit