Accordion The accordion is a feature that allows content to be included within hidden subsections - the user can click on each 'pane' to open that section to reveal the content.
  • Use Cases: The Accordion is a feature that allows content to be included within hidden subsections - the user can click on each 'pane' to open that section to reveal the content.
  • Dependencies
    • None required. The Accordion is fully self-contained and does not rely on child items or external data sources.
  • Display: The accordion should display collapsible sections of content, with each section able to be expanded or collapsed. By default the accordion will be collapsed.
  • Pane title left aligned.
  • Panes remain open until closed by the user (they do not open one at a time) - the accordion should have options for allowing multiple sections to be open at the same time, or restricting to only one open section.
  • Up to 3x columns to be allowed within an accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at bibendum leo. Nunc convallis ultricies ultrices. Nullam ligula nisl, luctus in pellentesque sed, tempus at lectus. Cras at augue cursus erat vestibulum faucibus id eget magna. Etiam iaculis id felis id dictum. Ut convallis massa sed gravida pellentesque. Pellentesque massa diam, pretium vel velit eu, eleifend aliquam leo. Nullam at facilisis elit. Aenean consequat dapibus lacus, id rhoncus dui malesuada sed. Aenean et risus erat. Curabitur congue et enim nec maximus. Pellentesque imperdiet arcu a ligula pulvinar molestie. Aenean dictum tincidunt lacinia. In ultrices felis a lorem viverra tincidunt. Quisque faucibus, purus ut ornare hendrerit, augue urna ullamcorper sapien, a vulputate neque massa a nunc. Vivamus nec sapien ac enim scelerisque tincidunt. Proin ac blandit odio. Duis ultricies mattis sem, pulvinar commodo purus tincidunt et. Sed cursus nec lacus quis hendrerit. Cras fermentum orci orci, vitae eleifend sem accumsan eu. Cras consequat finibus lacus, sed molestie nisi posuere sed. Vestibulum sed dui lobortis mi tristique ultricies. Duis eget nisi nec risus eleifend fermentum. Vestibulum et enim vitae elit consequat fringilla eget ac augue. Curabitur augue massa, pellentesque et mi ut, faucibus fermentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique eu eros commodo tristique. Suspendisse tempor, quam eget tempus vulputate, leo libero faucibus eros, quis aliquam odio ligula a tortor. Nam nisl tortor, euismod id lorem id, finibus ullamcorper enim. Donec euismod odio sapien, sit amet tincidunt felis bibendum vel. Curabitur in venenatis nisi. Ut sit amet erat augue. Vivamus non lectus mi. In sodales porta eros, sit amet facilisis erat pellentesque eu. Vivamus a risus et elit viverra pulvinar eu et eros. Nam ac dui eget lorem convallis maximus ultricies nec mauris. In hac habitasse platea dictumst. Donec imperdiet, mi eget aliquet consequat, ex nunc aliquam elit, vel elementum diam elit ac turpis. Vivamus sollicitudin ultricies lorem, eget efficitur magna accumsan ac.
Creating an Accordion
  1. In Content Editor, create an "Accordions Folder" under the "_datasources" of your page
  2. Create a new Accordion item from the Accordion template.
  3. Fill in the required fields
    • Sections Count
    • Sections titles
  4. Fill in optional fields: Is Dark
  5. In Experience Editor, insert the Accordion rendering into the awt-container.
  6. Associate the Accordion item as the data source.

Adding Content Into Sections
  1. In Experience Editor, select the awt-accordion1 placeholder (or another awt-accordion[number] specific for the desired Accordion section) inside the Accordion
  2. Add one of the available renderings: StandfirstArticle, Paragraph, MediaCaption, etc.
  3. Associate the data source item for the selected rendering.
  4. Repeat for more desired renderings
  • Variants: Closed header and Opened header. Use these as visual states or as explicit variants in Figma to preview both appearances.
  • Behavior: Tapping/clicking the header toggles expansion. The disclosure icon updates to reflect state (e.g., chevron rotates).
  • Color: Available in Dark and Default themes; ensure text/icon contrast meets accessibility standards in both.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at bibendum leo. Nunc convallis ultricies ultrices. Nullam ligula nisl, luctus in pellentesque sed, tempus at lectus. Cras at augue cursus erat vestibulum faucibus id eget magna. Etiam iaculis id felis id dictum. Ut convallis massa sed gravida pellentesque. Pellentesque massa diam, pretium vel velit eu, eleifend aliquam leo. Nullam at facilisis elit. Aenean consequat dapibus lacus, id rhoncus dui malesuada sed. Aenean et risus erat. Curabitur congue et enim nec maximus. Pellentesque imperdiet arcu a ligula pulvinar molestie. Aenean dictum tincidunt lacinia. In ultrices felis a lorem viverra tincidunt. Quisque faucibus, purus ut ornare hendrerit, augue urna ullamcorper sapien, a vulputate neque massa a nunc. Vivamus nec sapien ac enim scelerisque tincidunt. Proin ac blandit odio. Duis ultricies mattis sem, pulvinar commodo purus tincidunt et. Sed cursus nec lacus quis hendrerit. Cras fermentum orci orci, vitae eleifend sem accumsan eu. Cras consequat finibus lacus, sed molestie nisi posuere sed. Vestibulum sed dui lobortis mi tristique ultricies. Duis eget nisi nec risus eleifend fermentum. Vestibulum et enim vitae elit consequat fringilla eget ac augue. Curabitur augue massa, pellentesque et mi ut, faucibus fermentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique eu eros commodo tristique. Suspendisse tempor, quam eget tempus vulputate, leo libero faucibus eros, quis aliquam odio ligula a tortor. Nam nisl tortor, euismod id lorem id, finibus ullamcorper enim. Donec euismod odio sapien, sit amet tincidunt felis bibendum vel. Curabitur in venenatis nisi. Ut sit amet erat augue. Vivamus non lectus mi. In sodales porta eros, sit amet facilisis erat pellentesque eu. Vivamus a risus et elit viverra pulvinar eu et eros. Nam ac dui eget lorem convallis maximus ultricies nec mauris. In hac habitasse platea dictumst. Donec imperdiet, mi eget aliquet consequat, ex nunc aliquam elit, vel elementum diam elit ac turpis. Vivamus sollicitudin ultricies lorem, eget efficitur magna accumsan ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at bibendum leo. Nunc convallis ultricies ultrices. Nullam ligula nisl, luctus in pellentesque sed, tempus at lectus. Cras at augue cursus erat vestibulum faucibus id eget magna. Etiam iaculis id felis id dictum. Ut convallis massa sed gravida pellentesque. Pellentesque massa diam, pretium vel velit eu, eleifend aliquam leo. Nullam at facilisis elit. Aenean consequat dapibus lacus, id rhoncus dui malesuada sed. Aenean et risus erat. Curabitur congue et enim nec maximus. Pellentesque imperdiet arcu a ligula pulvinar molestie. Aenean dictum tincidunt lacinia. In ultrices felis a lorem viverra tincidunt. Quisque faucibus, purus ut ornare hendrerit, augue urna ullamcorper sapien, a vulputate neque massa a nunc. Vivamus nec sapien ac enim scelerisque tincidunt. Proin ac blandit odio. Duis ultricies mattis sem, pulvinar commodo purus tincidunt et. Sed cursus nec lacus quis hendrerit. Cras fermentum orci orci, vitae eleifend sem accumsan eu. Cras consequat finibus lacus, sed molestie nisi posuere sed. Vestibulum sed dui lobortis mi tristique ultricies. Duis eget nisi nec risus eleifend fermentum. Vestibulum et enim vitae elit consequat fringilla eget ac augue. Curabitur augue massa, pellentesque et mi ut, faucibus fermentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique eu eros commodo tristique. Suspendisse tempor, quam eget tempus vulputate, leo libero faucibus eros, quis aliquam odio ligula a tortor. Nam nisl tortor, euismod id lorem id, finibus ullamcorper enim. Donec euismod odio sapien, sit amet tincidunt felis bibendum vel. Curabitur in venenatis nisi. Ut sit amet erat augue. Vivamus non lectus mi. In sodales porta eros, sit amet facilisis erat pellentesque eu. Vivamus a risus et elit viverra pulvinar eu et eros. Nam ac dui eget lorem convallis maximus ultricies nec mauris. In hac habitasse platea dictumst. Donec imperdiet, mi eget aliquet consequat, ex nunc aliquam elit, vel elementum diam elit ac turpis. Vivamus sollicitudin ultricies lorem, eget efficitur magna accumsan ac.
  • There are currently no known issues with this component
Original Documentation: Confluence Link Designs: Figma Link Related Documentation: CTA Component, Text Description Card