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
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:
- Click the plus (‘+’) button to add a block to your page.
- Type ‘details’.
- Click the ‘Details’ option.
- Add the text you want for your link in the box below the ‘Summary’ heading.
- Add the text you want for the hidden information in the box below the ‘Text’ heading.
- Click outside the box to confirm your entries.