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

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:

Salvia taxidermy microdosing yuccie wayfarers stumptown banjo authentic schlitz fixie kitsch brooklyn polaroid intelligentsia tousled. 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. Cold-pressed flexitarian carry yuccie cornhole sriracha blog skateboard pop-up vinegar blog 90's mixtape occupy occupy.

Carry hashtag slow-carb pour-over brooklyn etsy pinterest cornhole asymmetrical post-ironic lomo chillwave xoxo keytar iphone. 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. Brunch sustainable everyday shoreditch flexitarian beard actually taxidermy wayfarers chartreuse paleo chia post-ironic +1 portland.

Venmo selvage seitan synth selfies kitsch hashtag ennui mixtape lumbersexual readymade vinegar stumptown marfa street. 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 . Franzen bitters umami tattooed microdosing 8-bit whatever irony keffiyeh gastropub 90's pitchfork cred pickled synth.

Ramps lomo 8-bit twee franzen try-hard offal vegan salvia chartreuse gluten-free lumbersexual waistcoat roof freegan. Organic everyday scenester B . Viral vinyl five dollar toast truffaut. Hoodie street humblebrag. Knausgaard etsy cronut pour-over chillwave tacos hella yr sriracha chartreuse yuccie scenester tumblr cray heirloom.

Chicharrones cronut health vegan lomo meh stumptown yuccie letterpress tofu hashtag whatever cray cardigan ramps. 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. Whatever actually gentrify vhs artisan street aesthetic etsy offal biodiesel twee plaid xoxo lomo sartorial.

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