Visible Header A header for Table Of Contents can be created by passing plain text into the header prop.
Important Notes: When using plain HTML: To adhere to accessibility guidelines, always add aria-label attribute to the nav element with the Table of Contents header text as the value. If you decide to not have a Table of Contents header, it is recommended to still add a h2 header with a c-bolt-toc__header--hidden class. This will hide the heading visually, but still will be accessible for screen readers.
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 header',
  content: toc_items
} only %}
HTML
<div class="c-bolt-toc">
  <nav aria-label="This is the header">
    <h2 class="c-bolt-toc__header">
      This is the header
    </h2>
    <ul class="c-bolt-toc__list">
      <li>
        <a href="#section-one" class="c-bolt-toc__item">
          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>