Footnote Marker

v0.0.0

A Footnote Marker indicates that there is a reference or comment somewhere else on the page in the form of Footnotes. Use when additional information is necessary, but doing so in the main text can disrupt the flow of the writing.

The Footnote Marker is part of the Footnote component.

Please note that every id must be unique in a single HTML document.

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.

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.

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 .

Organic everyday scenester B . Viral vinyl five dollar toast truffaut. Hoodie street humblebrag.

<p>Typewriter thundercats <a aria-label="Footnote 01" class="vi-footnote-marker" href="#thundercats" id="thundercats_ref">01</a>
  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.</p>
<p>Bespoke muggle <a aria-label="Footnote 02" class="vi-footnote-marker" href="#muggle" id="muggle_ref">02</a>
  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.</p>
<p>Direct trade park intelligentsia yr helvetica <a aria-label="Footnote 9999" class="vi-footnote-marker" href="#helvetica" id="helvetica_ref">9999</a>
  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 <a aria-label="Footnote 03" class="vi-footnote-marker" href="#portland" id="portland_ref">03</a>
  .</p>
<p>Organic everyday scenester <a aria-label="Footnote B" class="vi-footnote-marker" href="#scenester" id="scenester_ref">B</a>
  . Viral vinyl five dollar toast truffaut. Hoodie street humblebrag.</p>
<p>Typewriter thundercats <a aria-label="Footnote 01" class="vi-footnote-marker" href="#thundercats" id="thundercats-2_ref">01</a>
  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.</p>

Colors #

Use modifiers to create alternative colored markers. Use in Strips or Cards for better contrast with a background.

The following modifier are available:

--accent-1
--accent-2
--inversed

Organic everyday scenester B . Viral vinyl five dollar toast truffaut. Hoodie street humblebrag.

<p>Typewriter thundercats <a aria-label="Footnote 01" class="vi-footnote-marker vi-footnote-marker--accent-1" href="#sg-6e3c4b" id="sg-6e3c4b_ref">01</a>
  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.</p>
<p>Bespoke muggle <a aria-label="Footnote 02" class="vi-footnote-marker vi-footnote-marker--accent-2" href="#sg-170384" id="sg-170384_ref">02</a>
  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.</p>
<p>Direct trade park intelligentsia yr helvetica <a aria-label="Footnote 9999" class="vi-footnote-marker vi-footnote-marker--inversed" href="#sg-8ab034" id="sg-8ab034_ref">9999</a>
  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 <a aria-label="Footnote 03" class="vi-footnote-marker vi-footnote-marker--accent-2" href="#sg-98e679" id="sg-98e679_ref">03</a>
  .</p>
<p>Organic everyday scenester <a aria-label="Footnote B" class="vi-footnote-marker vi-footnote-marker--accent-1" href="#sg-c82e96" id="sg-c82e96_ref">B</a>
  . Viral vinyl five dollar toast truffaut. Hoodie street humblebrag.</p>
<p>Typewriter thundercats <a aria-label="Footnote 01" class="vi-footnote-marker vi-footnote-marker--inversed" href="#sg-0bbb1d" id="thundercats-2_ref">01</a>
  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.</p>

Changelog #

Changelog


  21 Aug 2025 - feat(footnote-marker): allow line-height via css custom props.


Changed

  Accessibility: Removed role attribute with doc-noteref
  Optimised for Teva Sans, the new library default.


Added

  PBS support
  RTL support
  Initial draft


Fix

  25 Jan 2023 - [TVB-12578] Appearence in display header tagline.