Module [304] Spotlight CTA – Primary Page Banner with Parallax Effects - Enterprise

This module was designed to support the Mid-Term Enterprise Hero page section.

The module is flexible, using optional title and description fields for text, and allows for video and links. Variations can use the image in the module itself, or as a background image in the module's row of the page configuration component.

The first three examples on this page are taken from Networking, Rack and Tower and Campus Lan page Hero sections. The fourth is a demo sample of a Servers hero. The last two examples is a demo of one method for the Hero Variation B (text over image), and Variation C (text above image with blue background).

Another variation of the hero can be done using the [803] module, using its optional title and description fields, and assigning the background image to the row definition of the page configuration component where the [803] module is specified.


Schema fields used:

  • Title:  Link to Text or HTML Block component for a large title over the image (optional)
  • Image:  The "Hero" image, should be wide (optional) can also be placed as a row image in the Page Configuration Component where the Hero module is specified.
  • Description:  The Text or HTML Block containing a caption over the image (optional)
  • List of Links: Normally left empty
  • See All Link:  Link to Video component (optional, see Campus Lan Hero example)
  • See All Link Treatment:  Choice of six, including Link with Arrow and Transparent Button
  • Additional Fields
    • Field Type: "See all link Short Title" (optional with video above)
    • Field Contents (either component link or text field):  Title for the video (optional with video above)
    • Field Type: "Anchor ID" (optional for module, but may be required for page design)
    • Field Contents (text field):  The anchor id for the hero module (typically, the hero is anchored as "top" for the in-page navigation    

Common Attributes:

  • Light Text Color (for Dark Background):  This is handy for brightening the text when shown over a darker image. It is specified as a Row Attribute in the Page Configuration Component where the Hero module is specified.
  • Background: Ignore Inline Height:  Often used as a Row Attribute in the Page Configuration Component where the Hero module is specified.
  • Parallax Background: Can be used when the background image is specified as a Row Attribute of the Page Configuration Component where the Hero module is specified
  • Enterprise Attributes – "Enterprise Breadcrumb: Place Breadcrumb over 304 module": Use this module attribute when your page uses breadcrumbs, and this hero module is at the top of page, and you want to remove the separate breadcrumb row from above the hero, and place the breadcrumb text over the hero image

Example: Networking Hero with link

Example 2: Rack and Tower Hero with no link

Example 3: Campus Lan Hero with Video Link

Example 4: Servers Hero with Video Link

Example: Enterprise Hero var. B

Example: Enterprise Hero var C (blue background)