Table Of Contents 

<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. */
  • 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:
  • Filesystem Path: components/04-molecules/table-of-contents/table-of-contents.html

No notes defined.