Footnotes

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

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

If you're using this component, you should also include the SCSS/JS of the following components:

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.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news