Repository: RedHat-UX/red-hat-design-system
Pull request #2194: feat(jump-links): add `<rh-jump-links>`
Author: login: bennypowers
Created: 2025-03-04T12:52:19Z | Merged: 2025-04-07T16:27:57Z

## What I did

1. patch pfe-core and pfe-tools with unreleased changes (before merging here: merge there, release there; update here, revert patches here, clear netlify cache and rebuild)
2. add `<rh-jump-links>` with rudimentary docs


## Testing Instructions

1. [`<rh-jump-links>`](https://deploy-preview-2194--red-hat-design-system.netlify.app/elements/jump-links) docs, see demos and open each in new tab



Diff:
diff --git a/.changeset/nice-taxes-count.md b/.changeset/nice-taxes-count.md
new file mode 100644
index 00000000000..60ae193498a
--- /dev/null
+++ b/.changeset/nice-taxes-count.md
@@ -0,0 +1,20 @@
+---
+"@rhds/elements": minor
+---
+`<rh-jump-links>`: ✨ Added `<rh-jump-links>`
+
+Jump links is a navigation list of links enhanced with Red Hat branded design and a scroll spy mechanism.
+It comes in horizontal and vertical layouts, and can be composed with `<rh-disclosure>` for a mobile-friendly presentation.
+
+```html
+<aside id="jump-links-container">
+  <h2 id="jump-links-title">Sections</h2>
+  <rh-jump-links aria-labelledby="jump-links-title">
+    <rh-jump-link href="#heading-1">Heading 1</rh-jump-link>
+    <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+    <rh-jump-link href="#heading-3">Heading 3</rh-jump-link>
+    <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+    <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+  </rh-jump-links>
+</aside>
+```
diff --git a/docs/_data/comingSoonItems.yaml b/docs/_data/comingSoonItems.yaml
index e342f2e231d..f082ceba404 100644
--- a/docs/_data/comingSoonItems.yaml
+++ b/docs/_data/comingSoonItems.yaml
@@ -1,2 +1 @@
 - rh-footnote
-- rh-jump-links
\ No newline at end of file
diff --git a/docs/_data/repoStatus.ts b/docs/_data/repoStatus.ts
index 0e35bf62226..e64eb3abee3 100644
--- a/docs/_data/repoStatus.ts
+++ b/docs/_data/repoStatus.ts
@@ -287,11 +287,11 @@ export default [
     tagName: 'rh-jump-links',
     name: 'Jump links',
     type: 'element',
-    overallStatus: 'planned',
+    overallStatus: 'ready',
     libraries: {
-      figma: 'na',
-      rhds: 'na',
-      shared: 'na',
+      figma: 'ready',
+      rhds: 'ready',
+      shared: 'inProgress',
       docs: 'ready',
     },
   },
diff --git a/docs/_plugins/lit-ssr/worker.ts b/docs/_plugins/lit-ssr/worker.ts
index 6e12c016fdf..e674c84e1ca 100644
--- a/docs/_plugins/lit-ssr/worker.ts
+++ b/docs/_plugins/lit-ssr/worker.ts
@@ -40,8 +40,8 @@ try {
         try {
           await import(spec);
         } catch (e) {
-          console.log(spec);
-          console.error(e);
+          console.log(`Failed to load ${bareSpec} from ${spec.replace(process.cwd(), '').replace('file://', '')}!`);
+          console.warn((e as Error)?.message?.trim() || e);
         }
       }));
 } catch (e) {
diff --git a/elements/rh-jump-links/README.md b/elements/rh-jump-links/README.md
new file mode 100644
index 00000000000..1997b4f7412
--- /dev/null
+++ b/elements/rh-jump-links/README.md
@@ -0,0 +1,17 @@
+# Jump links
+
+Jump links is a navigation list of links enhanced with Red Hat branded design and a scroll spy mechanism.
+It comes in horizontal and vertical layouts, and can be composed with `<rh-disclosure>` for a mobile-friendly presentation.
+
+```html
+<aside id="jump-links-container">
+  <h2 id="jump-links-title">Sections</h2>
+  <rh-jump-links aria-labelledby="jump-links-title">
+    <rh-jump-link href="#heading-1">Heading 1</rh-jump-link>
+    <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+    <rh-jump-link href="#heading-3">Heading 3</rh-jump-link>
+    <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+    <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+  </rh-jump-links>
+</aside>
+```
diff --git a/elements/rh-jump-links/context.ts b/elements/rh-jump-links/context.ts
new file mode 100644
index 00000000000..e94458f6e9b
--- /dev/null
+++ b/elements/rh-jump-links/context.ts
@@ -0,0 +1,4 @@
+import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';
+
+export const rhJumpLinksOrientationContext =
+  createContextWithRoot(Symbol('rh-jump-links[orientation]'));
diff --git a/elements/rh-jump-links/demo/horizontal.html b/elements/rh-jump-links/demo/horizontal.html
new file mode 100644
index 00000000000..70add776714
--- /dev/null
+++ b/elements/rh-jump-links/demo/horizontal.html
@@ -0,0 +1,284 @@
+<div id="jump-links-horizontal-demo-page-content">
+  <aside id="jump-links-container">
+    <h2 id="jump-links-title">Sections</h2>
+    <rh-jump-links orientation="horizontal"
+                   aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1"
+                    active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-links-list>
+        <rh-jump-link slot="parent"
+                      href="#heading-3">Heading 3</rh-jump-link>
+        <rh-jump-link href="#heading-3-1">Heading 3-1</rh-jump-link>
+        <rh-jump-link href="#heading-3-2">Heading 3-2</rh-jump-link>
+        <rh-jump-link href="#heading-3-3">Heading 3-3</rh-jump-link>
+        <rh-jump-link href="#heading-3-4">Heading 3-4</rh-jump-link>
+      </rh-jump-links-list>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+      <rh-jump-link href="#heading-6">Heading 6</rh-jump-link>
+      <rh-jump-link href="#heading-7">Heading 7</rh-jump-link>
+      <rh-jump-link href="#heading-8">Heading 8</rh-jump-link>
+      <rh-jump-link href="#heading-9">Heading 9</rh-jump-link>
+      <rh-jump-link href="#heading-10">Heading 10</rh-jump-link>
+      <rh-jump-link href="#heading-11">Heading 11</rh-jump-link>
+    </rh-jump-links>
+  </aside>
+
+  <article>
+    <h2 id="heading-1">Heading 1</h2>
+    <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-2">Heading 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-3">Heading 3</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-4">Heading 4</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-5">Heading 5</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-6">Heading 6</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-7">Heading 7</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-8">Heading 8</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-9">Heading 9</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-10">Heading 10</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-11">Heading 11</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
+      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
+      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+      maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+  </article>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+  import '@rhds/elements/rh-jump-links/rh-jump-links-list.js';
+</script>
+
+<style>
+  #jump-links-horizontal-demo-page-content {
+    display: block;
+
+    #jump-links-container,
+    article {
+      background-color: var(--rh-color-surface);
+    }
+
+    article {
+      padding: var(--rh-space-2xl);
+    }
+
+    #jump-links-container {
+      position: sticky;
+      padding-inline: var(--rh-space-2xl);
+      padding-block-start: var(--rh-space-2xl);
+      inset-block-start: 0;
+    }
+
+    #jump-links-title {
+      font-weight: var(--rh-font-weight-heading-medium);
+      font-family: var(--rh-font-family-body-text);
+      font-size: var(--rh-font-size-body-text-md);
+      line-height: var(--rh-line-height-body-text, 1.5);
+      text-align: center;
+      margin: 0 auto;
+      margin-block-end: var(--rh-space-lg);
+    }
+
+    h2 {
+      scroll-margin-block-start: 150px;
+    }
+  }
+</style>
diff --git a/elements/rh-jump-links/demo/nested.html b/elements/rh-jump-links/demo/nested.html
new file mode 100644
index 00000000000..7a3423e53a4
--- /dev/null
+++ b/elements/rh-jump-links/demo/nested.html
@@ -0,0 +1,103 @@
+<div id="page-content">
+  <aside id="jump-links-container">
+    <h2 id="jump-links-title">Sections</h2>
+    <rh-jump-links aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-links-list>
+        <rh-jump-link slot="parent" href="#heading-3">Heading 3</rh-jump-link>
+        <rh-jump-link href="#heading-3-1">Heading 3-1</rh-jump-link>
+        <rh-jump-link href="#heading-3-2">Heading 3-2</rh-jump-link>
+        <rh-jump-link href="#heading-3-3">Heading 3-3</rh-jump-link>
+        <rh-jump-link href="#heading-3-4">Heading 3-4</rh-jump-link>
+      </rh-jump-links-list>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+    </rh-jump-links>
+  </aside>
+
+  <article>
+    <h2 id="heading-1">Heading 1</h2>
+    <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-2">Heading 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-3">Heading 3</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <h3 id="heading-3-1">Heading 3-1</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <h3 id="heading-3-2">Heading 3-2</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <h3 id="heading-3-3">Heading 3-3</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <h3 id="heading-3-4">Heading 3-4</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-4">Heading 4</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-5">Heading 5</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+  </article>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+  import '@rhds/elements/rh-jump-links/rh-jump-links-list.js';
+</script>
+
+<style>
+  #page-content {
+    display: grid;
+    grid-template-columns: max-content max-content;
+    gap: var(--rh-space-lg);
+    #jump-links-container, article {
+      padding: var(--rh-space-2xl);
+    }
+    #jump-links-container {
+      position: sticky;
+      inset-block-start: 0;
+      align-self: start;
+    }
+  }
+  #jump-links-title {
+    font-weight: var(--rh-font-weight-heading-medium);
+    font-family: var(--rh-font-family-body-text);
+    font-size: var(--rh-font-size-body-text-md);
+    line-height: var(--rh-line-height-body-text, 1.5);
+    margin-block-end: var(--rh-space-lg);
+  }
+</style>
+
diff --git a/elements/rh-jump-links/demo/responsive.html b/elements/rh-jump-links/demo/responsive.html
new file mode 100644
index 00000000000..e9d3dac9c37
--- /dev/null
+++ b/elements/rh-jump-links/demo/responsive.html
@@ -0,0 +1,108 @@
+<section id="responsive-container">
+  <div class="desktop">
+    <h2 id="jump-links-title" class="jump-links-title">Sections</h2>
+    <rh-jump-links aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-link href="#heading-3">Heading 3</rh-jump-link>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+    </rh-jump-links>
+  </div>
+  <rh-disclosure class="mobile">
+    <h2 id="mobile-jump-links-title" class="jump-links-title" slot="summary">Sections</h2>
+    <rh-jump-links aria-labelledby="mobile-jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-link href="#heading-3">Heading 3</rh-jump-link>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+    </rh-jump-links>
+  </rh-disclosure>
+
+  <article>
+    <h2 id="heading-1">Heading 1</h2>
+    <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-2">Heading 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-3">Heading 3</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-4">Heading 4</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-5">Heading 5</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+  </article>
+</section>
+
+<script type="module">
+  import '@rhds/elements/rh-disclosure/rh-disclosure.js';
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+</script>
+
+<style>
+  #responsive-container {
+    margin: var(--rh-space-xl);
+
+    & p { margin-block-end: var(--rh-space-md); }
+
+    & h2 {
+      font-size: var(--rh-font-size-heading-xl);
+      font-weight: var(--rh-font-weight-heading-regular);
+      font-family: var(--rh-font-family-heading);
+      margin-block: var(--rh-space-md);
+    }
+
+    & .jump-links-title {
+      rh-disclosure & { display: inline; }
+      font-weight: var(--rh-font-weight-heading-medium);
+      font-family: var(--rh-font-family-body-text);
+      font-size: var(--rh-font-size-body-text-md);
+      line-height: var(--rh-line-height-body-text);
+      margin-block-end: var(--rh-space-lg);
+    }
+
+    & .desktop { display: none; }
+
+    & rh-disclosure {
+      margin-block-end: var(--rh-space-xl);
+    }
+
+    @media (width >= /*--rh-media-md*/ 992px) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: var(--rh-space-lg);
+      align-items: start;
+
+      & .desktop {
+        display: block;
+        position: sticky;
+        top: 0;
+      }
+
+      & .mobile { display: none; }
+    }
+  }
+</style>
diff --git a/elements/rh-jump-links/demo/rh-jump-links.html b/elements/rh-jump-links/demo/rh-jump-links.html
new file mode 100644
index 00000000000..2e4ec7d5644
--- /dev/null
+++ b/elements/rh-jump-links/demo/rh-jump-links.html
@@ -0,0 +1,36 @@
+<div id="jump-links-demo-container">
+  <aside>
+    <h2 id="sections">Sections</h2>
+    <rh-jump-links aria-labelledby="sections">
+      <rh-jump-link href="#section-1">Section 1</rh-jump-link>
+      <rh-jump-link href="#section-2">Section 2</rh-jump-link>
+      <rh-jump-link href="#section-3">Section 3</rh-jump-link>
+      <rh-jump-link href="#section-4">Section 4</rh-jump-link>
+      <rh-jump-link href="#section-5">Section 5</rh-jump-link>
+    </rh-jump-links>
+  </aside>
+  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit itaque veniam animi iure corporis quibusdam error, necessitatibus inventore fugiat, minus natus eaque provident eius facilis.
+    Dolorem qui tenetur quaerat facere!</p>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+</script>
+
+<style>
+  #jump-links-demo-container {
+    display: grid;
+    grid-template-columns: max-content auto;
+    gap: var(--rh-space-lg);
+
+    aside {
+      h2 {
+        font-weight: var(--rh-font-weight-heading-medium);
+        font-family: var(--rh-font-family-body-text);
+        font-size: var(--rh-font-size-body-text-md);
+        line-height: var(--rh-line-height-body-text, 1.5);
+        margin-block-end: var(--rh-space-lg);
+      }
+    }
+  }
+</style>
diff --git a/elements/rh-jump-links/demo/with-content.html b/elements/rh-jump-links/demo/with-content.html
new file mode 100644
index 00000000000..0756a2ac7ae
--- /dev/null
+++ b/elements/rh-jump-links/demo/with-content.html
@@ -0,0 +1,76 @@
+<div id="page-content">
+  <aside id="jump-links-container">
+    <h2 id="jump-links-title">Sections</h2>
+    <rh-jump-links aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1">Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-link href="#heading-3">Heading 3</rh-jump-link>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+    </rh-jump-links>
+  </aside>
+
+  <article>
+    <h2 id="heading-1">Heading 1</h2>
+    <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-2">Heading 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-3">Heading 3</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-4">Heading 4</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-5">Heading 5</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+  </article>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+</script>
+
+<style>
+  #page-content {
+    display: grid;
+    grid-template-columns: max-content max-content;
+    gap: var(--rh-space-lg);
+    #jump-links-container, article {
+      padding: var(--rh-space-2xl);
+    }
+  }
+  #jump-links-container {
+    position: sticky;
+    inset-block-start: 0;
+    align-self: start;
+  }
+  #jump-links-title {
+    font-weight: var(--rh-font-weight-heading-medium);
+    font-family: var(--rh-font-family-body-text);
+    font-size: var(--rh-font-size-body-text-md);
+    line-height: var(--rh-line-height-body-text, 1.5);
+    margin-block-end: var(--rh-space-lg);
+  }
+</style>
+
diff --git a/elements/rh-jump-links/docs/00-overview.md b/elements/rh-jump-links/docs/00-overview.md
index 47ee5ab33b6..a5a1495ecde 100644
--- a/elements/rh-jump-links/docs/00-overview.md
+++ b/elements/rh-jump-links/docs/00-overview.md
@@ -1,11 +1,8 @@
-## Overview
+## When to use
 
-Jump links act as persistent navigation that consists of a vertical list of 
-anchor links. Selecting a link moves a user to content that corresponds with 
-the link selected. A link is displayed as active when the content it links to 
-is visible in the browser window.
-
-## Sample element
+- Act as persistent or sticky navigation for pages with lots of content
+- Navigate through section headings on a page without scrolling
+- Move a user to a specific section of content
 
 <div id="overview-image-description" class="visually-hidden">
   Jump links sample element
diff --git a/elements/rh-jump-links/docs/10-style.md b/elements/rh-jump-links/docs/10-style.md
index 70099922519..cfde1df65f0 100644
--- a/elements/rh-jump-links/docs/10-style.md
+++ b/elements/rh-jump-links/docs/10-style.md
@@ -1,140 +1,86 @@
-
 ## Style
 
-Jump links are fixed on the page and follow a user as they scroll. It moves
-them to a section of content when the corresponding link is selected. It looks
-visually similar to <a href="../tabs">Open tabs</a>, the only difference is
-the uppercase label on top.
-
-<uxdot-example color-palette="lightest" width-adjustment="537px">
-  <img alt="Jump links specs"
-       src="../jump-links-style.svg"
-       width="536"
-       height="330">
-</uxdot-example>
-
-
-### Color scheme
-<a id="theme"></a>
-
-<uxdot-example color-palette="lightest" width-adjustment="385px">
-  <img alt="Jump links theme light"
-       src="../jump-links-theme-light.svg"
-       width="383"
-       height="300">
-</uxdot-example>
-
-<uxdot-example color-palette="darkest" width-adjustment="385px">
-  <img alt="Jump links theme dark"
-       src="../jump-links-theme-dark.svg"
-       width="383"
-       height="300">
-</uxdot-example>
-
+Jump links are a list of links located near content that act as persistent
+navigation. This list can be vertical or horizontal and a title is always
+included on top.
 
-### Label
+### Anatomy
 
-Jump links display a label at the top indicating there are section links that
-a user can select. This label isn’t interactive.
+<uxdot-example>{# insert anatomy svg #}</uxdot-example>
 
+1. Title
+2. Inactive section
+3. Active section border
+4. Active section
+5. Section with nested jump links
 
-### Section links
 
-Jump links feature links that float to the right of an anchor line, they
-represent the different sections that are available to select.
+## Color scheme
 
+Vertical and horizontal jump links are available in both light and dark color
+schemes.
 
-### Nested section links
+### Light scheme
 
-Sections that contain lots of content can be broken into nested sections for
-better organization and hierarchy. Nested section links are positioned under
-their parent section link and indented slightly. There are guidelines about
-how many section links can be included, but no guidelines about how many
-nested section links can be included.
+The light scheme disclosure includes a box shadow, but the dark scheme
+disclosure does not.
 
-<uxdot-example color-palette="lightest" width-adjustment="129px">
-  <img alt="Jump links nested section"
-       src="../jump-links-nested.svg"
-       width="127"
-       height="300">
-</uxdot-example>
+<uxdot-example color-palette="lightest">{# insert light svg #}</uxdot-example>
 
+### Dark scheme
 
-### Active indicator bar
+<uxdot-example color-palette="darkest">{# insert dark svg #}</uxdot-example>
 
-A red indicator bar highlights what the active section is. It’s positioned on
-top of the anchor line, not adjacent.
+## Space
 
-<uxdot-example color-palette="lightest" width-adjustment="206px">
-  <img alt="Jump links active indicator bar"
-       src="../jump-links-indicator.svg"
-       width="206"
-       height="189">
-</uxdot-example>
+The space in between jump links and content should use the `--rh-space-2xl`
+token at a minimum.
 
+<uxdot-example>{# insert vertical space svg #}</uxdot-example>
 
-## Responsive design
+<uxdot-example>{# insert horizontal space svg #}</uxdot-example>
 
-Jump links can be used on all screen sizes.
+<uxdot-example>{# insert vertical disclosure space svg #}</uxdot-example>
 
+<hgroup>
 
-### Breakpoints
+## Interaction states
 
-Jump links are displayed in layout on large screens, but on small screens it’s
-wrapped in a disclosure which is collapsed until a user expands the panel.
+### Hover
 
+</hgroup>
 
-### Desktop
+The active section jump link is interactive, but the styling does not change on
+hover.
 
-<figure>
-  <uxdot-example color-palette="lightest" width-adjustment="992px">
-    <img alt="Jump links on desktop"
-         src="../jump-links-responsive-desktop.svg">
-  </uxdot-example>
-  <figcaption>On large screens, jump links are displayed in the layout</figcaption>
-</figure>
+<uxdot-example color-palette="lightest">{# insert light hover svg #}</uxdot-example>
 
+<uxdot-example color-palette="darkest">{# insert dark hover svg #}</uxdot-example>
 
-### Tablet
+<rh-table>
 
-<figure>
-  <uxdot-example color-palette="lightest" width-adjustment="768px">
-    <img alt="Jump links on tablet"
-         src="../jump-links-responsive-tablet.svg"
-         width="768"
-         height="217">
-  </uxdot-example>
-  <figcaption>Section links reduce in width as breakpoints get smaller</figcaption>
-</figure>
+ | Property                                | Light scheme                 | Dark scheme               |
+ | --------------------------------------- | ---------------------------- | ------------------------- |
+ | Thick border color                      | `--rh-color-gray-60`         | `--rh-color-gray-30`      |
+ | Jump link text color                    | `--rh-color-text-primary`    | `--rh-color-text-primary` |
+ | Disclosure trigger button surface color | `--rh-color-surface-lighter` | `--rh-color-surface-dark` |
 
+</rh-table>
 
-### Mobile
+### Focus and active
 
-<figure>
-  <uxdot-example color-palette="lightest" width-adjustment="360px">
-    <img alt="Jump links on mobile"
-         src="../jump-links-responsive-mobile.svg"
-         width="360"
-         height="640">
-  </uxdot-example>
-  <figcaption>On small screens, jump links are wrapped in a collapsed disclosure</figcaption>
-</figure>
+The active section jump link can receive focus, but the styling does not change.
 
+<uxdot-example color-palette="lightest">{# insert light focus svg #}</uxdot-example>
 
-## Spacing
+<uxdot-example color-palette="darkest">{# insert dark focus svg #}</uxdot-example>
 
-<uxdot-example color-palette="lightest" width-adjustment="385px">
-  <img alt="Jump links spacing on desktop"
-       src="../jump-links-spacing.svg"
-       width="384"
-       height="304">
-</uxdot-example>
+<rh-table>
 
-<uxdot-example color-palette="lightest" width-adjustment="872px">
-  <img alt="Jump links spacing on mobile"
-       src="../jump-links-spacing-2.svg"
-       width="884"
-       height="259">
-</uxdot-example>
+ | Property                                | Light scheme                 | Dark scheme               |
+ | --------------------------------------- | ---------------------------- | ------------------------- |
+ | Thick border color                      | `--rh-color-gray-60`         | `--rh-color-gray-30`      |
+ | Jump link text color                    | `--rh-color-text-primary`    | `--rh-color-text-primary` |
+ | Disclosure trigger button surface color | `--rh-color-surface-lighter` | `--rh-color-surface-dark` |
 
-<uxdot-spacer-tokens-table tokens="sm, md, lg, xl"></uxdot-spacer-tokens-table>
+</rh-table>
diff --git a/elements/rh-jump-links/docs/20-guidelines.md b/elements/rh-jump-links/docs/20-guidelines.md
index 4c0a0c9ce25..aa579f8b219 100644
--- a/elements/rh-jump-links/docs/20-guidelines.md
+++ b/elements/rh-jump-links/docs/20-guidelines.md
@@ -1,142 +1,252 @@
+## General usage
 
-## Usage
+In general, use jump links as a sticky or persistent navigation to help users
+move through sections of content without scrolling.
 
-### Content
+## Vertical vs. horizontal
 
-Jump links are used to help a user navigate through large sections of content. 
-Blocks of content that use jump links should be displayed in full and not 
-hidden in other components, unless absolutely necessary. Sections that contain 
-additional content can include nested sections for better organization. Nested 
-sections shouldn’t be visible under a parent section by default, they’re 
-displayed when a user scrolls past them or if they select the specific parent 
-section link.
+There are two available orientations that offer several benefits and risks.
 
-### Character count
+<rh-table>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Orientation</th>
+        <th scope="col">Benefits</th>
+        <th scope="col">Risks</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Vertical</td>
+        <td>
+          <ul>
+            <li>Flexible placement</li>
+            <li>Does not cover other content when scrolling</li>
+            <li>Can display lots of headings with lots of words</li>
+          </ul>
+        </td>
+        <td>
+          <ul>
+            <li>Less visually prominent</li>
+            <li>Layout can get narrow and show lots of lines</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Horizontal</td>
+        <td>
+          <ul>
+            <li>More visually prominent</li>
+            <li>Spans the entire page width</li>
+            <li>Layout does not change</li>
+          </ul>
+        </td>
+        <td>
+          <ul>
+            <li>Less flexible placement</li>
+            <li>Sometimes covers other content when scrolling</li>
+            <li>On small screens, some jump links are not visible</li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</rh-table>
 
-The label and section links should have fewer characters. The recommended maximum character count for the elements of jump links are listed below and include spaces.
+## Writing content
 
-<rh-table>
+### Title text
 
-| Element       | Character count |
-|---------------|-----------------|
-| Label         | 18              |
-| Section links | 30              |
+The title should always be included and should default to "Jump to section" if
+something else is not provided. Use sentence case only and limit title text to
+`25` characters max.
 
-</rh-table>
+<hgroup>
 
+## Layout
 
-### Positioning
+### Placement
 
-Jump links are placed on the left edge of the grid on large screens so content 
-can scroll freely on the right without interruption. Ensure there’s ample 
-space between jump links and the content.
+</hgroup>
 
+Vertical jump links are place on the left side of content by default and aligned
+to the top edge. However, in situations where there is already and element on
+the left side like a menu, jump links can be placed on the right side of
+content.
+
+{#
 <uxdot-example>
-  <img src="../jump-links-positioning.svg"
-        alt="Jump links positioning"
-        width="1000"
-        height="193">
+  insert placement graphic 1 here
 </uxdot-example>
+<uxdot-example>
+  insert placement graphic 2 here
+</uxdot-example>
+#}
 
+### Mobile
 
-## Best practices
-
-Jump links should contain at least two section links.
+On small screens, both vertical and horizontal jump links collapse into a
+disclosure which is always located above content. When the disclosure is
+expanded, jump links are displayed and any page content below is pushed down.
 
-<uxdot-example color-palette="lightest" width-adjustment="129px" danger>
-  <img src="../jump-links-best-practices-1.svg"
-        alt="Jump links not enough links issue"
-        width="127"
-        height="115">
+{#
+<uxdot-example>
+  insert mobile graphic 1 here
 </uxdot-example>
+#}
 
-Don’t include section links that are really long, they can be customized to be 
-shorter when added to a group of jump links.
+<hgroup>
 
-<uxdot-example color-palette="lightest" width-adjustment="361px" danger>
-  <img src="../jump-links-best-practices-2.svg"
-        alt="Jump links too long titles"
-        width="360"
-        height="189">
-</uxdot-example>
+## Behavior
 
+### Order of operations
 
-Don’t overload jump links with too many section links, but including lots 
-of nested section links is acceptable.
+</hgroup>
 
-<uxdot-example color-palette="lightest" width-adjustment="146px" danger>
-  <img src="../jump-links-best-practices-3.svg"
-        alt="Jump links too many top level links issue"
-        width="146"
-        height="358">
-</uxdot-example>
+When a page loads, both vertical and horizontal jump links are anchored to the
+top edge of content or a container before becoming sticky. There are a few
+things that can happen from here:
+
+- The first section on top is highlighted with a thick red border
+- When a user selects a jump link, they are moved down to their chosen section
+- The new active section is highlighted
+- When a user selects another jump link, they are moved up or down
+- When a user scrolls, active sections are highlighted as they pass by
 
+### Nested jump links
 
-Don’t nest section links within nested section links.
+Nested jump links are indented under the parent section. They are hidden by
+default and become visible when the parent section becomes active by a user
+clicking on it or scrolling to it. They can be individually selected, but only
+one level max is recommended.
 
-<uxdot-example color-palette="lightest" width-adjustment="141px" danger>
-  <img src="../jump-links-best-practices-4.svg"
-        alt="Jump links nesting issue"
-        width="140"
-        height="374">
+<rh-alert state="info">
+  <p>Only the vertical orientation can display nested jump links.</p>
+</rh-alert>
+
+{#
+<uxdot-example>
+  insert nested jump links graphic
 </uxdot-example>
+#}
 
 
-## Behavior
+### Scrolling on backgrounds
 
-### Positioning
+If jump links are scrolling on top of different background or surface colors,
+the jump links container needs to have a background color to avoid color
+contrast issues. If jump links are scrolling on top of a uniform color, no
+background is needed. Follow these specs as well:
 
-When a page loads, jump links are anchored to the top edge of content that it 
-applies to before it becomes persistent.
+- Use a background color that generally matches the color scheme of the rest of
+the page
+- The border radius must use `--rh-border-radius-default` token
+- Padding on all sides must use the `--rh-space-lg` token
 
+{#
+<uxdot-example>
+  insert scrolling on backgrounds graphic
+</uxdot-example>
+#}
 
-### Active section
+<hgroup>
 
-When a page loads, jump links are anchored to the top edge of content that it 
-applies to before it becomes persistent.
+## Responsive design
 
+### Vertical
 
-### Selecting sections
+</hgroup>
 
-When a user selects a section link, the content moves up or down and lands on 
-the top edge of the section they chose. The red indicator bar highlights the 
-active section link and the link changes color before the section comes into 
-view.
+Vertical jump links can occupy a specific amount of space like a number of grid
+columns. However, longer text meands more line breaks.
 
+{#
+<uxdot-example>
+  insert vertical responsive graphic
+</uxdot-example>
+#}
 
-### Mobile
+### Horizontal
 
-Jump links can be used on large and small screens. There’s not enough space to 
-use jump links in a mobile layout, so it’s wrapped in a [Disclosure]({{ 
-'/patterns/disclosure/' | url }}) and anchored above the content instead. It 
-becomes persistent when a user scrolls past the top edge of the content.
+Horizontal jump links span the entire page width. However, if the container is
+not wide enough to display everything, overflow buttons will appear.
 
-<uxdot-example color-palette="lightest" width-adjustment="872px">
-  <img src="../jump-links-behavior-mobile.svg"
-        alt="Jump links on mobile"
-        width="884"
-        height="259" />
+{#
+<uxdot-example>
+  insert horizontal responsive graphic
 </uxdot-example>
+#}
 
+### Disclosure
 
-## Interaction states
-
-  Jump links have the same interaction states as vertical [Open tabs]({{ 
-  '/elements/tabs/' | url }}).
+To save space, vertical jump links collapse into a
+[disclosure](/elements/disclosure/) element at specific screen sizes.
 
+<rh-table>
 
-### Tab order
+ | Orientation | Collapse into disclosure |
+ | ----------- | ------------------------ |
+ | Vertical    | `991px` and below        |
+ | Horizontal  | `767px` and below        |
 
-For accessibility, jump links are required to be focused. Any interactive 
-elements above jump links will be focused first until jump links stick to the 
-top edge of content. Once jump links come into view and are persistent, the 
-first section link is focused and the tab order becomes top to bottom.
+</rh-table>
 
-<uxdot-example color-palette="lightest" width-adjustment="872px">
-  <img src="../jump-links-tab-order.svg"
-        alt="Jump links tab order"
-        width="871"
-        height="195" />
-</uxdot-example>
+<hgroup>
 
+## Best practices
 
+### No title
+
+</hgroup>
+
+<div class="grid sm-two-columns">
+  <uxdot-best-practice variant="do">
+    <uxdot-example slot="image">
+      {# insert do 1 svg #}
+    </uxdot-example>
+    <p>Write a custom title or uses the default which is "Jump to section".</p>
+  </uxdot-best-practice>
+  <uxdot-best-practice variant="dont">
+    <uxdot-example slot="image">
+      {# insert dont 1 svg #}
+    </uxdot-example>
+    <p>Do not hide the title or else it might be confusing to users what this
+       element does.</p>
+  </uxdot-best-practice>
+</div>
+
+### Long headings
+
+<div class="grid sm-two-columns">
+  <uxdot-best-practice variant="do">
+    <uxdot-example slot="image">
+      {# insert do 2 svg #}
+    </uxdot-example>
+    <p>Write short headings to that short jump links are created</p>
+  </uxdot-best-practice>
+  <uxdot-best-practice variant="caution">
+    <uxdot-example slot="image">
+      {# insert dont 2 svg #}
+    </uxdot-example>
+    <p>Be aware that long headings will create event longer jump links.</p>
+  </uxdot-best-practice>
+</div>
+
+### Max number of jump links
+
+
+<div class="grid sm-two-columns">
+  <uxdot-best-practice variant="do">
+    <uxdot-example slot="image">
+      {# insert do 3 svg #}
+    </uxdot-example>
+    <p>Include a max of eight jump links or use nesting</p>
+  </uxdot-best-practice>
+  <uxdot-best-practice variant="dont">
+    <uxdot-example slot="image">
+      {# insert dont 3 svg #}
+    </uxdot-example>
+    <p>Don't overload jump links with too many parent section links.</p>
+  </uxdot-best-practice>
+</div>
diff --git a/elements/rh-jump-links/docs/40-accessibility.md b/elements/rh-jump-links/docs/40-accessibility.md
new file mode 100644
index 00000000000..e3145f57b87
--- /dev/null
+++ b/elements/rh-jump-links/docs/40-accessibility.md
@@ -0,0 +1,85 @@
+## Implementation
+
+- Provide a unique and descriptive accessible label to the jump links element, either by setting the `accessible-label` attribute, or by using `aria-labelledby` to refer to a heading element in the same root to refer to a heading element in the same root.
+- Ensure each jump link has descriptive text that says what section a user will 
+  jump to if they select it
+
+## Keyboard interactions
+
+Each individual jump link can be navigated with a keyboard. However, focus moving to a jump link does not mean it has been selected.
+
+{#
+<uxdot-example>
+  insert interactions graphic here
+</uxdot-example>
+#}
+
+<rh-table>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Key</th>
+        <th scope="col">Result</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><kbd>Tab</kbd></td>
+        <td>
+          <ul>
+            <li>Moves focus to the top jump or the next jump link</li>
+            <li>Focus can move to the disclosure trigger button</li>
+            <li>FOcus can move outside to an interactive element</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><kbd>Shift</kbd>+<kbd>Tab</kbd></td>
+        <td>
+          <ul>
+            <li>Moves focus to the previous jump or the first jump link</li>
+            <li>Focus can move to the disclosure trigger button</li>
+            <li>FOcus can move outside to an interactive element</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><kbd>Enter</kbd></td>
+        <td>
+          <ul>
+            <li>Scrolls the user to their desired section</li>
+            <li>Expands or collapses a parent nested jump link</li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</rh-table>
+
+## Focus order
+
+Focus moves through jump links first and then other elements from top to bottom or left to right.
+
+{#
+<uxdot-example>
+  insert focus order graphic here
+</uxdot-example>
+#}
+
+## Touch targets
+
+Each individual jump link and the disclosure trigger button are large enough to be selected easily.
+
+{#
+<uxdot-example>
+  insert touch targets graphic here
+</uxdot-example>
+#}
+
+{% include 'partials/accessibility/ariaguide.md' %}
+
+{% include 'partials/accessibility/wcag.md' %}
+{% include 'partials/accessibility/2.1.1-A.md' %}
+{% include 'partials/accessibility/2.1.3-AAA.md' %}
+{% include 'partials/accessibility/2.4.3-A.md' %}
+{% include 'partials/accessibility/2.5.5-AAA.md' %}
diff --git a/elements/rh-jump-links/rh-jump-link.css b/elements/rh-jump-links/rh-jump-link.css
new file mode 100644
index 00000000000..cd26f1d3101
--- /dev/null
+++ b/elements/rh-jump-links/rh-jump-link.css
@@ -0,0 +1,90 @@
+:host {
+  display: block;
+  position: relative;
+  width: max-content;
+}
+
+a {
+  color: var(--rh-color-interactive-secondary-default);
+  text-decoration: none;
+  display: inline-block;
+  box-sizing: border-box;
+
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+  }
+
+  &.vertical {
+    padding-block: var(--rh-space-md, 8px);
+    padding-inline:
+      calc(var(--rh-space-lg, 16px) + var(--_padding-inline-start, 0px))
+      var(--rh-space-lg, 16px);
+    border-inline-start: var(--_bdr);
+  }
+
+  &.horizontal {
+    padding: var(--rh-space-lg, 16px);
+    white-space: nowrap;
+  }
+
+  &:hover {
+    color: var(--rh-color-interactive-secondary-hover);
+  }
+
+  &:focus { color: var(--rh-color-interactive-secondary-focus); }
+
+  &:focus-visible {
+    outline: none;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      border: 2px solid var(--rh-color-interactive-primary-default);
+      border-radius: var(--rh-border-radius-default, 3px);
+    }
+  }
+
+  &:hover,
+  &:focus-visible {
+    --_bdr-c: var(--rh-color-border-status-neutral);
+  }
+
+  &.active {
+    color: var(--rh-color-text-primary);
+
+    --_bdr-c: var(--rh-color-brand-red);
+  }
+
+  &:focus-visible,
+  &:hover,
+  &.active {
+    &.vertical:before {
+      height: 100%;
+      inset-inline-start: 0;
+      inset-block: 0;
+      border-inline-start:
+        var(--_active_bdr,
+          var(--rh-length-xs, 4px)
+          solid
+          var(--_bdr-c, var(--rh-color-border-status-neutral)));
+    }
+
+    &.horizontal:before {
+      width: 100%;
+      inset-block-start: 0;
+      inset-inline: 0;
+      border-block-start:
+        var(--rh-length-xs, 4px)
+        solid
+        var(--_bdr-c, var(--rh-color-border-status-neutral));
+    }
+  }
+}
+
+:host([slot]) a.vertical {
+  border-inline-start: none;
+}
diff --git a/elements/rh-jump-links/rh-jump-link.ts b/elements/rh-jump-links/rh-jump-link.ts
new file mode 100644
index 00000000000..c5580a3d4e9
--- /dev/null
+++ b/elements/rh-jump-links/rh-jump-link.ts
@@ -0,0 +1,73 @@
+import { html, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators/state.js';
+import { consume } from '@lit/context';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit-html/directives/class-map.js';
+
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import style from './rh-jump-link.css';
+
+import { rhJumpLinksOrientationContext } from './context.js';
+
+/**
+ */
+@customElement('rh-jump-link')
+@themable
+export class RhJumpLink extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  static override readonly shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @consume({ context: rhJumpLinksOrientationContext, subscribe: true })
+  @state() private orientation?: 'horizontal' | 'vertical';
+
+  /** Whether this item is active. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /** hypertext reference for this link */
+  @property({ reflect: true }) href?: string;
+
+  #internals = InternalsController.of(this, { role: 'listitem' });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'listitem';
+  }
+
+  render(): TemplateResult<1> {
+    const { active, orientation = 'vertical' } = this;
+    return html`
+      <a class="${classMap({ active, [orientation]: true })}"
+         aria-current="${ifDefined(this.active ? 'location' : undefined)}"
+         href="${ifDefined(this.href)}"
+         @click="${this.#onClick}">
+        <slot></slot>
+      </a>
+    `;
+  }
+
+  @observes('active')
+  protected activeChanged(): void {
+    this.#internals.ariaCurrent = this.active ? 'location' : null;
+  }
+
+  #onClick() {
+    this.dispatchEvent(new Event('select', { bubbles: true }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rh-jump-link': RhJumpLink;
+  }
+}
diff --git a/elements/rh-jump-links/rh-jump-links-list.css b/elements/rh-jump-links/rh-jump-links-list.css
new file mode 100644
index 00000000000..23723e3504c
--- /dev/null
+++ b/elements/rh-jump-links/rh-jump-links-list.css
@@ -0,0 +1,55 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+#list {
+  padding-inline-end: var(--rh-space-lg, 16px);
+}
+
+#container {
+  --_bdr: var(--rh-length-4xs, 1px) solid var(--rh-color-border-subtle);
+
+  &.vertical {
+    border-inline-start: var(--_bdr);
+
+    --_active_bdr: none;
+
+    ::slotted(rh-jump-link[slot][active]),
+    ::slotted(rh-jump-link[slot]) { /* hide border for parent item */
+      --_bdr-c: none;
+    }
+
+    ::slotted(rh-jump-link:not([slot])) { /* exclude parent item */
+      --_padding-inline-start: var(--rh-space-lg, 16px);
+      --_bdr: none;
+    }
+  }
+
+  &.horizontal {
+    display: contents;
+    border-block-start: var(--_bdr);
+  }
+
+  &.active {
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &.vertical:before {
+      border-inline-start: var(--rh-length-xs, 4px) solid var(--rh-color-brand-red);
+      height: 100%;
+      inset-inline-start: 0;
+      inset-block: 0;
+    }
+
+    &.horizontal:before {
+      border-block-start: var(--rh-length-xs, 4px) solid var(--rh-color-brand-red);
+      width: 100%;
+      inset-block-start: 0;
+      inset-inline: 0;
+    }
+  }
+}
diff --git a/elements/rh-jump-links/rh-jump-links-list.ts b/elements/rh-jump-links/rh-jump-links-list.ts
new file mode 100644
index 00000000000..dc1fabfa0b8
--- /dev/null
+++ b/elements/rh-jump-links/rh-jump-links-list.ts
@@ -0,0 +1,59 @@
+import { html, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators/state.js';
+import { consume } from '@lit/context';
+import { classMap } from 'lit-html/directives/class-map.js';
+
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links-list.css';
+
+/**
+ */
+@customElement('rh-jump-links-list')
+@themable
+export class RhJumpLinksList extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  #internals = InternalsController.of(this, { role: 'listitem' });
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @consume({ context: rhJumpLinksOrientationContext, subscribe: true })
+  @state() private orientation?: 'horizontal' | 'vertical';
+
+  /** Whether this item is active. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  @observes('active')
+  protected activeChanged(): void {
+    this.#internals.ariaCurrent = this.active ? 'location' : null;
+  }
+
+  render(): TemplateResult<1> {
+    const { active, orientation = 'vertical' } = this;
+    return html`
+      <div id="container" class="${classMap({ active, [orientation]: true })}">
+        <slot name="parent"></slot>
+        <div id="list"
+             ?hidden="${this.orientation === 'horizontal' || !active}"
+             role="list">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rh-jump-links-list': RhJumpLinksList;
+  }
+}
diff --git a/elements/rh-jump-links/rh-jump-links.css b/elements/rh-jump-links/rh-jump-links.css
new file mode 100644
index 00000000000..0a0b5999aba
--- /dev/null
+++ b/elements/rh-jump-links/rh-jump-links.css
@@ -0,0 +1,88 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+.overflow-button { display: hidden; }
+
+#container {
+  --_bdr: var(--rh-length-4xs, 1px) solid var(--rh-color-border-subtle);
+}
+
+:host([orientation='horizontal']) {
+  display: flex;
+  justify-content: center;
+
+  #container {
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: auto visible;
+
+    &:after,
+    &:before {
+      display: block;
+      position: absolute;
+      inset-inline: 0;
+      content: '';
+    }
+
+    &:before {
+      /* scroll button width */
+      margin-inline: var(--rh-space-3xl);
+      border-block-start: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle);
+    }
+
+    &:after {
+      border-block-end: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle);
+      inset-block-end: 0;
+    }
+  }
+
+  .overflow-button {
+    flex: none;
+    line-height: 1;
+    opacity: 1;
+    border: 0;
+    padding-block: 0;
+    padding-inline: var(--rh-space-lg, 16px);
+    background-color: transparent;
+    color: var(--_overflow-button-text-color);
+    position: relative;
+    z-index: 2;
+
+    rh-icon {
+      pointer-events: none;
+      &:dir(rtl) { rotate: 180deg; }
+    }
+
+    &:nth-of-type(1) {
+      margin-inline-end: 0;
+      translate: 0 0;
+
+      &:before {
+        border-inline-width: 0 1px;
+      }
+    }
+
+    &:nth-of-type(2) {
+      margin-inline-start: 0;
+      translate: 0 0;
+      inset-inline-start: -1px;
+
+      &:before {
+        border-inline-width: 1px 0;
+      }
+    }
+
+    &:disabled {
+      pointer-events: none;
+      color:
+        light-dark(var(--rh-color-gray-40, #a3a3a3),
+          var(--rh-color-gray-50, #707070));
+    }
+
+    &:hover {
+      color: var(--rh-color-text-primary);
+    }
+  }
+}
diff --git a/elements/rh-jump-links/rh-jump-links.ts b/elements/rh-jump-links/rh-jump-links.ts
new file mode 100644
index 00000000000..02509212b55
--- /dev/null
+++ b/elements/rh-jump-links/rh-jump-links.ts
@@ -0,0 +1,166 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+
+/**
+ * Jump links act as persistent navigation that consists of a vertical list of
+ * anchor links. Selecting a link moves a user to content that corresponds with
+ * the link selected. A link is displayed as active when the content it links to
+ * is visible in the browser window.
+.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place `<rh-jump-link>` or `<rh-jump-links-list>` elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  #internals = InternalsController.of(this, { role: 'navigation' });
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('select', this.#onSelect);
+  }
+
+  override firstUpdated(): void {
+    const active: RhJumpLink | null = this.querySelector('rh-jump-link[active]');
+    if (active) {
+      this.#setActiveItem(active);
+    }
+  }
+
+  @observes('accessibleLabel')
+  protected labelChanged() {
+    if (this.accessibleLabel) {
+      this.#internals.ariaLabel = this.accessibleLabel;
+    }
+  }
+
+  render(): TemplateResult<1> {
+    const { overflowLeft, overflowRight, showScrollButtons: overflow } = this.#overflow;
+    return html`
+        <button id="scroll-start"
+                class="overflow-button"
+                ?hidden="${!overflow}"
+                tabindex="-1"
+                data-direction="start"
+                aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll back'}"
+                ?disabled="${!overflowLeft}"
+                @click="${this.#onClickScroll}">
+          <rh-icon set="ui" icon="caret-left" loading="eager"></rh-icon>
+        </button>
+
+        <div id="container" role="list">
+          <slot></slot>
+        </div>
+
+        <button id="scroll-end"
+                class="overflow-button"
+                ?hidden="${!overflow}"
+                tabindex="-1"
+                data-direction="end"
+                aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll forward'}"
+                ?disabled="${!overflowRight}"
+                @click="${this.#onClickScroll}">
+           <rh-icon set="ui" icon="caret-right" loading="eager"></rh-icon>
+        </button>
+    `;
+  }
+
+  @observes('orientation')
+  async orientationChanged() {
+    if (isServer) {
+      return;
+    }
+    if (!this.hasUpdated) {
+      await this.updateComplete;
+    }
+    const container = this.shadowRoot!.getElementById('container')!;
+    const items = Array.from(this.querySelectorAll(':scope > *')) as HTMLElement[];
+    switch (this.orientation) {
+      case 'horizontal':
+        this.#overflow.init(container, items);
+        container.addEventListener('scroll', this.#onScroll);
+        break;
+      case 'vertical':
+        container.removeEventListener('scroll', this.#onScroll);
+    }
+  }
+
+  #onClickScroll(event: Event) {
+    if (event.target instanceof HTMLElement) {
+      switch (event.target.dataset.direction) {
+        case 'start':
+          if (this.matches(':dir(rtl)')) {
+            this.#overflow.scrollRight();
+          } else {
+            this.#overflow.scrollLeft();
+          }
+          break;
+        case 'end':
+          if (this.matches(':dir(rtl)')) {
+            this.#overflow.scrollLeft();
+          } else {
+            this.#overflow.scrollRight();
+          }
+          break;
+      }
+    }
+  }
+
+  #onSelect(event: Event) {
+    if (event.target instanceof RhJumpLink) {
+      this.#setActiveItem(event.target);
+    }
+  }
+
+  async #setActiveItem(item: RhJumpLink) {
+    await this.updateComplete;
+    this.#spy.setActive(item);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rh-jump-links': RhJumpLinks;
+  }
+}
diff --git a/elements/rh-jump-links/test/rh-jump-links.spec.ts b/elements/rh-jump-links/test/rh-jump-links.spec.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/eleventy.config.ts b/eleventy.config.ts
index 5dc0475b2c9..1c835dd02da 100644
--- a/eleventy.config.ts
+++ b/eleventy.config.ts
@@ -214,6 +214,7 @@ export default async function(eleventyConfig: UserConfig) {
       'elements/rh-surface/rh-surface.ts',
       'elements/rh-table/rh-table.ts',
       'elements/rh-tag/rh-tag.ts',
+      'elements/rh-jump-links/rh-jump-links.ts',
       // deferring until https://github.com/patternfly/patternfly-elements/pull/2505 or similar
       // 'elements/rh-card/rh-card.ts',
       // 'elements/rh-tile/rh-tile.ts',
diff --git a/package-lock.json b/package-lock.json
index 188723680af..14e790c94de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@lit/context": "^1.1.4",
-        "@patternfly/pfe-core": "^4.0.5",
+        "@patternfly/pfe-core": "^5.0.0",
         "@rhds/icons": "^1.2.0",
         "@rhds/tokens": "^3.0.0",
         "lit": "^3.2.1",
@@ -4543,6 +4543,18 @@
         "tslib": "^2.6.3"
       }
     },
+    "node_modules/@patternfly/elements/node_modules/@patternfly/pfe-core": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@patternfly/pfe-core/-/pfe-core-4.0.5.tgz",
+      "integrity": "sha512-qtD4Zk7AzRzwZw+7nZOrsp0DO1Gr+mJRygUMDxD32z6FLWDsyiergGMM6mB+tYG/dDx0iT0FlDBZg3C8ik1Hgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.10",
+        "@lit/context": "^1.1.2",
+        "lit": "^3.2.0"
+      }
+    },
     "node_modules/@patternfly/eslint-config-elements": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@patternfly/eslint-config-elements/-/eslint-config-elements-4.0.0.tgz",
@@ -4602,14 +4614,14 @@
       "license": "MIT"
     },
     "node_modules/@patternfly/pfe-core": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/@patternfly/pfe-core/-/pfe-core-4.0.5.tgz",
-      "integrity": "sha512-qtD4Zk7AzRzwZw+7nZOrsp0DO1Gr+mJRygUMDxD32z6FLWDsyiergGMM6mB+tYG/dDx0iT0FlDBZg3C8ik1Hgw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/pfe-core/-/pfe-core-5.0.0.tgz",
+      "integrity": "sha512-xYydn9Bftt2YwrgchTMZ+oAlse40M9kokO7okmCZ+q34QGAyxGZGtMVAItE5QkvzuB7ldY6Fqqo2Dp3PVAXu7g==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.10",
-        "@lit/context": "^1.1.2",
-        "lit": "^3.2.0"
+        "@lit/context": "^1.1.3",
+        "lit": "^3.2.1"
       }
     },
     "node_modules/@patternfly/pfe-tools": {
diff --git a/package.json b/package.json
index 8615adde541..2eb069bf9c0 100644
--- a/package.json
+++ b/package.json
@@ -292,7 +292,7 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.4",
-    "@patternfly/pfe-core": "^4.0.5",
+    "@patternfly/pfe-core": "^5.0.0",
     "@rhds/icons": "^1.2.0",
     "@rhds/tokens": "^3.0.0",
     "lit": "^3.2.1",
diff --git a/uxdot/uxdot-sidenav.ts b/uxdot/uxdot-sidenav.ts
index 80a76a07320..c26ea1b1fff 100644
--- a/uxdot/uxdot-sidenav.ts
+++ b/uxdot/uxdot-sidenav.ts
@@ -32,11 +32,11 @@ export class UxdotSideNav extends LitElement {
   async connectedCallback() {
     super.connectedCallback();
 
-    const root = this.getRootNode() as Document | ShadowRoot;
-    if (this.trigger) {
-      this.#triggerElement = root.getElementById(this.trigger);
-    }
     if (!isServer) {
+      const root = this.getRootNode() as Document | ShadowRoot;
+      if (this.trigger) {
+        this.#triggerElement = root.getElementById(this.trigger);
+      }
       this.#triggerElement?.addEventListener('click', this.#onTriggerClick.bind(this));
       this.addEventListener('click', this.#onClick.bind(this));
       this.addEventListener('keydown', this.#onKeydown.bind(this));
diff --git a/web-dev-server.config.js b/web-dev-server.config.js
index e92f3a1a414..9d6447b8d6f 100644
--- a/web-dev-server.config.js
+++ b/web-dev-server.config.js
@@ -53,6 +53,7 @@ function injectManuallyResolvedModulesToImportMap(document) {
     Object.assign(json.imports, {
       'lit': '/node_modules/lit/index.js',
       'lit/': '/node_modules/lit/',
+      '@lit/context': '/node_modules/@lit/context/index.js',
       '@patternfly/pfe-core': '/node_modules/@patternfly/pfe-core/core.js',
       '@patternfly/pfe-core/': '/node_modules/@patternfly/pfe-core/',
       '@rhds/icons/': '/node_modules/@rhds/icons/',


Reviews:
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-24T12:55:04Z
user: login: adamjohnson
body: In the docs, on the Overview page, looks like there's some competing styles causing some issue with the grid. Jump links content is in two columns on wide screen widths (>=1776px).

![Broken looking two column jump links example on the overview docs page](https://github.com/user-attachments/assets/354b62ca-c659-4d41-a575-d9272e3231aa)

state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-03-27T20:08:37Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-27T20:15:48Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-01T14:04:45Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-01T14:04:54Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-01T14:05:37Z
user: login: adamjohnson
body: Needs:

- Docs
- Tests
- Color Context Demo

After that, you can [jump around](https://www.youtube.com/watch?v=jrL_LzX5wv4). 🕺 😉 
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-04T20:34:33Z
user: login: zeroedin
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-04T23:30:30Z
user: login: zeroedin
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-04T23:32:15Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-06T05:07:04Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-06T05:08:45Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-06T05:09:37Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-06T05:10:52Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-06T06:07:11Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-06T06:07:37Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-06T06:09:49Z
user: login: bennypowers
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-06T06:12:32Z
user: login: zeroedin
body: Links Graciously Trigger Movement
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-07T15:47:09Z
user: login: adamjohnson
body: Links Gently Track Movement
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-07T16:27:45Z

Review comments:
path: elements/rh-jump-links/rh-jump-links-item.ts
user: login: bennypowers
body: think i wanna rename this `rh-jump-link` like `rh-tabs` is to `rh-tab`
created_at: 2025-03-24T12:55:03Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,108 @@
+<section id="responsive-container">
path: elements/rh-jump-links/demo/responsive.html
user: login: adamjohnson
body: Any particular reason this is the only responsive demo here? Should it not be responsive out of the box?

  * Related: [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html)
  * Related: [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html)
created_at: 2025-03-27T19:47:56Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,76 @@
+<div id="page-content">
path: elements/rh-jump-links/demo/rh-jump-links.html
user: login: adamjohnson
body: When zooming to anything at or above 175%, the active jump link remains on the first link in the list.
created_at: 2025-03-27T19:49:18Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,76 @@
+<div id="page-content">
path: elements/rh-jump-links/demo/rh-jump-links.html
user: login: adamjohnson
body: Furthermore, jump links don't change their active states on screen widths below 996px. Perhaps this is related to the responsive demo / functionality.
created_at: 2025-03-27T19:50:48Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,108 @@
+<section id="responsive-container">
+  <div class="desktop">
+    <h2 id="jump-links-title" class="jump-links-title">Sections</h2>
+    <rh-jump-links aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-link href="#heading-3">Heading 3</rh-jump-link>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
path: elements/rh-jump-links/demo/responsive.html
user: login: adamjohnson
body: If you have an `<rh-jump-link>` with a lot of content, it never wraps to a new line—eventually causing horizontal scrollbars and moving the page content off screen.

  * Docs show text wrapping [on tablet](https://ux.redhat.com/elements/jump-links/style/#tablet), but this will almost certainly have to happen on desktop too.
  * Will likely have to set a max width to the jump links nav container or each `<rh-jump-link>`.
created_at: 2025-03-27T19:52:52Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,164 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+    if (!isServer) {
+      RovingTabindexController.of(this, {
path: elements/rh-jump-links/rh-jump-links.ts
user: login: adamjohnson
body: IMO it's not appropriate to apply RTI here.

Looking at the [WCAG Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/), they do not implement RTI there. So, for that reason, I would not use RTI here.

It may be helpful to encourage users in the docs to add a skip link to skip the jump links if they have an abnormally long rh-jump-links section

created_at: 2025-03-27T19:55:59Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,164 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+    if (!isServer) {
+      RovingTabindexController.of(this, {
+        getItems: () => Array.from(
+          this.querySelectorAll('rh-jump-link'),
+          x => x.shadowRoot?.querySelector('a')
+        ).filter(x =>
+          !!x
+          && (this.orientation === 'vertical'
+          || !x?.closest('rh-jump-links-list'))) as HTMLAnchorElement[],
+      });
+    }
+  }
+
+  override firstUpdated(): void {
+    const active: RhJumpLink | null = this.querySelector('rh-jump-link[active]');
+    if (active) {
+      this.#setActiveItem(active);
+    }
+  }
+
+  render(): TemplateResult<1> {
+    const { overflowLeft, overflowRight, showScrollButtons: overflow } = this.#overflow;
+    return html`
+        <button id="scroll-start"
path: elements/rh-jump-links/rh-jump-links.ts
user: login: adamjohnson
body: Interesting behavior here. On my local machine, if I go to the horizontal demo and make my viewport small-ish (~650px), I don't see these buttons—but have a feeling I should.

If I go to the [horizontal demo in the DP](https://deploy-preview-2194--red-hat-design-system.netlify.app/elements/jump-links/demo/horizontal/), I see the buttons but cannot activate them.

OSX + Edge/FF/Safari
created_at: 2025-03-27T20:03:30Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,129 @@
+<div id="page-content">
+  <aside id="jump-links-container">
+    <h2 id="jump-links-title">Sections</h2>
+    <rh-jump-links orientation="horizontal" aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-links-list>
+        <rh-jump-link slot="parent" href="#heading-3">Heading 3</rh-jump-link>
+        <rh-jump-link href="#heading-3-1">Heading 3-1</rh-jump-link>
+        <rh-jump-link href="#heading-3-2">Heading 3-2</rh-jump-link>
+        <rh-jump-link href="#heading-3-3">Heading 3-3</rh-jump-link>
+        <rh-jump-link href="#heading-3-4">Heading 3-4</rh-jump-link>
+      </rh-jump-links-list>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+      <rh-jump-link href="#heading-6">Heading 6</rh-jump-link>
+      <rh-jump-link href="#heading-7">Heading 7</rh-jump-link>
+      <rh-jump-link href="#heading-8">Heading 8</rh-jump-link>
+      <rh-jump-link href="#heading-9">Heading 9</rh-jump-link>
+      <rh-jump-link href="#heading-10">Heading 10</rh-jump-link>
+      <rh-jump-link href="#heading-11">Heading 11</rh-jump-link>
+    </rh-jump-links>
+  </aside>
+
+  <article>
+    <h2 id="heading-1">Heading 1</h2>
+    <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-2">Heading 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-3">Heading 3</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-4">Heading 4</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-5">Heading 5</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-6">Heading 6</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-7">Heading 7</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-8">Heading 8</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-9">Heading 9</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-10">Heading 10</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-11">Heading 11</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+  </article>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+  import '@rhds/elements/rh-jump-links/rh-jump-links-list.js';
+</script>
+
+<style>
+  #page-content {
+    display: block;
+    #jump-links-container, article {
+      background-color: var(--rh-color-surface);
+    }
+    article {
+      padding: var(--rh-space-2xl);
+    }
+    #jump-links-container {
+      position: sticky;
+      padding-inline: var(--rh-space-2xl);
+      padding-block-start: var(--rh-space-2xl);
+      inset-block-start: 0;
+    }
+    #jump-links-title {
+      font-weight: var(--rh-font-weight-heading-medium);
+      font-family: var(--rh-font-family-body-text);
+      font-size: var(--rh-font-size-body-text-md);
+      line-height: var(--rh-line-height-body-text, 1.5);
+      text-align: center;
+      margin: 0 auto;
+      margin-block-end: var(--rh-space-lg);
+    }
path: elements/rh-jump-links/demo/horizontal.html
user: login: adamjohnson
body: Might be a good idea to add:


```css
h2 { scroll-margin-top: 150px; }
```

...so that the heading doesn't get covered up by the sticky jump links nav.
created_at: 2025-03-27T20:04:52Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,129 @@
+<div id="page-content">
+  <aside id="jump-links-container">
+    <h2 id="jump-links-title">Sections</h2>
+    <rh-jump-links orientation="horizontal" aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-links-list>
+        <rh-jump-link slot="parent" href="#heading-3">Heading 3</rh-jump-link>
+        <rh-jump-link href="#heading-3-1">Heading 3-1</rh-jump-link>
+        <rh-jump-link href="#heading-3-2">Heading 3-2</rh-jump-link>
+        <rh-jump-link href="#heading-3-3">Heading 3-3</rh-jump-link>
+        <rh-jump-link href="#heading-3-4">Heading 3-4</rh-jump-link>
+      </rh-jump-links-list>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+      <rh-jump-link href="#heading-6">Heading 6</rh-jump-link>
+      <rh-jump-link href="#heading-7">Heading 7</rh-jump-link>
+      <rh-jump-link href="#heading-8">Heading 8</rh-jump-link>
+      <rh-jump-link href="#heading-9">Heading 9</rh-jump-link>
+      <rh-jump-link href="#heading-10">Heading 10</rh-jump-link>
+      <rh-jump-link href="#heading-11">Heading 11</rh-jump-link>
+    </rh-jump-links>
+  </aside>
+
+  <article>
+    <h2 id="heading-1">Heading 1</h2>
+    <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-2">Heading 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-3">Heading 3</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-4">Heading 4</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-5">Heading 5</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-6">Heading 6</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-7">Heading 7</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-8">Heading 8</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-9">Heading 9</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-10">Heading 10</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-11">Heading 11</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+  </article>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+  import '@rhds/elements/rh-jump-links/rh-jump-links-list.js';
+</script>
+
+<style>
+  #page-content {
path: elements/rh-jump-links/demo/horizontal.html
user: login: adamjohnson
body: What do you think about making this:

```suggestion
  #rhds-page-content {
```

Other properties could have existing `#page-content` IDs.
created_at: 2025-03-27T20:06:11Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,108 @@
+<section id="responsive-container">
path: elements/rh-jump-links/demo/responsive.html
user: login: bennypowers
body: I don't want to build disclosure in, I'd rather that be a pattern
created_at: 2025-03-27T20:15:48Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,129 @@
+<div id="page-content">
+  <aside id="jump-links-container">
+    <h2 id="jump-links-title">Sections</h2>
+    <rh-jump-links orientation="horizontal" aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-links-list>
+        <rh-jump-link slot="parent" href="#heading-3">Heading 3</rh-jump-link>
+        <rh-jump-link href="#heading-3-1">Heading 3-1</rh-jump-link>
+        <rh-jump-link href="#heading-3-2">Heading 3-2</rh-jump-link>
+        <rh-jump-link href="#heading-3-3">Heading 3-3</rh-jump-link>
+        <rh-jump-link href="#heading-3-4">Heading 3-4</rh-jump-link>
+      </rh-jump-links-list>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+      <rh-jump-link href="#heading-6">Heading 6</rh-jump-link>
+      <rh-jump-link href="#heading-7">Heading 7</rh-jump-link>
+      <rh-jump-link href="#heading-8">Heading 8</rh-jump-link>
+      <rh-jump-link href="#heading-9">Heading 9</rh-jump-link>
+      <rh-jump-link href="#heading-10">Heading 10</rh-jump-link>
+      <rh-jump-link href="#heading-11">Heading 11</rh-jump-link>
+    </rh-jump-links>
+  </aside>
+
+  <article>
+    <h2 id="heading-1">Heading 1</h2>
+    <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-2">Heading 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-3">Heading 3</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-4">Heading 4</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-5">Heading 5</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-6">Heading 6</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-7">Heading 7</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-8">Heading 8</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-9">Heading 9</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-10">Heading 10</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-11">Heading 11</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+  </article>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+  import '@rhds/elements/rh-jump-links/rh-jump-links-list.js';
+</script>
+
+<style>
+  #page-content {
+    display: block;
+    #jump-links-container, article {
+      background-color: var(--rh-color-surface);
+    }
+    article {
+      padding: var(--rh-space-2xl);
+    }
+    #jump-links-container {
+      position: sticky;
+      padding-inline: var(--rh-space-2xl);
+      padding-block-start: var(--rh-space-2xl);
+      inset-block-start: 0;
+    }
+    #jump-links-title {
+      font-weight: var(--rh-font-weight-heading-medium);
+      font-family: var(--rh-font-family-body-text);
+      font-size: var(--rh-font-size-body-text-md);
+      line-height: var(--rh-line-height-body-text, 1.5);
+      text-align: center;
+      margin: 0 auto;
+      margin-block-end: var(--rh-space-lg);
+    }
path: elements/rh-jump-links/demo/horizontal.html
user: login: bennypowers
body: thanks this is resolved
created_at: 2025-04-01T14:04:44Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,129 @@
+<div id="page-content">
+  <aside id="jump-links-container">
+    <h2 id="jump-links-title">Sections</h2>
+    <rh-jump-links orientation="horizontal" aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-links-list>
+        <rh-jump-link slot="parent" href="#heading-3">Heading 3</rh-jump-link>
+        <rh-jump-link href="#heading-3-1">Heading 3-1</rh-jump-link>
+        <rh-jump-link href="#heading-3-2">Heading 3-2</rh-jump-link>
+        <rh-jump-link href="#heading-3-3">Heading 3-3</rh-jump-link>
+        <rh-jump-link href="#heading-3-4">Heading 3-4</rh-jump-link>
+      </rh-jump-links-list>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
+      <rh-jump-link href="#heading-6">Heading 6</rh-jump-link>
+      <rh-jump-link href="#heading-7">Heading 7</rh-jump-link>
+      <rh-jump-link href="#heading-8">Heading 8</rh-jump-link>
+      <rh-jump-link href="#heading-9">Heading 9</rh-jump-link>
+      <rh-jump-link href="#heading-10">Heading 10</rh-jump-link>
+      <rh-jump-link href="#heading-11">Heading 11</rh-jump-link>
+    </rh-jump-links>
+  </aside>
+
+  <article>
+    <h2 id="heading-1">Heading 1</h2>
+    <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-2">Heading 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-3">Heading 3</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-4">Heading 4</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-5">Heading 5</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-6">Heading 6</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-7">Heading 7</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-8">Heading 8</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-9">Heading 9</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-10">Heading 10</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+
+    <h2 id="heading-11">Heading 11</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
+  </article>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
+  import '@rhds/elements/rh-jump-links/rh-jump-links-list.js';
+</script>
+
+<style>
+  #page-content {
path: elements/rh-jump-links/demo/horizontal.html
user: login: bennypowers
body: good catch thanks
created_at: 2025-04-01T14:04:54Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,164 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+    if (!isServer) {
+      RovingTabindexController.of(this, {
path: elements/rh-jump-links/rh-jump-links.ts
user: login: bennypowers
body: done thanks
created_at: 2025-04-01T14:05:37Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,152 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
path: elements/rh-jump-links/rh-jump-links.ts
user: login: adamjohnson
body: ```suggestion
    this.role = 'navigation';
```

`nav` is not a valid value for role. [`role="navigation"` MDN docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/navigation_role).
created_at: 2025-04-04T18:51:27Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,152 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+  }
+
+  override firstUpdated(): void {
+    const active: RhJumpLink | null = this.querySelector('rh-jump-link[active]');
+    if (active) {
+      this.#setActiveItem(active);
+    }
+  }
+
+  render(): TemplateResult<1> {
+    const { overflowLeft, overflowRight, showScrollButtons: overflow } = this.#overflow;
+    return html`
+        <button id="scroll-start"
+                class="overflow-button"
+                ?hidden="${!overflow}"
+                tabindex="-1"
+                data-direction="start"
+                aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll back'}"
+                ?disabled="${!overflowLeft}"
+                @click="${this.#onClickScroll}">
+          <rh-icon set="ui" icon="caret-left" loading="eager"></rh-icon>
+        </button>
+
+        <div id="container" role="list">
path: elements/rh-jump-links/rh-jump-links.ts
user: login: adamjohnson
body: Interestingly, axe DevTools throws an error about `role="list"` saying:

> Certain ARIA roles must contain particular children

Even though `<rh-jump-links-list>` has set `role="listitem"` via the InternalsController, axe is unable to recognize that and throws this error.

We [ran into this with Primary Nav](https://github.com/RedHat-UX/red-hat-design-system/pull/2171#discussion_r2001967844) as well. Here's my thought process/suggestion:

  * When this is released to users, they're not going to want to see any axe errors pop up because of an RHDS element (even though it **IS** a false positive). 
  * Understanding this, IMO it's best to add `role="listitem"` to the `<rh-jump-links-list>` element (either in the lightdom or via `connectedCallback()`/what have you).
    * Indeed, this will silence axe
    * Indeed, it is _very_ redundant
    * But likely to help quash future grumblings
created_at: 2025-04-04T19:19:36Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,87 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+.overflow-button { display: hidden; }
+
+#container {
+  --_bdr: var(--rh-length-4xs, 1px) solid var(--rh-color-border-subtle);
+}
+
+:host([orientation='horizontal']) {
+  display: flex;
+  justify-content: center;
+
+  #container {
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: scroll visible;
path: elements/rh-jump-links/rh-jump-links.css
user: login: adamjohnson
body: ```suggestion
    overflow: auto visible;
```

In Edge on OSX on the horizontal demo, `scroll visible` causes the horizontal scrollbar to always be visible. Probably best to only show it when it's needed.

This is what `scroll visible` looks like for me:

![horizontal jump links scrollbar placeholder screenshot](https://github.com/user-attachments/assets/ac2e73ee-aef9-4969-a16f-62ca7f2a96c0)

FYI my System Settings > Appearance > Show scroll bars is set to "Automatically based on mouse or trackpad" (IIRC the default setting).

created_at: 2025-04-04T19:29:46Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,164 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+    if (!isServer) {
+      RovingTabindexController.of(this, {
+        getItems: () => Array.from(
+          this.querySelectorAll('rh-jump-link'),
+          x => x.shadowRoot?.querySelector('a')
+        ).filter(x =>
+          !!x
+          && (this.orientation === 'vertical'
+          || !x?.closest('rh-jump-links-list'))) as HTMLAnchorElement[],
+      });
+    }
+  }
+
+  override firstUpdated(): void {
+    const active: RhJumpLink | null = this.querySelector('rh-jump-link[active]');
+    if (active) {
+      this.#setActiveItem(active);
+    }
+  }
+
+  render(): TemplateResult<1> {
+    const { overflowLeft, overflowRight, showScrollButtons: overflow } = this.#overflow;
+    return html`
+        <button id="scroll-start"
path: elements/rh-jump-links/rh-jump-links.ts
user: login: adamjohnson
body: Dug a little more into this.

These DO work if you click on the `<button>` element.

That said, if you click on the nested `<rh-icon>` element, they do not work.

The solution here would be to add:

```css
.overflow-button rh-icon {
  pointer-events: none;
}
```

Then users can click any part of the button and it works.
created_at: 2025-04-04T19:36:54Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,152 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+  }
+
+  override firstUpdated(): void {
+    const active: RhJumpLink | null = this.querySelector('rh-jump-link[active]');
+    if (active) {
+      this.#setActiveItem(active);
+    }
+  }
+
+  render(): TemplateResult<1> {
+    const { overflowLeft, overflowRight, showScrollButtons: overflow } = this.#overflow;
+    return html`
+        <button id="scroll-start"
+                class="overflow-button"
+                ?hidden="${!overflow}"
+                tabindex="-1"
+                data-direction="start"
+                aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll back'}"
+                ?disabled="${!overflowLeft}"
+                @click="${this.#onClickScroll}">
+          <rh-icon set="ui" icon="caret-left" loading="eager"></rh-icon>
+        </button>
+
+        <div id="container" role="list">
+          <slot></slot>
+        </div>
+
+        <button id="scroll-end"
+                class="overflow-button"
+                ?hidden="${!overflow}"
+                tabindex="-1"
+                data-direction="end"
+                aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll forward'}"
+                ?disabled="${!overflowRight}"
+                @click="${this.#onClickScroll}">
+           <rh-icon set="ui" icon="caret-right" loading="eager"></rh-icon>
path: elements/rh-jump-links/rh-jump-links.ts
user: login: adamjohnson
body: Nice use of the `loading` attribute! 👏 
created_at: 2025-04-04T19:39:58Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,152 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
path: elements/rh-jump-links/rh-jump-links.ts
user: login: zeroedin
body: Should the role be set by internals?
created_at: 2025-04-04T23:30:30Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,87 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+.overflow-button { display: hidden; }
+
+#container {
+  --_bdr: var(--rh-length-4xs, 1px) solid var(--rh-color-border-subtle);
+}
+
+:host([orientation='horizontal']) {
+  display: flex;
+  justify-content: center;
+
+  #container {
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: scroll visible;
path: elements/rh-jump-links/rh-jump-links.css
user: login: zeroedin
body: This was an issue I just cleaned up on Secondary Nav. Nice catch here, @adamjohnson .
created_at: 2025-04-04T23:32:15Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,152 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+  }
+
+  override firstUpdated(): void {
+    const active: RhJumpLink | null = this.querySelector('rh-jump-link[active]');
+    if (active) {
+      this.#setActiveItem(active);
+    }
+  }
+
+  render(): TemplateResult<1> {
+    const { overflowLeft, overflowRight, showScrollButtons: overflow } = this.#overflow;
+    return html`
+        <button id="scroll-start"
+                class="overflow-button"
+                ?hidden="${!overflow}"
+                tabindex="-1"
+                data-direction="start"
+                aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll back'}"
+                ?disabled="${!overflowLeft}"
+                @click="${this.#onClickScroll}">
+          <rh-icon set="ui" icon="caret-left" loading="eager"></rh-icon>
+        </button>
+
+        <div id="container" role="list">
path: elements/rh-jump-links/rh-jump-links.ts
user: login: bennypowers
body: ec6cc82c
created_at: 2025-04-06T05:07:04Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,152 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
path: elements/rh-jump-links/rh-jump-links.ts
user: login: bennypowers
body: ec6cc82c
created_at: 2025-04-06T05:08:45Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,87 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+.overflow-button { display: hidden; }
+
+#container {
+  --_bdr: var(--rh-length-4xs, 1px) solid var(--rh-color-border-subtle);
+}
+
+:host([orientation='horizontal']) {
+  display: flex;
+  justify-content: center;
+
+  #container {
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: scroll visible;
path: elements/rh-jump-links/rh-jump-links.css
user: login: bennypowers
body: d464ec59
created_at: 2025-04-06T05:09:37Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,152 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+  }
+
+  override firstUpdated(): void {
+    const active: RhJumpLink | null = this.querySelector('rh-jump-link[active]');
+    if (active) {
+      this.#setActiveItem(active);
+    }
+  }
+
+  render(): TemplateResult<1> {
+    const { overflowLeft, overflowRight, showScrollButtons: overflow } = this.#overflow;
+    return html`
+        <button id="scroll-start"
+                class="overflow-button"
+                ?hidden="${!overflow}"
+                tabindex="-1"
+                data-direction="start"
+                aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll back'}"
+                ?disabled="${!overflowLeft}"
+                @click="${this.#onClickScroll}">
+          <rh-icon set="ui" icon="caret-left" loading="eager"></rh-icon>
+        </button>
+
+        <div id="container" role="list">
+          <slot></slot>
+        </div>
+
+        <button id="scroll-end"
+                class="overflow-button"
+                ?hidden="${!overflow}"
+                tabindex="-1"
+                data-direction="end"
+                aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll forward'}"
+                ?disabled="${!overflowRight}"
+                @click="${this.#onClickScroll}">
+           <rh-icon set="ui" icon="caret-right" loading="eager"></rh-icon>
path: elements/rh-jump-links/rh-jump-links.ts
user: login: bennypowers
body: 1f2753e1
created_at: 2025-04-06T05:10:52Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,164 @@
+import { html, isServer, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { provide } from '@lit/context';
+
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+
+import { themable } from '@rhds/elements/lib/themable.js';
+
+import { RhJumpLink } from './rh-jump-link.js';
+import { rhJumpLinksOrientationContext } from './context.js';
+
+import style from './rh-jump-links.css';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+
+/**
+ * **Jump links** allow users to navigate to sections within a page.
+ * @fires toggle - when the `expanded` disclosure widget is toggled
+ * @slot - Place rh-jump-link elements here
+ */
+@customElement('rh-jump-links')
+@themable
+export class RhJumpLinks extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** Whether the layout of children is vertical or horizontal. */
+  @provide({ context: rhJumpLinksOrientationContext })
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  /** Accessible label for nav */
+  @property() label?: string;
+
+  #overflow = new OverflowController(this);
+
+  #onScroll = this.#overflow.onScroll.bind(this);
+
+  #spy = new ScrollSpyController(this, {
+    rootMargin: '0px 0px 0px 0px',
+    tagNames: ['rh-jump-link'],
+    onIntersection: () => {
+      for (const list of this.querySelectorAll('rh-jump-links-list')) {
+        list.active = !!list.querySelector('rh-jump-link[active]');
+      }
+      this.#overflow.update();
+    },
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'nav';
+    this.addEventListener('select', this.#onSelect);
+    if (!isServer) {
+      RovingTabindexController.of(this, {
+        getItems: () => Array.from(
+          this.querySelectorAll('rh-jump-link'),
+          x => x.shadowRoot?.querySelector('a')
+        ).filter(x =>
+          !!x
+          && (this.orientation === 'vertical'
+          || !x?.closest('rh-jump-links-list'))) as HTMLAnchorElement[],
+      });
+    }
+  }
+
+  override firstUpdated(): void {
+    const active: RhJumpLink | null = this.querySelector('rh-jump-link[active]');
+    if (active) {
+      this.#setActiveItem(active);
+    }
+  }
+
+  render(): TemplateResult<1> {
+    const { overflowLeft, overflowRight, showScrollButtons: overflow } = this.#overflow;
+    return html`
+        <button id="scroll-start"
path: elements/rh-jump-links/rh-jump-links.ts
user: login: bennypowers
body: https://github.com/RedHat-UX/red-hat-design-system/commit/1f2753e1169d729ffbb1c520e5aafeb7d12ddf02
created_at: 2025-04-06T06:07:11Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,108 @@
+<section id="responsive-container">
+  <div class="desktop">
+    <h2 id="jump-links-title" class="jump-links-title">Sections</h2>
+    <rh-jump-links aria-labelledby="jump-links-title">
+      <rh-jump-link href="#heading-1" active>Heading 1</rh-jump-link>
+      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
+      <rh-jump-link href="#heading-3">Heading 3</rh-jump-link>
+      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
+      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
path: elements/rh-jump-links/demo/responsive.html
user: login: bennypowers
body: I'd like to defer this to a patch release, with some design guidance
created_at: 2025-04-06T06:07:37Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,76 @@
+<div id="page-content">
path: elements/rh-jump-links/demo/rh-jump-links.html
user: login: bennypowers
body: Our IO threshold is set to 0.85 - at extreme zoom, we won't get that for the horizontal width of the target elements. Changing the threshold could have effects on the normal (i.e. vertical, 100% zoom) case. Do we want to support horizontally scrolling pages? if so, it might not be straightforward to solve this - we'd have to expose an attr on the element perhaps. 
created_at: 2025-04-06T06:09:49Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,76 @@
+<div id="page-content">
path: elements/rh-jump-links/demo/rh-jump-links.html
user: login: bennypowers
body: let's defer this until after 3.0
created_at: 2025-04-06T06:12:31Z
author_association: MEMBER

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-03-04T12:52:22Z
body: ###  🦋  Changeset detected

Latest commit: 00bb30e3e477e19a60c9a1208fe631befc5858c4

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name           | Type  |
| -------------- | ----- |
| @rhds/elements | Minor |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/RedHat-UX/red-hat-design-system/new/feat/jump-links?filename=.changeset/slow-panthers-protect.md&value=---%0A%22%40rhds%2Felements%22%3A%20patch%0A---%0A%0Afeat(jump-links)%3A%20add%20%60%3Crh-jump-links%3E%60%0A)


author_association: NONE
user: login: netlify[bot]
created_at: 2025-03-04T12:52:36Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *red-hat-design-system* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit |  |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/red-hat-design-system/deploys/67f3f66c67495dc98af97312 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-2194--red-hat-design-system.netlify.app](https://deploy-preview-2194--red-hat-design-system.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTIxOTQtLXJlZC1oYXQtZGVzaWduLXN5c3RlbS5uZXRsaWZ5LmFwcCJ9.fwrd8dNhoixC8WVWwfaK6CLP9X2tj-NKwVnvwMygII0)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [red-hat-design-system Preview](https://deploy-preview-2194--red-hat-design-system.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/red-hat-design-system/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-04T12:59:13Z
body: **Size Change:** +5.83 kB (+2.57%) 

**Total Size:** 232 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./elements.js` | 538 B | +13 B (+2.48%) |  |
| `./uxdot/uxdot-sidenav.js` | 2.69 kB | -2 B (-0.07%) |  |
| `./elements/rh-jump-links/context.js` | 179 B | +179 B (new file) | 🆕 |
| `./elements/rh-jump-links/rh-jump-link.js` | 1.46 kB | +1.46 kB (new file) | 🆕 |
| `./elements/rh-jump-links/rh-jump-links-list.js` | 1.15 kB | +1.15 kB (new file) | 🆕 |
| `./elements/rh-jump-links/rh-jump-links.js` | 2.45 kB | +2.45 kB (new file) | 🆕 |
| `./react/rh-jump-links/rh-jump-link.js` | 196 B | +196 B (new file) | 🆕 |
| `./react/rh-jump-links/rh-jump-links-list.js` | 189 B | +189 B (new file) | 🆕 |
| `./react/rh-jump-links/rh-jump-links.js` | 195 B | +195 B (new file) | 🆕 |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./elements/rh-accordion/context.js` | 162 B |
| `./elements/rh-accordion/rh-accordion-header.js` | 2.67 kB |
| `./elements/rh-accordion/rh-accordion-panel.js` | 1.26 kB |
| `./elements/rh-accordion/rh-accordion.js` | 3.32 kB |
| `./elements/rh-alert/rh-alert.js` | 4.98 kB |
| `./elements/rh-announcement/rh-announcement.js` | 2.12 kB |
| `./elements/rh-audio-player/rh-audio-player-about.js` | 1.8 kB |
| `./elements/rh-audio-player/rh-audio-player-rate-stepper.js` | 1.76 kB |
| `./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js` | 1.5 kB |
| `./elements/rh-audio-player/rh-audio-player-subscribe.js` | 1.37 kB |
| `./elements/rh-audio-player/rh-audio-player.js` | 13 kB |
| `./elements/rh-audio-player/rh-cue.js` | 1.95 kB |
| `./elements/rh-audio-player/rh-transcript.js` | 2.69 kB |
| `./elements/rh-avatar/random-pattern-controller.js` | 2.72 kB |
| `./elements/rh-avatar/rh-avatar.js` | 2.65 kB |
| `./elements/rh-back-to-top/rh-back-to-top.js` | 1.94 kB |
| `./elements/rh-badge/rh-badge.js` | 1.53 kB |
| `./elements/rh-blockquote/rh-blockquote.js` | 1.37 kB |
| `./elements/rh-breadcrumb/rh-breadcrumb.js` | 1.02 kB |
| `./elements/rh-button/rh-button.js` | 3.3 kB |
| `./elements/rh-card/rh-card.js` | 3.43 kB |
| `./elements/rh-chip/context.js` | 165 B |
| `./elements/rh-chip/rh-chip-group.js` | 1.58 kB |
| `./elements/rh-chip/rh-chip.js` | 2.06 kB |
| `./elements/rh-code-block/prism.css.js` | 667 B |
| `./elements/rh-code-block/prism.js` | 572 B |
| `./elements/rh-code-block/rh-code-block.js` | 7.19 kB |
| `./elements/rh-cta/rh-cta.js` | 3.95 kB |
| `./elements/rh-dialog/rh-dialog.js` | 4.76 kB |
| `./elements/rh-dialog/yt-api.js` | 617 B |
| `./elements/rh-disclosure/rh-disclosure.js` | 2.06 kB |
| `./elements/rh-footer/rh-footer-block.js` | 714 B |
| `./elements/rh-footer/rh-footer-copyright.js` | 362 B |
| `./elements/rh-footer/rh-footer-links.js` | 1.17 kB |
| `./elements/rh-footer/rh-footer-social-link.js` | 1.15 kB |
| `./elements/rh-footer/rh-footer-universal.js` | 3.96 kB |
| `./elements/rh-footer/rh-footer.js` | 4.83 kB |
| `./elements/rh-health-index/rh-health-index.js` | 2.4 kB |
| `./elements/rh-icon/rh-icon.js` | 2.49 kB |
| `./elements/rh-icon/ssr.js` | 181 B |
| `./elements/rh-menu/rh-menu.js` | 1.19 kB |
| `./elements/rh-navigation-primary/context.js` | 176 B |
| `./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js` | 1.03 kB |
| `./elements/rh-navigation-primary/rh-navigation-primary-item.js` | 3.4 kB |
| `./elements/rh-navigation-primary/rh-navigation-primary-overlay.js` | 521 B |
| `./elements/rh-navigation-primary/rh-navigation-primary.js` | 7.27 kB |
| `./elements/rh-navigation-primary/test/fixtures.js` | 4.49 kB |
| `./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js` | 2.47 kB |
| `./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js` | 1.3 kB |
| `./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js` | 1.75 kB |
| `./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js` | 571 B |
| `./elements/rh-navigation-secondary/rh-navigation-secondary.js` | 5.25 kB |
| `./elements/rh-navigation-secondary/test/fixtures.js` | 769 B |
| `./elements/rh-pagination/rh-pagination.js` | 5.37 kB |
| `./elements/rh-site-status/rh-site-status.js` | 2.38 kB |
| `./elements/rh-skip-link/rh-skip-link.js` | 1.19 kB |
| `./elements/rh-spinner/rh-spinner.js` | 1.29 kB |
| `./elements/rh-stat/rh-stat.js` | 2.06 kB |
| `./elements/rh-subnav/rh-subnav.js` | 2.4 kB |
| `./elements/rh-surface/rh-surface.js` | 893 B |
| `./elements/rh-surface/test/elements.js` | 763 B |
| `./elements/rh-switch/rh-switch.js` | 2.88 kB |
| `./elements/rh-table/rh-sort-button.js` | 1.4 kB |
| `./elements/rh-table/rh-table.js` | 2.88 kB |
| `./elements/rh-tabs/context.js` | 160 B |
| `./elements/rh-tabs/rh-tab-panel.js` | 973 B |
| `./elements/rh-tabs/rh-tab.js` | 3 kB |
| `./elements/rh-tabs/rh-tabs.js` | 3.78 kB |
| `./elements/rh-tag/rh-tag.js` | 2.66 kB |
| `./elements/rh-tile/rh-tile-group.js` | 1.78 kB |
| `./elements/rh-tile/rh-tile.js` | 4.89 kB |
| `./elements/rh-timestamp/rh-timestamp.js` | 983 B |
| `./elements/rh-tooltip/rh-tooltip.js` | 2.71 kB |
| `./elements/rh-video-embed/rh-video-embed.js` | 4.54 kB |
| `./lib/color-palettes.js` | 851 B |
| `./lib/context/headings/consumer.js` | 593 B |
| `./lib/context/headings/provider.js` | 1.18 kB |
| `./lib/elements/rh-context-demo/rh-context-demo.js` | 1.16 kB |
| `./lib/elements/rh-context-picker/rh-context-picker.js` | 2.18 kB |
| `./lib/environment.js` | 194 B |
| `./lib/functions.js` | 175 B |
| `./lib/I18nController.js` | 1.38 kB |
| `./lib/ScreenSizeController.js` | 849 B |
| `./lib/ssr-controller.js` | 201 B |
| `./lib/themable.js` | 542 B |
| `./react/rh-accordion/rh-accordion-header.js` | 199 B |
| `./react/rh-accordion/rh-accordion-panel.js` | 185 B |
| `./react/rh-accordion/rh-accordion.js` | 215 B |
| `./react/rh-alert/rh-alert.js` | 184 B |
| `./react/rh-announcement/rh-announcement.js` | 189 B |
| `./react/rh-audio-player/rh-audio-player-about.js` | 191 B |
| `./react/rh-audio-player/rh-audio-player-rate-stepper.js` | 213 B |
| `./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js` | 214 B |
| `./react/rh-audio-player/rh-audio-player-subscribe.js` | 196 B |
| `./react/rh-audio-player/rh-audio-player.js` | 183 B |
| `./react/rh-audio-player/rh-cue.js` | 195 B |
| `./react/rh-audio-player/rh-transcript.js` | 207 B |
| `./react/rh-avatar/rh-avatar.js` | 173 B |
| `./react/rh-back-to-top/rh-back-to-top.js` | 183 B |
| `./react/rh-badge/rh-badge.js` | 174 B |
| `./react/rh-blockquote/rh-blockquote.js` | 179 B |
| `./react/rh-breadcrumb/rh-breadcrumb.js` | 179 B |
| `./react/rh-button/rh-button.js` | 174 B |
| `./react/rh-card/rh-card.js` | 172 B |
| `./react/rh-chip/rh-chip-group.js` | 182 B |
| `./react/rh-chip/rh-chip.js` | 187 B |
| `./react/rh-code-block/rh-code-block.js` | 181 B |
| `./react/rh-cta/rh-cta.js` | 170 B |
| `./react/rh-dialog/rh-dialog.js` | 203 B |
| `./react/rh-disclosure/rh-disclosure.js` | 192 B |
| `./react/rh-footer/rh-footer-block.js` | 184 B |
| `./react/rh-footer/rh-footer-copyright.js` | 187 B |
| `./react/rh-footer/rh-footer-links.js` | 185 B |
| `./react/rh-footer/rh-footer-social-link.js` | 193 B |
| `./react/rh-footer/rh-footer-universal.js` | 188 B |
| `./react/rh-footer/rh-footer.js` | 174 B |
| `./react/rh-health-index/rh-health-index.js` | 184 B |
| `./react/rh-icon/rh-icon.js` | 202 B |
| `./react/rh-menu/rh-menu.js` | 173 B |
| `./react/rh-navigation-primary/rh-navigation-primary-item-menu.js` | 205 B |
| `./react/rh-navigation-primary/rh-navigation-primary-item.js` | 210 B |
| `./react/rh-navigation-primary/rh-navigation-primary-overlay.js` | 199 B |
| `./react/rh-navigation-primary/rh-navigation-primary.js` | 189 B |
| `./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js` | 217 B |
| `./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js` | 205 B |
| `./react/rh-navigation-secondary/rh-navigation-secondary-menu.js` | 199 B |
| `./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js` | 201 B |
| `./react/rh-navigation-secondary/rh-navigation-secondary.js` | 213 B |
| `./react/rh-pagination/rh-pagination.js` | 178 B |
| `./react/rh-site-status/rh-site-status.js` | 181 B |
| `./react/rh-skip-link/rh-skip-link.js` | 181 B |
| `./react/rh-spinner/rh-spinner.js` | 175 B |
| `./react/rh-stat/rh-stat.js` | 171 B |
| `./react/rh-subnav/rh-subnav.js` | 175 B |
| `./react/rh-surface/rh-surface.js` | 175 B |
| `./react/rh-switch/rh-switch.js` | 185 B |
| `./react/rh-table/rh-sort-button.js` | 213 B |
| `./react/rh-table/rh-table.js` | 174 B |
| `./react/rh-tabs/rh-tab-panel.js` | 181 B |
| `./react/rh-tabs/rh-tab.js` | 187 B |
| `./react/rh-tabs/rh-tabs.js` | 174 B |
| `./react/rh-tag/rh-tag.js` | 182 B |
| `./react/rh-tile/rh-tile-group.js` | 183 B |
| `./react/rh-tile/rh-tile.js` | 194 B |
| `./react/rh-timestamp/rh-timestamp.js` | 176 B |
| `./react/rh-tooltip/rh-tooltip.js` | 175 B |
| `./react/rh-video-embed/rh-video-embed.js` | 227 B |
| `./uxdot/ssr-failure-recoverable.js` | 581 B |
| `./uxdot/uxdot-best-practice.js` | 784 B |
| `./uxdot/uxdot-color-scheme-picker.js` | 1.56 kB |
| `./uxdot/uxdot-copy-button.js` | 1.24 kB |
| `./uxdot/uxdot-copy-permalink.js` | 1.1 kB |
| `./uxdot/uxdot-example.js` | 1.14 kB |
| `./uxdot/uxdot-feedback.js` | 727 B |
| `./uxdot/uxdot-header.js` | 1.02 kB |
| `./uxdot/uxdot-installation-tabs.js` | 675 B |
| `./uxdot/uxdot-masthead.js` | 1.25 kB |
| `./uxdot/uxdot-pattern-ssr-controller-client.js` | 615 B |
| `./uxdot/uxdot-pattern-ssr-controller-server.js` | 1.68 kB |
| `./uxdot/uxdot-pattern-ssr-controller.js` | 213 B |
| `./uxdot/uxdot-pattern.js` | 2.23 kB |
| `./uxdot/uxdot-repo-status-checklist.js` | 1.16 kB |
| `./uxdot/uxdot-repo-status-list.js` | 1.07 kB |
| `./uxdot/uxdot-repo-status-table.js` | 782 B |
| `./uxdot/uxdot-repo.js` | 1.17 kB |
| `./uxdot/uxdot-search.js` | 2.39 kB |
| `./uxdot/uxdot-spacer-tokens-table.js` | 2.46 kB |
| `./uxdot/uxdot-toc.js` | 1.8 kB |

</details>



<a href="https://github.com/preactjs/compressed-size-action"><sub>compressed-size-action</sub></a>
author_association: CONTRIBUTOR
user: login: bennypowers
created_at: 2025-03-26T10:42:19Z
body: attempt number one at responsive disclosure unwrapping:

rh-disclosure.css
```css
:host {
  border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle);
  display: block;
  font-family: var(--rh-font-family-body-text);
  container-name: disclosure;

  @container disclosure style(--display: contents) {
    border: none;
  }
}

details,
summary,
#details-content {
  @container disclosure style(--display: contents) {
    display: contents;
  }

  &::details-content {
    display: block;
  }
}

rh-icon {
  @container disclosure style(--display: contents) {
    display: none;
  }
}
```
jump-links-responsive-pattern.css
```css
    @media (width >= /*--rh-media-md*/ 992px) {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--rh-space-lg);
      align-items: start;

      & rh-disclosure {
        --display: contents;
        position: sticky;
        top: 0;
      }
    }
```
author_association: MEMBER
user: login: markcaron
created_at: 2025-03-31T12:47:17Z
body: @bennypowers one thing we should consider doing is adding the "Back to Nav" type links below each section in the demos, especially the Responsive demo.

This guideline was one [we discussed](https://github.com/RedHat-UX/red-hat-design-system/issues/539#issuecomment-2422953129) as something to be documented.

I'd like to make sure our Jump Links docs cover the [other items listed in our discussion](https://github.com/RedHat-UX/red-hat-design-system/issues/539#issuecomment-2422953129) as well:

- [ ] Jump Links won't solve page layout issues. If using the `vertical` variant, it will remain vertical across all media and container queries. Same for `horizontal`, though we can provide an overflow/scroll somewhat similar to Subnav and Tabs.
- [ ] Sticky positioning and scrollspy features will be pattern-based add-ons.
- [ ] Jump Links will use the `<nav>` role internally as a built-in landmark.
- [ ] Documentation guidelines will strongly advise that implementers add "back to nav" type links to each section referenced in the Jump Links nav. These have to be manually added (at least for now).
- [ ] Documentation will suggest limiting the nav to a certain numbers of items (TBD, but likely 7) to keep the menu easy to understand and less likely to cause overflow issues.
- [ ] Documentation will suggest that you implement horizontal Jump Links when you have "bands" of content or alternating themed sections on pages AND when you're making them "sticky".
- [x] Design will update the Jump Links component design to include a background color behind the links with a drop shadow (on light) and border (on dark) when "sticky".

If you think that's something you'd like me to jump in and help with, I'm cool with that.

CC @adamjohnson @coreyvickery @marionnegp 
author_association: COLLABORATOR
user: login: marionnegp
created_at: 2025-03-31T13:12:20Z
body: > Design will update the Jump Links component design to include a background color behind the links with a drop shadow (on light) and border (on dark) when "sticky".

This is covered by the border around both the dark and light sticky horizontal jump links.
author_association: COLLABORATOR
user: login: bennypowers
created_at: 2025-03-31T15:18:53Z
body: Blocked on https://github.com/patternfly/patternfly-elements/pull/2898
author_association: MEMBER
user: login: zeroedin
created_at: 2025-04-04T23:36:19Z
body: 
Visiting [the demo](https://deploy-preview-2194--red-hat-design-system.netlify.app/elements/jump-links/demo/
), clicking through the jump-links, and using the back button on the browser does not retrigger Scroll Spy as the browser window returns to the anchors. Should it?  
author_association: COLLABORATOR
user: login: bennypowers
created_at: 2025-04-06T06:05:43Z
body: > Visiting [the demo](https://deploy-preview-2194--red-hat-design-system.netlify.app/elements/jump-links/demo/), clicking through the jump-links, and using the back button on the browser does not retrigger Scroll Spy as the browser window returns to the anchors. Should it?

https://github.com/patternfly/patternfly-elements/pull/2900
author_association: MEMBER