Components

Details

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

<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">
    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.
  </div>
</details>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
summaryText string Required. If summmaryHtml is set, this is not required. Text to use within the summary element (the visible part of the details element). If summaryHtml is provided, the summaryText argument will be ignored.
summaryHtml string Required. If summmaryText is set, this is not required. HTML to use within the summary element (the visible part of the details element). If summaryHtml is provided, the summaryText argument will be ignored.
text string Required. If html is set, this is not required. Text to use within the disclosed part of the details element. If html is provided, the text argument will be ignored.
html string Required. If text is set, this is not required. HTML to use within the disclosed part of the details element. If html is provided, the text argument will be ignored.
id string Id to add to the details element.
open boolean If true, details element will be expanded.
classes string Classes to add to the <details> element.
attributes object HTML attributes (for example data attributes) to add to the <details> element.
{% from "details/macro.njk" import govukDetails %}

{{ govukDetails({
  summaryText: "Help with nationality",
  text: "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."
}) }}

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.

How it works

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

There are 2 ways to use the details component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

<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">
    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.
  </div>
</details>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
summaryText string Required. If summmaryHtml is set, this is not required. Text to use within the summary element (the visible part of the details element). If summaryHtml is provided, the summaryText argument will be ignored.
summaryHtml string Required. If summmaryText is set, this is not required. HTML to use within the summary element (the visible part of the details element). If summaryHtml is provided, the summaryText argument will be ignored.
text string Required. If html is set, this is not required. Text to use within the disclosed part of the details element. If html is provided, the text argument will be ignored.
html string Required. If text is set, this is not required. HTML to use within the disclosed part of the details element. If html is provided, the text argument will be ignored.
id string Id to add to the details element.
open boolean If true, details element will be expanded.
classes string Classes to add to the <details> element.
attributes object HTML attributes (for example data attributes) to add to the <details> element.
{% from "details/macro.njk" import govukDetails %}

{{ govukDetails({
  summaryText: "Help with nationality",
  text: "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."
}) }}

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

Research on this component

If you’ve used this component, get in touch to share your user research findings.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Details’ on GitHub