C094 - Timed Accordion with Image

The C094 Timed Accordion with Image component allows authors to pair an image and content in accordion format with timed transition and animation. Each accordion item has expandable / collapsible drawers when displayed. The recommended number of accordion items are around 3 to 8 items.

The timed transition and animation display is approximately 16 seconds. The time for each accordion to expand or collapse is around 0.4 seconds or 400 ms and this function stops when a user manually expands any item on the accordion. The timed accordion only resumes when the page is refreshed.

Optional features are also available as described in the samples. CTA samples provided include a Page, External Link, Video or Document Download.  


data (7)
data (6)
data (6)
data
data (4)
data (3)
Emerson™ Wirelss 775 THUM™ Adapter
data (2)
This is the optional eyebrow.

This is the main headline of the C094 Timed Accordion with Image. There is no limit on the character length display. However, it is recommended to display maximum of eight (8) lines.

This is the optional Body Copy of the component. The content is displayed in full text.

Authors also have the option to disable or add a CTA as well as modify the Call-to-Action Label.

Other optional features that can be modified by the author include the background color or 'backgroundToggle'.

Unlike in C057 Accordion, the 'readMoreDisplayed' functionality and 'enableFAQSchema' are not configured for this component. 

Accordion Item 1 - No CTA

This is the optional body copy that describes the accordion content and/or image. No Call-to-Action set for this sample. 

data (7)
Accordion Item 2

This sample has no Teaser Target and no Linked CTA.

Authors have the option to add an internal page that opens up to a new page or embed a C044 or C034 component on the Teaser Text to allow for greater use of the rich text editor formatting. Sample  Link

Branson-COVID-19-face-masks

Branson-COVID-19-face-masks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas scelerisque pharetra. Sed vestibulum blandit neque, quis elementum libero mollis nec. Ut eget tempus dui. Sed at dignissim nisi, nec tempus mi. In dapibus pellentesque purus sit amet pretium. Suspendisse potenti. Nam congue orci sed cursus interdum.

Learn More

Watch Video

View the On Style Guide

Download Document



data (6)
Accordion Item 3

This sample has no Teaser Target but has a Linked CTA. Only one linked CTA can be added to the accordion's Teaser Options. The CTA Label will come from the linked page.

Authors have also the option to add an internal page that opens up to a new page or embed a C044 or C034 component on the Teaser Text to allow for greater use of the rich text editor formatting. 

data (6)
Accordion Item 4

This sample has a page set as Teaser Target and set to use "Default Call-To-Action Label" which is "Learn More".  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget. Interdum et malesuada fames ac ante ipsum primis in. Eget nulla facilisi etiam dignissim. Eu augue ut lectus arcu bibendum. Leo duis ut diam quam nulla porttitor. In fermentum posuere urna nec tincidunt praesent semper feugiat. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget. Interdum et malesuada fames ac ante ipsum primis in. Eget nulla facilisi etiam dignissim. Eu augue ut lectus arcu bibendum. Leo duis ut diam quam nulla porttitor. In fermentum posuere urna nec tincidunt praesent semper feugiat. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis.

data
Accordion Item with Video Link

Helping you extend the life of your plant by supplying trained personnel and genuine OEM parts. 

data (4)
Accordion Item with Download Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

data (3)
Accordion Item with External Link

The CTA text was set on the "Teaser CTA Label and under the Teaser Options, this sample was set to "Use Default Call-to-Action Label".

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Nec dui nunc mattis enim ut tellus elementum. Convallis posuere morbi leo urna molestie. Nec nam aliquam sem et tortor consequat.  Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.

Emerson™ Wirelss 775 THUM™ Adapter
Accordion Item with Teaser Target & Linked CTA sample

On this sample, a Teaser Target was added,

The 'Use both Custom & Linked Call-to-Action Label" was selected where the "Parent Regression Page" was defined as custom CTA label and the Accordion Item with External Link 2 was added.

Notice that the attached link differs from the Teaser Target. In this case, when the CTA is clicked, it will open up to the Linked CTA instead of the ZZ Parent Regression Page. (To be verified by Ferdinand if the behavior is correct).

data (2)
Bettis RTS FL Fail-Safe Linear Electric Valve Actuator
Bettis GVO-C Series Hydraulic Valve Actuator
Bettis PressureGuard Linear Wellhead Hydraulic Protection System
How it works

Simulate Accurate and real-time plant behaviors

Choose the complexity of the model and scale it as necessary through the lifecycle of the plant.

Improve Plant Performance

Dynamic simulation can be used to test new control design ideas to make sure there are no adverse effects, as well as train your operators to better handle usual or unusual situations.

Bettis RTS FL Fail-Safe Linear Electric Valve Actuator
Reinforce Safety Procedures

Dynamic simulation can be used to test new control design ideas to make sure there are no adverse effects, as well as train your operators to better handle usual or unusual situations.

Bettis GVO-C Series Hydraulic Valve Actuator
Reduce Project Risk

Dynamic simulation can be used to test new control design ideas to make sure there are no adverse effects, as well as train your operators to better handle usual or unusual situations.

Bettis PressureGuard Linear Wellhead Hydraulic Protection System
data (4)
data
Emerson™ Wirelss 775 THUM™ Adapter
data (1)
data (3)
data (2)

C094 with 4-Line Heading. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget. Interdum et malesuada fames ac ante ipsum primis in.

Accordion Item with Video Link

Helping you extend the life of your plant by supplying trained personnel and genuine OEM parts. 

data (4)
Accordion Item 1

1 Optional Body copy. Lorem ipsum dolor sit amet.

data
Accordion Item with External Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Nec dui nunc mattis enim ut tellus elementum. Convallis posuere morbi leo urna molestie. Nec nam aliquam sem et tortor consequat.  Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.

Emerson™ Wirelss 775 THUM™ Adapter
Accordion Item 2

2 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (1)
Accordion Item with Download Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

data (3)
Accordion Item 3

3 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (2)
data (2)
data (3)
Emerson™ Wirelss 775 THUM™ Adapter
data
data (1)
data (4)

C094 with 8-Line Heading & Grey Background Color. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Ultricies mi eget mauris pharetra et ultrices neque ornare vivamus at augue eget.

Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget. Interdum et malesuada fames ac ante ipsum primis in. Eget nulla facilisi etiam dignissim. Eu augue ut lectus arcu bibendum. Leo duis ut diam quam nulla porttitor. In fermentum posuere urna nec tincidunt praesent semper feugiat. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis.

Accordion Item 3

3 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (2)
Accordion Item with Download Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

data (3)
Accordion Item with External Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Nec dui nunc mattis enim ut tellus elementum. Convallis posuere morbi leo urna molestie. Nec nam aliquam sem et tortor consequat.  Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.

Emerson™ Wirelss 775 THUM™ Adapter
Accordion Item 1

1 Optional Body copy. Lorem ipsum dolor sit amet.

data
Accordion Item 2

2 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (1)
Accordion Item with Video Link

Helping you extend the life of your plant by supplying trained personnel and genuine OEM parts. 

data (4)
data (9)
data (11)
Optional Eyebrow Label Lorem ipsum

C094 with Grey Alt Background.

Accordion Item 7

7 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (9)
Accordion Item 8

8 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (11)
Emerson™ Wirelss 775 THUM™ Adapter
data (3)
data (4)
data
data (1)
data (2)
data (6)
data (7)
data (8)

H2 Heading Lorem Ipsum

Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Accordion Item with External Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Nec dui nunc mattis enim ut tellus elementum. Convallis posuere morbi leo urna molestie. Nec nam aliquam sem et tortor consequat.  Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.

Emerson™ Wirelss 775 THUM™ Adapter
Accordion Item with Download Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

data (3)
Accordion Item with Video Link

Helping you extend the life of your plant by supplying trained personnel and genuine OEM parts. 

data (4)
Accordion Item 1

1 Optional Body copy. Lorem ipsum dolor sit amet.

data
Accordion Item 2

2 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (1)
Accordion Item 3

3 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (2)
Accordion Item 4
data (6)
Accordion Item 5

5 Optional Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet vel leo vulputate tristique. Nunc consectetur tempus ligula, nec auctor enim pharetra eget.

data (7)
Accordion Item 6
data (8)
Please enable JavaScript to use this website.