Bolt Design System

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

Section One

Section Two

Section Three

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>