<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 for this component. */
  • Content:
    $anchor-list-font-size: 1.26rem; // Determined by the hard science of pushing things around
    
    .toc {
      margin-bottom: $spacer-lg;
      max-width: 100%;
    }
    
    .toc__heading {
      @extend %heading-font-heavy;
      margin-bottom: $spacer-sm;
      text-transform: uppercase;
      line-height: $toc-heading-line-height;
      font-size: $toc-heading-font-size;
    }
    
    .toc__list {
      @extend %list-unstyled;
    
      > li {
        @extend %body-font-italic;
        padding-top: $spacer-xxs;
        padding-bottom: $spacer-xxs;
        padding-left: $spacer-md;
        line-height: $toc-anchor-line-height;
        font-size: $toc-anchor-font-size;
      }
    
      > li + li {
        border-top: 1px solid $toc-border-color;
      }
    }
    
    .toc__anchor {
      @extend %link-unstyled;
      @include hover-fill($link-hover-color-light, $brand-text, $brand-text);
      display: inline-block;
      position: relative;
      z-index: 1;
      padding: 0;
    
      &::before {
        @extend %icon; // inline-block
        position: absolute;
        top: $spacer-xxs;
        left: -$spacer-md;
        width: $spacer-base;
        color: $brand-interaction;
        // font-size: $anchor-list-font-size;
        content: $icon-arrow-down;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-xl) {
      .toc {
        margin-top: $spacer-xxs;
        margin-right: $spacer-xl;
      }
    }
    
  • URL: /components/raw/table-of-contents/_table-of-contents.scss
  • Filesystem Path: components/02-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss
  • Size: 1.2 KB
  • Handle: @table-of-contents
  • Preview:
  • Filesystem Path: components/02-molecules/article&blog-post-elements/table-of-contents/table-of-contents.html

There are no notes for this item.