Skip to main content
FCDO Design System
Components

Details

Contents

Show more information
The Details component provides a toggleable section that users can click to expand and view more information. This helps keep pages clean and focused, especially when dealing with complex or optional content. 
                    
<details class="govuk-details">
    <summary class="govuk-details__summary fcdo-details__summary">
        <span class="govuk-details__summary-text">Show more information</span>
    </summary>
    <div class="govuk-details__text">
        The Details component provides a toggleable section that users can click to expand and view more information. This helps keep pages clean and focused, especially when dealing with complex or optional content.
    </div>
</details>

Component Information

Make a page easier to scan by letting users reveal more detailed information only if they need it.