Pattern library

Table of contents

View full screen

Details

Source (Nunjucks)

<web-table-of-contents opened>
<div class="w-toc__label">
<span>{{ data.label }}</span>
<button
class="w-button w-button--secondary w-button--icon"
data-icon="close"
aria-label="Close Table of Contents"
>
</button>
</div>
<web-scroll-spy>
<div class="w-toc__content">
<h2 class="w-toc__header">
<a href="{{ data.heading.url }}" class="w-toc__header--link">{{
data.heading.text
}}</a>
</h2>
<div class="w-toc__list">
<ul>
{% for item in data.items %}
<li>
<a href="{{ item.url }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</web-scroll-spy>
</web-table-of-contents>

Output

<web-table-of-contents opened>
<div class="w-toc__label">
<span>In this article</span>
<button
class="w-button w-button--secondary w-button--icon"
data-icon="close"
aria-label="Close Table of Contents"
>
</button>
</div>
<web-scroll-spy>
<div class="w-toc__content">
<h2 class="w-toc__header">
<a href="#" class="w-toc__header--link">Blibli&#39;s PWA generates 10x more revenue per user than their previous mobile website</a>
</h2>
<div class="w-toc__list">
<ul>

<li>
<a href="#">Highlighting the opportunity</a>
</li>

<li>
<a href="#">The approach they used</a>
</li>

<li>
<a href="#">User flow</a>
</li>

<li>
<a href="#">Set performance budgets</a>
</li>

<li>
<a href="#">Overall business results</a>
</li>

</ul>
</div>
</div>
</web-scroll-spy>
</web-table-of-contents>