CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

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

Be the first to know when we ship something cool!

Project duplicated.