Pattern library

Details

View full screen

Details

Source (Nunjucks)

<details class="w-details" {{ data.state | safe }}>
<summary class="w-details__summary">
<h2 class="w-details__header">{{ data.summary }}</h2>
</summary>
{{ data.content | safe }}
</details>

Output

<details class="w-details" >
<summary class="w-details__summary">
<h2 class="w-details__header">My details</h2>
</summary>
<p>Some content that is hidden by default.</p><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</details>

Variants

With extra summary content

View full screen

Details

Source

<details class="w-details">
<summary class="w-details__summary">
<h2 class="w-details__header">{{ data.summary }}</h2>
<p class="w-details__preview">{{ data.summaryPreview }}</p>
</summary>
{{ data.content | safe }}
</details>

Output
<details class="w-details">
<summary class="w-details__summary">
<h2 class="w-details__header">My details</h2>
<p class="w-details__preview">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

Details

Source

<details class="w-details" {{ data.state | safe }}>
<summary class="w-details__summary">
<h2 class="w-details__header">{{ data.summary }}</h2>
</summary>
{{ data.content | safe }}
</details>

Output
<details class="w-details" open>
<summary class="w-details__summary">
<h2 class="w-details__header">My details</h2>
</summary>
<p>Some content that is hidden by default.</p><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</details>