Heroes

A hero is a full-width element with a gradient and text overlaid over an image or video background.

Lied Library at night

A Place of Infinite Possibilities

As you consider your future, consider UNLV.
We are different, daring, and diverse — just like you.

Structure and Defaults  Code

There are four layers in a hero: container, background, overlay, and text.

Container

The hero container has an aspect ratio of 16:9 - the same shape as a television. The container acts as a window in the sense that anything that exceeds the bounds of the container is hidden.

Background

A hero background can consist of a photo or video. If the background exceeds the hero container shape, the excess is hidden. By default, the background is full width and is vertically centered, with excess height hidden.

Overlay

The hero overlay is a gradient used to increase color contrast between the background and the text. By default, the gradient is aligned the bottom.

Text

Hero text is white and is aligned to the bottom by default.

Background Images

Image Size

The hero container has an aspect ratio of 16:9. Images automatically fit to the width of the hero container. Excess height that falls outside the bounds of the container is hidden.

Recommendations
  • Standard Photo Size (6:4 aspect ratio): 2000 x 1333 pixels
  • Cropped Photo Size (16:9 aspect ratio): 2000 x 1125 pixels
  • Vertical Photos: Do not use vertical photos

Image Alignment

If the image height exceeds the ratio, an equal amount of the image's top and bottom are automatically hidden. There are classes that allow you to align the image, which might expose a better part of the image.

  • Expose Image Top

    To expose the top of the image, simply add the .image-top to the .hero container.

  • Expose Image Bottom

    To expose the bottom of the image, simply add the .image-bottom to the .hero container.

photo with no cropping marks
Original image (6:4 aspect ratio)
photo with window vertically centered
Default alignment (16:9 aspect ratio)
photo with window aligned to top
Image-top alignment (16:9 aspect ratio)
photo with window aligned to bottom
Image-bottom alignment (16:9 aspect ratio)
Original image used in final hero
Image used in website (16:9 aspect ratio)

Background Videos  Code

A hero background can also be a video. Because most videos are typically shot in a 16:9 aspect ratio, no portion of the video should be hidden. It is a requirement that the video does not include an audio track or text crawls/graphics in the video.

Video Sources

A video background requires three source files:

  • MP4 video file: This is the primary video source file. It is used on most browsers on tablet-sized devices and larger.
  • WebM video file: This is the fallback video source file. Firefox and Opera only support this type of video file format.
  • Fallback Image file: This is the final fallback file. An image is used on phones to reduce download sizes. It is also used in browsers that do not support HTML5 video.

Video Standards

General Requirements
  • No audio track
  • No text/graphics
General Recommendations
  • Length: 15-30 seconds
  • File Size: 5MB maximum
Video Codec Requirements
  • MP4: H264
  • WebM: VP8

Text Colors

To improve readability and color contrast ratios between the background and text, adjust text colors.

Text Color

Toggle between light and dark text.

  • White Text

    White text is the default text color. In the event that you need to explicitly set the text color to white, add the .text-white class to the .hero container.

    When white text is used, the overlay gradient becomes dark.

  • Black Text

    To set the text color to black, add the .text-black class to the .hero container.

    When white text is used, the overlay gradient becomes light.

Text Container Color

Add a background color to the text container when text color options do not provide enough contrast.

When a text container color is selected, the overlay gradient does not appear.

  • Semi-Transparent Black Background

    To add a semi-transparent black background color, add the .bg-dark-black-transparent class to the .hero container.

  • Semi-Transparent White Background

    To add a semi-transparent white background color, add the .bg-white-transparent class to the .hero container.

photo with light text and dark gradient
White text, dark gradient overlay, no text container color
photo with dark text and white gradient
Black text, light gradient overlay, no text container color
photo with light text and dark text container
White text, no gradient overlay, black text container color
photo with dark text and light text container
Black text, no gradient overlay, white text container color

Text Alignment

Vertical Alignment

Hero text is vertically bottom-aligned by default. If the text of covering an important part of the image, it can be top- or middle-aligned as well.

  • Align Text to the Top

    To align the text to the top, simply add the .top class to the .hero container.

  • Align Text to the Middle

    To align the text to the middle, simply add the .middle class to the .hero container.

  • Align Text to the Bottom

    To align the text to the bottom, simply add the .bottom class to the .hero container.

Horizontal Alignment

Hero text is center-aligned by default. If the text of covering an important part of the image, it can be left- or right-aligned as well.

  • Align Text to the Left

    To align the text to the left, simply add the .left class to the .hero container.

  • Align Text to the Center

    To align the text to the center, simply add the .center class to the .hero container.

  • Align Text to the Right

    To align the text to the right, simply add the .right class to the .hero container.

image with text aligned to the top-left
Top-left alignment
image with text aligned to the top-center
Top-center alignment
image with text aligned to the top-right
Top-right alignment
image with text aligned to the middle-left
Middle-left alignment
image with text aligned to the middle-center
Middle-center alignment
image with text aligned to the middle-right
Middle-right alignment
image with text aligned to the bottom-left
Bottom-left alignment
image with text aligned to the bottom-center
Bottom-center alignment
image with text aligned to the bottom-right
Bottom-right alignment