Marketing and Communications

• User can control display of section content by clicking "+" or "-" or by clicking "Expand All" or "Collapse All" at the top of the accordion
• When activated, expandable section visually changes to indicate interactivity or clickability
• User can click anywhere in the title area or click the "+" sign to open a section, or click "Expand All" at the top of the accordion to open all sections
• User can click anywhere in opened section's title area or click the "-" sign to collapse, or click "Collapse All" at the top of the accordion to close all open sections
• Content sections can be added, moved up or down, and deleted
• Use anchors to link to a specific, opened section of content

• To label accordions, use a Heading 3 to preserve correct heading order.
• Add groups of content items, each of which includes a label and related content:
  • Accordion label should be short and concise for best readability. Accordion labels cannot be linking text.
  • Accordion content supports paragraphs, inline links (including to other pages in the CMS), bullets and other inline styling.
• Content labels cannot be linked.
• Add only supported types of content to avoid breaking the component’s responsiveness and accessibility. Images or other kinds of HTML-created content are not supported by the component.

 

• Use accordions for detailed or secondary content. Information critical to the site user should be in the main content region; not hidden behind a click.
• Don’t overuse accordions on landing pages

Pellentesque sodales risus eu mollis posuere. In pellentesque sodales placerat. Nulla sit amet euismod tellus, vel aliquam risus.

• Nullam quis mauris scelerisque
• Bibendum nulla non
• Blandit purus

Pellentesque

Pellentesque sodales risus eu mollis posuere. In pellentesque sodales placerat. Nulla sit amet euismod tellus, vel aliquam risus.

• Nullam quis mauris scelerisque
• Bibendum nulla non
• Blandit purus

Bibendum

Pellentesque sodales risus eu mollis posuere. In pellentesque sodales placerat. Nulla sit amet euismod tellus, vel aliquam risus.

• Nullam quis mauris scelerisque
• Bibendum nulla non
• Blandit purus

Cras a ante vitae quam rutrum congue. Donec eu est massa. Donec congue nisl eget malesuada eleifend. Suspendisse eget justo non sem mattis tincidunt congue ac elit. Vivamus ornare, ex a aliquam pharetra, ipsum tortor volutpat augue, sed suscipit arcu orci eu magna. Vestibulum nec nisl porta eros dapibus ullamcorper eu eget nibh. Nunc quis feugiat massa, eu pharetra eros. Cras eu velit nec lacus bibendum egestas quis sit amet erat. Suspendisse erat odio, placerat eu odio vitae, aliquet sollicitudin tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed pharetra lacus.

Praesent facilisis convallis placerat. Nullam dignissim pellentesque pharetra. Ut in nibh quis libero pulvinar porttitor sit amet vel urna. Curabitur fringilla magna sed tellus sollicitudin pharetra. Nullam iaculis dolor at placerat mollis. Vestibulum maximus quam lorem, lobortis rhoncus augue ultricies commodo. Fusce vestibulum, dolor ac feugiat tristique, magna mi ultrices ante, eget faucibus nibh nisl ut nisi. Etiam facilisis eu augue vel aliquet. Proin quis mattis metus. Maecenas a ex et metus suscipit rutrum tempus nec purus. Quisque ut rhoncus urna. Pellentesque malesuada convallis leo, in maximus nunc rutrum quis. Pellentesque massa nisi, tempus ac pharetra non, viverra sed leo. Aenean quis pretium dolor, aliquet finibus odio.

Integer vitae felis mauris. Maecenas aliquam gravida ipsum et venenatis. Sed et gravida sem, ac hendrerit purus. Integer vel dui id ligula feugiat efficitur. Nullam eget massa varius, porta libero eu, consectetur felis. Phasellus dapibus ante eu est tincidunt pretium. Sed lobortis elit vel odio sodales semper. Nam consequat nisl at ligula gravida, ac tempor orci commodo. Sed dictum turpis augue, a scelerisque nisi facilisis at. Nunc convallis augue volutpat hendrerit tincidunt. Nullam quis mauris scelerisque, bibendum nulla non, blandit purus. Integer semper lectus nulla, eget mollis tellus gravida vel. Sed sed leo orci. Pellentesque ullamcorper non mauris vel sollicitudin. In nisi augue, interdum sed turpis vitae, rutrum ornare est. Vivamus lobortis odio a sem eleifend fermentum.