Components

Details

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

Help with nationality

We need to know your nationality so we can work out which elections you\u2019re entitled to vote in. If you cannot provide your nationality, you\u2019ll have to send copies of identity documents through the post.

Rendering...
Rendering...
Props
NameTypeDefaultDescription

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.

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 details component is a short link that expands into more detailed help text when a user clicks on it.

Help with nationality

We need to know your nationality so we can work out which elections you\u2019re entitled to vote in. If you cannot provide your nationality, you\u2019ll have to send copies of identity documents through the post.

Rendering...
Rendering...

Write clear link text

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