NS Design System
v3.0.0 · 257 tokens

132References

Numbered sources at the foot of a post, and the markers in the text that point at them. A link inside a sentence is a reference the reader must follow now or lose; a numbered marker is one they can finish the paragraph and then check.

Use it for

  • A post that cites a release note, a governor limit and a doc page
  • Any claim a reader might reasonably want to verify

Not for

  • Every link in the post — an inline link the reader should follow now stays inline
  • A generated list. A references list a script built is a references list nobody has read

Markers and list

A synchronous transaction gets 100 SOQL queries1 and 6 MB of heap. Batch Apex raises the query limit but not the heap2.

References
  1. Apex Developer Guide — Execution Governors and Limitsdeveloper.salesforce.com/docs/atlas.en-us.apexcode.meta
  2. Apex Developer Guide — Using Batch Apexdeveloper.salesforce.com/docs/atlas.en-us.apexcode.meta
markup
<div class="ns-prose">
  <p>A synchronous transaction gets 100 SOQL queries<a class="ns-ref" id="r1-mark" href="#r1" aria-label="Reference 1">1</a> and 6&nbsp;MB of heap. Batch Apex raises the query limit but not the heap<a class="ns-ref" id="r2-mark" href="#r2" aria-label="Reference 2">2</a>.</p>
</div>
<section class="ns-refs">
  <span class="ns-refs__label">References</span>
  <ol>
    <li id="r1"><a href="#r1-mark">Apex Developer Guide — Execution Governors and Limits</a><span class="ns-refs__src">developer.salesforce.com/docs/atlas.en-us.apexcode.meta</span></li>
    <li id="r2"><a href="#r2-mark">Apex Developer Guide — Using Batch Apex</a><span class="ns-refs__src">developer.salesforce.com/docs/atlas.en-us.apexcode.meta</span></li>
  </ol>
</section>

Accessibility contract

  • The marker is a real anchor to a real id and the entry links back, so it works with JS off and both directions are keyboard-reachable
  • The visible link text is the source, never “here” — a screen reader's link list of six “here”s is unusable
  • Tabular numerals and vertical-align: super rather than <sup> alone, so the marker never changes the line height of the paragraph it sits in