Accordions
The below accordion use case demonstrates the widest width which an accordion component may be assigned. It has been set to be visible on mobile and desktop resolutions, but hidden on tablet sizes (between 768 pixels wide, and 1023 pixels wide).
Corners have automatically been rounded, based on the site-wide branding settings. Individual accordion titles have been set to slide in from the right.
Not all accordions need to take up the same width on screen. In the below case, the accordion component is being displayed at a slightly narrower width.
We are also hiding the ‘shadow’ effect within each pod by setting the Accordion Background Colour to ‘none’.
When individual accordion items are expanded, one can see that the text within them may be formatted (e.g. bold, introduction of sub-headings, and adding of inline-links).
The below accordion has been set to have it’s first accordion item expanded on page load by default. It is also set to display at an even narrower width than the above accordions, whilst also being displayed with a larger heading size, showcasing the level of adaptability of this component type.
The final example being showcased is being displayed at the narrowest width available for this component type.
The accordion item title sizes have also been set to emulate ‘lead paragraphs’.
As a final example of flexibility, while a standard spacing was applied above and beneath each of the above accordion examples (80px top/bottom desktop, 64px top/bottom mobile), the below example showcases different spacing above, and beneath the component on both mobile, as well as desktop resolutions.
Title
Sed hendrerit. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Aenean vulputate eleifend tellus.
- Sed in libero ut nibh placerat accumsan. Morbi ac felis.
- Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
- Vivamus quis mi. Praesent blandit laoreet nibh.
- Donec mollis hendrerit risus. Fusce vel dui.
- Donec posuere vulputate arcu. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.
Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Maecenas nec odio et ante tincidunt tempus. Maecenas vestibulum mollis diam. Cras id dui. Cras sagittis.
Sed a libero. Curabitur turpis. Fusce ac felis sit amet ligula pharetra condimentum. Vivamus quis mi. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.
Ok.
Fourth answer