[506] Featured Item – Title with Background Image

This module was designed for (but not limited to) gateway pages. It is used to present various sections within the business unit as tiles with links to the corresponding family pages.

This module features items such as a notebook or a capability of the product or service.  An image is displayed as background for a title and description. Optionally, the module may have a see all link.

Schema fields used:

  • Title (supports 'Text or HTML Block'; optional)
  • Description (supports 'Text or HTML Block'; optional)
  • Image (supports 'Image'; height and width as mentioned in the image metadata; recommended sizes are 100% wide = 1000px, 50% = 500px, 33% = 334px)
  • List of links (supports 'External Link'; all treatments supported)
  • See all Link (supports 'External Link'; all treatments supported)
  • Additional fields: Gradient Image (loaded separately from the module image as a 1px wide graphic with the desired height of the module)
  • (Module) Attributes:
  • - Title Header Size: h2 (font size 24px)
  • - Title Header Size: h3 (default behavior; font size 20px)
  • - Image Effect: Remove Border around Module
  • - Image Effect: Show Image as Full Background. This attribute is recommended for life style imagery used as module background. The background image adjusts from the right (left margin fixed) in order to fit the cell set width when > 1000px, and fits the entire page width when < 800px (single column view). To avoid distortion, the recommendation is to use 800px wide images when applying this attribute
  • - Placement: Right of Text. When applied on this particular module in addition to "Show image as full background", it adjusts the image from the left (right margin fixed).


Note: A helpful attribute when working with 506 is available at the ROW level: Row Effects - Remove Spacing Between Cells in Row, which will remove the spacing between the cells used on the same row.

Main variations of module [506]:

 

Example of responsive optimized setup

Title/Header component [506]

Variation contains a single [506] as follows: Title, Description (this descriptive text), Links in a list, CTA, Image (shown as background), Attributes: Title Header Size H2

Title/Header component [506]

Variation contains 2 x [506] - each with a:

  • Title
  • Description (this descriptive text)
  • Image (shown as background)
  • No attribute (default title h3 and occupying 50% of the row width

Title/Header component [506]

Variation contains 2 x [506] - each with a:

  • Title
  • Description (this descriptive text)
  • Image (shown as background)
  • No attribute (default title h3 and occupying 50% of the row width

Title/Header component [506]

Title/Header component [506]

Title/Header component [506]

Example of full background setup (recommended for lifestyle imagery)

HP Access Control Secure Authentication

Secure all print jobs.

HP Access Control Pull

Your pin. Your print job.

HP Backup, Recovery and Archive Solutions

Move to the next era of data protection and retention

HP Access Control Pull

Your pin. Your print job.

Move to the next era of data protection and retention

HP Access Control Pull

Your pin. Your print job.

Example of backwards compatible setup

 

High performance

Next-generation processing power. BeatsAudio™ and a sleek new look. Great for entertainment and business.

Everyday laptops

Super reliable, feature-packed PC's at affordable prices.

Detachables & convertibles

Compare the revolutionary design of HP 2-in-1 laptops.

Thin and light

Ultra-slim laptops with proven processing power.

'' ''