Footnotes
Use footnotes to display contextual information and cite sources in the page content.
import {Footnotes} from '@primer/react-brand'
<Footnotes><Footnotes.Item>"Automating your workflow with GitHub Actions," GitHub Docs{' '}<InlineLink href="https://docs.github.com/en/actions">https://docs.github.com/en/actions</InlineLink>.</Footnotes.Item><Footnotes.Item>"About Issues," GitHub Docs{' '}<InlineLink href="https://docs.github.com/en/issues">https://docs.github.com/en/issues</InlineLink>.</Footnotes.Item><Footnotes.Item>"GitHub Copilot: Your AI pair programmer," GitHub{' '}<InlineLink href="https://github.com/features/copilot/">https://github.com/features/copilot/</InlineLink>.</Footnotes.Item><Footnotes.Item>"Explore the GitHub Marketplace," GitHub Docs{' '}<InlineLink href="https://github.com/marketplace">https://github.com/marketplace</InlineLink>.</Footnotes.Item><Footnotes.Item>"GitHub Pages basics," GitHub Docs{' '}<InlineLink href="https://docs.github.com/en/pages">https://docs.github.com/en/pages</InlineLink>.</Footnotes.Item></Footnotes>
<Footnotes as="div"><Footnotes.Item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nonfacilisis tortor. Pellentesque rhoncus blandit posuere. Sed eget mi finibus,fermentum turpis vitae, eleifend dolor. Maecenas viverra neque at cursusfaucibus. Nam tempus enim quis augue pulvinar finibus. Integer accumsanturpis eget mauris pretium, non dapibus orci cursus. Ut in sollicitudin dui,eu tincidunt nunc. Donec ut placerat ex. In ullamcorper nibh eu sapienconvallis bibendum. Sed diam leo, rhoncus non viverra nec, ullamcorper quisarcu.</Footnotes.Item><Footnotes.Item>Etiam scelerisque turpis at massa pellentesque, ut pretium lorem iaculis.Pellentesque feugiat nisi quis viverra posuere. Integer eu pulvinar ligula,lacinia sollicitudin libero. Etiam in cursus lacus, vitae vestibulum elit.Fusce quis purus a urna placerat dignissim non id lectus. Suspendissemalesuada nisi eget nibh tempus, et sollicitudin tortor posuere. Fusce idconsectetur purus, sit amet faucibus orci. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus sollicitudin nisl vel felis tempor,quis porttitor diam elementum. Integer vel enim eget urna ullamcorpereuismod eget quis nisl. Pellentesque nec erat tincidunt, dignissim ligulaut, consectetur lectus. Sed scelerisque urna maximus varius mollis. Utdictum sed nibh id fermentum. Ut hendrerit accumsan tortor, eu tinciduntmauris blandit in. Suspendisse ut velit in felis molestie euismod. Nam vitaedui a justo lacinia semper.</Footnotes.Item></Footnotes>
<><River><River.Visual><imgsrc="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"alt="placeholder, blank area with an off-white background color"/></River.Visual><River.ContenttrailingComponent={() => (<Box marginBlockStart={24} paddingBlockStart={24}><Heading as="h4" size="3">17,000+</Heading><Text as="p" size="300" weight="light" variant="muted">Third-party tools support your favorite languages and frameworks{' '}<Text size="100" weight="light"><sup><InlineLink href="#economic-impact" id="economic-impact-ref">1</InlineLink></sup></Text></Text></Box>)}><Heading size="5" as="h3" weight="medium">Leverage the industry's most flexible secure development platform.</Heading></River.Content></River><River><River.Visual><imgsrc="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"alt="placeholder, blank area with an off-white background color"/></River.Visual><River.Content><Heading size="5" as="h3" weight="medium">Unlocking innovation at scale with AI-driven software development.</Heading><Text as="p" size="200" weight="light" variant="muted">The world's most widely adopted AI developer tool.{' '}<Text size="100" weight="light"><sup><InlineLink href="#ai" id="ai-ref">2</InlineLink></sup></Text></Text></River.Content></River><Footnotes><Footnotes.Item id="economic-impact" href="#economic-impact-ref">There are now 100 million developers around the world using GitHub.{' '}</Footnotes.Item><Footnotes.Item id="ai" href="#ai-ref">This factor is based on data from the industry's{' '}<InlineLink href="#">longest running analysis</InlineLink> by Acme Corp.</Footnotes.Item></Footnotes></>
name | type | default | required | description |
---|---|---|---|---|
as | 'ol' 'div' | 'ol' | false | Determines the underlying HTML element |
visuallyHiddenHeading | string | 'Footnotes' | false | Visually hidden title, which introduces the footnote content |
name | type | default | required | description |
---|---|---|---|---|
href | string | false | Applies a return URL icon to the original content attributed to this citation |