How to use a Details block

Details blocks help users find important information on a page by hiding more detailed information unless they need it.

This will only be text, and the text cannot be formatted.

How to use a Details block

Consider if you need to add a Details block, as research has shown it might be missed by some users. It may also be difficult for some voice assist software to interact with.

The details link should be used when there is information some users may need that most of your users won’t. For example:

  • explaining what a complex term means
  • explaining why information or actions are needed

This an example of a details block:

Help with nationality
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

The user needs to click on a link to see this information. Make the link text short and descriptive so users can quickly work out if they need to click on it.

How to add a Details block

To add a Details block to your page:

  1. Click the plus (‘+’) button to add a block to your page.
  2. Type ‘details’.
  3. Click the ‘Details’ option.
  4. Add the text you want for your link in the box below the ‘Summary’ heading.
  5. Add the text you want for the hidden information in the box below the ‘Text’ heading.
  6. Click outside the box to confirm your entries.

In this section