# Footnote Section

Ready

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

`

    <section class="footnote-section">
        <div class="footnote-section__headline__container">
            <h3 class="footnote-section__headline">Quellenangaben</h3>
        </div>

        <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>
    </section>

`
`

    <section class="footnote-section">
        <div class="footnote-section__headline__container">
            <h3 class="footnote-section__headline">Quellenangaben</h3>
        </div>

        <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>
    </section>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .footnote-section__headline__container {
        width: 100%;
      }

      .footnote-section__headline {
        display: flex;
        flex-direction: row;
        justify-content: left;

        margin-bottom: $spacer-sm;

        font-size: $font-size-sm;
        color: $footnote-section-headline-color;
        text-transform: uppercase;

        &::after {
          content: '\a0';

          position: relative;
          top: 0.65em;

          flex-grow: 1;

          max-width: 80px;
          height: 3px;
          margin-left: 10px;

          background-color: $footnote-section-headline-color;
        }
      }

      @media screen and (min-width: $grid-breakpoint-md) {
        .footnote-section__headline__container {
          width: 30%;
        }
      }

  `
- URL: /components/raw/footnote-section/_footnote-section.scss
- Filesystem Path: components/04-molecules/footnote-section/_footnote-section.scss
- Size: 624 Bytes

- Handle: @footnote-section
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/footnote-section/footnote-section.html

No notes defined.