C094 Timed Accordion with Image

Timed Accordion with Image

Layout Variant: C094

Content Type: Collection

	Teaser Title	Teaser Header	Teaser Text	Teaser CTA Label	Picture & Other Media	Items	CTAs
C094 Collection	Yes	Optional	Optional	-	-	Yes	No
Items	Yes	No	Yes	Optional	Yes	No	Optional

Expected Use:

The C094 Timed Accordion with Image displays an accordion component with images, content and timed animation functionality. Each accordion item has expandable / collapsible drawers when displayed. The recommended number of accordion items is around 3 to 8 items.

The accordion automatically progresses per accordion entry through transition of expand and collapse states one at a time. The transition between states is 0.4 seconds, and the active state display for each entry lasts for approximately 16 seconds before transitioning to the next accordion entry in order. The accordion auto play stops when a user clicks on any part of the accordion. The timed accordion auto plays resumes 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 C094 Collection, your component should contain the following:

1. Teaser Title – This is the main headline of the component. Recommended to display maximum of eight (8) lines of text.

2. Teaser Header - This is the optional eyebrow label displayed on top of the Teaser Title.

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

4. Items - To create entries for the accordion, authors can add as many Teasers, External Link, Video or Download components to the Items list.

5. Image or Other Media and CTA comes from the Teasers on the Items Section

6. Set the Layout Variant to ‘C094’.

7. Teaser CTA Label, Pictures or Other Media come from are the Teasers or components on the Items Section

Accordion Entries:

For Accordion entries with no CTA or with Page links, below are the steps to setup an entry:
- Create a Teaser
- Add a Teaser Title - This is the label or title of the accordion item on closed state.
- Add a Teaser Text - This is the optional Body Copy displayed when the accordion row is collapsed or expanded.
  - The content of the body copy is displayed in full text during the timed display.
  - Authors have the option to use limited functionality of the rich text here and add embedded links like a C044 or C034 component on the Teaser Text.
- The Teaser Target is optional.
  - In place, authors can add a Linked CTA under the Teaser Options. Only one linked CTA can be added.
  - Under the Teaser Options, the author can set the CTA Label to:
    - "No Call-to-Action Button",
    - "Default Call-to-Action Button" in this case "Learn More" CTA shall be displayed,
    - "Custom Call-to-Action Button" or "Custom & Linked Call-to-Action Button" - On any these option, the author can specify the preferred CTA label,
    - "Linked Call-to-Action Button" - the CTA will come from the linked page or component.
- Add the Teaser to the Items list on the C094 Collection
- Repeat this process as many times as needed for each row in the accordion.
For Videos, External links or Download Documents accordion entries, below are the steps.
- Create a Video
  - Add the Video Title - This is the downloadable item label.
  - Video Text - This is currently not in use for display on the accordion.
  - Add the Teaser Title - This auto copies the specified Download Title. The author has the option to edit this label for this accordion entry.
  - Add the Teaser CTA Label - This is the optional CTA Text. It is recommended for Authors to use this to set the CTA label.
  - Teaser Options - This contains the different CTA options authors can choose from. Typically, if authors defined a Teaser CTA Label, this set to "Use Default Call-to-Action Button".
  - Add the Teaser Text - This is the true body copy of the accordion entry. The text here will be displayed even if the Detail Text has different info.
  - Add the Video File - This is where the video URL is added.
  - Add Picture and Other Media - This is the media that will be displayed on the left pane of the C094 component.
  - Teaser Header is not used in this component.
- Create a Download component
  - Add the Download Title - This is the downloadable item label.
  - Detail Text - This is the body copy of the accordion entry. It will be displayed if no content was added on the Teaser Text.
  - Add the Teaser Title - This auto copies the specified Download Title. The author has the option to edit this label for this accordion entry.
  - Add the Teaser CTA Label - This is the optional CTA Text. It is recommended for Authors to use this to set the CTA label.
  - Teaser Options - This contains the different CTA options authors can choose from. Typically, if authors defined a Teaser CTA Label, this set to "Use Default Call-to-Action Button".
  - Add the Teaser Text - This is the true body copy of the accordion entry. The text here will be displayed even if the Detail Text has different info.
  - Add Picture and Other Media - This is the media that will be displayed on the left pane of the C094 component.
  - Add Binary Data - This is where the document for download are added.
  - Teaser Header is not used in this component.
- Add an External Link Component
  - Add the URL - This is the target external URL. The author has the option to enable the "Open to new Tab/Window".
  - Add the Teaser Title - Label of the External Link accordion entry
  - Add the Teaser CTA Label - This is the optional CTA Text. It is recommended for Authors to use this to set the CTA label.
  - Teaser Options - This contains the different CTA options authors can choose from. Typically, if authors defined a Teaser CTA Label, this set to "Use Default Call-to-Action Button".
  - Add Teaser Text - This is the body copy of the accordion entry.
  - Add Picture and Other Media - This is the media that will be displayed on the left pane of theC094 component.
  - 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).