Footnotes
Footnotes provide a way to cite sources, add clarifications, or include supplementary detail without interrupting the main text. They connect inline references to notes at the bottom of the page with bidirectional navigation.
Use footnotes inside Prose content for citations, legal references, and clarifications that support the main text but would break the reading flow if included inline.
When to use
- Citing a regulation, statute, or external source that readers may want to verify — Footnotes let you provide the full citation without interrupting the sentence the reader is in the middle of.
- Adding a clarification or caveat that would break the flow of the main sentence — Move the qualifying detail to a footnote so the primary point lands clearly.
- Providing technical definitions or methodology notes for data presented in the text — Readers who need the detail can follow the reference; others can keep reading.
When not to use
- Don't use footnotes for content that most readers need — If it's essential, put it in the body text or a callout.
- Don't use footnotes as a dumping ground for tangential thoughts — If the information isn't worth citing, it's not worth footnoting.
- Don't use footnotes when a parenthetical aside would work — Short inline clarifications are easier to read than jumping to the bottom of the page.
Examples
Best practices
Number footnotes sequentially
Number footnotes sequentially as they appear in the text — 1, 2, 3.
Use symbols, letters, or skip numbers
Sequential numbering is the expected convention. Non-standard markers confuse readers.
Place footnotes at the end of the article
Place the footnotes section at the end of the article, after all body content.
Scatter footnote definitions mid-page
Readers expect footnotes at the bottom. Placing them elsewhere breaks the convention.
Keep footnotes concise
Keep footnotes to one or two sentences.
Write multi-paragraph footnotes
If the content needs that much space, it belongs in the body text or an aside.
Interaction behavior
- Clicking a footnote reference (e.g., 1) in the body text scrolls to the corresponding footnote at the bottom of the page.
- Each footnote includes a back-link (↩) that returns the reader to the exact point in the text where the reference appeared.
- When a footnote is navigated to, it briefly highlights with a yellow flash to help the reader locate it. Users who prefer reduced motion see a static highlight instead.
- Footnote references and back-links appear as inline text at rest. Use
fd-infotip variant="inline" mode="hover-focus"when numbered references need an accessible citation preview, and both link types show a 24px minimum background fill and underline to make the target easier to see and activate. - In print, footnotes remain at the bottom of the content with a horizontal rule separating them from the body text. Back-links and citation previews are hidden because they are interactive-only affordances.
Content guidelines
A reader jumping to the footnote shouldn't need to re-read the surrounding paragraph to understand it.
"12 C.F.R. § 330.1 defines 'deposit' for insurance purposes."
"See the above section for context on this definition."
"Federal Register, Vol. 89, No. 42 (March 2024)."
"For more information, please refer to the Federal Register, Vol. 89, No. 42 (March 2024), which contains additional details."
Pick a citation style and stick with it.
Consistent "12 C.F.R. § 330.1" format throughout.
Mixing "12 CFR 330.1", "Title 12, Section 330.1", and "§330.1" in the same document.
Accessibility
- Footnote references and back-links create a bidirectional navigation pattern — screen reader users can jump to the footnote and back without losing their place.
- The footnotes section is identified as a document endnotes region, so assistive technology can announce it as a distinct section.
- Each footnote reference is clearly labeled so screen readers announce it as a link to a specific note, not just a bracketed number.
- The highlight animation on footnote arrival is suppressed for users who prefer reduced motion — they see a static highlight instead.