@primer/react-brand 0.69.1-rc.0a4e5ff5 → 0.70.0-rc.11ae3568

package/docs/components/FAQ/react.md

@@ -0,0 +1,477 @@
+---
+title: FAQ
+description: Use the FAQ component to display content in a Q&A format.
+keywords: ['content', 'questions', 'answers']
+ready: true
+figma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=375%3A8130
+source: https://github.com/primer/brand/blob/main/packages/react/src/FAQ/FAQ.tsx
+storybook: '/brand/storybook/?path=/story/components-faq--default'
+---
+
+```js
+import {FAQ, FAQGroup} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<>
+  <FAQ>
+    <FAQ.Heading>Frequently asked questions</FAQ.Heading>
+    <FAQ.Item>
+      <FAQ.Question>What&apos;s included in the GitHub for Startups offer?</FAQ.Question>
+      <FAQ.Answer>
+        <p>
+          All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
+          off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
+          <a href="https://www.github.com" target="_blank" rel="noreferrer">
+            here
+          </a>
+          .
+        </p>
+      </FAQ.Answer>
+    </FAQ.Item>
+    <FAQ.Item>
+      <FAQ.Question>Who is eligible to apply?</FAQ.Question>
+      <FAQ.Answer>
+        <p>Startups who meet the following criteria are eligible to apply for the program:</p>
+        <ol>
+          <li>
+            <Text size="300" variant="muted">
+              Must be associated with a current GitHub for Startups partner.
+            </Text>
+          </li>
+          <li>
+            <Text size="300" variant="muted">
+              Self-funded or funded (Seed-Series A)
+            </Text>
+          </li>
+          <li>
+            <Text size="300" variant="muted">
+              Not a current GitHub Enterprise customer
+            </Text>
+          </li>
+          <li>
+            <Text size="300" variant="muted">
+              Must not have previously received credits for GitHub Enterprise
+            </Text>
+          </li>
+        </ol>
+      </FAQ.Answer>
+    </FAQ.Item>
+    <FAQ.Item>
+      <FAQ.Question>What if my startup is not eligible? Are there other resources for me?</FAQ.Question>
+      <FAQ.Answer>
+        <p>
+          If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
+          feel to sign up for a trial
+          <a href="https://www.github.com" target="_blank" rel="noreferrer">
+            here
+          </a>
+          {''}.
+        </p>
+      </FAQ.Answer>
+    </FAQ.Item>
+    <FAQ.Item>
+      <FAQ.Question>How can my organization become a GitHub for Startups partner?</FAQ.Question>
+      <FAQ.Answer>
+        <p>
+          Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
+          program.
+        </p>
+        <p>
+          <a href="https://www.github.com" target="_blank" rel="noreferrer">
+            Apply here
+          </a>
+          .
+        </p>
+      </FAQ.Answer>
+    </FAQ.Item>
+  </FAQ>
+</>
+```
+
+### Grouped FAQs
+
+Use `FAQGroup` to display multiple `FAQ` components together.
+
+Use `tabAttributes` to add arbitrary attributes to the tabs. This can be useful for tracking analytics or adding custom attributes.
+
+```jsx
+<div style={{width: '100%'}}>
+  <FAQGroup
+    tabAttributes={(children, i) => ({
+      'data-analytics': `faq-tab-${i}`,
+    })}
+  >
+    <FAQGroup.Heading>
+      Frequently asked <br /> questions
+    </FAQGroup.Heading>
+    <FAQ>
+      <FAQ.Heading>Using GitHub Enterprise</FAQ.Heading>
+      <FAQ.Item>
+        <FAQ.Question>What is GitHub Enterprise?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+      <FAQ.Item>
+        <FAQ.Question>How can GitHub Enterprise be deployed?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+      <FAQ.Item>
+        <FAQ.Question>What is GitHub Enterprise Cloud?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+    </FAQ>
+
+    <FAQ>
+      <FAQ.Heading>About GitHub Enterprise</FAQ.Heading>
+      <FAQ.Item>
+        <FAQ.Question>What is the difference between GitHub and GitHub Enterprise?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+      <FAQ.Item>
+        <FAQ.Question>Why should organizations use GitHub Enterprise?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+      <FAQ.Item>
+        <FAQ.Question>Who uses GitHub Enterprise?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+    </FAQ>
+  </FAQGroup>
+</div>
+```
+
+### GridLine variant
+
+Use `variant="gridline"` on both `FAQ` and `FAQGroup` to apply an alternative visual style.
+
+```jsx
+<div style={{width: '100%'}}>
+  <FAQGroup variant="gridline">
+    <FAQGroup.Heading>
+      Frequently asked <br /> questions
+    </FAQGroup.Heading>
+    <FAQ variant="gridline">
+      <FAQ.Heading>Using GitHub Enterprise</FAQ.Heading>
+      <FAQ.Item>
+        <FAQ.Question>What is GitHub Enterprise?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+      <FAQ.Item>
+        <FAQ.Question>How can GitHub Enterprise be deployed?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+    </FAQ>
+    <FAQ variant="gridline">
+      <FAQ.Heading>About GitHub Enterprise</FAQ.Heading>
+      <FAQ.Item>
+        <FAQ.Question>What is the difference between GitHub and GitHub Enterprise?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+      <FAQ.Item>
+        <FAQ.Question>Why should organizations use GitHub Enterprise?</FAQ.Question>
+        <FAQ.Answer>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </p>
+        </FAQ.Answer>
+      </FAQ.Item>
+    </FAQ>
+  </FAQGroup>
+</div>
+```
+
+### Rendering with dynamic data
+
+```jsx filename="noinline"
+const App = () => {
+  const fixtureData = [
+    {
+      question: 'How do I render a single paragraph?',
+      answer: (
+        <p>
+          Vestibulum at dolor justo.{' '}
+          <a href="https://www.github.com" target="_blank" rel="noreferrer">
+            Curabitur
+          </a>{' '}
+          dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada et
+          non eros.
+        </p>
+      ),
+    },
+    {
+      question: 'What about multiple paragraphs?',
+      answer: (
+        <React.Fragment>
+          <p>
+            Vestibulum at dolor justo.{' '}
+            <a href="https://www.github.com" target="_blank" rel="noreferrer">
+              Curabitur
+            </a>{' '}
+            dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada
+            et non eros.
+          </p>
+          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+        </React.Fragment>
+      ),
+    },
+    {
+      question: 'Can I render a React Fragment?',
+      answer: (
+        <React.Fragment>
+          <p>
+            Vestibulum at dolor justo.{' '}
+            <a href="https://www.github.com" target="_blank" rel="noreferrer">
+              Curabitur
+            </a>{' '}
+            dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada
+            et non eros.
+          </p>
+          <ol>
+            <li>
+              <Text size="300" variant="muted">
+                Must be associated with a current GitHub for Startups partner.
+              </Text>
+            </li>
+            <li>
+              <Text size="300" variant="muted">
+                Self-funded or funded (Seed-Series A)
+              </Text>
+            </li>
+            <li>
+              <Text size="300" variant="muted">
+                Not a current GitHub Enterprise customer
+              </Text>
+            </li>
+            <li>
+              <Text size="300" variant="muted">
+                Must not have previously received credits for GitHub Enterprise
+              </Text>
+            </li>
+          </ol>
+        </React.Fragment>
+      ),
+    },
+  ]
+
+  return (
+    <FAQ>
+      <FAQ.Heading>Frequently asked questions</FAQ.Heading>
+      <>
+        {fixtureData.map(({question, answer}) => {
+          return (
+            <FAQ.Item key={question} open={false}>
+              <FAQ.Question>{question}</FAQ.Question>
+              <FAQ.Answer>{answer}</FAQ.Answer>
+            </FAQ.Item>
+          )
+        })}
+      </>
+    </FAQ>
+  )
+}
+
+render(<App />)
+```
+
+### Toggle color customization
+
+`FAQ.Question` toggle colors can be adjusted using one of the following approaches:
+
+1. Override the global `--brand-color-accent-primary` CSS variable (recommended).
+2. Use the `toggleColor` prop on `FAQ.Question`.
+
+Available options for `toggleColor` are:
+
+`AccordionToggleColors`
+
+See Storybook for all color options.
+
+```jsx filename="noinline"
+const App = () => {
+  const customStyles = `
+  .custom-heading {
+    background: linear-gradient(271.72deg, var(--brand-Accordion-toggle-color-green-blue-start) 7.09%, var(--brand-Accordion-toggle-color-green-blue-end) 96.61%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+`
+
+  return (
+    <ThemeProvider colorMode="dark" className="custom-colors">
+      <Box padding="spacious" backgroundColor="default">
+        <style>{customStyles}</style>
+        <FAQ>
+          <FAQ.Heading className="custom-heading">Frequently asked questions</FAQ.Heading>
+          <FAQ.Subheading>Subscriptions & Payments</FAQ.Subheading>
+          <FAQ.Item>
+            <FAQ.Question toggleColor="green-blue">
+              What are the differences between GitHub Free, GitHub Pro, GitHub Team and GitHub Enterprise plans?
+            </FAQ.Question>
+            <FAQ.Answer>
+              <p>
+                GitHub Free is our basic plan created for individuals and small teams to collaborate on private and
+                public repositories.
+              </p>
+            </FAQ.Answer>
+          </FAQ.Item>
+          <FAQ.Item>
+            <FAQ.Question toggleColor="green-blue">How do I view and manage my subscription?</FAQ.Question>
+            <FAQ.Answer>
+              <p>
+                You can view your account's subscription, your other paid features and products, and your next billing
+                date in your account's billing settings.
+              </p>
+            </FAQ.Answer>
+          </FAQ.Item>
+          <FAQ.Item>
+            <FAQ.Question toggleColor="green-blue">How can I change my GitHub subscription?</FAQ.Question>
+            <FAQ.Answer>
+              <p>
+                You can upgrade or downgrade your subscription, add and remove seats, or change the billing cadence on
+                https://github.com/settings/billing.
+              </p>
+            </FAQ.Answer>
+          </FAQ.Item>
+        </FAQ>
+      </Box>
+    </ThemeProvider>
+  )
+}
+
+render(<App />)
+```
+
+## Component props
+
+### FAQ `Required`
+
+| Name        | Type                                              |   Default   | Description                              |
+| :---------- | :------------------------------------------------ | :---------: | :--------------------------------------- |
+| `className` | `string`                                          |             | Sets a custom class                      |
+| `id`        | `string`                                          |             | Sets a custom id                         |
+| `ref`       | `React.RefObject`                                 |             | Forward a Ref to the underlying DOM node |
+| `children`  | `'FAQ.Heading' \| 'FAQ.Subheading' \| 'FAQ.Item'` |             | Root element for the FAQ component.      |
+| `variant`   | `'default' \| 'gridline'`                         | `'default'` | Sets the visual variant of the FAQ.      |
+
+### FAQ.Heading `Required`
+
+| Name          | Type                    |   Default  | Description                              |
+| :------------ | :---------------------- | :--------: | :--------------------------------------- |
+| `align`       | `'start' \| 'center'`   | `'center'` | Heading text alignment                   |
+| `children`    | `string`                |            | Heading text                             |
+| `className`   | `string`                |            | Heading custom class                     |
+| `id`          | `string`                |            | Sets a custom id                         |
+| `ref`         | `React.RefObject`       |            | Forward a Ref to the underlying DOM node |
+| `size`        | `'medium' \| 'large'`   | `'medium'` | Heading text size                        |
+| `as`          | `HeadingTags`           |            | Applies the underlying HTML element      |
+| `toggleColor` | `AccordionToggleColors` |            | Sets the accordion toggle color          |
+
+### FAQ.Subheading
+
+| Name        | Type              | Default | Description                              |
+| :---------- | :---------------- | :-----: | :--------------------------------------- |
+| `children`  | `string`          |         | Sub-heading text                         |
+| `className` | `string`          |         | Sub-heading custom class                 |
+| `id`        | `string`          |         | Sets a custom id                         |
+| `as`        |                   |  `'h3'` | Applies the underlying HTML element      |
+| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node |
+
+### FAQ.Item
+
+| Name        | Type                             | Default | Description                              |
+| :---------- | :------------------------------- | :-----: | :--------------------------------------- |
+| `open`      | `boolean`                        | `false` | Sets answer visibility                   |
+| `className` | `string`                         |         | Sets a custom class                      |
+| `children`  | `'FAQ.Question' \| 'FAQ.Answer'` |         | FAQ question and answer pair             |
+| `id`        | `string`                         |         | Sets a custom id                         |
+| `ref`       | `React.RefObject`                |         | Forward a Ref to the underlying DOM node |
+
+### FAQ.Question
+
+| Name        | Type              |   Default  | Description                              |
+| :---------- | :---------------- | :--------: | :--------------------------------------- |
+| `className` | `string`          |            | Sets a custom class on the root element  |
+| `children`  | `string`          |            | Question text                            |
+| `id`        | `string`          |            | Sets a custom id                         |
+| `as`        |                   |   `'h4'`   | Applies the underlying HTML element      |
+| `weight`    | `HeadingWeights`  | `'normal'` | Sets the font weight of the question     |
+| `ref`       | `React.RefObject` |            | Forward a Ref to the underlying DOM node |
+
+### FAQ.Answer
+
+| Name        | Type              | Default | Description                                  |
+| :---------- | :---------------- | :-----: | :------------------------------------------- |
+| `className` | `string`          |         | Sets a custom class on the root element      |
+| `children`  | `ReactElement`    |         | `<p>` or `<Text>` components are recommended |
+| `id`        | `string`          |         | Sets a custom id                             |
+| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node     |
+
+### FAQGroup
+
+| Name            | Type                                                                 |   Default   | Description                                                                   |
+| :-------------- | :------------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------- |
+| `className`     | `string`                                                             |             | Sets a custom class                                                           |
+| `id`            | `string`                                                             |             | Sets a custom id                                                              |
+| `ref`           | `React.RefObject`                                                    |             | Forward a Ref to the underlying DOM node                                      |
+| `children`      | `'FAQ' \| 'FAQGroup.Heading'`                                        |             | Root element for the FAQGroup component.                                      |
+| `variant`       | `'default' \| 'gridline'`                                            | `'default'` | Sets the visual variant of the FAQGroup.                                      |
+| `tabAttributes` | `(children: ReactElement, index: number) => Record<string, unknown>` |             | Spreads the returned attributes onto the tab that's rendered by the FAQGroup. |
+
+### FAQGroup.Heading
+
+| Name | Type          | Default | Description                         |
+| :--- | :------------ | :-----: | :---------------------------------- |
+| `as` | `HeadingTags` |         | Applies the underlying HTML element |
+
+Forwards all the props from the [Heading component](../../typography/Heading/index.md), including `size`, and `weight`.

package/docs/components/Footnotes/index.md

@@ -0,0 +1,41 @@
+---
+title: Footnotes
+description: Use footnotes to display contextual information and cite sources in the page content.
+keywords: ['content', 'footnotes', 'citations', 'contextual information']
+---
+
+## Anatomy
+
+## Usage
+
+### Position
+
+Footnotes should generally appear at the bottom of the page.
+
+**✅ Do**
+
+_Place footnotes towards the end of a page._
+
+### Return links
+
+Citations in the format of a numbered list should feature both a local description and a link to return the user to the original context.
+
+**✅ Do**
+
+_Include sufficient descriptions for each citation, alongside a return link._
+
+**❌ Don't**
+
+_Don't require users to manually locate the original context for each citation._
+
+### Paragraphs
+
+Use paragraphs to present disclaimers or similar types of content.
+
+**✅ Do**
+
+_Use paragraphs for context-agnostic items of text._
+
+**❌ Don't**
+
+_Don't use paragraphs to represent citations or numbered lists._

package/docs/components/Footnotes/react.md

@@ -0,0 +1,156 @@
+---
+title: Footnotes
+description: Use footnotes to display contextual information and cite sources in the page content.
+keywords: ['content', 'footnotes', 'citations', 'contextual information']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/Footnotes/Footnotes.tsx
+storybook: '/brand/storybook/?path=/story/components-footnotes--default'
+---
+
+```js
+import {Footnotes} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<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>
+```
+
+### Paragraphs
+
+```jsx
+<Footnotes as="div">
+  <Footnotes.Item>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non facilisis tortor. Pellentesque rhoncus blandit
+    posuere. Sed eget mi finibus, fermentum turpis vitae, eleifend dolor. Maecenas viverra neque at cursus faucibus. Nam
+    tempus enim quis augue pulvinar finibus. Integer accumsan turpis eget mauris pretium, non dapibus orci cursus. Ut in
+    sollicitudin dui, eu tincidunt nunc. Donec ut placerat ex. In ullamcorper nibh eu sapien convallis bibendum. Sed
+    diam leo, rhoncus non viverra nec, ullamcorper quis arcu.
+  </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. Suspendisse malesuada nisi eget nibh tempus, et
+    sollicitudin tortor posuere. Fusce id consectetur 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 ullamcorper euismod eget quis nisl. Pellentesque nec erat tincidunt, dignissim ligula ut,
+    consectetur lectus. Sed scelerisque urna maximus varius mollis. Ut dictum sed nibh id fermentum. Ut hendrerit
+    accumsan tortor, eu tincidunt mauris blandit in. Suspendisse ut velit in felis molestie euismod. Nam vitae dui a
+    justo lacinia semper.
+  </Footnotes.Item>
+</Footnotes>
+```
+
+### Citations with return links
+
+When linking to `Footnotes` via a citation, ensure that the touch target is large enough to be easily clickable.
+
+```jsx
+<Stack>
+  <River>
+    <River.Visual>
+      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
+    </River.Visual>
+    <River.Content
+      trailingComponent={() => (
+        <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"
+                  style={{display: 'inline-block', minWidth: 'var(--base-size-12)', minHeight: 'var(--base-size-24)'}}
+                >
+                  1
+                </InlineLink>
+              </sup>
+            </Text>
+          </Text>
+        </Box>
+      )}
+    >
+      <Heading size="5" as="h3" weight="medium">
+        Leverage the industry&apos;s most flexible secure development platform.
+      </Heading>
+    </River.Content>
+  </River>
+  <River>
+    <River.Visual>
+      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray 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 most widely adopted AI developer tool.{' '}
+        <Text size="100" weight="light">
+          <sup>
+            <InlineLink
+              href="#ai"
+              id="ai-ref"
+              style={{display: 'inline-block', minWidth: 'var(--base-size-12)', minHeight: 'var(--base-size-24)'}}
+            >
+              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&apos;s <InlineLink href="#">longest running analysis</InlineLink>{' '}
+      by Acme Corp.
+    </Footnotes.Item>
+  </Footnotes>
+</Stack>
+```
+
+## Component props
+
+### Footnotes `Required`
+
+| 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 |
+
+### Footnotes.Item `Required`
+
+| name   | type     | default | required | description                                                                   |
+| ------ | -------- | ------- | -------- | ----------------------------------------------------------------------------- |
+| `href` | `string` |         | `false`  | Applies a return URL icon to the original content attributed to this citation |