Details

Standard

Default

The default details component reveals more detailed information when the summary is activated.

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Show code

<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 can’t provide your nationality, you’ll have to
    send copies of identity documents through the post.
  </div>
</details>

---
import { Details, DetailsSummary, DetailsText } from "@i-dot-ai-npm/component-library-astro";
---

<Details>
  <DetailsSummary>Help with nationality</DetailsSummary>
  <DetailsText>
    We need to know your nationality so we can work out which elections you’re
    entitled to vote in. If you can’t provide your nationality, you’ll have to
    send copies of identity documents through the post.
  </DetailsText>
</Details>

import { Details, DetailsSummary, DetailsText } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Details>
      <DetailsSummary>Help with nationality</DetailsSummary>
      <DetailsText>
        We need to know your nationality so we can work out which elections you’re
        entitled to vote in. If you can’t provide your nationality, you’ll have to
        send copies of identity documents through the post.
      </DetailsText>
    </Details>
  );
}

<script>
  import { Details, DetailsSummary, DetailsText } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Details>
  <DetailsSummary>Help with nationality</DetailsSummary>
  <DetailsText>
    We need to know your nationality so we can work out which elections you’re
    entitled to vote in. If you can’t provide your nationality, you’ll have to
    send copies of identity documents through the post.
  </DetailsText>
</Details>

import { Details, DetailsSummary, DetailsText } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Details>
      <DetailsSummary>Help with nationality</DetailsSummary>
      <DetailsText>
        We need to know your nationality so we can work out which elections you’re
        entitled to vote in. If you can’t provide your nationality, you’ll have to
        send copies of identity documents through the post.
      </DetailsText>
    </Details>
  );
}

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.