Content presentation - Details

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

Copy code

<details class="hs2-details">
  <summary class="hs2-details__summary">
    <span class="hs2-details__summary-text">
      Click here for more details
    </span>
  </summary>
  <div class="hs2-details__text">
    <p>here you will find additional details on the item you have selected</p>

  </div>
</details>

Nunjucks

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.

Nunjucks arguments for default details
Name	Type	Required	Description
Name text	Type string	Required true	Description Text to be displayed on the details component.
Name html	Type string	Required true	Description HTML content to be displayed within the details component.
Name classes	Type string	Required false	Description Classes to add to the details element.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the details element.

Copy code

{% from 'details/macro.njk' import details %}

{{ details({
  "text": "Click here for more details",
  "HTML": "
  <p>here you will find additional details on the item you have selected</p>
    
  "
}) }}

When to use details

There are 2 ways to let users reveal more information:

details
expander

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 details

Do not use details to hide information that most users will need.

How to use details

The details component is a short link that expands to show more text when a user clicks on it.

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

Details and expanders

Details and expanders both hide sections of content which a user can choose to reveal.

The details component is less visually prominent than an expander, so tends to work better for content which is not as important to users.

Users may be reluctant to click on the details component in forms. Read more in the research section below.