# Details

The details component is a collapsible section that helps organize and hide content until needed.


## Overview

### Usage

Details provide similar semantics and functionality as the native `<details>` html element, including the ability to connect several details together to form an accordion.

Accordions or single details components are commonly used to manage dense information in interfaces like FAQs, settings panels, or forms. Saving space, reducing cognitive overload, and improving scannability while maintaining a clean, organized layout.

Use it when presenting large amounts of secondary or optional information that users don’t need to see all at once.

### Size

The details component comes in two sizes:

*   **Large** (default)
    
*   **Small**

### Do's and don'ts
