TOC is a component that converts Unordered/Ordered lists to a numbered table of contents

Sass Configuration:

Name Type Default Description
$toc-list-style String none Set the list style
$toc-prefix-pre-num String "(Item " Set contents before the number
$toc-prefix-post-num String ")" Set contents after the number
$toc-prefix-seperator-character String "." Set the number seperator character
$toc-prefix-color Color palette(secondary, dark) Set the prefix color
$toc-prefix-font-size String 0.8em Set the prefix font size
$toc-main-font-size String 1rem Set the toc main font size
$toc-sub-font-size String 0.8rem Set the prefix subitem font size

Example Code:

<ul class="toc">
  <li><a href="">Intro</a></li>
  <li><a href="">Topic</a>
    <ul>
      <li><a href="">Subtopic</a>
        <ul>
          <li><a href="">Sub-Subtopic</a></li>
          <li><a href="">Sub-Subtopic</a></li>
          <li><a href="">Sub-Subtopic</a></li>
        </ul>
      </li>
      <li><a href="">Subtopic</a></li>
      <li><a href="">Subtopic</a></li>
    </ul>
  </li>
  <li><a href="">Topic</a>
    <ul>
      <li><a href="">Subtopic</a></li>
      <li><a href="">Subtopic</a></li>
      <li><a href="">Subtopic</a></li>      
    </ul>
  </li>
  <li><a href="">Closing</a></li>
</ul>