Expandables help you hide content that does not necessarily need to be shown at first sight. This guide explains how to use them.

  • Usage
  • Examples
  • Related Component
  • Download



Accordions can initially be collapsed, partly or fully opened. They have a chevron on the side which indicates that the user can see more content by clicking on it. This works either as a single icon or a button with an icon. Additionally, the chevron icon can be replaced by a button with text inside that contains the action – in this case “Show more” and “Show less”.


Fading content

A small part of the information can be shown with the fading content component. It gives the user a little bit of information (this can be text, images, etc.) and can easily be expanded with the “Show more” text button.

Expandable images

If you don’t want to show all the images in a large image gallery at once, use a collapsible and expandable image view.


Related Component


If you download any document, you accept our Terms and Conditions.

Sketch UI Library
85.98 MB