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.

HTML
React

<details class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Help with nationality
    </span>
  </summary>
  <div class="govuk-details__text">
    <p>
      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.
    </p>
  </div>
</details>

<Details summary="Help with nationality">
  <p>
    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.
  </p>
</Details>

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element

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

HTML
React

<details class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Help with nationality
    </span>
  </summary>
  <div class="govuk-details__text">
    <p>
      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.
    </p>
  </div>
</details>

<Details summary="Help with nationality">
  <p>
    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.
  </p>
</Details>

Write clear link text

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