>>>Page Under Construction<<<

Promo Sidebar with Quick Links

Layout Variant: P008

Content Type: Collection


Teaser Title

Teaser Text

Picture

Items

CTAs

P008 Collection

Yes

Yes

No

Yes

Optional

Items (Promos)

Yes

Yes

Optional

--

Yes


Aspect Ratio: 

  • TBD

Expected Use:

The purpose of this component is to allow a content author to add multiple "quick links" or other relevant content in a prominent and concise way. The links in the sidebar can link to internal or external pages, or documents (mostly PDFs).

P008 will give the content author the ability to publish multiple links in a component, next to some contextual content and CTAs. It also enables a marketing person to prominently show a series of links in a concise way, wherever needed on the page.

Building the Components:

P008 follow the same authoring flow. Create a Collection and set the Layout Variant to P008. 

  • 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 the Teasers (or other teasable content) to the Items List to build your promo box(es).
  • CTA - P008 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.

For P008, content authors can choose between a white and gray background for this component. They can set this via the Collection's Background Color section under the Content Tab. When the Legacy (Gray) Background Color is selected it will automatically create a short cut to "turn on or off" 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 on 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.

By default, the P008 component is displayed with a white background, and the Promo Box container is displayed with a gray background. For the, optional configuration, when the component is set to display a gray background, and the Promo Box container will display with a white background.

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 P008 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.

The P008 Component flexes to contain the content within. Besides the quick link promo box, this component allows for an H2 heading, body copy, and up to 2 CTAs. All text are authorable.

More on the Promo Box Quick Links:

  • Content authors have the option to align the Promo Box content to either the left or right hand side of the page. 
  • Similar to other Promo components, content authors can enable the optional read more toggle. By default, this displays only the first 3 lines. 
    • Optional Show More (Expanded): Upon selection, the show more toggle expands the promo box to reveal the remaining items in the link list. If selected from this view, the promo box will revert to the previous component (only displaying 4 items).
  • No maximum limit set on the number of items that authors can add to the link list, however, it is recommended to have no more than 10 links be authored.
  • The component maintains a two column alignment on desktop and tablet. On mobile wide and mobile regular, the content stacks in this order: Headline, Body Copy, Promo Box Quick Links, CTAs. 
Please enable JavaScript to use this website.