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.
Demo
Twig
{% include '@bolt-components-toc/toc.twig' with {
header: 'This is the transparent variant',
items: [
{
text: 'Section One',
url: '#section-one',
active: true,
},
{
text: 'Section Two',
url: '#section-two',
},
{
text: 'Section Three',
url: '#section-three',
},
],
variant: 'transparent',
} only %}
HTML
<bolt-toc header="This is the transparent variant" variant="transparent">
<bolt-toc-item url="#section-one" active>
Section One
</bolt-toc-item>
<bolt-toc-item url="#section-two">
Section Two
</bolt-toc-item>
<bolt-toc-item url="#section-three">
Section Three
</bolt-toc-item>
</bolt-toc>