Expanding section

This allows for more in-depth content to those who are interested in it, without making the initial page unnecessarily long.

Overview

 

This component is perfect for including supplementary or ‘deep-dive’ content – content that isn’t crucial to the purpose of the page, but that some users may want/need to know.

It’s a great way of keeping your pages short and scannable while still offering detail.

This approach caters really well to both our ‘Susan’ persona (who is time-poor) and our ‘Trevor’ persona (who is interested in in-depth detail).

Each expanding section has a short title and synopsis, which offer value in and of themselves by summarising the content which is contained within the panel. Those that are interested to read more, they can choose to expand the panel without needing to leave the page they’re on.

Mandatory elements

  • Title*: 35 characters max

  • Synopsis*: 20 words / 110 characters

*These both need to offer value to the audience even if someone chooses not to expand the panel.

Optional elements

  • Bullet-points

  • Image

  • Hyperlink

Available colours

There are 5 colour variants available:

  • Blue

  • Green

  • Orange

  • Pink

  • Purple

Don’t repeat the same colour panel on any given page. Make sure all instances of the panel are different colours.

Privacy Policy

This website uses cookies to ensure you get the best experience on our website.