<div style="margin-left: 50px">
    <p>Lorem gibson Chiba nano-bridge simstim deck bridge vinyl gentlemen loser
        courier euro-pop systema. Screen assassin computer ice wonton soup Tokyo
        systemic sprawl jacket nano. <a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a>
    </p>
    <div class="footnotes">
        <ol class="footnotes__list">
            <li id="fn:1">
                <p>Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team
                    macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX
                    camera People of Importance. Lorem gibson temperfoam sunglasses assault
                    systema tower order-flow screen macroform node tanto sprawl icebreaker
                    drone sentient Mole IX Mycotoxin Dex.<a href="#fnref:1" title="return to article"> ↩</a>
                </p>
            </li>
            <li id="fn:2">
                <p>Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.</p>
                <p>Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch
                    geodesic nodality new yen House of the Blue Lights memory refrigerator
                    advert free-market.<a href="#fnref:2" title="return to article"> ↩</a>
                </p>
            </li>
            <li id="fn:3">
                <p>Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen,
                    dpunkt.verlag, 2015, ISBN 978–3864903137<a href="#fnref:3" title="return to article"> ↩</a>
                </p>
            </li>
        </ol>
    </div>
    <div class="tooltip">
        <p>Lorem gibson spook vinyl ice <a href="#">test</a> icebreaker youtube franchise
            tanto Cornell singularity. Lorem gibson apophenia <b>plastic</b> media chrome
            silent crypto-dermatrodes Fletcher hacker sign Kowloon dermatrodes order-flow
            skyscraper math-dead.</p>
    </div>
</div>
<div style="margin-left: 50px">
    <p>
        Lorem gibson Chiba nano-bridge simstim deck bridge vinyl gentlemen loser courier euro-pop systema.
        Screen assassin computer ice wonton soup Tokyo systemic sprawl jacket nano. <a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a>
    </p>

    <div class="footnotes">
        <ol class="footnotes__list">
            <li id="fn:1">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:1" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:2">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:2" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:3">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:3" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
        </ol>
    </div>

    <div class="tooltip">
        <p>
            Lorem gibson spook vinyl ice <a href="#">test</a> icebreaker youtube franchise tanto Cornell singularity.
            Lorem gibson apophenia <b>plastic</b> media chrome silent crypto-dermatrodes Fletcher hacker sign Kowloon dermatrodes order-flow skyscraper math-dead.
        </p>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .footnote {
      @extend %link-unstyled;
      @extend %heading-font-regular;
    
      color: $footnote-link-color;
    }
    
    .footnotes__list {
      @extend %list-unstyled;
    
      counter-reset: number;
    
      li,
      li > p {
    
        @extend %heading-font-regular;
    
        margin-bottom: $spacer-sm;
        line-height: $footnote-line-height-small;
        font-size: $footnote-font-size-small;
      }
    
      li {
        position: relative;
        padding-left: $spacer-sm;
    
        a {
          @extend %link-unstyled;
    
          color: $footnote-link-color;
          word-break: break-all;
        }
    
        &::before {
          @extend %heading-font-bold;
    
          position: absolute;
          left: 0;
          width: $spacer-sm;
          content: counter(number);
          counter-increment: number;
          }
        }
    }
    
    .tooltip {
      box-shadow: 1px 0 20px 1px $tooltip-shadow-color;
      background-color: $tooltip-background-color;
      padding: $spacer-lg $spacer-md;
      max-width: 90%;
    
      & p {
        @extend %heading-font-regular;
        margin: 0;
        line-height: $tooltip-line-height-small;
        font-size: $tooltip-font-size-small;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .footnotes__list {
    
        li,
        li > p {
          line-height: $footnote-line-height;
          font-size: $footnote-font-size;
        }
      }
    
      .tooltip {
        max-width: 40%;
    
        & p {
          line-height: $tooltip-line-height;
          font-size: $tooltip-font-size;
        }
      }
    }
    
  • URL: /components/raw/footnote/_footnote.scss
  • Filesystem Path: components/01-atoms/text/block/footnote/_footnote.scss
  • Size: 1.4 KB

ACHTUNG! Es fehlt noch das JS für die korrekte Anzeige der Tooltip-Boxen.