[300] - Spotlight CTA - Highlighted Overview

This module is typically used on an overview page to present a problem statement about the product and either a CTA or a video. Due to the tagging of the heading style (H2) as well font size, it is typically limited to the top of the page and placed over a large banner style image as shown in the examples below. The width and placement varies as the text must be placed in a section of the row where it does not interfere with the underlying image. Offsets (or tab levels) may be used to indicate where the text should begin. The width specification of the cell will then dictate where it will end.

Schema fields used:

  • Title or header (supports 'Text of HTML Block'; font size 52px)
  • Description (supports 'Text of HTML Block')
  • Featured item (supports 'Video - Externally Hosted'; recommended image thumbnail 180 x 120)
  • See all link (supports 'External Link'; 'Internal Link'; Video - Externally Hosted')
  • Attributes: Text Alignment Left (Default), Center, Right
  • Additional Fields: 
  • Field type: See all link Short Title
  • Field Value: component link or text

Note: background image is part of row definition and not the module.

Functional Specifications. For more detail, see Detailed Module Documentation

ENTERPRISE example - see here

Main variations of module [300]:

Title/Header component

Brightcove video (externally hosted) added as 'see all link' with primary button.

Page configuration:

* cell width: 40% 

* background image: 1900x600

* Row attribute: Light Text Color for Dark Backgrounds

Video title

Title/Header component

Brightcove video (externally hosted) added as featured item 

Note: video image size, display type can be ignored; 

          video output size is not needed and automatically applied 

Page configuration:

* cell width: 60% 

* background image: 1900x600


  

2:14 minutes

Video title

Beginning of dialog content

Video description

Close

Title/Header component

Example contains a [300] module as follows: 
  • Title/Header Component
  • Description

Page Configuration: Cell Width 67%, Cell Offset Content - 11 Tab Stop, Row Background Image

See live examples of module

The following live pages are containing different modules. The images below are indicating the module described in this section.

Ready. Certify. Grow.

The HP Helion Ready Program for Solution Providers enables
ISVs and SaaS application providers vendors to test and
certify their products to deliver the New Style of IT to
enterprise customers.

Small size.
Big innovation.

HP Moonshot wins in this year’s InfoWorld best-products review.

Other Variations:

Title/Header component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

See All link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

External Link w/ type

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

External Link w/ type & overwrite

Title/Header component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

See live page
Responsive specific variations

Title/Header component

Brightcove video (externally hosted) added as 'see all link' with primary button.

Page configuration:

* cell width: 40% 

* background image: 1900x600

* Row attribute: Light Text Color for Dark Backgrounds

Video title

Title/Header component

Example contains a [300] module as follows: 
  • Title/Header Component
  • Description

Page Configuration: Cell Width 67%, Cell Offset Content - 11 Tab Stop, Row Background Image

Title/Header component

Brightcove video (externally hosted) added as featured item 

Note: video image size, display type can be ignored; 

          video output size is not needed and automatically applied 

Page configuration:

* cell width: 60% 

* background image: 1900x600


  

2:14 minutes

Video title

Beginning of dialog content

Video description

Close

Title/Header component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

See live page

Title/Header component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

See live page