Promos

Layout Variants:

P001 - Promo Right with Image

P002 - Promo Left with Image

P003 - Promo right no Image

P004 - Promo Left no Image

P005 - Promo Double Right with Images

P006 - Promo Big Image Right

Content Type: Collection

Aspect Ratio: 

• 1:1
• On Promo box: 3:4, 2:1

Expected Use:

The primary use of this Collection is to provide a value proposition paragraph supporting promo boxes with or without image. It delves into a page topic underneath a Hero component. 

A read more toggle can be added to the component, truncating the body copy to 3 lines of text by default. When the toggle is unclicked, the rest of the content will appear below as normal. An optional background color can be enabled to displayed. Note: Each optional element is authorable individually and/or in combination with each other.

Building the Components:

All of the P001 to P006 promos follow the same authoring flow. Create a Collection and set the Layout Variant to the corresponding promo (P001 to P006) that you are building. 

• Teaser Title - this is the headline that appears at the top of your component opposite the promo box
• Teaser Text - this is the body copy of your component below the headline
• Items List - you will add one or two Teasers (or other teasable content) to the Items List to build your promo box(es) depending on the design you have chosen. See below for required content in your Items
• CTA - All of the P001 to P006 promos allow for zero, one or two CTAs under the main body text. All of these work the same by using a Teaser or any teasable content.
  • Select "Use Linked Call-to-Action Label" for the Call-to-Action Button. Drop in one or two teasable Documents. Note, you must specify the "Teaser CTA Label" in the teasable items you add for the CTA label to show.
  • When adding only one CTA you can set the Call-to Action Button to "Use both Custom & LInked Call-to-Action and set the CTA label rather than using the CTA label from the teasable item. 

Adding Optional Elements:

In order to 'turn on' the Read More so it is visible on the screen, add a boolean property 'readMoreDisplayed' to the component's Local Settings. If this property is checked, the Read More will be displayed. If this property is unchecked or it is not added in the Local Settings then the rest of the content will appear below as normal.

To add and select a Background Color, set this on the Collection's Content Tab via the Background Color section. If the Legacy (Gray) Background Color is selected it will automatically create a short cut to "turn on" this Background color. The boolean property 'backgroundToggle' and 'bgColorState' string property will be auto added on the component's Local Settings. If 'backgroundToggle' is ticked, the Legacy (Gray) background color will be displayed. If this property is unchecked or it is not added in the Local Settings then the background color is set to 'Default' (no color). The 'bgColorState' property value varies depending on the selected Back Ground color on the Content tab.

Building the Promo Boxes:

While you can use any teasable content, it is generally intended that you will use a Teaser to build your items. These will be added to the Items List of your P001-P006 component. For your Teaser you will need:

• Teaser Title - this is the CTA label at the bottom of the promo box
• Teaser Text - this is a brief description that goes in the promo box above the CTA
• Pictures and Media - If you are using a promo with an image, you will add your image here
• Teaser Target - This is the teasable content you are targeting in the CTA. Generally this will be a Page, but can be other teasable content.
• CTA - the Teaser Target or the teasable content you are using is the CTA. There is no CTA field used though in the promo.