<h2>What’s new in v3</h2>
<ul>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to Use</h2>
<p>Footnotes provide supplemental information without interrupting the main flow of content. They help maintain clarity by keeping secondary details accessible but unobtrusive.</p>
<p>Use the footnote to:</p>
<ul>
<li>Provide clarifications, definitions, or contextual details that support the main text without cluttering it.</li>
<li>Cite sources, references, or attribution information in a clean, consistent way.</li>
<li>Add secondary comments or disclaimers that are important but not essential to the primary narrative.</li>
<li>Offer optional deep‑dive content for users who want additional background or explanation.</li>
</ul>
<p>Footnote and tooltip both provide extra information, but they differ in how and when that information is displayed.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Footnote</td>
<td>Adds supplementary details or citations that remain visible and are typically placed at the bottom of a page or section.</td>
</tr>
<tr>
<td><a href="/components/tooltip/">Tooltip</a></td>
<td>Briefly shows contextual information when a user hovers or focuses on an element.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"Elements of a footnote, labeled 1 through 3.","caption":"1. **Citation:** The identifying number that appears in the content.\n2. **Footnote text:** The explanation, reference, or source associated with the citation.\n3. **Back‑to‑citation link:** Allows users to return to the original point in the content.","url":"https://dds.dell.com/site/v3/components/footnote/text-area-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Footnotes provide extra information, such as sources, compliance details, or other supporting context, without disrupting the main content.

Each citation number in the text links to its matching footnote, and each footnote includes a link back to the original reference point.

Use a footnote when your content includes referenced information and needs a linked citation that points users to additional details. Footnotes can also be used to provide clarifications, legal notes, or promotional disclosures.

<details data-name='image-block' data-images='[{"alt":"Example of a footnote","caption":"","url":"https://dds.dell.com/site/v3/components/footnote/text-area-usage.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Layout

### Specifications

Footnotes include built‑in spacing.

They are left‑aligned at the bottom of the page or section, and each number matches the reference in the content.

<details data-name='image-block' data-images='[{"alt":"Footnote padding is 8 pixels between each footnote.","caption":"A footnote component with 8-pixel padding before, between, and after footnotes.","url":"https://dds.dell.com/site/v3/components/footnote/text-area-layout.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

Footnotes are responsive and take up the full width of their container. Their height adjusts based on how many footnotes are present.

Each footnote can wrap to multiple lines if needed.

Include a “Jump to top” link after each footnote so users can return to the referenced text.

## Standards

### Accessibility

**Place footnotes in the same position on a page**
Group all footnotes together in the same place on a page instead of featuring them in multiple sections or areas on the pages. Footnotes can be stacked but keep one component at a time.

**Footnotes should be keyboard focus operable**

Ensure footnotes are navigable via keyboard, and when users navigate through the content, visually highlight the focus state.

WCAG 2.2: 3.2.1: [On Focus (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html)

**Follow typography accessibility guidelines**
Footnotes should align with the [typography accessibility guidelines](https://www.delldesignsystem.com/foundations/typography/#accessibility). The guidelines mention specifications for line-height and spaces for text.

### Content

#### **Back-to-citation link**

Footnotes should include a back-to-citation link that navigates users back to the original page text.

#### **Be Selective**

Only use footnotes for information that is non-essential to the primary task. If the information is critical, it belongs in the main text.

#### **Keep it Brief**

Footnotes should be clear, concise, and tipically no longer than one or two short sentences.

#### **Formatting**

Maintain a consistent format throughout the footnotes. If following the standard regional norms, keep it standard throughout the experience.

Footnote

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name                | Collection | CSS var                          | Preview  |
| ------------------- | ---------- | -------------------------------- | -------- |
| spacing/sm          | Semantic   | `var(--dds-spacing-sm)`          | \-       |
| color/text/tertiary | \-         | `var(--dds-color-text-tertiary)` | \#5C6E7E |


To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-footnote--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-footnote--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-footnote--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-footnote--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-footnote--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-footnote--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

A footnote provides additional information or a source for content in the main body of a page.