Use the details component to make a page easier to read by condensing information that is only needed by some users.
When to use this component
The details component can be used to condense a single block of content into a selectable heading, allowing the user to reveal it if they need it.
Good uses of the component are:
- to reveal additional help at the point where a user may need it, for example, to help answer a question
- to reveal information only needed by a first-time user
- to show the definition of a term that may not be well understood
When not to use this component
Do not use the details component to hide information that most of your users will need to progress with their task.
If you need to use more than one details component together on a page, use an accordion.
If users need to be able to quickly switch between blocks of closely related content, use tabs.
How to use this component
Use an appropriate heading tag (h2, h3 etc) for the
titleTag to provide the correct semantic hierarchy to the document with the rest of the page. The default is
titleTag is not provided.
Use a clear label
The details component hides content so make sure your heading is clear so the user doesn’t need to work hard to understand if they need to expand it.
Optionally pass event tracking
data attributes for Google Analytics using:
Details component with save state enabled
Use this when you need to include a link or call to action within a details component that does not open in a new window.
This will make sure that the component remains expanded if the user returns to the page using the back button in their browser.
Nesting other components in a details component
You can use other components inside of the details component.
An example of this is the details component with a warning panel:
Do not use this for content that is important to every user
Only use a warning panel inside of a details component to warn users about something that it is only relevant to those that have opened the details component.