--- description: Create collapsible content sections. title: Details image: https://developers.cloudflare.com/style-guide/build-the-page/components/details/og.png?v=7ffc600915f91c07 --- [Skip to content](#main-content) > Documentation Index > Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt > Use this file to discover all available pages before exploring further. # Details Last updated Aug 20, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/details/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/) The `Details` component is used `1011` times on `348` pages.

See all examples of pages that use Details

When you want to provide additional information in context, but you do not want it to clutter up the more important content, use `

` to add a collapsible container. ```mdx import { Details } from "~/components";

Hello, world!

``` You can specify the default configuration of each instance of the `

` component (that is, whether it is open or closed by default). ```mdx import { Details } from "~/components";

Long piece of code example.

``` ## Additional guidance The primary answer or core instruction should always appear in the main content flow, not exclusively inside a tab or collapsible section. Use tabs for platform-specific variations (for example, Dashboard versus API versus Terraform) only after stating the general concept. Use Details for supplementary information, not for the primary answer. ## Properties - `header` `string` required - `id` `string` optional Adds a specific `id` to the HTML element - `open` `boolean` optional Was this helpful? YesNo ## On this page [![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/) ```json {"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/details/#page","headline":"Details","description":"Create collapsible content sections.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/details/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/details/og.png?v=7ffc600915f91c07","dateModified":"2026-08-20","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}} ```