## Overview

`sd-footnotes` – Used to add additional information/sources related to the content.

## API

### Examples

Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:

- sd-footnotes/variants
- sd-footnotes/inverted

## Guidelines

### Use Cases

- Provide additional context or clarification for terms, concepts, or data mentioned in the main text.
- Cite sources and references for quotes, statistics, or research findings, ensuring proper attribution and credibility.
- Link to related content or further reading.

### Rules

### Content & Labeling

- Keep footnotes concise—use them to offer extra details or citations without cluttering the main content. If a longer explanation is required, consider linking to the source instead.
- Number each footnote consistently (e.g., [1], [2], [3]) to ensure clarity when multiple notes are present.

### Return Points

- Use the footnote [number] itself for a direct “back” navigation, allowing users to quickly return to the original reading position.
- If the same footnote is referenced from multiple places, use the “Multiple” attribute and provide distinct links labeled “a”, “b”, “c” to guide users back to each relevant section.

### Background

- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.

### Accessibility

- Set links to jump between footnote marker and footnote.
- Include meaningful text for the “back” links (e.g., “Return to content”), to ensure users can quickly navigate to the originating text.
- Ensure that the footnote markers are included in the document's natural tab order, allowing users to navigate to them using the Tab key.
- Allow users to navigate between footnotes within the footnote section using the arrow keys.

### Related Templates

- footnotes--docs

Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.