The details component keeps pages easy to scan by showing detailed information only when users choose to view it.

Visual preview and HTML code

When to use this component

Use the details component to make a page easier to scan when it contains information that only some users will need, or information that is not necessarily required to complete the task at hand. 

When not to use this component

Do not use the details component to hide necessary information that most users will need.

Examples of where we have used this component

This component is used on: 

• ASP website 
• Formation

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.