Section expander

A section expander is used to truncate one or more sections from a longer combined section of text, images or other suitable information that is not needed to be visible directly for the user.

When and how to use it

Use a Section expander to minimise the length of a long section in a page. This gives us the possibility to present more content if the user chooses to, without leaving the actual context. 

Could be used for showing additional rows in a list instead of relying on a pagination.

If you want to hide a complete section, use an Accordion instead.

Behaviour

Make sure the component follow-up on a context (as oppose to being used stand-alone). 

Note that the arrow is pointing in the direction the content is moving (up or down) and is animated when clicked on.

 

Colours

  • Text: Default link (Dark blue 2), medium
  • Hover: Dark blue 2
  • Arrow: Dark blue 2
  • Line: Grey 8

States