Accordion

Accordions organize large amounts of content without adding too much scroll depth to a single page.

Usage

Organize a large amount of content to open/close in content areas. The first accordion can be either open/closed depending on the desired result.

There are two levels of accordions, primary & secondary. The primary, blue, accordions are the default. The secondary, white, are optional and only to be used when multi-content belongs under a primary accordion.

Best use

FAQ lists
Links to Webinars (lists of webinars by discipline etc)
Links to Resources (whitepapers, use cases etc).

Character Counts

Headline 60-80 Characters
Body Varies

Anatomy

Header
Primary accordion
Secondary accordion
Body text