Supplemental content - Promo box

Last updated on January 9, 2024

Use the CMS Lite Promo Box to promote important related content.

On this page


Overview of the promo box

The promo box is a supplemental content box. It is used to highlight important related content. When implemented, it displays at the bottom of the page.

Sample promo box

example promo box


Differences between Promo and Related Links boxes

The promo box differs from the Related Links component in the following ways:

  • An image may be added
  • The text field is mandatory
  • Add new links is not available

Like all other components, all required fields must be completed or a warning message will be displayed when the [Save] action is invoked.


Image and link guidelines

Image guidelines

DPI (dots per inch) measures the resolution of an image, indicating its clarity and sharpness when displayed on a webpage.

Image format

JPG or PNG format is recommended for images.

Aspect ratio

Use an aspect ratio of 16:9.

DPI

Images uploaded should have a minimum dpi of 75.


Linking guidelines

Be aware of the following guidelines when adding links:

  • When linking to applications or files, such as PDFs, opening new browser tabs or windows is acceptable
  • When linking to other web pages, open hyperlinks in the same (current) window unless doing so will disrupt the workflow, confuse your audience, or terminate a secure session

Review Hyperlinks in the Web Standards for further explanation.

Always test links in Quality Assurance (QA) web server and the Production web server to ensure correct functionality.


Adding a promo box

To add a promo box to a page:

  1. Select the Right Column tab
     
  2. Click the [Add New Right-column Boxes] action button and choose Promo Box from the drop-down list

    The Promo Box component will be displayed

Click image to view in full screenDrop-down list for the Add New Right-column action button

  1. Enter an applicable title, up to a maximum of 40 characters in the required Heading field

promo box

  1. To add an Image, click on the [Browse] button
    The Image Picker will be displayed
     
  2. Search or Navigate to the applicable asset which has been uploaded into Asset folders
     
  3. Choose the [Select] to complete the action
    The picker will be closed and the image field will be populated
     
  4. The Image Link field is optional; however, you may to link to a page/asset, or enter an external URL
    • Enter a secure external URL (include https://), or
    • Select the Browse drop-down menu and choose the applicable option
      The applicable picker will be displayed
       
  5. Search or Navigate to the page/asset
     
  6. Choose the [Select] to complete the action
    The picker will be closed and the imageLinkUrl field will be populated

    Note: Target should be changed to New Window if linking to an asset
     
  7. Type a description of the image in the Image Description field to be displayed on hover and read by screen readers 
    • Maximum 128 characters
    • If your image is purely decorative, leave this field blank so screen readers will ignore it
      ​
  8. Enter up to a maximum 300 characters into the required Text field

Image Picker
browse menu


​Expanding, rearranging and deleting components

Expand existing components

When editing an existing page with supplemental content boxes, the components will initially be collapsed. Click on the Item Control Bar to expand/collapse the component

Delete components

Click the delete icon delete icon to remove a component or replicant field

Rearrange components

Hold the left mouse button down on the Item Control Bar to drag and drop to reorder the components or replicant fields