Visual Variant
By default, the Table of Contents is set to the card variant, but it can be changed to transparent via the variant
prop.
Important Notes:
When using plain HTML to make a Table Of Contents transparent, add c-bolt-toc--variant-transparent
class.
Demo
Twig
{% set toc_items %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section One',
url: '#section-one',
} only %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section Two',
url: '#section-two',
} only %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section Three',
url: '#section-three',
} only %}
{% endset %}
{% include '@bolt-components-toc/toc.twig' with {
header: 'This is the transparent variant',
content: toc_items,
variant: 'transparent',
} only %}
HTML
<div class="c-bolt-toc c-bolt-toc--variant-transparent">
<nav aria-label="This is the transparent variant">
<h2 class="c-bolt-toc__header">
This is the transparent variant
</h2>
<ul class="c-bolt-toc__list">
<li>
<a href="#section-one" class="c-bolt-toc__item c-bolt-toc__item--current">
Section One
</a>
</li>
<li>
<a href="#section-two" class="c-bolt-toc__item">
Section Two
</a>
</li>
<li>
<a href="#section-three" class="c-bolt-toc__item">
Section Three
</a>
</li>
</ul>
</nav>
</div>