Details examples

• # default

  Open this example in a new tab

  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.

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

  
  {% from "govuk/components/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 can’t provide your nationality, you’ll have to send copies of identity documents through the post."
  }) }}
          

• # expanded

  Open this example in a new tab

  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.

  {
    "id": "help-with-nationality",
    "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 can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
    "open": true
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "id": "help-with-nationality",
    "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 can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
    "open": true
  }) }}
          

• # id

  Open this example in a new tab

  Expand this section

  Here are some more details

  {
    "id": "my-details-element",
    "summaryText": "Expand this section",
    "text": "Here are some more details"
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "id": "my-details-element",
    "summaryText": "Expand this section",
    "text": "Here are some more details"
  }) }}
          

• # html as text

  Open this example in a new tab

  Expand this section

  More about the greater than symbol (>)

  {
    "summaryText": "Expand this section",
    "text": "More about the greater than symbol (>)"
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "summaryText": "Expand this section",
    "text": "More about the greater than symbol (>)"
  }) }}
          

• # html

  Open this example in a new tab

  Expand this section

  More about bold text

  {
    "summaryText": "Expand this section",
    "html": "More about <b>bold text</b>"
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "summaryText": "Expand this section",
    "html": "More about <b>bold text</b>"
  }) }}
          

• # summary html as text

  Open this example in a new tab

  The greater than symbol (>) is the best

  Here are some more details

  {
    "summaryText": "The greater than symbol (>) is the best",
    "text": "Here are some more details"
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "summaryText": "The greater than symbol (>) is the best",
    "text": "Here are some more details"
  }) }}
          

• # summary html

  Open this example in a new tab

  Use bold text sparingly

  Here are some more details

  {
    "summaryHtml": "Use <b>bold text</b> sparingly",
    "text": "Here are some more details"
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "summaryHtml": "Use <b>bold text</b> sparingly",
    "text": "Here are some more details"
  }) }}
          

• # classes

  Open this example in a new tab

  Expand me

  Here are some more details

  {
    "classes": "some-additional-class",
    "text": "Here are some more details",
    "summaryText": "Expand me"
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "classes": "some-additional-class",
    "text": "Here are some more details",
    "summaryText": "Expand me"
  }) }}
          

• # attributes

  Open this example in a new tab

  Expand me

  Here are some more details

  {
    "text": "Here are some more details",
    "summaryText": "Expand me",
    "attributes": {
      "data-some-data-attribute": "i-love-data",
      "another-attribute": "foo"
    }
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "text": "Here are some more details",
    "summaryText": "Expand me",
    "attributes": {
      "data-some-data-attribute": "i-love-data",
      "another-attribute": "foo"
    }
  }) }}
          

• # with html

  Open this example in a new tab

  Where to find your National Insurance Number

  Your National Insurance number can be found on

  • your National Insurance card
  • your payslip
  • P60
  • benefits information
  • tax return

  {
    "summaryText": "Where to find your National Insurance Number",
    "html": "Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\n"
  }

  
  {% from "govuk/components/details/macro.njk" import govukDetails %}
  
  {{ govukDetails({
    "summaryText": "Where to find your National Insurance Number",
    "html": "Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\n"
  }) }}