Accordion Component

Organize Less-Important Content

The accordion is a vertically stacked list of expandable sections. Each section has a label (the header) that expands to reveal additional information when clicked. Inside the expanded area, editors can include full Rich Text formatting, media, or call-to-action (CTA) buttons. 

Accordions are useful for saving space on a page and giving visitors control over which details they want to view. 

Minimum Fields 

• Background Color: Denim or Jade 
• Headline 
• Accordion List Items: At least 2 items required 
• Accordion Label: Header text for each expandable item 
• Body: Expanded area containing text, media, or layout components 

Character Limits 

• Headline: 35 characters 
• Description: 200 characters
• Accordion Label: 35 characters 

Usage Guidelines 

• Best Use Cases: Accordions work well for secondary details that not all visitors need immediately. 
• Content Style: Keep body text concise and scannable. Use bulleted lists, numbered lists, or brief text when possible. 
• Frequency of Use: Use accordions sparingly, since hidden text is harder to skim. 
• SEO Considerations: Accordion labels remain visible at all times, so include keywords that prospective students are likely to search for (e.g., “Application Deadlines” instead of “More Info”). 

Variation Examples