Accordions
The accordion component is a way to simplify visual presentation of a large amount of related content giving users a easy way to scan and dive deeper into a section of interest. They should be used in an area of the page starts to focus more on details. Accordions shouldn't be used to express big ideas or major areas of focus.
The titles in each of the sections should be related to the overarching accordion, they also can be a progressive list (i.e. steps in a process). However the accordion should be kept to a maximum of seven titles as users tend to skip sections longer than 5-7 items.
Publishing? View the DCR guidebook for detailed instructions.
-
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
Rules and recommendations
| Accordion |
|---|
| A: Accordion title: • Recommend keeping to 1 line, but can wrap to two lines. Character count: ~120* B: Expanded content: • Please keep this clear and concise, and limit the content to one / two short paragraphs max • Text links should be kept to a minimum and can only be used in the expanded content area. |
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release |