-
Notifications
You must be signed in to change notification settings - Fork 106
Closed
Labels
design specs completedesign systemUpdates or issues to align components to the Red Hat Design System.Updates or issues to align components to the Red Hat Design System.needs: prioritizationTo be prioritizedTo be prioritizedupdate component request
Description
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
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
Motion
- The animations for Horizontal jump links are the same as Vertical jump links
Breakpoints
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
Metadata
Metadata
Assignees
Labels
design specs completedesign systemUpdates or issues to align components to the Red Hat Design System.Updates or issues to align components to the Red Hat Design System.needs: prioritizationTo be prioritizedTo be prioritizedupdate component request









