Topic CTA Spots with or without Show More/Less Toggle or with Icons

Layout Variant: C082, C082B, C082C

Content Type: Collection

Expected Use:

This Collection builds one or more rows of Green CTA boxes that are the major topics included in the Newsroom and would be displayed on the Newsroom landing page. In addition, these CTAs should be dynamically rank ordered to present the most requested (clicked) CTA first (this functionality is still in the planning stage, your CTAs will show in the order they are placed in the Items List.) While designed initially for the Perspectives content in 2020 then adapted for the Newsroom update in 2021, this component can have a wide range of uses across the website.

The C082B is nearly identical to the C082 except that only one row of CTAs is shown by default with a "Show More" CTA below the CTA Topic Spots. This allows for a more compact use of the component. Nothing is different in how this version is built compared to the C082.

C082C is also closely similar to C082. The difference lies on the capability of C082C to display multiple topic spots CTA icons at the end of the Teaser Title and the optional Body Copy.  C082C does not have the Show More/Show Less toggle functionality and so no bundle entries are required. 

Building the Component:

The body copy or description is not used. Images are not used. CTAs are pulled from the teasers added to the component which are the topics covered in the Newsroom page. From the added teasers, the CTA opens up to a dedicated page. On the Content Tab, you will need to add the Teasers as Items. For C082 Collection, include:

• Teaser Title - The main header of the Topic Spot CTA and set the Layout Variant according to desired functionality:
  • C082 - Topic CTA Spots - if to display standard Topic CTA Spots
  • C082B - Topic Spots with Show More Toggle - if to display Show More/Show Less Toggle 
  • C082C - Topic Spots with Icon - if to display Topic CTA with icons and Optional Body Copy
• Items - The maximum number of teaser that can be added are limited to 50. You can set your Teaser Target to any of the valid topics in the Perspectives, Newsroom or other use cases. Future functionality intends to allow the CTAs to show as a dynamic list rank ordered by most viewed items. Currently the functionality simply shows the CTAs in the order they are added to the Items List.
• Teaser Text are not required for C082 and C082B but optional for C082C.
• Teaser Header and Image are not required for all components.    

Your Teaseable Items should contain the following:

• Teaser Target - if you are using a Teaser, set the Teaser Target to your teaseable content. You can also use any other teaseable content type such as a Page, External Link, Video, Download, Search Teaser, etc.
• Teaser Title - This serves as the main title for the Topic CTA buttons. Add the title based on the topics. The character limit is set to a total of 50.
• Teaser Header, Teaser Text, Image and Items are not required for all components 
• CTA and Teaseable Content -
  • No specific CTA text needed to be set for this as the Teaser Title will be used as CTA Label for the Teaser.
  • You need to add teasable content which provides the link to the corresponding landing page associated.
  • For C082C, the corresponding icon will appear at the end of the Teaser Title depending on Teaser Target.  

Bundle Entries

The C082B uses the bundle entries for the "Show More" and "Show Less" CTAs shown below the Topic Spots. This allows those labels to be translated.

• topics_showMore - label name for the Show More text 
• topics_showLess - label name for the Show Less text
• topics_limit - this is the value for the number of topics to show on load. It is set to 6, but could be changed. This is a global value for all use cases of the C082B, so changing it in the Bundle will change everywhere.

Adding Optional Elements:

Authors can modify the Background color of the this component under the Background Color section on the Content tab. Selecting the Legacy (Gray) background color for the first time, auto creates the 'backgroundToggle' boolean property on the local settings under the System Tab. Selecting a different background color auto unchecks the 'backgroundToggle' boolean property. 

If the author chooses to "turn on" the Legacy (Gray) Background color via the boolean property 'backgroundToggle' on Local Settings, then Legacy (Gray) background color will be displayed. If this property is unchecked via the local settings then the background color is set to 'Default' (no color).