Footnotes

A list of notes placed at the bottom of a text component, and linked to elements within the article for quick access.

Dependencies

• Tooltip

How to

The Footnotes component is used to display a list of notes not directly related to the content of the article. They are used to provide additional information that the author does not wish to include in the article, but that are made accessible via 'footnotes links'.

Make sure the article containing footnotes has the .text-component--has-footnotes class, which is used to set the counter-reset property (used to show the numbers of the links within the article automatically).

The .js-footnote__label class is used to specify the content of the aria-label attribute applied to the .footnotes-link element in Javascript. The .js-footnotes__item class is used to target the content of the single footnote, which is also displayed in the tooltips.

Categories

• Typography

Bug report & feedback

Component Github page ↗