# Footnote

Ready

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

`

    <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> 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.
        </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>
                <li id="fn:4">
                    <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:4" title="return to article">&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:5">
                    <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:5" title="return to article">&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:6">
                    <p>
                        Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                        <a href="#fnref:6" title="return to article">&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:7">
                    <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:7" title="return to article">&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:8">
                    <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:8" title="return to article">&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:9">
                    <p>
                        Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                        <a href="#fnref:9" title="return to article">&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:10">
                    <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:10" title="return to article">&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:11">
                    <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:11" title="return to article">&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:12">
                    <p>
                        Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                        <a href="#fnref:12" 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>

`
`

    <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> 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.
        </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>
                <li id="fn:4">
                    <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:4" title="return to article" >&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:5">
                    <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:5" title="return to article" >&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:6">
                    <p>
                        Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                        <a href="#fnref:6" title="return to article" >&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:7">
                    <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:7" title="return to article" >&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:8">
                    <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:8" title="return to article" >&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:9">
                    <p>
                        Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                        <a href="#fnref:9" title="return to article" >&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:10">
                    <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:10" title="return to article" >&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:11">
                    <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:11" title="return to article" >&nbsp;↩</a>
                    </p>
                </li>
                <li id="fn:12">
                    <p>
                        Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                        <a href="#fnref:12" 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. */

`
File:

- Content:
  `

      .footnote {
        @extend %link-unstyled;
        @extend %heading-font-regular;

        line-height: 1;
        color: $footnote-link-color;
      }

      .footnotes__list {
        @extend %list-unstyled;

        counter-reset: number;

        > * + * {
          margin-top: $spacer-md;
        }

        li,
        li > p {
          @extend %heading-font-regular;

          font-size: $font-size-xxs;
          line-height: $paragraph-line-height;

          /* stylelint-disable-next-line selector-max-compound-selectors */
          > * + * {
            margin-top: $spacer-sm;
          }
        }

        li {
          position: relative;
          padding-left: $spacer-sm;

          &::before {
            @extend %heading-font-bold;

            content: counter(number);
            counter-increment: number;

            position: absolute;
            left: -0.5rem;

            width: $spacer-sm;

            color: $footnote-index-color;
            text-align: right;
          }

          a {
            @extend %link-unstyled;

            color: $footnote-link-color;
            word-break: break-all;
          }
        }
      }

      .tooltip {
        max-width: 90%;
        padding: $spacer-lg $spacer-md;
        background-color: $tooltip-background-color;
        box-shadow: 1px 0 20px 1px $tooltip-shadow-color;

        p {
          @extend %heading-font-regular;

          margin: 0;
          font-size: $font-size-xxs;
        }
      }

      @media screen and (min-width: $grid-breakpoint-md) {
        .footnotes__list {
          li,
          li > p {
            font-size: $font-size-base;
          }
        }

        .tooltip {
          max-width: 40%;

          p {
            font-size: $font-size-base;
          }
        }
      }

  `
- URL: /components/raw/footnote/_footnote.scss
- Filesystem Path: components/05-atoms/text/footnote/_footnote.scss
- Size: 1.4 KB

- Handle: @footnote
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/text/footnote/footnote.html

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