Overview

Expandable Cards are components equipped with a chevron that functions like a toggle that can show or hide contained content. Additionally, the component has an optional description that remains visible whether the card is expanded or collapsed. For more general content guidelines, visit our Card guidelines.

Anatomy

Basic Usage

How to use this component

Padding

Make sure to maintain consistent padding around the card. We suggest using a 24px padding.

Content

The choice between an Expandable Card and a regular Card should align with the specific requirements of the content and the desired user interaction patterns within your design system.

For example, an Expandable Card is useful when screen real estate is limited, and you want to prioritize a cleaner and more condensed layout. Users can expand the card to access more information as needed. This is ideal for scenarios where user interactions involve exploring additional details step by step, maintaining a more focused and streamlined initial view. On the other hand, a regular Card is appropriate when there is enough space on the interface, and displaying the full content does not compromise the overall design.