Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Product
Primitives & components: Teva Product

Footnote

v0.0.0

A Footnote references or comment on a designated part of the text above it, marked by a Footnote Marker. Use when additional information is necessary, but doing so in the main text can disrupt the flow of the writing.

The Footnote component also includes the Footnote Marker component.

Some text with footnote markers:

Cornhole selvage loko 90's gentrify biodiesel retro meditation pabst tofu kitsch cray microdosing blog iphone. Typewriter thundercats 01 next level pickled chillwave. Messenger bag letterpress cleanse scenester carry wayfarers hoodie. Heirloom loko vice selfies. Locavore cray cronut food truck craft beer kinfolk. Marfa tattooed squid kale chips banh mi microdosing normcore. Marfa gluten-free echo tacos asymmetrical listicle pop-up occupy viral cray microdosing artisan meditation portland biodiesel.

Cardigan cold-pressed organic occupy gluten-free 8-bit xoxo artisan ethical freegan cray stumptown chia ramps park. Bespoke muggle 02 magic trust fund gluten-free meditation mustache. Blog tacos sartorial meditation hashtag before they sold out. Dreamcatcher venmo cliche green juice gastropub. Pinterest blog photo booth bicycle rights brunch put a bird on it. Viral migas lo-fi squid 8-bit schlitz stumptown pop-up kinfolk meh cleanse cronut mixtape normcore humblebrag.

Blog cray kombucha tattooed intelligentsia chillwave typewriter gastropub mlkshk yr bespoke synth distillery distillery flexitarian. Direct trade park intelligentsia yr helvetica 9999 keytar iphone pork belly. Skateboard schlitz lo-fi heirloom tilde. Master raw denim bushwick butcher loko brunch tumblr. Marfa chambray fixie banjo truffaut bushwick portland 03 . Drinking neutra butcher wolf portland tumblr everyday hashtag sartorial master try-hard tattooed irony goth fixie.

Vegan flexitarian migas yolo farm-to-table iphone pop-up narwhal meditation semiotics 90's cardigan health bespoke skateboard. Organic everyday scenester B . Viral vinyl five dollar toast truffaut. Hoodie street humblebrag. Everyday occupy bespoke vice neutra freegan church-key phlogiston leggings selvage ethical knausgaard health sriracha vinegar.

8-bit ramps normcore organic vhs blog pug offal forage pinterest migas gentrify yuccie selfies semiotics. Typewriter thundercats 01 next level pickled chillwave. Messenger bag letterpress cleanse scenester carry wayfarers hoodie. Heirloom loko vice selfies. Locavore cray cronut food truck craft beer kinfolk. Marfa tattooed squid kale chips banh mi microdosing normcore. Brooklyn kickstarter kinfolk poutine cliche locavore polaroid keytar disrupt taxidermy normcore pbr&b neutra lo-fi bespoke.

The Notes are autonumbered, but can be manually changed by adding attribute data-footnote-number to a.vi-footnote__backlink.

  1. Back to contents.
    Animated series. "ThunderCats" follows the adventures of a group of catlike humanoid aliens from the planet Thundera.
  2. Back to contents.
    In J. K. Rowling's Harry Potter series, a Muggle is a person who lacks any sort of magical ability and was not born in a magical family. Muggles can also be described as people who do not have any magical blood inside them.
  3. Back to contents.
    Helvetica or Neue Haas Grotesk is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger with input from Eduard Hoffmann.
  4. Back to contents.
    Portland, Oregon’s largest city, sits on the Columbia and Willamette rivers, in the shadow of snow-capped Mount Hood.
  5. Back to contents.
    a person associated with or immersed in a particular fashionable cultural scene. 
<!-- Footnote  -->
<ol class="vi-footnote">
  <!-- Footnote - Endnote  -->
  <li class="vi-footnote__endnote" id="thundercats">
    <a aria-label="Detailed explanation, click here to return to the contents." class="vi-footnote__backlink" href="#thundercats_ref">
      <span class="sr-only">Back to contents.</span>
    </a>
    <div class="vi-footnote__content">
      Animated series. "ThunderCats" follows the adventures of a group of catlike humanoid aliens from the planet Thundera.
    </div>
  </li>
  <!-- Footnote - Endnote  -->
  <li class="vi-footnote__endnote" id="muggle">
    <a aria-label="Detailed explanation, click here to return to the contents." class="vi-footnote__backlink" href="#muggle_ref">
      <span class="sr-only">Back to contents.</span>
    </a>
    <div class="vi-footnote__content">
      In J. K. Rowling's Harry Potter series, a Muggle is a person who lacks any sort of magical ability and was not born in a magical family. Muggles can also be described as people who do not have any magical blood inside them.
    </div>
  </li>
  <!-- Footnote - Endnote  -->
  <li class="vi-footnote__endnote" id="helvetica">
    <a aria-label="Detailed explanation, click here to return to the contents." class="vi-footnote__backlink" data-footnote-number="9999" href="#helvetica_ref">
      <span class="sr-only">Back to contents.</span>
    </a>
    <div class="vi-footnote__content">
      Helvetica or Neue Haas Grotesk is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger with input from Eduard Hoffmann.
    </div>
  </li>
  <!-- Footnote - Endnote  -->
  <li class="vi-footnote__endnote" id="portland">
    <a aria-label="Detailed explanation, click here to return to the contents." class="vi-footnote__backlink" href="#portland_ref">
      <span class="sr-only">Back to contents.</span>
    </a>
    <div class="vi-footnote__content">
      Portland, Oregon’s largest city, sits on the Columbia and Willamette rivers, in the shadow of snow-capped Mount Hood.
    </div>
  </li>
  <!-- Footnote - Endnote  -->
  <li class="vi-footnote__endnote" id="scenester">
    <a aria-label="Detailed explanation, click here to return to the contents." class="vi-footnote__backlink" data-footnote-number="B" href="#scenester_ref">
      <span class="sr-only">Back to contents.</span>
    </a>
    <div class="vi-footnote__content">
      a person associated with or immersed in a particular fashionable cultural scene.
    </div>
  </li>
</ol>

Stylesheets #

The following stylesheet is required to display this component.

The following additional stylesheet is used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

  • 21 Aug 2025 - feat(footnote): allow line-height via css custom props.
  • 12 Mar 2025 - fix(footnote): refine scroll position to account for fixed header height of new header
  • 28 Feb 2025 - fix(footnote): adjust scroll position to account for fixed header height of new header
  • 28 Jun 2022 - Fix scrollparent detector
  • BUG incorrect scroll.

Changed

  • Accessibility: Added aria-label to better describe function.
  • Accessibility: Bring focus to link in element scrolled to.
  • Accessibility: Removed all role attributes
  • Accessibility: Removed role attribute with doc-endnotes
  • Optimised for Teva Sans, the new library default.

Added

  • PBS support
  • RTL support
  • Initial draft