Accordion
An accordion is a vertically stacked list of text headers that can be expanded one at a time to reveal more information. Within the body text for each list item, full WYSIWYG text and media formatting is supported, including CTA buttons if desired.
Parameters
Minimum recommended fields
- Headline
- Accordion List Items: Minimum of 2 list items
- Accordion Label: This is the label for each expandable list item
- Body: This is the expanded area within each list item
Recommended character limits
- Eyebrow: Maximum of 20 characters
- Headline: Maximum of 25 characters
- Description: Maximum of 200 characters
- CTA Link Text: Maximum of 25 characters
- Accordion Label: Maximum of 35 characters
Template availability
- Full-width
- Two-column
- Post
Use Cases
Accordions can save space on a page when providing additional information that only some site visitors may be interested in. Body text should be concise, clear and scannable; use bulleted and numbered lists when applicable. Ideally the contents inside an open accordion list item all fit within the mobile viewport.
optional eyebrow
Accordion Headline
Optional description, 200 characters maximum. Maecenas tincidunt urna a porta lobortis. Aliquam sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit.
Optional description, 200 characters maximum. Maecenas tincidunt urna a porta lobortis. Aliquam sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit.
Semper vendor vivamus consectetur eiusmod. Tellus. Nisi porttitor. Elementum vivamus elementum aenean sed vivamus. Aenean consectetur ipsum leo. Sit tellus porttitor. Eiusmod ipsum consectetur. Ipsum semper nisi. Eiusmod. Vendor porttitor. Elit eiusmod sed lorem elit. Leo ipsum porttitor elementum ipsum. Tellus elementum nisi sed elementum nisi porttitor lorem. Vendor elit porttitor elementum elit consectetur. Nisi. Aenean. Vendor semper sed lorem nisi porttitor vivamus dolor. Elementum sed semper tellus sed dolor. Vivamus consectetur dolor sit elementum sed leo. Lorem porttitor ipsum. Porttitor sed dolor lorem tellus sed eiusmod dolor. Nisi vivamus. Elit porttitor eiusmod tellus sed nisi ipsum vivamus semper. Tellus.
Semper vendor vivamus consectetur eiusmod. Tellus. Nisi porttitor. Elementum vivamus elementum aenean sed vivamus. Aenean consectetur ipsum leo. Sit tellus porttitor. Eiusmod ipsum consectetur. Ipsum semper nisi. Eiusmod. Vendor porttitor. Elit eiusmod sed lorem elit. Leo ipsum porttitor elementum ipsum. Tellus elementum nisi sed elementum nisi porttitor lorem. Vendor elit porttitor elementum elit consectetur. Nisi. Aenean. Vendor semper sed lorem nisi porttitor vivamus dolor. Elementum sed semper tellus sed dolor. Vivamus consectetur dolor sit elementum sed leo. Lorem porttitor ipsum. Porttitor sed dolor lorem tellus sed eiusmod dolor. Nisi vivamus. Elit porttitor eiusmod tellus sed nisi ipsum vivamus semper. Tellus.