Hero Content

Skill Level: 
Intermediate

Hero content can be used to flood your page with full-width photos and/or video and large, succinct, attention-grabbing text. The hero content type is a more flexible replacement for the promo image.

The height of the hero at medium-to-large browser widths is a percentage of the viewport height (using vh units).

The default alignment for the text is left, but can be modified accordingly by adding one of the following classes to <div class="wdn-hero-text-container {locate-location}">:

Center
locate-center
Right
locate-right

Example

New Hero for Framework New WDN Hero

Learn More Explore Admissions
Students cheer at the football game
<div class="wdn-band wdn-hero">
    <div class="wdn-hero-text-container">
        <div class="wdn-hero-text">
            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">New Hero for Framework</span> <span class="wdn-hero-impact-line">New WDN Hero</span></h2>
            <a href="http://news.unl.edu/newsrooms/unltoday/" class="wdn-button wdn-button-outline">Learn More</a>
            <a href="http://admissions.unl.edu/why-unl.aspx" class="wdn-button wdn-button-outline">Explore Admissions</a>
        </div>
    </div>       
    <div class="wdn-hero-video">
        <video autoplay loop poster="images/documentation/2015-first-fb-game-wooooo.jpg" aria-hidden="e;true"e;>
            <source src="images/documentation/2015-first-fb-game-fingers-crossed.mp4">
        </video>
    </div>
    <div class="wdn-hero-picture">
        <img src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="Students cheer at the football game">
    </div>
</div>

Accessibility Considerations: 

Depending on the relative lightness or darkness of your visual content, you may need to adjust the opacity of your video or picture to meet color contrast compliance for your hero text. The opacity value for .wdn-hero-video and .wdn-hero-picture is 0.5, providing a conservative amount of color contrast between the dark background-color and light hero text. If you need to adjust this value, it is recommended that you scope your CSS to your own namespace. For example, add the class fpa-hero-video to <div class="wdn-hero-video fpa-hero-video"> for a hero video on the College of Fine & Performing Arts site, then adjust the opacity value using the .fpa-hero-video class. Remember to adjust the opacity for both the video and picture. Alternatively, if your visual content is light, you can increase the opacity, change the background-color to white or cream (#fefdfa), and then darken the hero text. Test contrast accordingly. This is an area we want to improve by requiring fewer developer adjustments to the opacity. Stay tuned.

For aesthetic purposes, you may wish to hide the page title in order to display the hero band immediately after the header. Use caution. The page title, which should always be an <h1>, is necessary for accessibility and Search Engine Optimization (SEO).

  • To hide your page title and instead display it in your hero text, you can set #pagetitle h1 to display: none. Then change the <h2> in your hero markup to an <h1>. Place your page title text inside the hero content <h1>.
  • To hide your page title but also use different text for your hero, you can use the following CSS to visually hide your #pagetitle h1, but keep it visible to screen readers and search engines.
      font-size: 0;
      width: 1px;
      height: 1px; // allow VoiceOver to see the text
      display: inline-block;
      overflow: hidden;
      position: absolute !important;
      border: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      clip: rect(1px, 1px, 1px, 1px);
    
    Like the opacity example above, it is recommended that you scope your CSS to your own namespace. Either include a localized class in your body element or, if your site is in UNLcms, use the .page-node-### class (also located in the body) where ### is a page's unique number.
  • Because these background videos will never have any captions (because there is no sound), a screen reader user might see a video on the page and not be able to tell what the video is for. Therefore it is usually best to hide background videos from screen readers with the aria-hidden="true" attribute. If the video gives important context to the page (and is not just eye candy), please consider adding a paragraph of text after the video that provides the missing context, and give the class the .wdn-text-hidden to have it only appear to screen readers.

Usability Considerations: 

If you have a video, you should provide a poster image as a fallback for devices that do not support autoplay of video.

The order of the elements in the hero content markup is not interchangeable. Specifically, it is important that you reference the video first and picture second. This ensures that the picture will be shown as a fallback for devices that do not support autoplay of video, and will not be shown for devices that do support video autoplay.

While there are no formal restrictions for where hero content can be implemented, it is recommended for important content at the top of the page.

Contributed By: 
IIM

Comments

aholz4's photo

Is there a version of hero code for the image carousel?

lgayer2's photo

And if you use an image, what is the recommended size?

clewis25's photo

I usually use a 1600 x 900 px image. Your mileage may vary but try to keep that general aspect ratio, 16x9, if you use a different size. 16x9 is the standard 'widescreen' aspect ratio. Newer technologies, like 4K resolution or higher screens may push the pixels higher, but the ratio will likely stay the same. I hope that answers your question!