Collapse

Usage

A collapse is a content area commonly used to organize related information that can be collapsed and expanded. It can be triggered by just a heading or a more complex content snippet.

Best practices

Do

Use it to make pages shorter, and reduce scroll if the content is not crucial for the interaction.

Don't

Do not nest them. Having several components that hide information nested can resolve into a very tedious experience.

Do

Use it when the users need to see more than one section at a time

Don't

Do not use them if the user needs to switch quickly between sections as the other sections might be pushed down. Use tabs instead.

Examples

Live Preview

Props

Fetching props...

Slots

Fetching slots...

Events

Fetching events...