P007 Half-Width Accordion w/ Promos
The example below shows how to incorporate an accordion feature in your text body with promo boxes. This is built by creating a collection as the container for your component with the P007 layout variant. In the Items of the P007 you first add a collection with the C057 layout variant for the accordion, then add two teasers with the layout variant of C058 for the promos. Refer to the C057 regression page and content authors' page for info on the accordion.
There are two versions shown below. The first is the simplest to author where all accordions are collapsed on load. The second example is where an author has specifically chosen accordions to be open on load. A local setting is used on the C057 component to define which accordions are open by default.
Reliable Flow Solutions Across Many Applications
The P007 Half Width Accordion with Promos - Read More Test
Test 1 - The title of the P007 comes from the C057 Accordion Collection Teaser Tile and this text comes from the C057 Accordion Collection Teaser Text. There is no text used in the P007 Collection itself. This paragraph needs to be longer so I can see the "Read More" display. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link to the Online Style Guide.
- Paragraph two.
Here is the text that shows when you expand the accordion.
Here is the text that shows when you expand the accordion. Note, the text can be any length you wish. It can also have links to other content as with any component that uses teaser text as body content.
Here is the text that shows when you expand the accordion. Note, the text can be any length you wish. It can also have links to other content as with any component that uses teaser text as body content.
Reliable Flow Solutions Across Many Applications
The P007 Half Width Accordion with Promos
Test 1 - The title of the P007 comes from the C057 Accordion Collection Teaser Tile. Link to the Online Style Guide.
Here is the text that shows when you expand the accordion.
Here is the text that shows when you expand the accordion. Note, the text can be any length you wish. It can also have links to other content as with any component that uses teaser text as body content.
Here is the text that shows when you expand the accordion. Note, the text can be any length you wish. It can also have links to other content as with any component that uses teaser text as body content.
Reliable Flow Solutions Across Many Applications
The P007 Half Width Accordion with Promos - No Read More CTA Test
Test 2 - The title of the P007 comes from the C057 Accordion Collection Teaser Tile and this text comes from the C057 Accordion Collection Teaser Text. There is no text used in the P007 Collection itself. This will make the paragraph longer than three rows. The Read More CTA should not be visible here because currently this is turned off on this collection through local settings.
Here is the text that shows when you expand the accordion.
Here is the text that shows when you expand the accordion. Note, the text can be any length you wish. It can also have links to other content as with any component that uses teaser text as body content.
Here is the text that shows when you expand the accordion. Note, the text can be any length you wish. It can also have links to other content as with any component that uses teaser text as body content.
Reliable Flow Solutions Across Many Applications
The P007 Half Width Accordion with Promos - Read More Test
Test 1 - The title of the P007 comes from the C057 Accordion Collection Teaser Tile and this text comes from the C057 Accordion Collection Teaser Text. There is no text used in the P007 Collection itself. This paragraph needs to be longer so I can see the "Read More" display. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link to the Online Style Guide.
- Paragraph two.
Here is the text that shows when you expand the accordion.
Here is the text that shows when you expand the accordion. Note, the text can be any length you wish. It can also have links to other content as with any component that uses teaser text as body content.
Here is the text that shows when you expand the accordion. Note, the text can be any length you wish. It can also have links to other content as with any component that uses teaser text as body content.
