Accordion with image
The Accordion with image is a variant of the Accordion component. Each item can be expanded to reveal more information and a corresponding image. This component can either be used for Content purposes, or can have the optional CTA applied for Discoverability.
Accordion title
Body. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Body. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quis aute iure reprehenderit in voluptate velit esse cillum.
Body. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quis aute iure reprehenderit in voluptate velit esse cillum.
When to use
You should use this component when you want to give your website visitors a wealth of information, but do not want to make your page overwhelmingly long, or direct users away from the current page. You should use this component to group together bitesize pieces of similar content.
How to use
Main considerations when using this component:
- The text content should be 'bitesize'. Too many words or too many accordion items can stretch the component so it is unsightly, or create an overwhelming experience for our users. The recommended character count and number of accordion items is very important.
- Select imagery that relates clearly to the messaging of the accordion item.
Additional considerations
- Recommended number of items in accordion: 3 - 5 items (max. 7)
- Recommended accordion title length: 20 - 40 characters (max. 50)
- Recommended accordion item main text length: 25 - 50 characters (max. 70)
- Recommended accordion item body text length: 110 - 325 characters (text will be limited to max. 325 characters)
- Recommended image size: 562 x 562 pixels (1:1 ratio)
- Optional CTA Button field will always display as CTA Text with Arrow appearance for this component
CMS name
- Content: Accordion (Accordion with image)
Examples
See this component in use:
Strategy
Brand category page
