Details - Component

Code

Source (Nunjucks)

<details {{ data.state | safe }}>
  <summary>
    {{ data.summary }}
  </summary>
  {{ data.content | safe }}
</details>

Output

<details>
  <summary>My details</summary>
  <p>Some content that is hidden by default.</p>
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</details>

Information

The Details pattern is designed to work with plain <details> and <summary> elements without a class attribute to keep things as simple as possible when you're using them.

The default marker has been hidden and a custom marker will render in the correct reading direction, instead.

Variants

With extra summary content

View full screen

Code

Source (Nunjucks)

<details>
  <summary>
    {{ data.summary }}
    <p class="text-base color-core-text gap-top-base">{{ data.summaryPreview }}</p>
  </summary>
  {{ data.content | safe }}
</details>

Output

<details>
  <summary>
    My details
    <p class="text-base color-core-text gap-top-base">Some teaser content</p>
  </summary>
  <p>Some content that is hidden by default.</p>
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</details>

Open by default

View full screen

Code

Source (Nunjucks)

<details {{ data.state | safe }}>
  <summary>
    {{ data.summary }}
  </summary>
  {{ data.content | safe }}
</details>

Output

<details open>
  <summary>My details</summary>
  <p>Some content that is hidden by default.</p>
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</details>