Skip to content
Web Strategy Documentation Library

STM Headers

The following are what headers could look like in storytelling modules. Due to the nature of storytelling modules (STMs), we have had to display the various options as screenshots on this page. Below each is a link to the example on an actual STM page so that you can fully experience them.

 

Background image header at full height

Features activated:

  • Background image
  • Full height
  • Bottom slash pattern activated (optional)
  • White text with shadow for both header and intro text

screenshot of image background at full height example

Check it out

 

Background image header at half height

Features activated:

  • Background image
  • Half height
  • White text with shadow for both header and intro text
  • Overlay enabled to right (optional)
    • Turns on a darkened overlay over the content so that text is easier to read. Can come from multiple directions or default over entire image.

screenshot of background image header at half height example

Check it out

 

Background video header at full height

Features activated:

  • Background video
  • Full height
  • White text with shadow for both header and intro text
  • Overlay enabled to right (optional)
    • Turns on a darkened overlay over the content so that text is easier to read. Can come from multiple directions or default over entire image.

Screenshot of background video header at full height example

Check it out

 

Background video header at half height

Features activated:

  • Background video
  • Half height
  • White text with shadow for both header and intro text

screenshot of background video header at half height

Check it out

 

Background color header at full height

Features activated:

  • Background color
  • Full height
  • White text with shadow for both header and intro text
    • Make sure the contrast between the chosen color and the text meets accessibility standards

screenshot of background color header at full height

Check it out

 

Background color header at half height

Features activated:

  • Background color
  • Half height
  • White text with shadow for both header and intro text
    • Make sure the contrast between the chosen color and the text meets accessibility standards

screenshot example of background color header at half height

Check it out

 

Background color header at full height (video/modal activated)

Features activated:

  • Background color
  • Full height
  • White text with shadow for both header and intro text
    • Make sure the contrast between the chosen color and the text meets accessibility standards
  • Video/modal popup activated
    • Note: styling of this type of header changes due to video/modal popup activation

 

screenshot of color background header example with video modal at full height

Check it out