Timed Content Carousel

Layout Variant: C096

Content Type: Collection

Expected Use:

The C096 Timed Content Carousel component functions as a prominent story-telling carousel that features several pieces of content, and animates through a series of visually catchy elements to encourage users to read more. The maximum number of items that can be added to the carousel s around  (12) items.  

The carousel automatically progresses per tile through a transition of active to inactive states, once card at a time. The transition between states is 0.6 seconds and the active state display for each tile lasts for 16 seconds before transitioning to the next card in order. 

The carousel auto play stops when a user clicks on any part of the carousel card and hover on any cards (active or inactive). The auto play progression restarts only upon page refresh or reload.

This component can ideally be used to showcase products and related information but can be utilized for other purposes.  

Building the Component:

For the main C096 Collection, your component should contain the following: 

1. Teaser Title – This is the main headline or label of the component. 

2. Teaser Text -This is the optional body copy of the component. 

3. Items - To create entries for the carousel, authors can add as many collections on the Items list.

4.  Set the Layout Variant to ‘C096’.

5.  Teaser Header and Teaser CTA Label are not used in this component. Pictures or Other Media come from the components on the Items Section. 

Carousel Items:

Below are the steps to set up the the collection. 

1.  Create a Collection

2.  Add a Teaser Title – This is the label of the featured item. 

3.  Add a Teaser Text -This is the optional body copy of the featured item. 

4.  Add an Image or Other Media - This is the image that will be displayed as card or tile background. 

5.  Add an Item - This is the optional company or brand logo that will be displayed on the uppermost left corner of the card. On the first sample, the Emerson logo was added on the Items List. 

6.  Add CTAs, the author only has the option to select "No CTA Button" or "Use Linked CTA Label" where different types of Teasable content can be added under the Teaser Options. The author can: 

• Create and add a Teaser. 
  • Add the Teaser Target - This can be a Page, Picture, Video, External Link or Download document. 
  • Add a Teaser Title - This is the label or title of the teasable content.
  • Add Teaser CTA Label - This is the CTA label that will be displayed on the card. This CTA label overrides the "Use Default CTA Label" setting.
  • Under the Teaser Options, select "Use Linked CTA Label" radio button and drop the Teaser on the content box. 
    • The CTA label displayed on the card will typically come from the linked content , in this example, the Teaser.
      • If the linked content has enabled "No CTA Button", then the  "Learn More" Default CTA Label shall be displayed.
      • If the linked content has enabled "Use Default CTA Label" and no "Teaser CTA Label" was defined, then the "Learn More" Default CTA Label shall be displayed. 
    • By design, It is recommended for authors to have to add one (1) CTA only per card.
  • Note that "Default Call-to-Action Button" and "Custom Call-to-Action Button" cannot be used for a Carousel Item Collection as these two do not have option to add a link. If used, it will just be directed to the Homepage. 
• Add directly any existing Page or create a new page and follow the page setup process. The above set up for adding optional CTAs also applies. 
• Add an existing External Link component or create a new External Link and follow the setup process. The above set up for adding optional CTAs also applies. 
• Add a Video component or create a new Video and follow the setup process. The above set up for adding optional CTAs also applies. 
• Add a Document component or create a new Download document type and follow the setup process. The above set up for adding optional CTAs also applies. 
• The author can add up to twelve items on the carousel. He can just opt to create as many teaseable content as needed. The above set up for adding optional CTAs also applies. 

6.  Set the Layout Variant to ‘"Default’.

7.  Teaser Header is not used in this component. 

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