Accordion box

Component checklist

Box

Overview

The accordion is placed in the container.

 

Anatomy

1. Title: contains the section title and is control for revealing the item. Anything from text title to Avatar to link can be placed here. There is also the possibility to place a badge, icon etc..
2. Actions: A place reserved for actions. The maximum number that can be here are 2.
3. Chevron: Indicates if the item is open or closed.
4. Description: Description can be shown in open state or placed in [?] after headline
5. Body: the section of content associated with an accordion title. Any type of content can be placed here

 

Behavior

Triggers

The accordion can be opened both by clicking on the whole box (1) and by clicking on the arrow(2). It is also possible to open the accordion using the toggle (3).

 

Scrollbar

If the user has not started scrolling, the content is aligned without padding just below the box (1). The moment he starts scrolling, a divider (2) appears under the box.

 

Counter

When there is some possibility of adding content inside the body, so if the designer wants, he can show the number of items inside the body in the closed state.

 

Truncation

If there is a text or link in the title, it cannot be two lines. In this case, use a truncation at the end of the text.

 

States

 

Dimensions

 

Examples

Here are interactive examples of the use and behavior of the accordion: