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 example promo box](https://www2.gov.bc.ca/assets/gov/british-columbians-our-governments/services-policies-for-government/policies-procedures-standards/web-content-development-guides/cms-lite-manual/content-entry/cmslite-promobox.jpg)
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:
- Select the Right Column tab
- 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 screen![Drop-down list for the Add New Right-column action button Drop-down list for the Add New Right-column action button](https://www2.gov.bc.ca/assets/gov/british-columbians-our-governments/services-policies-for-government/policies-procedures-standards/web-content-development-guides/cms-lite-manual/content-entry/rightcolumn_dropdown.png)
- Enter an applicable title, up to a maximum of 40 characters in the required Heading field
- To add an Image, click on the [Browse] button
The Image Picker will be displayed
- Search or Navigate to the applicable asset which has been uploaded into Asset folders
- Choose the [Select] to complete the action
The picker will be closed and the image field will be populated
- 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
- Search or Navigate to the page/asset
- 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
- 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
​
- Enter up to a maximum 300 characters into the required Text field
![Image Picker Image Picker](https://www2.gov.bc.ca/assets/gov/british-columbians-our-governments/services-policies-for-government/policies-procedures-standards/web-content-development-guides/cms-lite-manual/content-entry/image_picker.png)
![browse menu browse menu](https://www2.gov.bc.ca/assets/gov/british-columbians-our-governments/services-policies-for-government/policies-procedures-standards/web-content-development-guides/cms-lite-manual/content-entry/browse.png)
​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
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