GOVUK Details

An example of the govuk details component.

Open example in new window

HTML

  <details class="govuk-details" data-module="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>

Jinja

{% from "govuk_frontend_jinja/components/details/macro.html" 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."
}) }}

---

Help improve this page

If you’ve got a question, idea or suggestion share it with the digital land team on github or email us on digitalland@communities.gov.uk