The hero rendering allows for large-scale photography on high-level pages. These images resonate with users and evoke the brand promise.

What's Included In This Rendering?

Component overview

A: Image


Though all hero images are 1650px wide, they come in a variety of heights, including 360px, 257px, and 137px. 360px variants are always used on high-level pages with other overlaid renderings, most notably the content block (see sample 3 below). 257px variants are used on similarly leveled pages with no content to overlay. The 137px variant is for lower level pages. At a certain point in the sitemap, designers may elect to eliminate hero banners entirely and instead bring the focus to more detailed content. For more information on image standards for hero banners, visit the photography (link opens in new window) page.

B: Underline


A 3px Humana green underline appears beneath the 137px and 257px versions of the banner image and extends infinitely in the horizontal. This element is omitted for the 360px banner. For more information on appropriate colors, visit the color palette (link opens in new window) page.

How Can I Use This Rendering?

Sample configurations

SAMPLE 1: 137px small hero banner

Hero 1

SAMPLE 2: 257px medium hero banner

Hero 2
SAMPLE 3: 360px large hero banner with overlaid content block

Note: The overlaid content block is shown here for illustrative purposes. It is a separate rendering.

Hero 3

Work with Humana to boost well-being

From choosing the stairs over the escalator to snacking on carrots instead of chips, little decisions can make a big difference to your overall health.