Diagnostic
[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
- 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 linkLorem 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/ typeLorem 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 & overwriteTitle/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 pageTitle/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 titleTitle/Header component
- Title/Header Component
- Description
Page Configuration: Cell Width 67%, Cell Offset Content - 11 Tab Stop, Row Background Image
Example contains a [300] module with Row Attribute - Responsive > Row Background Image: Ignore Wrapping on Mobile Devices
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 pageExample contains a [300] module with Row Attribute - Responsive > Row Background Image: Ignore Wrapping on Mobile Devices & Secondary Image applied at Row level
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
Report product content issues