Skip to main content Skip to list of components
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. Status
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",
  body: "<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>"
}) }}

Status

Status
In development
Tested without JavaScript
Yes
Tested without CSS
Yes
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Back to top