Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Details

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

Contents

  1. Component status
  2. Caller function
Open this example in new tab

HTML 

<div class="tna-details">
  <details class="tna-details__details">
    <summary class="tna-details__summary">Details</summary>
    <div class="tna-details__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p>
    </div>
  </details>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

Required.

Text to use within the summaryu element (the visible part of the details element).
body string

The HTML for the main body of the details. Not displayed if text is set.
text string

The text for the details which will be inserted into a <p> element. Overwrites body if it is set.
open boolean

If true, open the details component.
classes string

Classes to add to the details.
attributes object

HTML attributes (for example data attributes) to add to the details.

 
{% from "nationalarchives/components/details/macro.njk" import tnaDetails %}

{{ tnaDetails({
  title: "Details",
  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae."
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/details/macro.html" import tnaDetails %}

{{ tnaDetails({
  "title": "Details",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae."
}) }}

Component status

Phase
Official (ready to use in production)

Caller function

The details macro can also be used with a Nunjucks call block or Jinja2 call block.

Using a call block avoids having to escape complex HTML for the contents of the details component and replaces the need for the body and text options.

Open this example in new tab

HTML 

<div class="tna-details">
  <details class="tna-details__details">
    <summary class="tna-details__summary">Details</summary>
    <div class="tna-details__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p>
    </div>
  </details>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

Required.

Text to use within the summaryu element (the visible part of the details element).
body string

The HTML for the main body of the details. Not displayed if text is set.
text string

The text for the details which will be inserted into a <p> element. Overwrites body if it is set.
open boolean

If true, open the details component.
classes string

Classes to add to the details.
attributes object

HTML attributes (for example data attributes) to add to the details.

 
{% from "nationalarchives/components/details/macro.njk" import tnaDetails %}

{% call tnaDetails({
  title: "Details"
}) %}
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p>
{% endcall %}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/details/macro.html" import tnaDetails %}

{% call tnaDetails({
  "title": "Details"
}) %}
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p>
{% endcall %}

Back to top