Ornamental background

Accordion - Component Detail

This page serves as a guide to understanding the Accordion component and the options you are given to style the componet and how it functions. 
< BACK TO ALL COMPONENTS

Specifications for the Accordion component

The Accordion component is a vertically stacked list of Subheaders that can be clicked to reveal or hide content associated with them. This gives authors a chance to display a lot of content within a small space using the functionality of the opening and closing of Accordion sections.

Other components can be used within Accordion items including: Tables, Videos, and imagery. 

Specifications for the Accordion component. Headlines, Sub headlines, Accordion items opened and closed, and description content

Authoring Experience: Enhanced Text with CTA

Below are screenshots and authoring notes regarding the authoring of the Accodion component. Authoring notes are found in red text on the screenshots and below images as captions. 

Authoring the Headline, Subheadline, choosing item content types, adding items, and changing the item order
Single item expansion, choosing which items to expand by default, Item Heading Styles, and using unique IDs
Item Properties: Modifying the Headline, Subheadline, Event fields, selecting an expiration date, and adding more Accordion items to edit

Live component examples

For viewing and reference only. Go to the Example Component here to practice authoring.

Accordion

Sub Title

Aliquam auctor quam vitae aliquam sagittis. Nunc id risus suscipit, pharetra eros at, feugiat erat. Maecenas nulla dui, egestas quis pretium commodo, dignissim non elit. Nunc nec lectus sollicitudin, posuere enim a, cursus sapien. Nulla ut porta elit, et varius nibh. Mauris eu orci dolor. Vivamus turpis erat, auctor vitae nulla nec, consectetur hendrerit est. Etiam in malesuada dui. Maecenas placerat ornare finibus. Duis faucibus vitae lectus eget pellentesque. Morbi pharetra blandit tellus, vitae ultrices nibh pretium at. Fusce porta laoreet arcu et lacinia. Cras fringilla enim ut lectus ultrices ornare.

Firstname Lastname Age Firstname Lastname Age Firstname Lastname Age Firstname Lastname Age Firstname Lastname Age
Priya Sharma 24 Priya Sharma 24 Priya Sharma 24 Priya Sharma 24 Priya Sharma 24
Arun Singh 32 Arun Singh 32 Arun Singh 32 Arun Singh 32 Arun Singh 32
Sam Watson 41 Sam Watson 41 Sam Watson 41 Sam Watson 41 Sam Watson 41
Priya Sharma 24 Priya Sharma 24 Priya Sharma 24 Priya Sharma 24 Priya Sharma 24
Arun Singh 32 Arun Singh 32 Arun Singh 32 Arun Singh 32 Arun Singh 32

Table Title
Firstname Lastname Age Firstname Lastname Age Firstname Lastname Age Firstname Lastname Age Firstname Lastname Age
Priya Sharma 24 Priya Sharma 24 Priya Sharma 24 Priya Sharma 24 Priya Sharma 24
Arun Singh 32 Arun Singh 32 Arun Singh 32 Arun Singh 32 Arun Singh 32
Sam Watson 41 Sam Watson 41 Sam Watson 41 Sam Watson 41 Sam Watson 41
Priya Sharma 24 Priya Sharma 24 Priya Sharma 24 Priya Sharma 24 Priya Sharma 24
Arun Singh 32 Arun Singh 32 Arun Singh 32 Arun Singh 32 Arun Singh 32
Overview

Gradient