Components

Expandables

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

Usage
  • Usage
  • Examples
  • Related Component
  • Download

Usage

Accordion

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.

Examples

Related Component

Download

Sketch UI Library