# Table Of Contents

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <aside class="toc">
        <h3 class="toc__heading">Inhalt</h3>
        <ol class="toc__list">
            <li><a class="toc__anchor" href="#dilemma">Das Dilemma: Innovation vs. Chaos</a></li>
            <li><a class="toc__anchor" href="#idee">Die Idee hinter Innovation Tokens</a></li>
            <li><a class="toc__anchor" href="#unbekannt">An die unbekannten Unbekannten denken</a></li>
            <li><a class="toc__anchor" href="#ballast">Kognitiven Ballast vermeiden</a></li>
            <li><a class="toc__anchor" href="#fokus">Fokus auf die Wertschöpfung legen</a></li>
            <li><a class="toc__anchor" href="#fazit">Fazit</a></li>
        </ol>
    </aside>

`
`

    <aside class="toc">
        <h3 class="toc__heading">Inhalt</h3>
        <ol class="toc__list">
            <li><a class="toc__anchor" href="#dilemma">Das Dilemma: Innovation vs. Chaos</a></li>
            <li><a class="toc__anchor" href="#idee">Die Idee hinter Innovation Tokens</a></li>
            <li><a class="toc__anchor" href="#unbekannt">An die unbekannten Unbekannten denken</a></li>
            <li><a class="toc__anchor" href="#ballast">Kognitiven Ballast vermeiden</a></li>
            <li><a class="toc__anchor" href="#fokus">Fokus auf die Wertschöpfung legen</a></li>
            <li><a class="toc__anchor" href="#fazit">Fazit</a></li>
        </ol>
    </aside>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .toc {
        max-width: 100%;
      }

      .toc__heading {
        @extend %heading-font-heavy;

        margin-bottom: $spacer-sm;
        font-size: $font-size-sm;
        color: $toc-heading-color;
        text-transform: uppercase;
      }

      .toc__list {
        @extend %list-unstyled;

        padding-left: 0.7rem;

        > li {
          @extend %body-font-italic;

          display: flex;
          padding-top: $spacer-xxs;
          padding-bottom: $spacer-xxs;
          font-size: $font-size-base;

          &::before {
            content: asset-url('icons/arrow-short-down.svg');
            padding-right: 0.5rem;
          }
        }

        > li + li {
          border-top: 1px solid $toc-border-color;
        }
      }

      .toc__anchor {
        @extend %link-unstyled;

        @include hover-fill($link-hover-color-light, $toc-anchor-hover-text-color, $toc-anchor-text-color);

        position: relative;
        z-index: 1;
        display: inline-block;
        padding: 0;
      }

      @media screen and (min-width: $grid-breakpoint-xl) {
        .toc {
          margin-top: $spacer-xxs;
          margin-right: $spacer-xl;
        }

        .toc--sticky {
          position: sticky;
          top: $spacer-xs;
          align-self: start;
        }
      }

  `
- URL: /components/raw/table-of-contents/_table-of-contents.scss
- Filesystem Path: components/04-molecules/table-of-contents/_table-of-contents.scss
- Size: 1 KB

- Handle: @table-of-contents
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/table-of-contents/table-of-contents.html

No notes defined.