<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Footnote</td>
<td>Provides additional information or attributes a source for content and is located at the bottom of a page.</td>
</tr>
<tr>
<td><a href="/components/tooltip/">Tooltip</a></td>
<td>A container that temporarily displays short, contextual text and is activated when a user hovers or focuses on an icon or other trigger.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"Elements of a footnote, labeled 1 through 3.","caption":"Footnotes have three elements to attribute sources or provide additional information:\n\n1. Citation: identifying number from the page content reference.\n2. Footnote text: identification or source of information.\n3. Back-to-citation link: navigates back to original page text.","url":"https://dds.dell.com/site/stage/0e/38/Footnote_Anatomy_d7844e3bb3.png"}]' data-numberofcolumns='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Footnotes provide supplementary information, such as identification of source, compliance information, or other additional information. 

Each label corresponds numerically to a footnote, and they are linked through a connected citation mark. A back-to-citation link at the end of each footnote facilitates navigation back to the original page text.

<details data-name='image-block' data-images='[{"alt":"Example of a footnote","caption":"","url":"https://dds.dell.com/site/production/6a/ee/Footnote_Usage_2e0bec088d.png"}]' data-numberofcolumns='1'></details>

## Layout

### Specifications

Spacing specifications are built into the component. Start-align footnotes at the bottom of the page and label numbers to correspond with the referenced 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/stage/cf/a5/Footnote_Spacing_ae01126292.png"}]' data-numberofcolumns='1'></details>

## Interaction

### Behaviors and states

Footnotes are responsive, and their default width is 100% of its container, with a variable height depending on how many footnotes are stacked. 

Each separate footnote can wrap its text to as many lines as needed. 

Include a “Jump to top” link after each footnote to reference anchored content.

## 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)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html)**Follow typography accessibility guidelines**

Footnotes should align with the [typography accessibility guidelines](/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.

#### **Formatting**

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

Footnote

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-footnote--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-footnote--basic&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-footnote--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-footnote--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-footnote--basic)


<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-footnote--docs&viewMode=docs&websiteFrame=true'></details>

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

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>


DDS Feedback Form has been updated

Home

About DDS

Figma

Data visualization

Migration guide

A11y annotation kit

AI chat toolkit

Contributor sandbox

Getting started

Changelog

Roadmap

Updates

Overview

Color

Elevation

Grid

Icons

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Category navigation

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Table

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Chart customization

Drag and drop

Empty state

Filter

Form

Microinteraction

Sign-in

Table view

Patterns

Accessibility

Brand

Partners

Case studies

FAQs

Tools

Videos

Dell Design System v1

Resources

Send Feedback

Check my tickets

Find us on Teams

Support