[feat] pfe-jump-link / Horizontal

[coreyvickery]

pfe-jumplink / Horizontal

Styles

Light theme

Typography

• Jump to section: Red Hat Text, Regular, 14pt / 21 (1.5), Uppercase, #151515
• Inactive label: Red Hat Text, Regular, 16pt / 24 (1.5), #6a6e73
• Active label: Red Hat Text, Regular, 16pt / 24 (1.5), #151515

Other elements

• Active label bar: 3px, #e00
• Anchor bar: 1px, #d2d2d2

Dark theme

Typography

• Jump to section: Red Hat Text, Regular, 14pt / 21 (1.5), Uppercase, #fff
• Inactive label: Red Hat Text, Regular, 16pt / 24 (1.5), #d2d2d2
• Active label: Red Hat Text, Regular, 16pt / 24 (1.5), #fff

Other elements

• Active label bar: 3px, #e00
• Anchor bar: 1px, #6a6e73
• Bottom bar: 1px, #6a6e73 (dark theme only)

---

Scrolling

Light theme

Static

Scrolling

A subtle drop shadow is added to scrolling Horizontal jump links in this theme

Scrolling styles

• Y Position: 3
• Blur: 4
• Color: #000
• Opacity: 10%

Dark theme

Dark theme Horizontal jump links have a 1px gray border at the bottom when Static and Scrolling instead of a drop shadow

Static

Scrolling

---

Motion

• The animations for Horizontal jump links are the same as Vertical jump links

---

Breakpoints

Desktop (> 1200px)

Tablet, landscape (992 - 1199px)

Tablet, portrait and Mobile (< 991px)

• Horizontal jump links convert to Expanded/Collapsed jump links at breakpoints smaller than 992px

---

Spacing

Desktop

Tablet, landscape

Spacing legend
https://ux.redhat.com/foundations/spacing/

---

Accessibility

Key	Interaction
Tab	Focuses a Jump link moving left to right
Shift + Tab	Focuses a Jump link moving left to right
Enter or Space	Moves the page up for down

Tab order