---
title: Details · Cloudflare Style Guide
description: When you want to provide additional information in context, but you
  do not want it to clutter up the more important content, use <Details> to add
  a collapsible container.
lastUpdated: 2025-08-15T14:02:15.000Z
chatbotDeprioritize: true
source_url:
  html: https://developers.cloudflare.com/style-guide/components/details/
  md: https://developers.cloudflare.com/style-guide/components/details/index.md
---

When you want to provide additional information in context, but you do not want it to clutter up the more important content, use `<Details>` to add a collapsible container.

You can specify the default configuration of each instance of the `<Details>` component (that is, whether it is open or closed by default).

## Properties

* `header` string required

* `id` string optional

  Adds a specific `id` to the HTML element

* `open` boolean optional
