Details

Make it easier for the users to scan the page, by letting them reveal more detailed information only if they need it.

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.

When not to use this component

Do not use the details component to hide information that the majority of your users will need.

Warning

Details work best for simple content and links. Do not use it to split up or hide a series of questions. Use separate pages instead. See the structuring a service pattern for more information.

Decide between using details, accordions and tabs

Details, accordions, and tabs all hide sections of content which a user can choose to reveal.

Use the details component instead of tabs or an accordion if you only have 1 section of content.

The details component is less visually prominent than tabs and accordions, so tends to work better for content which is not as important to users.

How it works

The component should only exist in the main section.

The details component is a short link that shows more detailed help text when a user clicks on it.

Make the link text short and descriptive so users can quickly work out if they need to click on it.

You can use the HTML below to create a select component.

Example

How to control cookies

You can delete all cookies that are already on your computer and you can set most browsers to prevent them from being placed. If you do this, however, you may have to manually adjust some preferences every time you visit a site and some services and functionalities may not work.

HTML code

<details class="govcy-details">
    <summary class="govcy-details__summary">
        <span class="govcy-details__summary-text">How to control cookies</span>
    </summary>
    <p class="govcy-details__text">
        You can delete all cookies that are already on your computer and you can set most browsers to prevent them from being placed. If you do this, however, you may have to manually adjust some preferences every time you visit a site and some services and functionalities may not work.
    </p>
</details>

Write clear link text