@patternfly/patternfly 4.184.1 → 4.185.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/pficon/pficon.scss +6 -0
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/components/Masthead/masthead.css +1 -1
- package/components/Masthead/masthead.scss +1 -1
- package/components/Menu/menu.css +1 -0
- package/components/Menu/menu.scss +1 -0
- package/docs/components/Form/examples/Form.md +118 -47
- package/docs/components/MenuToggle/examples/MenuToggle.md +17 -0
- package/docs/components/ModalBox/examples/ModalBox.md +1 -0
- package/docs/components/OptionsMenu/examples/options-menu.md +1 -1
- package/docs/components/Page/examples/Page.md +9 -8
- package/docs/components/Pagination/examples/Pagination.css +3 -0
- package/docs/components/Pagination/examples/Pagination.md +136 -158
- package/docs/components/Toolbar/examples/Toolbar.md +22 -26
- package/docs/components/Wizard/examples/Wizard.md +19 -18
- package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
- package/docs/demos/Alert/examples/Alert.md +2484 -490
- package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
- package/docs/demos/Banner/examples/Banner.md +2074 -1466
- package/docs/demos/Button/examples/Button.md +33 -21
- package/docs/demos/CardView/examples/CardView.md +1086 -285
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
- package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
- package/docs/demos/DataList/examples/DataList.md +3703 -1495
- package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
- package/docs/demos/Drawer/examples/Drawer.md +2554 -439
- package/docs/demos/Form/examples/BasicForms.md +40 -8
- package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
- package/docs/demos/Masthead/examples/Masthead.md +9 -20
- package/docs/demos/Modal/examples/Modal.md +5525 -35
- package/docs/demos/Nav/examples/Nav.md +6453 -1201
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
- package/docs/demos/Page/examples/Page.md +15 -35
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6829 -2373
- package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
- package/docs/demos/Table/examples/Table.md +253 -338
- package/docs/demos/Tabs/examples/Tabs.md +8171 -2943
- package/docs/demos/Toolbar/examples/Toolbar.md +885 -253
- package/docs/demos/Wizard/examples/Wizard.md +3422 -292
- package/docs/pages/icons.md +1 -0
- package/icons/pf-icons.json +1 -0
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +5 -1
- package/patternfly-base.css +5 -1
- package/patternfly-no-reset.css +7 -2
- package/patternfly-theme-dark.css +21 -21
- package/patternfly.css +7 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/themes/dark/_patternfly-theme-dark.scss +119 -0
- package/themes/dark/_variables.scss +94 -0
- package/themes/dark/colors.scss +16 -0
- package/themes/dark/globals.scss +7 -0
- package/themes/dark/mixins.scss +5 -0
- package/themes/dark/placeholders.scss +30 -0
- package/themes/dark/scss-variables.scss +85 -0
- package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
- package/components/Accordion/themes/dark/accordion.css +0 -0
- package/components/Alert/themes/dark/alert.css +0 -0
- package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
- package/components/Badge/themes/dark/badge.css +0 -0
- package/components/Banner/themes/dark/banner.css +0 -0
- package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
- package/components/Button/themes/dark/button.css +0 -0
- package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
- package/components/Chip/themes/dark/chip.css +0 -0
- package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
- package/components/CodeEditor/themes/dark/code-editor.css +0 -0
- package/components/ContextSelector/themes/dark/context-selector.css +0 -0
- package/components/DataList/themes/dark/data-list.css +0 -0
- package/components/DatePicker/themes/dark/date-picker.css +0 -0
- package/components/Drawer/themes/dark/drawer.css +0 -0
- package/components/Dropdown/themes/dark/dropdown.css +0 -0
- package/components/Form/themes/dark/form.css +0 -0
- package/components/FormControl/themes/dark/form-control.css +0 -0
- package/components/HelperText/themes/dark/helper-text.css +0 -0
- package/components/Hint/themes/dark/hint.css +0 -0
- package/components/InputGroup/themes/dark/input-group.css +0 -0
- package/components/Label/themes/dark/label.css +0 -0
- package/components/LogViewer/themes/dark/log-viewer.css +0 -0
- package/components/Login/themes/dark/login.css +0 -0
- package/components/Masthead/themes/dark/masthead.css +0 -0
- package/components/Menu/themes/dark/menu.css +0 -0
- package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
- package/components/ModalBox/themes/dark/modal-box.css +0 -0
- package/components/Nav/themes/dark/nav.css +0 -0
- package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
- package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
- package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
- package/components/Page/themes/dark/page.css +0 -0
- package/components/Pagination/themes/dark/pagination.css +0 -0
- package/components/Popover/themes/dark/popover.css +0 -0
- package/components/Progress/themes/dark/progress.css +0 -0
- package/components/SearchInput/themes/dark/search-input.css +0 -0
- package/components/Select/themes/dark/select.css +0 -0
- package/components/SimpleList/themes/dark/simple-list.css +0 -0
- package/components/Skeleton/themes/dark/skeleton.css +0 -0
- package/components/Switch/themes/dark/switch.css +0 -0
- package/components/Table/themes/dark/table.css +0 -0
- package/components/Tabs/themes/dark/tabs.css +0 -0
- package/components/Tile/themes/dark/tile.css +0 -0
- package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
- package/components/Tooltip/themes/dark/tooltip.css +0 -0
- package/components/TreeView/themes/dark/tree-view.css +0 -0
- package/components/Wizard/themes/dark/wizard.css +0 -0
|
@@ -6,164 +6,812 @@ section: components
|
|
|
6
6
|
### Vertical jump links collapsed on mobile
|
|
7
7
|
|
|
8
8
|
```html isFullscreen
|
|
9
|
-
<div class="pf-c-page" id="
|
|
9
|
+
<div class="pf-c-page" id="jump-links-collapsed-mobile-example">
|
|
10
10
|
<a
|
|
11
11
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
12
|
-
href="#main-content-
|
|
12
|
+
href="#main-content-jump-links-collapsed-mobile-example"
|
|
13
13
|
>Skip to content</a>
|
|
14
|
-
<header
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
<header
|
|
15
|
+
class="pf-c-masthead"
|
|
16
|
+
id="jump-links-collapsed-mobile-example-masthead"
|
|
17
|
+
>
|
|
18
|
+
<span class="pf-c-masthead__toggle">
|
|
19
|
+
<button
|
|
20
|
+
class="pf-c-button pf-m-plain"
|
|
21
|
+
type="button"
|
|
22
|
+
aria-label="Global navigation"
|
|
23
|
+
>
|
|
24
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
25
|
+
</button>
|
|
26
|
+
</span>
|
|
27
|
+
<div class="pf-c-masthead__main">
|
|
28
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
29
|
+
<picture
|
|
30
|
+
class="pf-c-brand pf-m-picture"
|
|
31
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
24
32
|
>
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
<source
|
|
34
|
+
media="(min-width: 768px)"
|
|
35
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
36
|
+
/>
|
|
37
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
38
|
+
<img
|
|
39
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
40
|
+
alt="Fallback patternFly default logo"
|
|
41
|
+
/>
|
|
42
|
+
</picture>
|
|
34
43
|
</a>
|
|
35
44
|
</div>
|
|
36
|
-
<div class="pf-c-
|
|
37
|
-
<div
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
>
|
|
46
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
47
|
-
</button>
|
|
48
|
-
</div>
|
|
49
|
-
<div
|
|
50
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
51
|
-
>
|
|
52
|
-
<button
|
|
53
|
-
class="pf-c-button pf-m-plain"
|
|
54
|
-
type="button"
|
|
55
|
-
aria-label="Help"
|
|
56
|
-
>
|
|
57
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
58
|
-
</button>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
<div class="pf-c-page__header-tools-group">
|
|
62
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
63
|
-
<div class="pf-c-dropdown">
|
|
64
|
-
<button
|
|
65
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
66
|
-
id="vertical-collapsed-on-mobile-dropdown-kebab-1-button"
|
|
67
|
-
aria-expanded="false"
|
|
68
|
-
type="button"
|
|
69
|
-
aria-label="Actions"
|
|
70
|
-
>
|
|
71
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
72
|
-
</button>
|
|
73
|
-
<ul
|
|
74
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
75
|
-
aria-labelledby="vertical-collapsed-on-mobile-dropdown-kebab-1-button"
|
|
76
|
-
hidden
|
|
45
|
+
<div class="pf-c-masthead__content">
|
|
46
|
+
<div
|
|
47
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
48
|
+
id="jump-links-collapsed-mobile-example-masthead-toolbar"
|
|
49
|
+
>
|
|
50
|
+
<div class="pf-c-toolbar__content">
|
|
51
|
+
<div class="pf-c-toolbar__content-section">
|
|
52
|
+
<div
|
|
53
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
77
54
|
>
|
|
78
|
-
<
|
|
79
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
80
|
-
</li>
|
|
81
|
-
<li>
|
|
82
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
83
|
-
</li>
|
|
84
|
-
<li>
|
|
85
|
-
<a
|
|
86
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
87
|
-
href="#"
|
|
88
|
-
aria-disabled="true"
|
|
89
|
-
tabindex="-1"
|
|
90
|
-
>Disabled link</a>
|
|
91
|
-
</li>
|
|
92
|
-
<li>
|
|
55
|
+
<div class="pf-c-toolbar__item">
|
|
93
56
|
<button
|
|
94
|
-
class="pf-c-
|
|
57
|
+
class="pf-c-button pf-m-plain"
|
|
95
58
|
type="button"
|
|
96
|
-
|
|
97
|
-
>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
</
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
59
|
+
aria-label="Notifications"
|
|
60
|
+
>
|
|
61
|
+
<span class="pf-c-notification-badge">
|
|
62
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
63
|
+
</span>
|
|
64
|
+
</button>
|
|
65
|
+
</div>
|
|
66
|
+
<div
|
|
67
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
68
|
+
>
|
|
69
|
+
<div class="pf-c-toolbar__item">
|
|
70
|
+
<nav
|
|
71
|
+
class="pf-c-app-launcher"
|
|
72
|
+
aria-label="Application launcher"
|
|
73
|
+
id="jump-links-collapsed-mobile-example-masthead-icon-group--app-launcher"
|
|
74
|
+
>
|
|
75
|
+
<button
|
|
76
|
+
class="pf-c-app-launcher__toggle"
|
|
77
|
+
type="button"
|
|
78
|
+
id="jump-links-collapsed-mobile-example-masthead-icon-group--app-launcher-button"
|
|
79
|
+
aria-expanded="false"
|
|
80
|
+
aria-label="Application launcher"
|
|
81
|
+
>
|
|
82
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
83
|
+
</button>
|
|
84
|
+
<div
|
|
85
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
86
|
+
hidden
|
|
87
|
+
>
|
|
88
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
89
|
+
<div class="pf-c-search-input">
|
|
90
|
+
<div class="pf-c-search-input__bar">
|
|
91
|
+
<span class="pf-c-search-input__text">
|
|
92
|
+
<span class="pf-c-search-input__icon">
|
|
93
|
+
<i
|
|
94
|
+
class="fas fa-search fa-fw"
|
|
95
|
+
aria-hidden="true"
|
|
96
|
+
></i>
|
|
97
|
+
</span>
|
|
98
|
+
<input
|
|
99
|
+
class="pf-c-search-input__text-input"
|
|
100
|
+
type="text"
|
|
101
|
+
placeholder="Filter by name"
|
|
102
|
+
aria-label="Filter by name"
|
|
103
|
+
/>
|
|
104
|
+
</span>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<section class="pf-c-app-launcher__group">
|
|
109
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
110
|
+
<ul>
|
|
111
|
+
<li
|
|
112
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
113
|
+
>
|
|
114
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
115
|
+
Link 1
|
|
116
|
+
<span
|
|
117
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
118
|
+
>
|
|
119
|
+
<i
|
|
120
|
+
class="fas fa-external-link-alt"
|
|
121
|
+
aria-hidden="true"
|
|
122
|
+
></i>
|
|
123
|
+
</span>
|
|
124
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
125
|
+
</a>
|
|
126
|
+
<button
|
|
127
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
128
|
+
type="button"
|
|
129
|
+
aria-label="Favorite"
|
|
130
|
+
>
|
|
131
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
132
|
+
</button>
|
|
133
|
+
</li>
|
|
134
|
+
<li
|
|
135
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
136
|
+
>
|
|
137
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
138
|
+
Link 2
|
|
139
|
+
<span
|
|
140
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
141
|
+
>
|
|
142
|
+
<i
|
|
143
|
+
class="fas fa-external-link-alt"
|
|
144
|
+
aria-hidden="true"
|
|
145
|
+
></i>
|
|
146
|
+
</span>
|
|
147
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
148
|
+
</a>
|
|
149
|
+
<button
|
|
150
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
151
|
+
type="button"
|
|
152
|
+
aria-label="Favorite"
|
|
153
|
+
>
|
|
154
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
155
|
+
</button>
|
|
156
|
+
</li>
|
|
157
|
+
</ul>
|
|
158
|
+
</section>
|
|
159
|
+
<hr class="pf-c-divider" />
|
|
160
|
+
<section class="pf-c-app-launcher__group">
|
|
161
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
162
|
+
<ul>
|
|
163
|
+
<li
|
|
164
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
165
|
+
>
|
|
166
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
167
|
+
Link 1
|
|
168
|
+
<span
|
|
169
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
170
|
+
>
|
|
171
|
+
<i
|
|
172
|
+
class="fas fa-external-link-alt"
|
|
173
|
+
aria-hidden="true"
|
|
174
|
+
></i>
|
|
175
|
+
</span>
|
|
176
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
177
|
+
</a>
|
|
178
|
+
<button
|
|
179
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
180
|
+
type="button"
|
|
181
|
+
aria-label="Favorite"
|
|
182
|
+
>
|
|
183
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
184
|
+
</button>
|
|
185
|
+
</li>
|
|
186
|
+
<li
|
|
187
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
188
|
+
>
|
|
189
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
190
|
+
Link 2
|
|
191
|
+
<span
|
|
192
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
193
|
+
>
|
|
194
|
+
<i
|
|
195
|
+
class="fas fa-external-link-alt"
|
|
196
|
+
aria-hidden="true"
|
|
197
|
+
></i>
|
|
198
|
+
</span>
|
|
199
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
200
|
+
</a>
|
|
201
|
+
<button
|
|
202
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
203
|
+
type="button"
|
|
204
|
+
aria-label="Favorite"
|
|
205
|
+
>
|
|
206
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
207
|
+
</button>
|
|
208
|
+
</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</section>
|
|
211
|
+
</div>
|
|
212
|
+
</nav>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="pf-c-toolbar__item">
|
|
215
|
+
<div class="pf-c-dropdown">
|
|
216
|
+
<button
|
|
217
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
218
|
+
id="jump-links-collapsed-mobile-example-masthead-settings-button"
|
|
219
|
+
aria-expanded="false"
|
|
220
|
+
type="button"
|
|
221
|
+
aria-label="Settings"
|
|
222
|
+
>
|
|
223
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
224
|
+
</button>
|
|
225
|
+
<ul
|
|
226
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
227
|
+
aria-labelledby="jump-links-collapsed-mobile-example-masthead-settings-button"
|
|
228
|
+
hidden
|
|
229
|
+
>
|
|
230
|
+
<li>
|
|
231
|
+
<button
|
|
232
|
+
class="pf-c-dropdown__menu-item"
|
|
233
|
+
type="button"
|
|
234
|
+
>Settings</button>
|
|
235
|
+
</li>
|
|
236
|
+
<li>
|
|
237
|
+
<button
|
|
238
|
+
class="pf-c-dropdown__menu-item"
|
|
239
|
+
type="button"
|
|
240
|
+
>Use the beta release</button>
|
|
241
|
+
</li>
|
|
242
|
+
</ul>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="pf-c-toolbar__item">
|
|
246
|
+
<div class="pf-c-dropdown">
|
|
247
|
+
<button
|
|
248
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
249
|
+
id="jump-links-collapsed-mobile-example-masthead-help-button"
|
|
250
|
+
aria-expanded="false"
|
|
251
|
+
type="button"
|
|
252
|
+
aria-label="Help"
|
|
253
|
+
>
|
|
254
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
255
|
+
</button>
|
|
256
|
+
<ul
|
|
257
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
258
|
+
aria-labelledby="jump-links-collapsed-mobile-example-masthead-help-button"
|
|
259
|
+
hidden
|
|
260
|
+
>
|
|
261
|
+
<li>
|
|
262
|
+
<button
|
|
263
|
+
class="pf-c-dropdown__menu-item"
|
|
264
|
+
type="button"
|
|
265
|
+
>Support options</button>
|
|
266
|
+
</li>
|
|
267
|
+
<li>
|
|
268
|
+
<button
|
|
269
|
+
class="pf-c-dropdown__menu-item"
|
|
270
|
+
type="button"
|
|
271
|
+
>Open support case</button>
|
|
272
|
+
</li>
|
|
273
|
+
<li>
|
|
274
|
+
<button
|
|
275
|
+
class="pf-c-dropdown__menu-item"
|
|
276
|
+
type="button"
|
|
277
|
+
>API documentation</button>
|
|
278
|
+
</li>
|
|
279
|
+
</ul>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
284
|
+
<div class="pf-c-dropdown">
|
|
285
|
+
<button
|
|
286
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
287
|
+
type="button"
|
|
288
|
+
aria-expanded="false"
|
|
289
|
+
aria-label="Actions"
|
|
290
|
+
>
|
|
291
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
292
|
+
</button>
|
|
293
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
294
|
+
<div class="pf-c-menu__content">
|
|
295
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
296
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
297
|
+
<li
|
|
298
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
299
|
+
role="none"
|
|
300
|
+
>
|
|
301
|
+
<button
|
|
302
|
+
class="pf-c-menu__item"
|
|
303
|
+
type="button"
|
|
304
|
+
disabled
|
|
305
|
+
role="menuitem"
|
|
306
|
+
>
|
|
307
|
+
<span class="pf-c-menu__item-description">
|
|
308
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
309
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
310
|
+
</span>
|
|
311
|
+
</button>
|
|
312
|
+
</li>
|
|
313
|
+
<li
|
|
314
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
315
|
+
role="none"
|
|
316
|
+
>
|
|
317
|
+
<button
|
|
318
|
+
class="pf-c-menu__item"
|
|
319
|
+
type="button"
|
|
320
|
+
disabled
|
|
321
|
+
role="menuitem"
|
|
322
|
+
>
|
|
323
|
+
<span class="pf-c-menu__item-description">
|
|
324
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
325
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
326
|
+
</span>
|
|
327
|
+
</button>
|
|
328
|
+
</li>
|
|
329
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
330
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
331
|
+
<button
|
|
332
|
+
class="pf-c-menu__item"
|
|
333
|
+
type="button"
|
|
334
|
+
role="menuitem"
|
|
335
|
+
>
|
|
336
|
+
<span class="pf-c-menu__item-main">
|
|
337
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
338
|
+
</span>
|
|
339
|
+
</button>
|
|
340
|
+
</li>
|
|
341
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
342
|
+
<button
|
|
343
|
+
class="pf-c-menu__item"
|
|
344
|
+
type="button"
|
|
345
|
+
role="menuitem"
|
|
346
|
+
>
|
|
347
|
+
<span class="pf-c-menu__item-main">
|
|
348
|
+
<span
|
|
349
|
+
class="pf-c-menu__item-text"
|
|
350
|
+
>User management</span>
|
|
351
|
+
</span>
|
|
352
|
+
</button>
|
|
353
|
+
</li>
|
|
354
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
355
|
+
<button
|
|
356
|
+
class="pf-c-menu__item"
|
|
357
|
+
type="button"
|
|
358
|
+
role="menuitem"
|
|
359
|
+
>
|
|
360
|
+
<span class="pf-c-menu__item-main">
|
|
361
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
362
|
+
</span>
|
|
363
|
+
</button>
|
|
364
|
+
</li>
|
|
365
|
+
</ul>
|
|
366
|
+
</section>
|
|
367
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
368
|
+
<section class="pf-c-menu__group">
|
|
369
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
370
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
371
|
+
<button
|
|
372
|
+
class="pf-c-menu__item"
|
|
373
|
+
type="button"
|
|
374
|
+
role="menuitem"
|
|
375
|
+
aria-expanded="false"
|
|
376
|
+
>
|
|
377
|
+
<span class="pf-c-menu__item-main">
|
|
378
|
+
<span class="pf-c-menu__item-icon">
|
|
379
|
+
<i
|
|
380
|
+
class="fas fa-fw fa-cog"
|
|
381
|
+
aria-hidden="true"
|
|
382
|
+
></i>
|
|
383
|
+
</span>
|
|
384
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
385
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
386
|
+
<i class="fas fa-angle-right"></i>
|
|
387
|
+
</span>
|
|
388
|
+
</span>
|
|
389
|
+
</button>
|
|
390
|
+
<div class="pf-c-menu" hidden>
|
|
391
|
+
<div class="pf-c-menu__content">
|
|
392
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
393
|
+
<li
|
|
394
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
395
|
+
role="none"
|
|
396
|
+
>
|
|
397
|
+
<button
|
|
398
|
+
class="pf-c-menu__item"
|
|
399
|
+
type="button"
|
|
400
|
+
role="menuitem"
|
|
401
|
+
>
|
|
402
|
+
<span class="pf-c-menu__item-main">
|
|
403
|
+
<span
|
|
404
|
+
class="pf-c-menu__item-toggle-icon"
|
|
405
|
+
>
|
|
406
|
+
<i class="fas fa-angle-left"></i>
|
|
407
|
+
</span>
|
|
408
|
+
<span class="pf-c-menu__item-icon">
|
|
409
|
+
<i
|
|
410
|
+
class="fas fa-fw fa-cog"
|
|
411
|
+
aria-hidden="true"
|
|
412
|
+
></i>
|
|
413
|
+
</span>
|
|
414
|
+
<span
|
|
415
|
+
class="pf-c-menu__item-text"
|
|
416
|
+
>Settings</span>
|
|
417
|
+
</span>
|
|
418
|
+
</button>
|
|
419
|
+
</li>
|
|
420
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
421
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
422
|
+
<a
|
|
423
|
+
class="pf-c-menu__item"
|
|
424
|
+
href="#"
|
|
425
|
+
role="menuitem"
|
|
426
|
+
>
|
|
427
|
+
<span class="pf-c-menu__item-main">
|
|
428
|
+
<span
|
|
429
|
+
class="pf-c-menu__item-text"
|
|
430
|
+
>Customer support</span>
|
|
431
|
+
</span>
|
|
432
|
+
</a>
|
|
433
|
+
</li>
|
|
434
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
435
|
+
<a
|
|
436
|
+
class="pf-c-menu__item"
|
|
437
|
+
href="#"
|
|
438
|
+
role="menuitem"
|
|
439
|
+
>
|
|
440
|
+
<span class="pf-c-menu__item-main">
|
|
441
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
442
|
+
</span>
|
|
443
|
+
</a>
|
|
444
|
+
</li>
|
|
445
|
+
</ul>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
</li>
|
|
449
|
+
|
|
450
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
451
|
+
<button
|
|
452
|
+
class="pf-c-menu__item"
|
|
453
|
+
type="button"
|
|
454
|
+
role="menuitem"
|
|
455
|
+
aria-expanded="false"
|
|
456
|
+
>
|
|
457
|
+
<span class="pf-c-menu__item-main">
|
|
458
|
+
<span class="pf-c-menu__item-icon">
|
|
459
|
+
<i
|
|
460
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
461
|
+
aria-hidden="true"
|
|
462
|
+
></i>
|
|
463
|
+
</span>
|
|
464
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
465
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
466
|
+
<i class="fas fa-angle-right"></i>
|
|
467
|
+
</span>
|
|
468
|
+
</span>
|
|
469
|
+
</button>
|
|
470
|
+
<div class="pf-c-menu" hidden>
|
|
471
|
+
<div class="pf-c-menu__content">
|
|
472
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
473
|
+
<li
|
|
474
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
475
|
+
role="none"
|
|
476
|
+
>
|
|
477
|
+
<button
|
|
478
|
+
class="pf-c-menu__item"
|
|
479
|
+
type="button"
|
|
480
|
+
role="menuitem"
|
|
481
|
+
>
|
|
482
|
+
<span class="pf-c-menu__item-main">
|
|
483
|
+
<span
|
|
484
|
+
class="pf-c-menu__item-toggle-icon"
|
|
485
|
+
>
|
|
486
|
+
<i class="fas fa-angle-left"></i>
|
|
487
|
+
</span>
|
|
488
|
+
<span class="pf-c-menu__item-icon">
|
|
489
|
+
<i
|
|
490
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
491
|
+
aria-hidden="true"
|
|
492
|
+
></i>
|
|
493
|
+
</span>
|
|
494
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
495
|
+
</span>
|
|
496
|
+
</button>
|
|
497
|
+
</li>
|
|
498
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
499
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
500
|
+
<a
|
|
501
|
+
class="pf-c-menu__item"
|
|
502
|
+
href="#"
|
|
503
|
+
role="menuitem"
|
|
504
|
+
>
|
|
505
|
+
<span class="pf-c-menu__item-main">
|
|
506
|
+
<span
|
|
507
|
+
class="pf-c-menu__item-text"
|
|
508
|
+
>Support options</span>
|
|
509
|
+
</span>
|
|
510
|
+
</a>
|
|
511
|
+
</li>
|
|
512
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
513
|
+
<a
|
|
514
|
+
class="pf-c-menu__item"
|
|
515
|
+
href="#"
|
|
516
|
+
role="menuitem"
|
|
517
|
+
>
|
|
518
|
+
<span class="pf-c-menu__item-main">
|
|
519
|
+
<span
|
|
520
|
+
class="pf-c-menu__item-text"
|
|
521
|
+
>Open support case</span>
|
|
522
|
+
</span>
|
|
523
|
+
</a>
|
|
524
|
+
</li>
|
|
525
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
526
|
+
<a
|
|
527
|
+
class="pf-c-menu__item"
|
|
528
|
+
href="#"
|
|
529
|
+
role="menuitem"
|
|
530
|
+
>
|
|
531
|
+
<span class="pf-c-menu__item-main">
|
|
532
|
+
<span
|
|
533
|
+
class="pf-c-menu__item-text"
|
|
534
|
+
>API documentation</span>
|
|
535
|
+
</span>
|
|
536
|
+
</a>
|
|
537
|
+
</li>
|
|
538
|
+
</ul>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
</li>
|
|
542
|
+
|
|
543
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
544
|
+
<button
|
|
545
|
+
class="pf-c-menu__item"
|
|
546
|
+
type="button"
|
|
547
|
+
role="menuitem"
|
|
548
|
+
>
|
|
549
|
+
<span class="pf-c-menu__item-main">
|
|
550
|
+
<span class="pf-c-menu__item-icon">
|
|
551
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
552
|
+
</span>
|
|
553
|
+
<span
|
|
554
|
+
class="pf-c-menu__item-text"
|
|
555
|
+
>Application launcher</span>
|
|
556
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
557
|
+
<i class="fas fa-angle-right"></i>
|
|
558
|
+
</span>
|
|
559
|
+
</span>
|
|
560
|
+
</button>
|
|
561
|
+
<div class="pf-c-menu" hidden>
|
|
562
|
+
<div class="pf-c-menu__header">
|
|
563
|
+
<button
|
|
564
|
+
class="pf-c-menu__item"
|
|
565
|
+
type="button"
|
|
566
|
+
role="menuitem"
|
|
567
|
+
>
|
|
568
|
+
<span class="pf-c-menu__item-main">
|
|
569
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
570
|
+
<i class="fas fa-angle-left"></i>
|
|
571
|
+
</span>
|
|
572
|
+
<span class="pf-c-menu__item-icon">
|
|
573
|
+
<i
|
|
574
|
+
class="fas fa-fw fa-th"
|
|
575
|
+
aria-hidden="true"
|
|
576
|
+
></i>
|
|
577
|
+
</span>
|
|
578
|
+
<span
|
|
579
|
+
class="pf-c-menu__item-text"
|
|
580
|
+
>Application launcher</span>
|
|
581
|
+
</span>
|
|
582
|
+
</button>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="pf-c-menu__search">
|
|
585
|
+
<div class="pf-c-menu__search-input">
|
|
586
|
+
<div class="pf-c-search-input">
|
|
587
|
+
<div class="pf-c-search-input__bar">
|
|
588
|
+
<span class="pf-c-search-input__text">
|
|
589
|
+
<span class="pf-c-search-input__icon">
|
|
590
|
+
<i
|
|
591
|
+
class="fas fa-search fa-fw"
|
|
592
|
+
aria-hidden="true"
|
|
593
|
+
></i>
|
|
594
|
+
</span>
|
|
595
|
+
<input
|
|
596
|
+
class="pf-c-search-input__text-input"
|
|
597
|
+
type="text"
|
|
598
|
+
placeholder="Search"
|
|
599
|
+
aria-label="Search"
|
|
600
|
+
/>
|
|
601
|
+
</span>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
</div>
|
|
605
|
+
</div>
|
|
606
|
+
<hr class="pf-c-divider" />
|
|
607
|
+
<section class="pf-c-menu__group">
|
|
608
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
609
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
610
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
611
|
+
<a
|
|
612
|
+
class="pf-c-menu__item"
|
|
613
|
+
href="#"
|
|
614
|
+
role="menuitem"
|
|
615
|
+
>
|
|
616
|
+
<span class="pf-c-menu__item-main">
|
|
617
|
+
<span
|
|
618
|
+
class="pf-c-menu__item-text"
|
|
619
|
+
>Link 1</span>
|
|
620
|
+
</span>
|
|
621
|
+
</a>
|
|
622
|
+
<button
|
|
623
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
624
|
+
type="button"
|
|
625
|
+
aria-label="Starred"
|
|
626
|
+
>
|
|
627
|
+
<span class="pf-c-menu__item-action-icon">
|
|
628
|
+
<i
|
|
629
|
+
class="fas fa-star"
|
|
630
|
+
aria-hidden="true"
|
|
631
|
+
></i>
|
|
632
|
+
</span>
|
|
633
|
+
</button>
|
|
634
|
+
</li>
|
|
635
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
636
|
+
<a
|
|
637
|
+
class="pf-c-menu__item"
|
|
638
|
+
href="#"
|
|
639
|
+
role="menuitem"
|
|
640
|
+
target="_blank"
|
|
641
|
+
>
|
|
642
|
+
<span class="pf-c-menu__item-main">
|
|
643
|
+
<span
|
|
644
|
+
class="pf-c-menu__item-text"
|
|
645
|
+
>Link 2</span>
|
|
646
|
+
<span
|
|
647
|
+
class="pf-c-menu__item-external-icon"
|
|
648
|
+
>
|
|
649
|
+
<i
|
|
650
|
+
class="fas fa-external-link-alt"
|
|
651
|
+
aria-hidden="true"
|
|
652
|
+
></i>
|
|
653
|
+
</span>
|
|
654
|
+
<span
|
|
655
|
+
class="pf-screen-reader"
|
|
656
|
+
>(opens new window)</span>
|
|
657
|
+
</span>
|
|
658
|
+
</a>
|
|
659
|
+
<button
|
|
660
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
661
|
+
type="button"
|
|
662
|
+
aria-label="Not starred"
|
|
663
|
+
>
|
|
664
|
+
<span class="pf-c-menu__item-action-icon">
|
|
665
|
+
<i
|
|
666
|
+
class="fas fa-star"
|
|
667
|
+
aria-hidden="true"
|
|
668
|
+
></i>
|
|
669
|
+
</span>
|
|
670
|
+
</button>
|
|
671
|
+
</li>
|
|
672
|
+
</ul>
|
|
673
|
+
</section>
|
|
674
|
+
<hr class="pf-c-divider" />
|
|
675
|
+
<section class="pf-c-menu__group">
|
|
676
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
677
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
678
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
679
|
+
<a
|
|
680
|
+
class="pf-c-menu__item"
|
|
681
|
+
href="#"
|
|
682
|
+
role="menuitem"
|
|
683
|
+
>
|
|
684
|
+
<span class="pf-c-menu__item-main">
|
|
685
|
+
<span
|
|
686
|
+
class="pf-c-menu__item-text"
|
|
687
|
+
>Link 1</span>
|
|
688
|
+
</span>
|
|
689
|
+
</a>
|
|
690
|
+
<button
|
|
691
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
692
|
+
type="button"
|
|
693
|
+
aria-label="Not starred"
|
|
694
|
+
>
|
|
695
|
+
<span class="pf-c-menu__item-action-icon">
|
|
696
|
+
<i
|
|
697
|
+
class="fas fa-star"
|
|
698
|
+
aria-hidden="true"
|
|
699
|
+
></i>
|
|
700
|
+
</span>
|
|
701
|
+
</button>
|
|
702
|
+
</li>
|
|
703
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
704
|
+
<a
|
|
705
|
+
class="pf-c-menu__item"
|
|
706
|
+
href="#"
|
|
707
|
+
role="menuitem"
|
|
708
|
+
target="_blank"
|
|
709
|
+
>
|
|
710
|
+
<span class="pf-c-menu__item-main">
|
|
711
|
+
<span
|
|
712
|
+
class="pf-c-menu__item-text"
|
|
713
|
+
>Link 2</span>
|
|
714
|
+
<span
|
|
715
|
+
class="pf-c-menu__item-external-icon"
|
|
716
|
+
>
|
|
717
|
+
<i
|
|
718
|
+
class="fas fa-external-link-alt"
|
|
719
|
+
aria-hidden="true"
|
|
720
|
+
></i>
|
|
721
|
+
</span>
|
|
722
|
+
<span
|
|
723
|
+
class="pf-screen-reader"
|
|
724
|
+
>(opens new window)</span>
|
|
725
|
+
</span>
|
|
726
|
+
</a>
|
|
727
|
+
<button
|
|
728
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
729
|
+
type="button"
|
|
730
|
+
aria-label="Starred"
|
|
731
|
+
>
|
|
732
|
+
<span class="pf-c-menu__item-action-icon">
|
|
733
|
+
<i
|
|
734
|
+
class="fas fa-star"
|
|
735
|
+
aria-hidden="true"
|
|
736
|
+
></i>
|
|
737
|
+
</span>
|
|
738
|
+
</button>
|
|
739
|
+
</li>
|
|
740
|
+
</ul>
|
|
741
|
+
</section>
|
|
742
|
+
</div>
|
|
743
|
+
</li>
|
|
744
|
+
</ul>
|
|
745
|
+
</section>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
</div>
|
|
749
|
+
</div>
|
|
750
|
+
</div>
|
|
751
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
752
|
+
<div
|
|
753
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
754
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
755
|
+
>
|
|
141
756
|
<button
|
|
142
|
-
class="pf-c-
|
|
757
|
+
class="pf-c-dropdown__toggle"
|
|
758
|
+
id="jump-links-collapsed-mobile-example-masthead-profile-button"
|
|
759
|
+
aria-expanded="false"
|
|
143
760
|
type="button"
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
761
|
+
>
|
|
762
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
763
|
+
<img
|
|
764
|
+
class="pf-c-avatar"
|
|
765
|
+
src="/assets/images/img_avatar.svg"
|
|
766
|
+
alt="Avatar image"
|
|
767
|
+
/>
|
|
768
|
+
</span>
|
|
769
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
770
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
771
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
772
|
+
</span>
|
|
773
|
+
</button>
|
|
774
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
775
|
+
<section class="pf-c-dropdown__group">
|
|
776
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
777
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
778
|
+
<div>123456789</div>
|
|
779
|
+
</div>
|
|
780
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
781
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
782
|
+
<div>mshaksho@redhat.com</div>
|
|
783
|
+
</div>
|
|
784
|
+
</section>
|
|
785
|
+
<hr class="pf-c-divider" />
|
|
786
|
+
<section class="pf-c-dropdown__group">
|
|
787
|
+
<ul>
|
|
788
|
+
<li>
|
|
789
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
790
|
+
</li>
|
|
791
|
+
<li>
|
|
792
|
+
<a
|
|
793
|
+
class="pf-c-dropdown__menu-item"
|
|
794
|
+
href="#"
|
|
795
|
+
>User management</a>
|
|
796
|
+
</li>
|
|
797
|
+
<li>
|
|
798
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
799
|
+
</li>
|
|
800
|
+
</ul>
|
|
801
|
+
</section>
|
|
802
|
+
</div>
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
152
805
|
</div>
|
|
153
806
|
</div>
|
|
154
807
|
</div>
|
|
155
|
-
<img
|
|
156
|
-
class="pf-c-avatar"
|
|
157
|
-
src="/assets/images/img_avatar.svg"
|
|
158
|
-
alt="Avatar image"
|
|
159
|
-
/>
|
|
160
808
|
</div>
|
|
161
809
|
</header>
|
|
162
810
|
<div class="pf-c-page__sidebar">
|
|
163
811
|
<div class="pf-c-page__sidebar-body">
|
|
164
812
|
<nav
|
|
165
813
|
class="pf-c-nav"
|
|
166
|
-
id="
|
|
814
|
+
id="jump-links-collapsed-mobile-example-primary-nav"
|
|
167
815
|
aria-label="Global"
|
|
168
816
|
>
|
|
169
817
|
<ul class="pf-c-nav__list">
|
|
@@ -193,7 +841,7 @@ section: components
|
|
|
193
841
|
<main
|
|
194
842
|
class="pf-c-page__main"
|
|
195
843
|
tabindex="-1"
|
|
196
|
-
id="main-content-
|
|
844
|
+
id="main-content-jump-links-collapsed-mobile-example"
|
|
197
845
|
>
|
|
198
846
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
199
847
|
<div class="pf-c-page__main-body">
|
|
@@ -267,7 +915,7 @@ section: components
|
|
|
267
915
|
<li class="pf-c-jump-links__item pf-m-current">
|
|
268
916
|
<a
|
|
269
917
|
class="pf-c-jump-links__link"
|
|
270
|
-
href="#
|
|
918
|
+
href="#jump-links-collapsed-mobile-example-jump-links-first"
|
|
271
919
|
>
|
|
272
920
|
<span class="pf-c-jump-links__link-text">First section</span>
|
|
273
921
|
</a>
|
|
@@ -275,7 +923,7 @@ section: components
|
|
|
275
923
|
<li class="pf-c-jump-links__item">
|
|
276
924
|
<a
|
|
277
925
|
class="pf-c-jump-links__link"
|
|
278
|
-
href="#
|
|
926
|
+
href="#jump-links-collapsed-mobile-example-jump-links-second"
|
|
279
927
|
>
|
|
280
928
|
<span class="pf-c-jump-links__link-text">Second section</span>
|
|
281
929
|
</a>
|
|
@@ -283,7 +931,7 @@ section: components
|
|
|
283
931
|
<li class="pf-c-jump-links__item">
|
|
284
932
|
<a
|
|
285
933
|
class="pf-c-jump-links__link"
|
|
286
|
-
href="#
|
|
934
|
+
href="#jump-links-collapsed-mobile-example-jump-links-third"
|
|
287
935
|
>
|
|
288
936
|
<span class="pf-c-jump-links__link-text">Third section</span>
|
|
289
937
|
</a>
|
|
@@ -291,7 +939,7 @@ section: components
|
|
|
291
939
|
<li class="pf-c-jump-links__item">
|
|
292
940
|
<a
|
|
293
941
|
class="pf-c-jump-links__link"
|
|
294
|
-
href="#
|
|
942
|
+
href="#jump-links-collapsed-mobile-example-jump-links-fourth"
|
|
295
943
|
>
|
|
296
944
|
<span class="pf-c-jump-links__link-text">Fourth section</span>
|
|
297
945
|
</a>
|
|
@@ -299,7 +947,7 @@ section: components
|
|
|
299
947
|
<li class="pf-c-jump-links__item">
|
|
300
948
|
<a
|
|
301
949
|
class="pf-c-jump-links__link"
|
|
302
|
-
href="#
|
|
950
|
+
href="#jump-links-collapsed-mobile-example-jump-links-fifth"
|
|
303
951
|
>
|
|
304
952
|
<span class="pf-c-jump-links__link-text">Fifth section</span>
|
|
305
953
|
</a>
|
|
@@ -311,19 +959,29 @@ section: components
|
|
|
311
959
|
<div class="pf-c-sidebar__content">
|
|
312
960
|
<section class="pf-c-page__main-section">
|
|
313
961
|
<div class="pf-c-content">
|
|
314
|
-
<h2
|
|
962
|
+
<h2
|
|
963
|
+
id="jump-links-collapsed-mobile-example-jump-links-first"
|
|
964
|
+
>First section</h2>
|
|
315
965
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
316
966
|
|
|
317
|
-
<h2
|
|
967
|
+
<h2
|
|
968
|
+
id="jump-links-collapsed-mobile-example-jump-links-second"
|
|
969
|
+
>Second section</h2>
|
|
318
970
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
319
971
|
|
|
320
|
-
<h2
|
|
972
|
+
<h2
|
|
973
|
+
id="jump-links-collapsed-mobile-example-jump-links-third"
|
|
974
|
+
>Third section</h2>
|
|
321
975
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
322
976
|
|
|
323
|
-
<h2
|
|
977
|
+
<h2
|
|
978
|
+
id="jump-links-collapsed-mobile-example-jump-links-fourth"
|
|
979
|
+
>Fourth section</h2>
|
|
324
980
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
325
981
|
|
|
326
|
-
<h2
|
|
982
|
+
<h2
|
|
983
|
+
id="jump-links-collapsed-mobile-example-jump-links-fifth"
|
|
984
|
+
>Fifth section</h2>
|
|
327
985
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
328
986
|
</div>
|
|
329
987
|
</section>
|
|
@@ -339,164 +997,812 @@ section: components
|
|
|
339
997
|
### Vertical jump links expanded on mobile
|
|
340
998
|
|
|
341
999
|
```html isFullscreen
|
|
342
|
-
<div class="pf-c-page" id="vertical-expanded-
|
|
1000
|
+
<div class="pf-c-page" id="jump-links-vertical-expanded-mobile-example">
|
|
343
1001
|
<a
|
|
344
1002
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
345
|
-
href="#main-content-vertical-expanded-
|
|
1003
|
+
href="#main-content-jump-links-vertical-expanded-mobile-example"
|
|
346
1004
|
>Skip to content</a>
|
|
347
|
-
<header
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
1005
|
+
<header
|
|
1006
|
+
class="pf-c-masthead"
|
|
1007
|
+
id="jump-links-vertical-expanded-mobile-example-masthead"
|
|
1008
|
+
>
|
|
1009
|
+
<span class="pf-c-masthead__toggle">
|
|
1010
|
+
<button
|
|
1011
|
+
class="pf-c-button pf-m-plain"
|
|
1012
|
+
type="button"
|
|
1013
|
+
aria-label="Global navigation"
|
|
1014
|
+
>
|
|
1015
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1016
|
+
</button>
|
|
1017
|
+
</span>
|
|
1018
|
+
<div class="pf-c-masthead__main">
|
|
1019
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1020
|
+
<picture
|
|
1021
|
+
class="pf-c-brand pf-m-picture"
|
|
1022
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
357
1023
|
>
|
|
358
|
-
<
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
1024
|
+
<source
|
|
1025
|
+
media="(min-width: 768px)"
|
|
1026
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1027
|
+
/>
|
|
1028
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1029
|
+
<img
|
|
1030
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1031
|
+
alt="Fallback patternFly default logo"
|
|
1032
|
+
/>
|
|
1033
|
+
</picture>
|
|
367
1034
|
</a>
|
|
368
1035
|
</div>
|
|
369
|
-
<div class="pf-c-
|
|
370
|
-
<div
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
>
|
|
379
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
380
|
-
</button>
|
|
381
|
-
</div>
|
|
382
|
-
<div
|
|
383
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
384
|
-
>
|
|
385
|
-
<button
|
|
386
|
-
class="pf-c-button pf-m-plain"
|
|
387
|
-
type="button"
|
|
388
|
-
aria-label="Help"
|
|
389
|
-
>
|
|
390
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
391
|
-
</button>
|
|
392
|
-
</div>
|
|
393
|
-
</div>
|
|
394
|
-
<div class="pf-c-page__header-tools-group">
|
|
395
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
396
|
-
<div class="pf-c-dropdown">
|
|
397
|
-
<button
|
|
398
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
399
|
-
id="vertical-expanded-on-mobile-dropdown-kebab-1-button"
|
|
400
|
-
aria-expanded="false"
|
|
401
|
-
type="button"
|
|
402
|
-
aria-label="Actions"
|
|
403
|
-
>
|
|
404
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
405
|
-
</button>
|
|
406
|
-
<ul
|
|
407
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
408
|
-
aria-labelledby="vertical-expanded-on-mobile-dropdown-kebab-1-button"
|
|
409
|
-
hidden
|
|
1036
|
+
<div class="pf-c-masthead__content">
|
|
1037
|
+
<div
|
|
1038
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1039
|
+
id="jump-links-vertical-expanded-mobile-example-masthead-toolbar"
|
|
1040
|
+
>
|
|
1041
|
+
<div class="pf-c-toolbar__content">
|
|
1042
|
+
<div class="pf-c-toolbar__content-section">
|
|
1043
|
+
<div
|
|
1044
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
410
1045
|
>
|
|
411
|
-
<
|
|
412
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
413
|
-
</li>
|
|
414
|
-
<li>
|
|
415
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
416
|
-
</li>
|
|
417
|
-
<li>
|
|
418
|
-
<a
|
|
419
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
420
|
-
href="#"
|
|
421
|
-
aria-disabled="true"
|
|
422
|
-
tabindex="-1"
|
|
423
|
-
>Disabled link</a>
|
|
424
|
-
</li>
|
|
425
|
-
<li>
|
|
1046
|
+
<div class="pf-c-toolbar__item">
|
|
426
1047
|
<button
|
|
427
|
-
class="pf-c-
|
|
1048
|
+
class="pf-c-button pf-m-plain"
|
|
428
1049
|
type="button"
|
|
429
|
-
|
|
430
|
-
>
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
</
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
1050
|
+
aria-label="Notifications"
|
|
1051
|
+
>
|
|
1052
|
+
<span class="pf-c-notification-badge">
|
|
1053
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
1054
|
+
</span>
|
|
1055
|
+
</button>
|
|
1056
|
+
</div>
|
|
1057
|
+
<div
|
|
1058
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1059
|
+
>
|
|
1060
|
+
<div class="pf-c-toolbar__item">
|
|
1061
|
+
<nav
|
|
1062
|
+
class="pf-c-app-launcher"
|
|
1063
|
+
aria-label="Application launcher"
|
|
1064
|
+
id="jump-links-vertical-expanded-mobile-example-masthead-icon-group--app-launcher"
|
|
1065
|
+
>
|
|
1066
|
+
<button
|
|
1067
|
+
class="pf-c-app-launcher__toggle"
|
|
1068
|
+
type="button"
|
|
1069
|
+
id="jump-links-vertical-expanded-mobile-example-masthead-icon-group--app-launcher-button"
|
|
1070
|
+
aria-expanded="false"
|
|
1071
|
+
aria-label="Application launcher"
|
|
1072
|
+
>
|
|
1073
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1074
|
+
</button>
|
|
1075
|
+
<div
|
|
1076
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1077
|
+
hidden
|
|
1078
|
+
>
|
|
1079
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1080
|
+
<div class="pf-c-search-input">
|
|
1081
|
+
<div class="pf-c-search-input__bar">
|
|
1082
|
+
<span class="pf-c-search-input__text">
|
|
1083
|
+
<span class="pf-c-search-input__icon">
|
|
1084
|
+
<i
|
|
1085
|
+
class="fas fa-search fa-fw"
|
|
1086
|
+
aria-hidden="true"
|
|
1087
|
+
></i>
|
|
1088
|
+
</span>
|
|
1089
|
+
<input
|
|
1090
|
+
class="pf-c-search-input__text-input"
|
|
1091
|
+
type="text"
|
|
1092
|
+
placeholder="Filter by name"
|
|
1093
|
+
aria-label="Filter by name"
|
|
1094
|
+
/>
|
|
1095
|
+
</span>
|
|
1096
|
+
</div>
|
|
1097
|
+
</div>
|
|
1098
|
+
</div>
|
|
1099
|
+
<section class="pf-c-app-launcher__group">
|
|
1100
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1101
|
+
<ul>
|
|
1102
|
+
<li
|
|
1103
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1104
|
+
>
|
|
1105
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1106
|
+
Link 1
|
|
1107
|
+
<span
|
|
1108
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1109
|
+
>
|
|
1110
|
+
<i
|
|
1111
|
+
class="fas fa-external-link-alt"
|
|
1112
|
+
aria-hidden="true"
|
|
1113
|
+
></i>
|
|
1114
|
+
</span>
|
|
1115
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1116
|
+
</a>
|
|
1117
|
+
<button
|
|
1118
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1119
|
+
type="button"
|
|
1120
|
+
aria-label="Favorite"
|
|
1121
|
+
>
|
|
1122
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1123
|
+
</button>
|
|
1124
|
+
</li>
|
|
1125
|
+
<li
|
|
1126
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1127
|
+
>
|
|
1128
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1129
|
+
Link 2
|
|
1130
|
+
<span
|
|
1131
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1132
|
+
>
|
|
1133
|
+
<i
|
|
1134
|
+
class="fas fa-external-link-alt"
|
|
1135
|
+
aria-hidden="true"
|
|
1136
|
+
></i>
|
|
1137
|
+
</span>
|
|
1138
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1139
|
+
</a>
|
|
1140
|
+
<button
|
|
1141
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1142
|
+
type="button"
|
|
1143
|
+
aria-label="Favorite"
|
|
1144
|
+
>
|
|
1145
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1146
|
+
</button>
|
|
1147
|
+
</li>
|
|
1148
|
+
</ul>
|
|
1149
|
+
</section>
|
|
1150
|
+
<hr class="pf-c-divider" />
|
|
1151
|
+
<section class="pf-c-app-launcher__group">
|
|
1152
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1153
|
+
<ul>
|
|
1154
|
+
<li
|
|
1155
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1156
|
+
>
|
|
1157
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1158
|
+
Link 1
|
|
1159
|
+
<span
|
|
1160
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1161
|
+
>
|
|
1162
|
+
<i
|
|
1163
|
+
class="fas fa-external-link-alt"
|
|
1164
|
+
aria-hidden="true"
|
|
1165
|
+
></i>
|
|
1166
|
+
</span>
|
|
1167
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1168
|
+
</a>
|
|
1169
|
+
<button
|
|
1170
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1171
|
+
type="button"
|
|
1172
|
+
aria-label="Favorite"
|
|
1173
|
+
>
|
|
1174
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1175
|
+
</button>
|
|
1176
|
+
</li>
|
|
1177
|
+
<li
|
|
1178
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1179
|
+
>
|
|
1180
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1181
|
+
Link 2
|
|
1182
|
+
<span
|
|
1183
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1184
|
+
>
|
|
1185
|
+
<i
|
|
1186
|
+
class="fas fa-external-link-alt"
|
|
1187
|
+
aria-hidden="true"
|
|
1188
|
+
></i>
|
|
1189
|
+
</span>
|
|
1190
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1191
|
+
</a>
|
|
1192
|
+
<button
|
|
1193
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1194
|
+
type="button"
|
|
1195
|
+
aria-label="Favorite"
|
|
1196
|
+
>
|
|
1197
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1198
|
+
</button>
|
|
1199
|
+
</li>
|
|
1200
|
+
</ul>
|
|
1201
|
+
</section>
|
|
1202
|
+
</div>
|
|
1203
|
+
</nav>
|
|
1204
|
+
</div>
|
|
1205
|
+
<div class="pf-c-toolbar__item">
|
|
1206
|
+
<div class="pf-c-dropdown">
|
|
1207
|
+
<button
|
|
1208
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1209
|
+
id="jump-links-vertical-expanded-mobile-example-masthead-settings-button"
|
|
1210
|
+
aria-expanded="false"
|
|
1211
|
+
type="button"
|
|
1212
|
+
aria-label="Settings"
|
|
1213
|
+
>
|
|
1214
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1215
|
+
</button>
|
|
1216
|
+
<ul
|
|
1217
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1218
|
+
aria-labelledby="jump-links-vertical-expanded-mobile-example-masthead-settings-button"
|
|
1219
|
+
hidden
|
|
1220
|
+
>
|
|
1221
|
+
<li>
|
|
1222
|
+
<button
|
|
1223
|
+
class="pf-c-dropdown__menu-item"
|
|
1224
|
+
type="button"
|
|
1225
|
+
>Settings</button>
|
|
1226
|
+
</li>
|
|
1227
|
+
<li>
|
|
1228
|
+
<button
|
|
1229
|
+
class="pf-c-dropdown__menu-item"
|
|
1230
|
+
type="button"
|
|
1231
|
+
>Use the beta release</button>
|
|
1232
|
+
</li>
|
|
1233
|
+
</ul>
|
|
1234
|
+
</div>
|
|
1235
|
+
</div>
|
|
1236
|
+
<div class="pf-c-toolbar__item">
|
|
1237
|
+
<div class="pf-c-dropdown">
|
|
1238
|
+
<button
|
|
1239
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1240
|
+
id="jump-links-vertical-expanded-mobile-example-masthead-help-button"
|
|
1241
|
+
aria-expanded="false"
|
|
1242
|
+
type="button"
|
|
1243
|
+
aria-label="Help"
|
|
1244
|
+
>
|
|
1245
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1246
|
+
</button>
|
|
1247
|
+
<ul
|
|
1248
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1249
|
+
aria-labelledby="jump-links-vertical-expanded-mobile-example-masthead-help-button"
|
|
1250
|
+
hidden
|
|
1251
|
+
>
|
|
1252
|
+
<li>
|
|
1253
|
+
<button
|
|
1254
|
+
class="pf-c-dropdown__menu-item"
|
|
1255
|
+
type="button"
|
|
1256
|
+
>Support options</button>
|
|
1257
|
+
</li>
|
|
1258
|
+
<li>
|
|
1259
|
+
<button
|
|
1260
|
+
class="pf-c-dropdown__menu-item"
|
|
1261
|
+
type="button"
|
|
1262
|
+
>Open support case</button>
|
|
1263
|
+
</li>
|
|
1264
|
+
<li>
|
|
1265
|
+
<button
|
|
1266
|
+
class="pf-c-dropdown__menu-item"
|
|
1267
|
+
type="button"
|
|
1268
|
+
>API documentation</button>
|
|
1269
|
+
</li>
|
|
1270
|
+
</ul>
|
|
1271
|
+
</div>
|
|
1272
|
+
</div>
|
|
1273
|
+
</div>
|
|
1274
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1275
|
+
<div class="pf-c-dropdown">
|
|
1276
|
+
<button
|
|
1277
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1278
|
+
type="button"
|
|
1279
|
+
aria-expanded="false"
|
|
1280
|
+
aria-label="Actions"
|
|
1281
|
+
>
|
|
1282
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1283
|
+
</button>
|
|
1284
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
1285
|
+
<div class="pf-c-menu__content">
|
|
1286
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1287
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1288
|
+
<li
|
|
1289
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1290
|
+
role="none"
|
|
1291
|
+
>
|
|
1292
|
+
<button
|
|
1293
|
+
class="pf-c-menu__item"
|
|
1294
|
+
type="button"
|
|
1295
|
+
disabled
|
|
1296
|
+
role="menuitem"
|
|
1297
|
+
>
|
|
1298
|
+
<span class="pf-c-menu__item-description">
|
|
1299
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1300
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
1301
|
+
</span>
|
|
1302
|
+
</button>
|
|
1303
|
+
</li>
|
|
1304
|
+
<li
|
|
1305
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1306
|
+
role="none"
|
|
1307
|
+
>
|
|
1308
|
+
<button
|
|
1309
|
+
class="pf-c-menu__item"
|
|
1310
|
+
type="button"
|
|
1311
|
+
disabled
|
|
1312
|
+
role="menuitem"
|
|
1313
|
+
>
|
|
1314
|
+
<span class="pf-c-menu__item-description">
|
|
1315
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1316
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1317
|
+
</span>
|
|
1318
|
+
</button>
|
|
1319
|
+
</li>
|
|
1320
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1321
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1322
|
+
<button
|
|
1323
|
+
class="pf-c-menu__item"
|
|
1324
|
+
type="button"
|
|
1325
|
+
role="menuitem"
|
|
1326
|
+
>
|
|
1327
|
+
<span class="pf-c-menu__item-main">
|
|
1328
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
1329
|
+
</span>
|
|
1330
|
+
</button>
|
|
1331
|
+
</li>
|
|
1332
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1333
|
+
<button
|
|
1334
|
+
class="pf-c-menu__item"
|
|
1335
|
+
type="button"
|
|
1336
|
+
role="menuitem"
|
|
1337
|
+
>
|
|
1338
|
+
<span class="pf-c-menu__item-main">
|
|
1339
|
+
<span
|
|
1340
|
+
class="pf-c-menu__item-text"
|
|
1341
|
+
>User management</span>
|
|
1342
|
+
</span>
|
|
1343
|
+
</button>
|
|
1344
|
+
</li>
|
|
1345
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1346
|
+
<button
|
|
1347
|
+
class="pf-c-menu__item"
|
|
1348
|
+
type="button"
|
|
1349
|
+
role="menuitem"
|
|
1350
|
+
>
|
|
1351
|
+
<span class="pf-c-menu__item-main">
|
|
1352
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1353
|
+
</span>
|
|
1354
|
+
</button>
|
|
1355
|
+
</li>
|
|
1356
|
+
</ul>
|
|
1357
|
+
</section>
|
|
1358
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1359
|
+
<section class="pf-c-menu__group">
|
|
1360
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1361
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1362
|
+
<button
|
|
1363
|
+
class="pf-c-menu__item"
|
|
1364
|
+
type="button"
|
|
1365
|
+
role="menuitem"
|
|
1366
|
+
aria-expanded="false"
|
|
1367
|
+
>
|
|
1368
|
+
<span class="pf-c-menu__item-main">
|
|
1369
|
+
<span class="pf-c-menu__item-icon">
|
|
1370
|
+
<i
|
|
1371
|
+
class="fas fa-fw fa-cog"
|
|
1372
|
+
aria-hidden="true"
|
|
1373
|
+
></i>
|
|
1374
|
+
</span>
|
|
1375
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1376
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1377
|
+
<i class="fas fa-angle-right"></i>
|
|
1378
|
+
</span>
|
|
1379
|
+
</span>
|
|
1380
|
+
</button>
|
|
1381
|
+
<div class="pf-c-menu" hidden>
|
|
1382
|
+
<div class="pf-c-menu__content">
|
|
1383
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1384
|
+
<li
|
|
1385
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1386
|
+
role="none"
|
|
1387
|
+
>
|
|
1388
|
+
<button
|
|
1389
|
+
class="pf-c-menu__item"
|
|
1390
|
+
type="button"
|
|
1391
|
+
role="menuitem"
|
|
1392
|
+
>
|
|
1393
|
+
<span class="pf-c-menu__item-main">
|
|
1394
|
+
<span
|
|
1395
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1396
|
+
>
|
|
1397
|
+
<i class="fas fa-angle-left"></i>
|
|
1398
|
+
</span>
|
|
1399
|
+
<span class="pf-c-menu__item-icon">
|
|
1400
|
+
<i
|
|
1401
|
+
class="fas fa-fw fa-cog"
|
|
1402
|
+
aria-hidden="true"
|
|
1403
|
+
></i>
|
|
1404
|
+
</span>
|
|
1405
|
+
<span
|
|
1406
|
+
class="pf-c-menu__item-text"
|
|
1407
|
+
>Settings</span>
|
|
1408
|
+
</span>
|
|
1409
|
+
</button>
|
|
1410
|
+
</li>
|
|
1411
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1412
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1413
|
+
<a
|
|
1414
|
+
class="pf-c-menu__item"
|
|
1415
|
+
href="#"
|
|
1416
|
+
role="menuitem"
|
|
1417
|
+
>
|
|
1418
|
+
<span class="pf-c-menu__item-main">
|
|
1419
|
+
<span
|
|
1420
|
+
class="pf-c-menu__item-text"
|
|
1421
|
+
>Customer support</span>
|
|
1422
|
+
</span>
|
|
1423
|
+
</a>
|
|
1424
|
+
</li>
|
|
1425
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1426
|
+
<a
|
|
1427
|
+
class="pf-c-menu__item"
|
|
1428
|
+
href="#"
|
|
1429
|
+
role="menuitem"
|
|
1430
|
+
>
|
|
1431
|
+
<span class="pf-c-menu__item-main">
|
|
1432
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
1433
|
+
</span>
|
|
1434
|
+
</a>
|
|
1435
|
+
</li>
|
|
1436
|
+
</ul>
|
|
1437
|
+
</div>
|
|
1438
|
+
</div>
|
|
1439
|
+
</li>
|
|
1440
|
+
|
|
1441
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1442
|
+
<button
|
|
1443
|
+
class="pf-c-menu__item"
|
|
1444
|
+
type="button"
|
|
1445
|
+
role="menuitem"
|
|
1446
|
+
aria-expanded="false"
|
|
1447
|
+
>
|
|
1448
|
+
<span class="pf-c-menu__item-main">
|
|
1449
|
+
<span class="pf-c-menu__item-icon">
|
|
1450
|
+
<i
|
|
1451
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1452
|
+
aria-hidden="true"
|
|
1453
|
+
></i>
|
|
1454
|
+
</span>
|
|
1455
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1456
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1457
|
+
<i class="fas fa-angle-right"></i>
|
|
1458
|
+
</span>
|
|
1459
|
+
</span>
|
|
1460
|
+
</button>
|
|
1461
|
+
<div class="pf-c-menu" hidden>
|
|
1462
|
+
<div class="pf-c-menu__content">
|
|
1463
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1464
|
+
<li
|
|
1465
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1466
|
+
role="none"
|
|
1467
|
+
>
|
|
1468
|
+
<button
|
|
1469
|
+
class="pf-c-menu__item"
|
|
1470
|
+
type="button"
|
|
1471
|
+
role="menuitem"
|
|
1472
|
+
>
|
|
1473
|
+
<span class="pf-c-menu__item-main">
|
|
1474
|
+
<span
|
|
1475
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1476
|
+
>
|
|
1477
|
+
<i class="fas fa-angle-left"></i>
|
|
1478
|
+
</span>
|
|
1479
|
+
<span class="pf-c-menu__item-icon">
|
|
1480
|
+
<i
|
|
1481
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1482
|
+
aria-hidden="true"
|
|
1483
|
+
></i>
|
|
1484
|
+
</span>
|
|
1485
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1486
|
+
</span>
|
|
1487
|
+
</button>
|
|
1488
|
+
</li>
|
|
1489
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1490
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1491
|
+
<a
|
|
1492
|
+
class="pf-c-menu__item"
|
|
1493
|
+
href="#"
|
|
1494
|
+
role="menuitem"
|
|
1495
|
+
>
|
|
1496
|
+
<span class="pf-c-menu__item-main">
|
|
1497
|
+
<span
|
|
1498
|
+
class="pf-c-menu__item-text"
|
|
1499
|
+
>Support options</span>
|
|
1500
|
+
</span>
|
|
1501
|
+
</a>
|
|
1502
|
+
</li>
|
|
1503
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1504
|
+
<a
|
|
1505
|
+
class="pf-c-menu__item"
|
|
1506
|
+
href="#"
|
|
1507
|
+
role="menuitem"
|
|
1508
|
+
>
|
|
1509
|
+
<span class="pf-c-menu__item-main">
|
|
1510
|
+
<span
|
|
1511
|
+
class="pf-c-menu__item-text"
|
|
1512
|
+
>Open support case</span>
|
|
1513
|
+
</span>
|
|
1514
|
+
</a>
|
|
1515
|
+
</li>
|
|
1516
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1517
|
+
<a
|
|
1518
|
+
class="pf-c-menu__item"
|
|
1519
|
+
href="#"
|
|
1520
|
+
role="menuitem"
|
|
1521
|
+
>
|
|
1522
|
+
<span class="pf-c-menu__item-main">
|
|
1523
|
+
<span
|
|
1524
|
+
class="pf-c-menu__item-text"
|
|
1525
|
+
>API documentation</span>
|
|
1526
|
+
</span>
|
|
1527
|
+
</a>
|
|
1528
|
+
</li>
|
|
1529
|
+
</ul>
|
|
1530
|
+
</div>
|
|
1531
|
+
</div>
|
|
1532
|
+
</li>
|
|
1533
|
+
|
|
1534
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1535
|
+
<button
|
|
1536
|
+
class="pf-c-menu__item"
|
|
1537
|
+
type="button"
|
|
1538
|
+
role="menuitem"
|
|
1539
|
+
>
|
|
1540
|
+
<span class="pf-c-menu__item-main">
|
|
1541
|
+
<span class="pf-c-menu__item-icon">
|
|
1542
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
1543
|
+
</span>
|
|
1544
|
+
<span
|
|
1545
|
+
class="pf-c-menu__item-text"
|
|
1546
|
+
>Application launcher</span>
|
|
1547
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1548
|
+
<i class="fas fa-angle-right"></i>
|
|
1549
|
+
</span>
|
|
1550
|
+
</span>
|
|
1551
|
+
</button>
|
|
1552
|
+
<div class="pf-c-menu" hidden>
|
|
1553
|
+
<div class="pf-c-menu__header">
|
|
1554
|
+
<button
|
|
1555
|
+
class="pf-c-menu__item"
|
|
1556
|
+
type="button"
|
|
1557
|
+
role="menuitem"
|
|
1558
|
+
>
|
|
1559
|
+
<span class="pf-c-menu__item-main">
|
|
1560
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1561
|
+
<i class="fas fa-angle-left"></i>
|
|
1562
|
+
</span>
|
|
1563
|
+
<span class="pf-c-menu__item-icon">
|
|
1564
|
+
<i
|
|
1565
|
+
class="fas fa-fw fa-th"
|
|
1566
|
+
aria-hidden="true"
|
|
1567
|
+
></i>
|
|
1568
|
+
</span>
|
|
1569
|
+
<span
|
|
1570
|
+
class="pf-c-menu__item-text"
|
|
1571
|
+
>Application launcher</span>
|
|
1572
|
+
</span>
|
|
1573
|
+
</button>
|
|
1574
|
+
</div>
|
|
1575
|
+
<div class="pf-c-menu__search">
|
|
1576
|
+
<div class="pf-c-menu__search-input">
|
|
1577
|
+
<div class="pf-c-search-input">
|
|
1578
|
+
<div class="pf-c-search-input__bar">
|
|
1579
|
+
<span class="pf-c-search-input__text">
|
|
1580
|
+
<span class="pf-c-search-input__icon">
|
|
1581
|
+
<i
|
|
1582
|
+
class="fas fa-search fa-fw"
|
|
1583
|
+
aria-hidden="true"
|
|
1584
|
+
></i>
|
|
1585
|
+
</span>
|
|
1586
|
+
<input
|
|
1587
|
+
class="pf-c-search-input__text-input"
|
|
1588
|
+
type="text"
|
|
1589
|
+
placeholder="Search"
|
|
1590
|
+
aria-label="Search"
|
|
1591
|
+
/>
|
|
1592
|
+
</span>
|
|
1593
|
+
</div>
|
|
1594
|
+
</div>
|
|
1595
|
+
</div>
|
|
1596
|
+
</div>
|
|
1597
|
+
<hr class="pf-c-divider" />
|
|
1598
|
+
<section class="pf-c-menu__group">
|
|
1599
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1600
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1601
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1602
|
+
<a
|
|
1603
|
+
class="pf-c-menu__item"
|
|
1604
|
+
href="#"
|
|
1605
|
+
role="menuitem"
|
|
1606
|
+
>
|
|
1607
|
+
<span class="pf-c-menu__item-main">
|
|
1608
|
+
<span
|
|
1609
|
+
class="pf-c-menu__item-text"
|
|
1610
|
+
>Link 1</span>
|
|
1611
|
+
</span>
|
|
1612
|
+
</a>
|
|
1613
|
+
<button
|
|
1614
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1615
|
+
type="button"
|
|
1616
|
+
aria-label="Starred"
|
|
1617
|
+
>
|
|
1618
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1619
|
+
<i
|
|
1620
|
+
class="fas fa-star"
|
|
1621
|
+
aria-hidden="true"
|
|
1622
|
+
></i>
|
|
1623
|
+
</span>
|
|
1624
|
+
</button>
|
|
1625
|
+
</li>
|
|
1626
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1627
|
+
<a
|
|
1628
|
+
class="pf-c-menu__item"
|
|
1629
|
+
href="#"
|
|
1630
|
+
role="menuitem"
|
|
1631
|
+
target="_blank"
|
|
1632
|
+
>
|
|
1633
|
+
<span class="pf-c-menu__item-main">
|
|
1634
|
+
<span
|
|
1635
|
+
class="pf-c-menu__item-text"
|
|
1636
|
+
>Link 2</span>
|
|
1637
|
+
<span
|
|
1638
|
+
class="pf-c-menu__item-external-icon"
|
|
1639
|
+
>
|
|
1640
|
+
<i
|
|
1641
|
+
class="fas fa-external-link-alt"
|
|
1642
|
+
aria-hidden="true"
|
|
1643
|
+
></i>
|
|
1644
|
+
</span>
|
|
1645
|
+
<span
|
|
1646
|
+
class="pf-screen-reader"
|
|
1647
|
+
>(opens new window)</span>
|
|
1648
|
+
</span>
|
|
1649
|
+
</a>
|
|
1650
|
+
<button
|
|
1651
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1652
|
+
type="button"
|
|
1653
|
+
aria-label="Not starred"
|
|
1654
|
+
>
|
|
1655
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1656
|
+
<i
|
|
1657
|
+
class="fas fa-star"
|
|
1658
|
+
aria-hidden="true"
|
|
1659
|
+
></i>
|
|
1660
|
+
</span>
|
|
1661
|
+
</button>
|
|
1662
|
+
</li>
|
|
1663
|
+
</ul>
|
|
1664
|
+
</section>
|
|
1665
|
+
<hr class="pf-c-divider" />
|
|
1666
|
+
<section class="pf-c-menu__group">
|
|
1667
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1668
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1669
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1670
|
+
<a
|
|
1671
|
+
class="pf-c-menu__item"
|
|
1672
|
+
href="#"
|
|
1673
|
+
role="menuitem"
|
|
1674
|
+
>
|
|
1675
|
+
<span class="pf-c-menu__item-main">
|
|
1676
|
+
<span
|
|
1677
|
+
class="pf-c-menu__item-text"
|
|
1678
|
+
>Link 1</span>
|
|
1679
|
+
</span>
|
|
1680
|
+
</a>
|
|
1681
|
+
<button
|
|
1682
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1683
|
+
type="button"
|
|
1684
|
+
aria-label="Not starred"
|
|
1685
|
+
>
|
|
1686
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1687
|
+
<i
|
|
1688
|
+
class="fas fa-star"
|
|
1689
|
+
aria-hidden="true"
|
|
1690
|
+
></i>
|
|
1691
|
+
</span>
|
|
1692
|
+
</button>
|
|
1693
|
+
</li>
|
|
1694
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1695
|
+
<a
|
|
1696
|
+
class="pf-c-menu__item"
|
|
1697
|
+
href="#"
|
|
1698
|
+
role="menuitem"
|
|
1699
|
+
target="_blank"
|
|
1700
|
+
>
|
|
1701
|
+
<span class="pf-c-menu__item-main">
|
|
1702
|
+
<span
|
|
1703
|
+
class="pf-c-menu__item-text"
|
|
1704
|
+
>Link 2</span>
|
|
1705
|
+
<span
|
|
1706
|
+
class="pf-c-menu__item-external-icon"
|
|
1707
|
+
>
|
|
1708
|
+
<i
|
|
1709
|
+
class="fas fa-external-link-alt"
|
|
1710
|
+
aria-hidden="true"
|
|
1711
|
+
></i>
|
|
1712
|
+
</span>
|
|
1713
|
+
<span
|
|
1714
|
+
class="pf-screen-reader"
|
|
1715
|
+
>(opens new window)</span>
|
|
1716
|
+
</span>
|
|
1717
|
+
</a>
|
|
1718
|
+
<button
|
|
1719
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1720
|
+
type="button"
|
|
1721
|
+
aria-label="Starred"
|
|
1722
|
+
>
|
|
1723
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1724
|
+
<i
|
|
1725
|
+
class="fas fa-star"
|
|
1726
|
+
aria-hidden="true"
|
|
1727
|
+
></i>
|
|
1728
|
+
</span>
|
|
1729
|
+
</button>
|
|
1730
|
+
</li>
|
|
1731
|
+
</ul>
|
|
1732
|
+
</section>
|
|
1733
|
+
</div>
|
|
1734
|
+
</li>
|
|
1735
|
+
</ul>
|
|
1736
|
+
</section>
|
|
1737
|
+
</div>
|
|
1738
|
+
</div>
|
|
1739
|
+
</div>
|
|
1740
|
+
</div>
|
|
1741
|
+
</div>
|
|
1742
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1743
|
+
<div
|
|
1744
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1745
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1746
|
+
>
|
|
474
1747
|
<button
|
|
475
|
-
class="pf-c-
|
|
1748
|
+
class="pf-c-dropdown__toggle"
|
|
1749
|
+
id="jump-links-vertical-expanded-mobile-example-masthead-profile-button"
|
|
1750
|
+
aria-expanded="false"
|
|
476
1751
|
type="button"
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
1752
|
+
>
|
|
1753
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1754
|
+
<img
|
|
1755
|
+
class="pf-c-avatar"
|
|
1756
|
+
src="/assets/images/img_avatar.svg"
|
|
1757
|
+
alt="Avatar image"
|
|
1758
|
+
/>
|
|
1759
|
+
</span>
|
|
1760
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1761
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1762
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1763
|
+
</span>
|
|
1764
|
+
</button>
|
|
1765
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1766
|
+
<section class="pf-c-dropdown__group">
|
|
1767
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1768
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1769
|
+
<div>123456789</div>
|
|
1770
|
+
</div>
|
|
1771
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1772
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1773
|
+
<div>mshaksho@redhat.com</div>
|
|
1774
|
+
</div>
|
|
1775
|
+
</section>
|
|
1776
|
+
<hr class="pf-c-divider" />
|
|
1777
|
+
<section class="pf-c-dropdown__group">
|
|
1778
|
+
<ul>
|
|
1779
|
+
<li>
|
|
1780
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
1781
|
+
</li>
|
|
1782
|
+
<li>
|
|
1783
|
+
<a
|
|
1784
|
+
class="pf-c-dropdown__menu-item"
|
|
1785
|
+
href="#"
|
|
1786
|
+
>User management</a>
|
|
1787
|
+
</li>
|
|
1788
|
+
<li>
|
|
1789
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1790
|
+
</li>
|
|
1791
|
+
</ul>
|
|
1792
|
+
</section>
|
|
1793
|
+
</div>
|
|
1794
|
+
</div>
|
|
1795
|
+
</div>
|
|
485
1796
|
</div>
|
|
486
1797
|
</div>
|
|
487
1798
|
</div>
|
|
488
|
-
<img
|
|
489
|
-
class="pf-c-avatar"
|
|
490
|
-
src="/assets/images/img_avatar.svg"
|
|
491
|
-
alt="Avatar image"
|
|
492
|
-
/>
|
|
493
1799
|
</div>
|
|
494
1800
|
</header>
|
|
495
1801
|
<div class="pf-c-page__sidebar">
|
|
496
1802
|
<div class="pf-c-page__sidebar-body">
|
|
497
1803
|
<nav
|
|
498
1804
|
class="pf-c-nav"
|
|
499
|
-
id="vertical-expanded-
|
|
1805
|
+
id="jump-links-vertical-expanded-mobile-example-primary-nav"
|
|
500
1806
|
aria-label="Global"
|
|
501
1807
|
>
|
|
502
1808
|
<ul class="pf-c-nav__list">
|
|
@@ -526,7 +1832,7 @@ section: components
|
|
|
526
1832
|
<main
|
|
527
1833
|
class="pf-c-page__main"
|
|
528
1834
|
tabindex="-1"
|
|
529
|
-
id="main-content-vertical-expanded-
|
|
1835
|
+
id="main-content-jump-links-vertical-expanded-mobile-example"
|
|
530
1836
|
>
|
|
531
1837
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
532
1838
|
<div class="pf-c-page__main-body">
|
|
@@ -600,7 +1906,7 @@ section: components
|
|
|
600
1906
|
<li class="pf-c-jump-links__item pf-m-current">
|
|
601
1907
|
<a
|
|
602
1908
|
class="pf-c-jump-links__link"
|
|
603
|
-
href="#vertical-expanded-
|
|
1909
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-first"
|
|
604
1910
|
>
|
|
605
1911
|
<span class="pf-c-jump-links__link-text">First section</span>
|
|
606
1912
|
</a>
|
|
@@ -608,7 +1914,7 @@ section: components
|
|
|
608
1914
|
<li class="pf-c-jump-links__item">
|
|
609
1915
|
<a
|
|
610
1916
|
class="pf-c-jump-links__link"
|
|
611
|
-
href="#vertical-expanded-
|
|
1917
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-second"
|
|
612
1918
|
>
|
|
613
1919
|
<span class="pf-c-jump-links__link-text">Second section</span>
|
|
614
1920
|
</a>
|
|
@@ -616,7 +1922,7 @@ section: components
|
|
|
616
1922
|
<li class="pf-c-jump-links__item">
|
|
617
1923
|
<a
|
|
618
1924
|
class="pf-c-jump-links__link"
|
|
619
|
-
href="#vertical-expanded-
|
|
1925
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-third"
|
|
620
1926
|
>
|
|
621
1927
|
<span class="pf-c-jump-links__link-text">Third section</span>
|
|
622
1928
|
</a>
|
|
@@ -624,7 +1930,7 @@ section: components
|
|
|
624
1930
|
<li class="pf-c-jump-links__item">
|
|
625
1931
|
<a
|
|
626
1932
|
class="pf-c-jump-links__link"
|
|
627
|
-
href="#vertical-expanded-
|
|
1933
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-fourth"
|
|
628
1934
|
>
|
|
629
1935
|
<span class="pf-c-jump-links__link-text">Fourth section</span>
|
|
630
1936
|
</a>
|
|
@@ -632,7 +1938,7 @@ section: components
|
|
|
632
1938
|
<li class="pf-c-jump-links__item">
|
|
633
1939
|
<a
|
|
634
1940
|
class="pf-c-jump-links__link"
|
|
635
|
-
href="#vertical-expanded-
|
|
1941
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-fifth"
|
|
636
1942
|
>
|
|
637
1943
|
<span class="pf-c-jump-links__link-text">Fifth section</span>
|
|
638
1944
|
</a>
|
|
@@ -644,19 +1950,29 @@ section: components
|
|
|
644
1950
|
<div class="pf-c-sidebar__content">
|
|
645
1951
|
<section class="pf-c-page__main-section">
|
|
646
1952
|
<div class="pf-c-content">
|
|
647
|
-
<h2
|
|
1953
|
+
<h2
|
|
1954
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-first"
|
|
1955
|
+
>First section</h2>
|
|
648
1956
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
649
1957
|
|
|
650
|
-
<h2
|
|
1958
|
+
<h2
|
|
1959
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-second"
|
|
1960
|
+
>Second section</h2>
|
|
651
1961
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
652
1962
|
|
|
653
|
-
<h2
|
|
1963
|
+
<h2
|
|
1964
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-third"
|
|
1965
|
+
>Third section</h2>
|
|
654
1966
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
655
1967
|
|
|
656
|
-
<h2
|
|
1968
|
+
<h2
|
|
1969
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-fourth"
|
|
1970
|
+
>Fourth section</h2>
|
|
657
1971
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
658
1972
|
|
|
659
|
-
<h2
|
|
1973
|
+
<h2
|
|
1974
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-fifth"
|
|
1975
|
+
>Fifth section</h2>
|
|
660
1976
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
661
1977
|
</div>
|
|
662
1978
|
</section>
|
|
@@ -672,164 +1988,812 @@ section: components
|
|
|
672
1988
|
### Vertical jump links toggle text on mobile
|
|
673
1989
|
|
|
674
1990
|
```html isFullscreen
|
|
675
|
-
<div class="pf-c-page" id="vertical-toggle-text-
|
|
1991
|
+
<div class="pf-c-page" id="jump-links-vertical-toggle-text-mobile-example">
|
|
676
1992
|
<a
|
|
677
1993
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
678
|
-
href="#main-content-vertical-toggle-text-
|
|
1994
|
+
href="#main-content-jump-links-vertical-toggle-text-mobile-example"
|
|
679
1995
|
>Skip to content</a>
|
|
680
|
-
<header
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
1996
|
+
<header
|
|
1997
|
+
class="pf-c-masthead"
|
|
1998
|
+
id="jump-links-vertical-toggle-text-mobile-example-masthead"
|
|
1999
|
+
>
|
|
2000
|
+
<span class="pf-c-masthead__toggle">
|
|
2001
|
+
<button
|
|
2002
|
+
class="pf-c-button pf-m-plain"
|
|
2003
|
+
type="button"
|
|
2004
|
+
aria-label="Global navigation"
|
|
2005
|
+
>
|
|
2006
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2007
|
+
</button>
|
|
2008
|
+
</span>
|
|
2009
|
+
<div class="pf-c-masthead__main">
|
|
2010
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
2011
|
+
<picture
|
|
2012
|
+
class="pf-c-brand pf-m-picture"
|
|
2013
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
690
2014
|
>
|
|
691
|
-
<
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
2015
|
+
<source
|
|
2016
|
+
media="(min-width: 768px)"
|
|
2017
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
2018
|
+
/>
|
|
2019
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
2020
|
+
<img
|
|
2021
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
2022
|
+
alt="Fallback patternFly default logo"
|
|
2023
|
+
/>
|
|
2024
|
+
</picture>
|
|
700
2025
|
</a>
|
|
701
2026
|
</div>
|
|
702
|
-
<div class="pf-c-
|
|
703
|
-
<div
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
>
|
|
712
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
713
|
-
</button>
|
|
714
|
-
</div>
|
|
715
|
-
<div
|
|
716
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
717
|
-
>
|
|
718
|
-
<button
|
|
719
|
-
class="pf-c-button pf-m-plain"
|
|
720
|
-
type="button"
|
|
721
|
-
aria-label="Help"
|
|
722
|
-
>
|
|
723
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
724
|
-
</button>
|
|
725
|
-
</div>
|
|
726
|
-
</div>
|
|
727
|
-
<div class="pf-c-page__header-tools-group">
|
|
728
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
729
|
-
<div class="pf-c-dropdown">
|
|
730
|
-
<button
|
|
731
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
732
|
-
id="vertical-toggle-text-on-mobile-dropdown-kebab-1-button"
|
|
733
|
-
aria-expanded="false"
|
|
734
|
-
type="button"
|
|
735
|
-
aria-label="Actions"
|
|
736
|
-
>
|
|
737
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
738
|
-
</button>
|
|
739
|
-
<ul
|
|
740
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
741
|
-
aria-labelledby="vertical-toggle-text-on-mobile-dropdown-kebab-1-button"
|
|
742
|
-
hidden
|
|
2027
|
+
<div class="pf-c-masthead__content">
|
|
2028
|
+
<div
|
|
2029
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2030
|
+
id="jump-links-vertical-toggle-text-mobile-example-masthead-toolbar"
|
|
2031
|
+
>
|
|
2032
|
+
<div class="pf-c-toolbar__content">
|
|
2033
|
+
<div class="pf-c-toolbar__content-section">
|
|
2034
|
+
<div
|
|
2035
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
743
2036
|
>
|
|
744
|
-
<
|
|
745
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
746
|
-
</li>
|
|
747
|
-
<li>
|
|
748
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
749
|
-
</li>
|
|
750
|
-
<li>
|
|
751
|
-
<a
|
|
752
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
753
|
-
href="#"
|
|
754
|
-
aria-disabled="true"
|
|
755
|
-
tabindex="-1"
|
|
756
|
-
>Disabled link</a>
|
|
757
|
-
</li>
|
|
758
|
-
<li>
|
|
2037
|
+
<div class="pf-c-toolbar__item">
|
|
759
2038
|
<button
|
|
760
|
-
class="pf-c-
|
|
2039
|
+
class="pf-c-button pf-m-plain"
|
|
761
2040
|
type="button"
|
|
762
|
-
|
|
763
|
-
>
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
</
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
2041
|
+
aria-label="Notifications"
|
|
2042
|
+
>
|
|
2043
|
+
<span class="pf-c-notification-badge">
|
|
2044
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
2045
|
+
</span>
|
|
2046
|
+
</button>
|
|
2047
|
+
</div>
|
|
2048
|
+
<div
|
|
2049
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
2050
|
+
>
|
|
2051
|
+
<div class="pf-c-toolbar__item">
|
|
2052
|
+
<nav
|
|
2053
|
+
class="pf-c-app-launcher"
|
|
2054
|
+
aria-label="Application launcher"
|
|
2055
|
+
id="jump-links-vertical-toggle-text-mobile-example-masthead-icon-group--app-launcher"
|
|
2056
|
+
>
|
|
2057
|
+
<button
|
|
2058
|
+
class="pf-c-app-launcher__toggle"
|
|
2059
|
+
type="button"
|
|
2060
|
+
id="jump-links-vertical-toggle-text-mobile-example-masthead-icon-group--app-launcher-button"
|
|
2061
|
+
aria-expanded="false"
|
|
2062
|
+
aria-label="Application launcher"
|
|
2063
|
+
>
|
|
2064
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
2065
|
+
</button>
|
|
2066
|
+
<div
|
|
2067
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
2068
|
+
hidden
|
|
2069
|
+
>
|
|
2070
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
2071
|
+
<div class="pf-c-search-input">
|
|
2072
|
+
<div class="pf-c-search-input__bar">
|
|
2073
|
+
<span class="pf-c-search-input__text">
|
|
2074
|
+
<span class="pf-c-search-input__icon">
|
|
2075
|
+
<i
|
|
2076
|
+
class="fas fa-search fa-fw"
|
|
2077
|
+
aria-hidden="true"
|
|
2078
|
+
></i>
|
|
2079
|
+
</span>
|
|
2080
|
+
<input
|
|
2081
|
+
class="pf-c-search-input__text-input"
|
|
2082
|
+
type="text"
|
|
2083
|
+
placeholder="Filter by name"
|
|
2084
|
+
aria-label="Filter by name"
|
|
2085
|
+
/>
|
|
2086
|
+
</span>
|
|
2087
|
+
</div>
|
|
2088
|
+
</div>
|
|
2089
|
+
</div>
|
|
2090
|
+
<section class="pf-c-app-launcher__group">
|
|
2091
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
2092
|
+
<ul>
|
|
2093
|
+
<li
|
|
2094
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2095
|
+
>
|
|
2096
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2097
|
+
Link 1
|
|
2098
|
+
<span
|
|
2099
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2100
|
+
>
|
|
2101
|
+
<i
|
|
2102
|
+
class="fas fa-external-link-alt"
|
|
2103
|
+
aria-hidden="true"
|
|
2104
|
+
></i>
|
|
2105
|
+
</span>
|
|
2106
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2107
|
+
</a>
|
|
2108
|
+
<button
|
|
2109
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2110
|
+
type="button"
|
|
2111
|
+
aria-label="Favorite"
|
|
2112
|
+
>
|
|
2113
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2114
|
+
</button>
|
|
2115
|
+
</li>
|
|
2116
|
+
<li
|
|
2117
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2118
|
+
>
|
|
2119
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2120
|
+
Link 2
|
|
2121
|
+
<span
|
|
2122
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2123
|
+
>
|
|
2124
|
+
<i
|
|
2125
|
+
class="fas fa-external-link-alt"
|
|
2126
|
+
aria-hidden="true"
|
|
2127
|
+
></i>
|
|
2128
|
+
</span>
|
|
2129
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2130
|
+
</a>
|
|
2131
|
+
<button
|
|
2132
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2133
|
+
type="button"
|
|
2134
|
+
aria-label="Favorite"
|
|
2135
|
+
>
|
|
2136
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2137
|
+
</button>
|
|
2138
|
+
</li>
|
|
2139
|
+
</ul>
|
|
2140
|
+
</section>
|
|
2141
|
+
<hr class="pf-c-divider" />
|
|
2142
|
+
<section class="pf-c-app-launcher__group">
|
|
2143
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
2144
|
+
<ul>
|
|
2145
|
+
<li
|
|
2146
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2147
|
+
>
|
|
2148
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2149
|
+
Link 1
|
|
2150
|
+
<span
|
|
2151
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2152
|
+
>
|
|
2153
|
+
<i
|
|
2154
|
+
class="fas fa-external-link-alt"
|
|
2155
|
+
aria-hidden="true"
|
|
2156
|
+
></i>
|
|
2157
|
+
</span>
|
|
2158
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2159
|
+
</a>
|
|
2160
|
+
<button
|
|
2161
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2162
|
+
type="button"
|
|
2163
|
+
aria-label="Favorite"
|
|
2164
|
+
>
|
|
2165
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2166
|
+
</button>
|
|
2167
|
+
</li>
|
|
2168
|
+
<li
|
|
2169
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2170
|
+
>
|
|
2171
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2172
|
+
Link 2
|
|
2173
|
+
<span
|
|
2174
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2175
|
+
>
|
|
2176
|
+
<i
|
|
2177
|
+
class="fas fa-external-link-alt"
|
|
2178
|
+
aria-hidden="true"
|
|
2179
|
+
></i>
|
|
2180
|
+
</span>
|
|
2181
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2182
|
+
</a>
|
|
2183
|
+
<button
|
|
2184
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2185
|
+
type="button"
|
|
2186
|
+
aria-label="Favorite"
|
|
2187
|
+
>
|
|
2188
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2189
|
+
</button>
|
|
2190
|
+
</li>
|
|
2191
|
+
</ul>
|
|
2192
|
+
</section>
|
|
2193
|
+
</div>
|
|
2194
|
+
</nav>
|
|
2195
|
+
</div>
|
|
2196
|
+
<div class="pf-c-toolbar__item">
|
|
2197
|
+
<div class="pf-c-dropdown">
|
|
2198
|
+
<button
|
|
2199
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2200
|
+
id="jump-links-vertical-toggle-text-mobile-example-masthead-settings-button"
|
|
2201
|
+
aria-expanded="false"
|
|
2202
|
+
type="button"
|
|
2203
|
+
aria-label="Settings"
|
|
2204
|
+
>
|
|
2205
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2206
|
+
</button>
|
|
2207
|
+
<ul
|
|
2208
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2209
|
+
aria-labelledby="jump-links-vertical-toggle-text-mobile-example-masthead-settings-button"
|
|
2210
|
+
hidden
|
|
2211
|
+
>
|
|
2212
|
+
<li>
|
|
2213
|
+
<button
|
|
2214
|
+
class="pf-c-dropdown__menu-item"
|
|
2215
|
+
type="button"
|
|
2216
|
+
>Settings</button>
|
|
2217
|
+
</li>
|
|
2218
|
+
<li>
|
|
2219
|
+
<button
|
|
2220
|
+
class="pf-c-dropdown__menu-item"
|
|
2221
|
+
type="button"
|
|
2222
|
+
>Use the beta release</button>
|
|
2223
|
+
</li>
|
|
2224
|
+
</ul>
|
|
2225
|
+
</div>
|
|
2226
|
+
</div>
|
|
2227
|
+
<div class="pf-c-toolbar__item">
|
|
2228
|
+
<div class="pf-c-dropdown">
|
|
2229
|
+
<button
|
|
2230
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2231
|
+
id="jump-links-vertical-toggle-text-mobile-example-masthead-help-button"
|
|
2232
|
+
aria-expanded="false"
|
|
2233
|
+
type="button"
|
|
2234
|
+
aria-label="Help"
|
|
2235
|
+
>
|
|
2236
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
2237
|
+
</button>
|
|
2238
|
+
<ul
|
|
2239
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2240
|
+
aria-labelledby="jump-links-vertical-toggle-text-mobile-example-masthead-help-button"
|
|
2241
|
+
hidden
|
|
2242
|
+
>
|
|
2243
|
+
<li>
|
|
2244
|
+
<button
|
|
2245
|
+
class="pf-c-dropdown__menu-item"
|
|
2246
|
+
type="button"
|
|
2247
|
+
>Support options</button>
|
|
2248
|
+
</li>
|
|
2249
|
+
<li>
|
|
2250
|
+
<button
|
|
2251
|
+
class="pf-c-dropdown__menu-item"
|
|
2252
|
+
type="button"
|
|
2253
|
+
>Open support case</button>
|
|
2254
|
+
</li>
|
|
2255
|
+
<li>
|
|
2256
|
+
<button
|
|
2257
|
+
class="pf-c-dropdown__menu-item"
|
|
2258
|
+
type="button"
|
|
2259
|
+
>API documentation</button>
|
|
2260
|
+
</li>
|
|
2261
|
+
</ul>
|
|
2262
|
+
</div>
|
|
2263
|
+
</div>
|
|
2264
|
+
</div>
|
|
2265
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
2266
|
+
<div class="pf-c-dropdown">
|
|
2267
|
+
<button
|
|
2268
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
2269
|
+
type="button"
|
|
2270
|
+
aria-expanded="false"
|
|
2271
|
+
aria-label="Actions"
|
|
2272
|
+
>
|
|
2273
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2274
|
+
</button>
|
|
2275
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
2276
|
+
<div class="pf-c-menu__content">
|
|
2277
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
2278
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2279
|
+
<li
|
|
2280
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2281
|
+
role="none"
|
|
2282
|
+
>
|
|
2283
|
+
<button
|
|
2284
|
+
class="pf-c-menu__item"
|
|
2285
|
+
type="button"
|
|
2286
|
+
disabled
|
|
2287
|
+
role="menuitem"
|
|
2288
|
+
>
|
|
2289
|
+
<span class="pf-c-menu__item-description">
|
|
2290
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2291
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
2292
|
+
</span>
|
|
2293
|
+
</button>
|
|
2294
|
+
</li>
|
|
2295
|
+
<li
|
|
2296
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2297
|
+
role="none"
|
|
2298
|
+
>
|
|
2299
|
+
<button
|
|
2300
|
+
class="pf-c-menu__item"
|
|
2301
|
+
type="button"
|
|
2302
|
+
disabled
|
|
2303
|
+
role="menuitem"
|
|
2304
|
+
>
|
|
2305
|
+
<span class="pf-c-menu__item-description">
|
|
2306
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2307
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
2308
|
+
</span>
|
|
2309
|
+
</button>
|
|
2310
|
+
</li>
|
|
2311
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2312
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2313
|
+
<button
|
|
2314
|
+
class="pf-c-menu__item"
|
|
2315
|
+
type="button"
|
|
2316
|
+
role="menuitem"
|
|
2317
|
+
>
|
|
2318
|
+
<span class="pf-c-menu__item-main">
|
|
2319
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
2320
|
+
</span>
|
|
2321
|
+
</button>
|
|
2322
|
+
</li>
|
|
2323
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2324
|
+
<button
|
|
2325
|
+
class="pf-c-menu__item"
|
|
2326
|
+
type="button"
|
|
2327
|
+
role="menuitem"
|
|
2328
|
+
>
|
|
2329
|
+
<span class="pf-c-menu__item-main">
|
|
2330
|
+
<span
|
|
2331
|
+
class="pf-c-menu__item-text"
|
|
2332
|
+
>User management</span>
|
|
2333
|
+
</span>
|
|
2334
|
+
</button>
|
|
2335
|
+
</li>
|
|
2336
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2337
|
+
<button
|
|
2338
|
+
class="pf-c-menu__item"
|
|
2339
|
+
type="button"
|
|
2340
|
+
role="menuitem"
|
|
2341
|
+
>
|
|
2342
|
+
<span class="pf-c-menu__item-main">
|
|
2343
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
2344
|
+
</span>
|
|
2345
|
+
</button>
|
|
2346
|
+
</li>
|
|
2347
|
+
</ul>
|
|
2348
|
+
</section>
|
|
2349
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
2350
|
+
<section class="pf-c-menu__group">
|
|
2351
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2352
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2353
|
+
<button
|
|
2354
|
+
class="pf-c-menu__item"
|
|
2355
|
+
type="button"
|
|
2356
|
+
role="menuitem"
|
|
2357
|
+
aria-expanded="false"
|
|
2358
|
+
>
|
|
2359
|
+
<span class="pf-c-menu__item-main">
|
|
2360
|
+
<span class="pf-c-menu__item-icon">
|
|
2361
|
+
<i
|
|
2362
|
+
class="fas fa-fw fa-cog"
|
|
2363
|
+
aria-hidden="true"
|
|
2364
|
+
></i>
|
|
2365
|
+
</span>
|
|
2366
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
2367
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2368
|
+
<i class="fas fa-angle-right"></i>
|
|
2369
|
+
</span>
|
|
2370
|
+
</span>
|
|
2371
|
+
</button>
|
|
2372
|
+
<div class="pf-c-menu" hidden>
|
|
2373
|
+
<div class="pf-c-menu__content">
|
|
2374
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2375
|
+
<li
|
|
2376
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2377
|
+
role="none"
|
|
2378
|
+
>
|
|
2379
|
+
<button
|
|
2380
|
+
class="pf-c-menu__item"
|
|
2381
|
+
type="button"
|
|
2382
|
+
role="menuitem"
|
|
2383
|
+
>
|
|
2384
|
+
<span class="pf-c-menu__item-main">
|
|
2385
|
+
<span
|
|
2386
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2387
|
+
>
|
|
2388
|
+
<i class="fas fa-angle-left"></i>
|
|
2389
|
+
</span>
|
|
2390
|
+
<span class="pf-c-menu__item-icon">
|
|
2391
|
+
<i
|
|
2392
|
+
class="fas fa-fw fa-cog"
|
|
2393
|
+
aria-hidden="true"
|
|
2394
|
+
></i>
|
|
2395
|
+
</span>
|
|
2396
|
+
<span
|
|
2397
|
+
class="pf-c-menu__item-text"
|
|
2398
|
+
>Settings</span>
|
|
2399
|
+
</span>
|
|
2400
|
+
</button>
|
|
2401
|
+
</li>
|
|
2402
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2403
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2404
|
+
<a
|
|
2405
|
+
class="pf-c-menu__item"
|
|
2406
|
+
href="#"
|
|
2407
|
+
role="menuitem"
|
|
2408
|
+
>
|
|
2409
|
+
<span class="pf-c-menu__item-main">
|
|
2410
|
+
<span
|
|
2411
|
+
class="pf-c-menu__item-text"
|
|
2412
|
+
>Customer support</span>
|
|
2413
|
+
</span>
|
|
2414
|
+
</a>
|
|
2415
|
+
</li>
|
|
2416
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2417
|
+
<a
|
|
2418
|
+
class="pf-c-menu__item"
|
|
2419
|
+
href="#"
|
|
2420
|
+
role="menuitem"
|
|
2421
|
+
>
|
|
2422
|
+
<span class="pf-c-menu__item-main">
|
|
2423
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
2424
|
+
</span>
|
|
2425
|
+
</a>
|
|
2426
|
+
</li>
|
|
2427
|
+
</ul>
|
|
2428
|
+
</div>
|
|
2429
|
+
</div>
|
|
2430
|
+
</li>
|
|
2431
|
+
|
|
2432
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2433
|
+
<button
|
|
2434
|
+
class="pf-c-menu__item"
|
|
2435
|
+
type="button"
|
|
2436
|
+
role="menuitem"
|
|
2437
|
+
aria-expanded="false"
|
|
2438
|
+
>
|
|
2439
|
+
<span class="pf-c-menu__item-main">
|
|
2440
|
+
<span class="pf-c-menu__item-icon">
|
|
2441
|
+
<i
|
|
2442
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2443
|
+
aria-hidden="true"
|
|
2444
|
+
></i>
|
|
2445
|
+
</span>
|
|
2446
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2447
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2448
|
+
<i class="fas fa-angle-right"></i>
|
|
2449
|
+
</span>
|
|
2450
|
+
</span>
|
|
2451
|
+
</button>
|
|
2452
|
+
<div class="pf-c-menu" hidden>
|
|
2453
|
+
<div class="pf-c-menu__content">
|
|
2454
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2455
|
+
<li
|
|
2456
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2457
|
+
role="none"
|
|
2458
|
+
>
|
|
2459
|
+
<button
|
|
2460
|
+
class="pf-c-menu__item"
|
|
2461
|
+
type="button"
|
|
2462
|
+
role="menuitem"
|
|
2463
|
+
>
|
|
2464
|
+
<span class="pf-c-menu__item-main">
|
|
2465
|
+
<span
|
|
2466
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2467
|
+
>
|
|
2468
|
+
<i class="fas fa-angle-left"></i>
|
|
2469
|
+
</span>
|
|
2470
|
+
<span class="pf-c-menu__item-icon">
|
|
2471
|
+
<i
|
|
2472
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2473
|
+
aria-hidden="true"
|
|
2474
|
+
></i>
|
|
2475
|
+
</span>
|
|
2476
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2477
|
+
</span>
|
|
2478
|
+
</button>
|
|
2479
|
+
</li>
|
|
2480
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2481
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2482
|
+
<a
|
|
2483
|
+
class="pf-c-menu__item"
|
|
2484
|
+
href="#"
|
|
2485
|
+
role="menuitem"
|
|
2486
|
+
>
|
|
2487
|
+
<span class="pf-c-menu__item-main">
|
|
2488
|
+
<span
|
|
2489
|
+
class="pf-c-menu__item-text"
|
|
2490
|
+
>Support options</span>
|
|
2491
|
+
</span>
|
|
2492
|
+
</a>
|
|
2493
|
+
</li>
|
|
2494
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2495
|
+
<a
|
|
2496
|
+
class="pf-c-menu__item"
|
|
2497
|
+
href="#"
|
|
2498
|
+
role="menuitem"
|
|
2499
|
+
>
|
|
2500
|
+
<span class="pf-c-menu__item-main">
|
|
2501
|
+
<span
|
|
2502
|
+
class="pf-c-menu__item-text"
|
|
2503
|
+
>Open support case</span>
|
|
2504
|
+
</span>
|
|
2505
|
+
</a>
|
|
2506
|
+
</li>
|
|
2507
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2508
|
+
<a
|
|
2509
|
+
class="pf-c-menu__item"
|
|
2510
|
+
href="#"
|
|
2511
|
+
role="menuitem"
|
|
2512
|
+
>
|
|
2513
|
+
<span class="pf-c-menu__item-main">
|
|
2514
|
+
<span
|
|
2515
|
+
class="pf-c-menu__item-text"
|
|
2516
|
+
>API documentation</span>
|
|
2517
|
+
</span>
|
|
2518
|
+
</a>
|
|
2519
|
+
</li>
|
|
2520
|
+
</ul>
|
|
2521
|
+
</div>
|
|
2522
|
+
</div>
|
|
2523
|
+
</li>
|
|
2524
|
+
|
|
2525
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2526
|
+
<button
|
|
2527
|
+
class="pf-c-menu__item"
|
|
2528
|
+
type="button"
|
|
2529
|
+
role="menuitem"
|
|
2530
|
+
>
|
|
2531
|
+
<span class="pf-c-menu__item-main">
|
|
2532
|
+
<span class="pf-c-menu__item-icon">
|
|
2533
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
2534
|
+
</span>
|
|
2535
|
+
<span
|
|
2536
|
+
class="pf-c-menu__item-text"
|
|
2537
|
+
>Application launcher</span>
|
|
2538
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2539
|
+
<i class="fas fa-angle-right"></i>
|
|
2540
|
+
</span>
|
|
2541
|
+
</span>
|
|
2542
|
+
</button>
|
|
2543
|
+
<div class="pf-c-menu" hidden>
|
|
2544
|
+
<div class="pf-c-menu__header">
|
|
2545
|
+
<button
|
|
2546
|
+
class="pf-c-menu__item"
|
|
2547
|
+
type="button"
|
|
2548
|
+
role="menuitem"
|
|
2549
|
+
>
|
|
2550
|
+
<span class="pf-c-menu__item-main">
|
|
2551
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2552
|
+
<i class="fas fa-angle-left"></i>
|
|
2553
|
+
</span>
|
|
2554
|
+
<span class="pf-c-menu__item-icon">
|
|
2555
|
+
<i
|
|
2556
|
+
class="fas fa-fw fa-th"
|
|
2557
|
+
aria-hidden="true"
|
|
2558
|
+
></i>
|
|
2559
|
+
</span>
|
|
2560
|
+
<span
|
|
2561
|
+
class="pf-c-menu__item-text"
|
|
2562
|
+
>Application launcher</span>
|
|
2563
|
+
</span>
|
|
2564
|
+
</button>
|
|
2565
|
+
</div>
|
|
2566
|
+
<div class="pf-c-menu__search">
|
|
2567
|
+
<div class="pf-c-menu__search-input">
|
|
2568
|
+
<div class="pf-c-search-input">
|
|
2569
|
+
<div class="pf-c-search-input__bar">
|
|
2570
|
+
<span class="pf-c-search-input__text">
|
|
2571
|
+
<span class="pf-c-search-input__icon">
|
|
2572
|
+
<i
|
|
2573
|
+
class="fas fa-search fa-fw"
|
|
2574
|
+
aria-hidden="true"
|
|
2575
|
+
></i>
|
|
2576
|
+
</span>
|
|
2577
|
+
<input
|
|
2578
|
+
class="pf-c-search-input__text-input"
|
|
2579
|
+
type="text"
|
|
2580
|
+
placeholder="Search"
|
|
2581
|
+
aria-label="Search"
|
|
2582
|
+
/>
|
|
2583
|
+
</span>
|
|
2584
|
+
</div>
|
|
2585
|
+
</div>
|
|
2586
|
+
</div>
|
|
2587
|
+
</div>
|
|
2588
|
+
<hr class="pf-c-divider" />
|
|
2589
|
+
<section class="pf-c-menu__group">
|
|
2590
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
2591
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2592
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2593
|
+
<a
|
|
2594
|
+
class="pf-c-menu__item"
|
|
2595
|
+
href="#"
|
|
2596
|
+
role="menuitem"
|
|
2597
|
+
>
|
|
2598
|
+
<span class="pf-c-menu__item-main">
|
|
2599
|
+
<span
|
|
2600
|
+
class="pf-c-menu__item-text"
|
|
2601
|
+
>Link 1</span>
|
|
2602
|
+
</span>
|
|
2603
|
+
</a>
|
|
2604
|
+
<button
|
|
2605
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2606
|
+
type="button"
|
|
2607
|
+
aria-label="Starred"
|
|
2608
|
+
>
|
|
2609
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2610
|
+
<i
|
|
2611
|
+
class="fas fa-star"
|
|
2612
|
+
aria-hidden="true"
|
|
2613
|
+
></i>
|
|
2614
|
+
</span>
|
|
2615
|
+
</button>
|
|
2616
|
+
</li>
|
|
2617
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2618
|
+
<a
|
|
2619
|
+
class="pf-c-menu__item"
|
|
2620
|
+
href="#"
|
|
2621
|
+
role="menuitem"
|
|
2622
|
+
target="_blank"
|
|
2623
|
+
>
|
|
2624
|
+
<span class="pf-c-menu__item-main">
|
|
2625
|
+
<span
|
|
2626
|
+
class="pf-c-menu__item-text"
|
|
2627
|
+
>Link 2</span>
|
|
2628
|
+
<span
|
|
2629
|
+
class="pf-c-menu__item-external-icon"
|
|
2630
|
+
>
|
|
2631
|
+
<i
|
|
2632
|
+
class="fas fa-external-link-alt"
|
|
2633
|
+
aria-hidden="true"
|
|
2634
|
+
></i>
|
|
2635
|
+
</span>
|
|
2636
|
+
<span
|
|
2637
|
+
class="pf-screen-reader"
|
|
2638
|
+
>(opens new window)</span>
|
|
2639
|
+
</span>
|
|
2640
|
+
</a>
|
|
2641
|
+
<button
|
|
2642
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2643
|
+
type="button"
|
|
2644
|
+
aria-label="Not starred"
|
|
2645
|
+
>
|
|
2646
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2647
|
+
<i
|
|
2648
|
+
class="fas fa-star"
|
|
2649
|
+
aria-hidden="true"
|
|
2650
|
+
></i>
|
|
2651
|
+
</span>
|
|
2652
|
+
</button>
|
|
2653
|
+
</li>
|
|
2654
|
+
</ul>
|
|
2655
|
+
</section>
|
|
2656
|
+
<hr class="pf-c-divider" />
|
|
2657
|
+
<section class="pf-c-menu__group">
|
|
2658
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
2659
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2660
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2661
|
+
<a
|
|
2662
|
+
class="pf-c-menu__item"
|
|
2663
|
+
href="#"
|
|
2664
|
+
role="menuitem"
|
|
2665
|
+
>
|
|
2666
|
+
<span class="pf-c-menu__item-main">
|
|
2667
|
+
<span
|
|
2668
|
+
class="pf-c-menu__item-text"
|
|
2669
|
+
>Link 1</span>
|
|
2670
|
+
</span>
|
|
2671
|
+
</a>
|
|
2672
|
+
<button
|
|
2673
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2674
|
+
type="button"
|
|
2675
|
+
aria-label="Not starred"
|
|
2676
|
+
>
|
|
2677
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2678
|
+
<i
|
|
2679
|
+
class="fas fa-star"
|
|
2680
|
+
aria-hidden="true"
|
|
2681
|
+
></i>
|
|
2682
|
+
</span>
|
|
2683
|
+
</button>
|
|
2684
|
+
</li>
|
|
2685
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2686
|
+
<a
|
|
2687
|
+
class="pf-c-menu__item"
|
|
2688
|
+
href="#"
|
|
2689
|
+
role="menuitem"
|
|
2690
|
+
target="_blank"
|
|
2691
|
+
>
|
|
2692
|
+
<span class="pf-c-menu__item-main">
|
|
2693
|
+
<span
|
|
2694
|
+
class="pf-c-menu__item-text"
|
|
2695
|
+
>Link 2</span>
|
|
2696
|
+
<span
|
|
2697
|
+
class="pf-c-menu__item-external-icon"
|
|
2698
|
+
>
|
|
2699
|
+
<i
|
|
2700
|
+
class="fas fa-external-link-alt"
|
|
2701
|
+
aria-hidden="true"
|
|
2702
|
+
></i>
|
|
2703
|
+
</span>
|
|
2704
|
+
<span
|
|
2705
|
+
class="pf-screen-reader"
|
|
2706
|
+
>(opens new window)</span>
|
|
2707
|
+
</span>
|
|
2708
|
+
</a>
|
|
2709
|
+
<button
|
|
2710
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2711
|
+
type="button"
|
|
2712
|
+
aria-label="Starred"
|
|
2713
|
+
>
|
|
2714
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2715
|
+
<i
|
|
2716
|
+
class="fas fa-star"
|
|
2717
|
+
aria-hidden="true"
|
|
2718
|
+
></i>
|
|
2719
|
+
</span>
|
|
2720
|
+
</button>
|
|
2721
|
+
</li>
|
|
2722
|
+
</ul>
|
|
2723
|
+
</section>
|
|
2724
|
+
</div>
|
|
2725
|
+
</li>
|
|
2726
|
+
</ul>
|
|
2727
|
+
</section>
|
|
2728
|
+
</div>
|
|
2729
|
+
</div>
|
|
2730
|
+
</div>
|
|
2731
|
+
</div>
|
|
2732
|
+
</div>
|
|
2733
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
2734
|
+
<div
|
|
2735
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
2736
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
2737
|
+
>
|
|
807
2738
|
<button
|
|
808
|
-
class="pf-c-
|
|
2739
|
+
class="pf-c-dropdown__toggle"
|
|
2740
|
+
id="jump-links-vertical-toggle-text-mobile-example-masthead-profile-button"
|
|
2741
|
+
aria-expanded="false"
|
|
809
2742
|
type="button"
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
2743
|
+
>
|
|
2744
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
2745
|
+
<img
|
|
2746
|
+
class="pf-c-avatar"
|
|
2747
|
+
src="/assets/images/img_avatar.svg"
|
|
2748
|
+
alt="Avatar image"
|
|
2749
|
+
/>
|
|
2750
|
+
</span>
|
|
2751
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
2752
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2753
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2754
|
+
</span>
|
|
2755
|
+
</button>
|
|
2756
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
2757
|
+
<section class="pf-c-dropdown__group">
|
|
2758
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2759
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2760
|
+
<div>123456789</div>
|
|
2761
|
+
</div>
|
|
2762
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2763
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2764
|
+
<div>mshaksho@redhat.com</div>
|
|
2765
|
+
</div>
|
|
2766
|
+
</section>
|
|
2767
|
+
<hr class="pf-c-divider" />
|
|
2768
|
+
<section class="pf-c-dropdown__group">
|
|
2769
|
+
<ul>
|
|
2770
|
+
<li>
|
|
2771
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
2772
|
+
</li>
|
|
2773
|
+
<li>
|
|
2774
|
+
<a
|
|
2775
|
+
class="pf-c-dropdown__menu-item"
|
|
2776
|
+
href="#"
|
|
2777
|
+
>User management</a>
|
|
2778
|
+
</li>
|
|
2779
|
+
<li>
|
|
2780
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
2781
|
+
</li>
|
|
2782
|
+
</ul>
|
|
2783
|
+
</section>
|
|
2784
|
+
</div>
|
|
2785
|
+
</div>
|
|
2786
|
+
</div>
|
|
818
2787
|
</div>
|
|
819
2788
|
</div>
|
|
820
2789
|
</div>
|
|
821
|
-
<img
|
|
822
|
-
class="pf-c-avatar"
|
|
823
|
-
src="/assets/images/img_avatar.svg"
|
|
824
|
-
alt="Avatar image"
|
|
825
|
-
/>
|
|
826
2790
|
</div>
|
|
827
2791
|
</header>
|
|
828
2792
|
<div class="pf-c-page__sidebar">
|
|
829
2793
|
<div class="pf-c-page__sidebar-body">
|
|
830
2794
|
<nav
|
|
831
2795
|
class="pf-c-nav"
|
|
832
|
-
id="vertical-toggle-text-
|
|
2796
|
+
id="jump-links-vertical-toggle-text-mobile-example-primary-nav"
|
|
833
2797
|
aria-label="Global"
|
|
834
2798
|
>
|
|
835
2799
|
<ul class="pf-c-nav__list">
|
|
@@ -859,7 +2823,7 @@ section: components
|
|
|
859
2823
|
<main
|
|
860
2824
|
class="pf-c-page__main"
|
|
861
2825
|
tabindex="-1"
|
|
862
|
-
id="main-content-vertical-toggle-text-
|
|
2826
|
+
id="main-content-jump-links-vertical-toggle-text-mobile-example"
|
|
863
2827
|
>
|
|
864
2828
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
865
2829
|
<div class="pf-c-page__main-body">
|
|
@@ -933,7 +2897,7 @@ section: components
|
|
|
933
2897
|
<li class="pf-c-jump-links__item pf-m-current">
|
|
934
2898
|
<a
|
|
935
2899
|
class="pf-c-jump-links__link"
|
|
936
|
-
href="#vertical-toggle-text-
|
|
2900
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-first"
|
|
937
2901
|
>
|
|
938
2902
|
<span class="pf-c-jump-links__link-text">First section</span>
|
|
939
2903
|
</a>
|
|
@@ -941,7 +2905,7 @@ section: components
|
|
|
941
2905
|
<li class="pf-c-jump-links__item">
|
|
942
2906
|
<a
|
|
943
2907
|
class="pf-c-jump-links__link"
|
|
944
|
-
href="#vertical-toggle-text-
|
|
2908
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-second"
|
|
945
2909
|
>
|
|
946
2910
|
<span class="pf-c-jump-links__link-text">Second section</span>
|
|
947
2911
|
</a>
|
|
@@ -949,7 +2913,7 @@ section: components
|
|
|
949
2913
|
<li class="pf-c-jump-links__item">
|
|
950
2914
|
<a
|
|
951
2915
|
class="pf-c-jump-links__link"
|
|
952
|
-
href="#vertical-toggle-text-
|
|
2916
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-third"
|
|
953
2917
|
>
|
|
954
2918
|
<span class="pf-c-jump-links__link-text">Third section</span>
|
|
955
2919
|
</a>
|
|
@@ -957,7 +2921,7 @@ section: components
|
|
|
957
2921
|
<li class="pf-c-jump-links__item">
|
|
958
2922
|
<a
|
|
959
2923
|
class="pf-c-jump-links__link"
|
|
960
|
-
href="#vertical-toggle-text-
|
|
2924
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
|
|
961
2925
|
>
|
|
962
2926
|
<span class="pf-c-jump-links__link-text">Fourth section</span>
|
|
963
2927
|
</a>
|
|
@@ -965,7 +2929,7 @@ section: components
|
|
|
965
2929
|
<li class="pf-c-jump-links__item">
|
|
966
2930
|
<a
|
|
967
2931
|
class="pf-c-jump-links__link"
|
|
968
|
-
href="#vertical-toggle-text-
|
|
2932
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
|
|
969
2933
|
>
|
|
970
2934
|
<span class="pf-c-jump-links__link-text">Fifth section</span>
|
|
971
2935
|
</a>
|
|
@@ -977,19 +2941,29 @@ section: components
|
|
|
977
2941
|
<div class="pf-c-sidebar__content">
|
|
978
2942
|
<section class="pf-c-page__main-section">
|
|
979
2943
|
<div class="pf-c-content">
|
|
980
|
-
<h2
|
|
2944
|
+
<h2
|
|
2945
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-first"
|
|
2946
|
+
>First section</h2>
|
|
981
2947
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
982
2948
|
|
|
983
|
-
<h2
|
|
2949
|
+
<h2
|
|
2950
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-second"
|
|
2951
|
+
>Second section</h2>
|
|
984
2952
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
985
2953
|
|
|
986
|
-
<h2
|
|
2954
|
+
<h2
|
|
2955
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-third"
|
|
2956
|
+
>Third section</h2>
|
|
987
2957
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
988
2958
|
|
|
989
|
-
<h2
|
|
2959
|
+
<h2
|
|
2960
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
|
|
2961
|
+
>Fourth section</h2>
|
|
990
2962
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
991
2963
|
|
|
992
|
-
<h2
|
|
2964
|
+
<h2
|
|
2965
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
|
|
2966
|
+
>Fifth section</h2>
|
|
993
2967
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
994
2968
|
</div>
|
|
995
2969
|
</section>
|
|
@@ -1005,162 +2979,811 @@ section: components
|
|
|
1005
2979
|
### Horizontal jump links
|
|
1006
2980
|
|
|
1007
2981
|
```html isFullscreen
|
|
1008
|
-
<div class="pf-c-page" id="horizontal">
|
|
2982
|
+
<div class="pf-c-page" id="jump-links-horizontal-example">
|
|
1009
2983
|
<a
|
|
1010
2984
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1011
|
-
href="#main-content-horizontal"
|
|
2985
|
+
href="#main-content-jump-links-horizontal-example"
|
|
1012
2986
|
>Skip to content</a>
|
|
1013
|
-
<header class="pf-c-
|
|
1014
|
-
<
|
|
1015
|
-
<
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
2987
|
+
<header class="pf-c-masthead" id="jump-links-horizontal-example-masthead">
|
|
2988
|
+
<span class="pf-c-masthead__toggle">
|
|
2989
|
+
<button
|
|
2990
|
+
class="pf-c-button pf-m-plain"
|
|
2991
|
+
type="button"
|
|
2992
|
+
aria-label="Global navigation"
|
|
2993
|
+
>
|
|
2994
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2995
|
+
</button>
|
|
2996
|
+
</span>
|
|
2997
|
+
<div class="pf-c-masthead__main">
|
|
2998
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
2999
|
+
<picture
|
|
3000
|
+
class="pf-c-brand pf-m-picture"
|
|
3001
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1023
3002
|
>
|
|
1024
|
-
<
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
3003
|
+
<source
|
|
3004
|
+
media="(min-width: 768px)"
|
|
3005
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
3006
|
+
/>
|
|
3007
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
3008
|
+
<img
|
|
3009
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
3010
|
+
alt="Fallback patternFly default logo"
|
|
3011
|
+
/>
|
|
3012
|
+
</picture>
|
|
1033
3013
|
</a>
|
|
1034
3014
|
</div>
|
|
1035
|
-
<div class="pf-c-
|
|
1036
|
-
<div
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
>
|
|
1045
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1046
|
-
</button>
|
|
1047
|
-
</div>
|
|
1048
|
-
<div
|
|
1049
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
1050
|
-
>
|
|
1051
|
-
<button
|
|
1052
|
-
class="pf-c-button pf-m-plain"
|
|
1053
|
-
type="button"
|
|
1054
|
-
aria-label="Help"
|
|
1055
|
-
>
|
|
1056
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1057
|
-
</button>
|
|
1058
|
-
</div>
|
|
1059
|
-
</div>
|
|
1060
|
-
<div class="pf-c-page__header-tools-group">
|
|
1061
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
1062
|
-
<div class="pf-c-dropdown">
|
|
1063
|
-
<button
|
|
1064
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1065
|
-
id="horizontal-dropdown-kebab-1-button"
|
|
1066
|
-
aria-expanded="false"
|
|
1067
|
-
type="button"
|
|
1068
|
-
aria-label="Actions"
|
|
1069
|
-
>
|
|
1070
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1071
|
-
</button>
|
|
1072
|
-
<ul
|
|
1073
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1074
|
-
aria-labelledby="horizontal-dropdown-kebab-1-button"
|
|
1075
|
-
hidden
|
|
3015
|
+
<div class="pf-c-masthead__content">
|
|
3016
|
+
<div
|
|
3017
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
3018
|
+
id="jump-links-horizontal-example-masthead-toolbar"
|
|
3019
|
+
>
|
|
3020
|
+
<div class="pf-c-toolbar__content">
|
|
3021
|
+
<div class="pf-c-toolbar__content-section">
|
|
3022
|
+
<div
|
|
3023
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1076
3024
|
>
|
|
1077
|
-
<
|
|
1078
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1079
|
-
</li>
|
|
1080
|
-
<li>
|
|
1081
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1082
|
-
</li>
|
|
1083
|
-
<li>
|
|
1084
|
-
<a
|
|
1085
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1086
|
-
href="#"
|
|
1087
|
-
aria-disabled="true"
|
|
1088
|
-
tabindex="-1"
|
|
1089
|
-
>Disabled link</a>
|
|
1090
|
-
</li>
|
|
1091
|
-
<li>
|
|
3025
|
+
<div class="pf-c-toolbar__item">
|
|
1092
3026
|
<button
|
|
1093
|
-
class="pf-c-
|
|
3027
|
+
class="pf-c-button pf-m-plain"
|
|
1094
3028
|
type="button"
|
|
1095
|
-
|
|
1096
|
-
>
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
</
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
3029
|
+
aria-label="Notifications"
|
|
3030
|
+
>
|
|
3031
|
+
<span class="pf-c-notification-badge">
|
|
3032
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
3033
|
+
</span>
|
|
3034
|
+
</button>
|
|
3035
|
+
</div>
|
|
3036
|
+
<div
|
|
3037
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
3038
|
+
>
|
|
3039
|
+
<div class="pf-c-toolbar__item">
|
|
3040
|
+
<nav
|
|
3041
|
+
class="pf-c-app-launcher"
|
|
3042
|
+
aria-label="Application launcher"
|
|
3043
|
+
id="jump-links-horizontal-example-masthead-icon-group--app-launcher"
|
|
3044
|
+
>
|
|
3045
|
+
<button
|
|
3046
|
+
class="pf-c-app-launcher__toggle"
|
|
3047
|
+
type="button"
|
|
3048
|
+
id="jump-links-horizontal-example-masthead-icon-group--app-launcher-button"
|
|
3049
|
+
aria-expanded="false"
|
|
3050
|
+
aria-label="Application launcher"
|
|
3051
|
+
>
|
|
3052
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
3053
|
+
</button>
|
|
3054
|
+
<div
|
|
3055
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
3056
|
+
hidden
|
|
3057
|
+
>
|
|
3058
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
3059
|
+
<div class="pf-c-search-input">
|
|
3060
|
+
<div class="pf-c-search-input__bar">
|
|
3061
|
+
<span class="pf-c-search-input__text">
|
|
3062
|
+
<span class="pf-c-search-input__icon">
|
|
3063
|
+
<i
|
|
3064
|
+
class="fas fa-search fa-fw"
|
|
3065
|
+
aria-hidden="true"
|
|
3066
|
+
></i>
|
|
3067
|
+
</span>
|
|
3068
|
+
<input
|
|
3069
|
+
class="pf-c-search-input__text-input"
|
|
3070
|
+
type="text"
|
|
3071
|
+
placeholder="Filter by name"
|
|
3072
|
+
aria-label="Filter by name"
|
|
3073
|
+
/>
|
|
3074
|
+
</span>
|
|
3075
|
+
</div>
|
|
3076
|
+
</div>
|
|
3077
|
+
</div>
|
|
3078
|
+
<section class="pf-c-app-launcher__group">
|
|
3079
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
3080
|
+
<ul>
|
|
3081
|
+
<li
|
|
3082
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
3083
|
+
>
|
|
3084
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3085
|
+
Link 1
|
|
3086
|
+
<span
|
|
3087
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3088
|
+
>
|
|
3089
|
+
<i
|
|
3090
|
+
class="fas fa-external-link-alt"
|
|
3091
|
+
aria-hidden="true"
|
|
3092
|
+
></i>
|
|
3093
|
+
</span>
|
|
3094
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3095
|
+
</a>
|
|
3096
|
+
<button
|
|
3097
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3098
|
+
type="button"
|
|
3099
|
+
aria-label="Favorite"
|
|
3100
|
+
>
|
|
3101
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3102
|
+
</button>
|
|
3103
|
+
</li>
|
|
3104
|
+
<li
|
|
3105
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
3106
|
+
>
|
|
3107
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3108
|
+
Link 2
|
|
3109
|
+
<span
|
|
3110
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3111
|
+
>
|
|
3112
|
+
<i
|
|
3113
|
+
class="fas fa-external-link-alt"
|
|
3114
|
+
aria-hidden="true"
|
|
3115
|
+
></i>
|
|
3116
|
+
</span>
|
|
3117
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3118
|
+
</a>
|
|
3119
|
+
<button
|
|
3120
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3121
|
+
type="button"
|
|
3122
|
+
aria-label="Favorite"
|
|
3123
|
+
>
|
|
3124
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3125
|
+
</button>
|
|
3126
|
+
</li>
|
|
3127
|
+
</ul>
|
|
3128
|
+
</section>
|
|
3129
|
+
<hr class="pf-c-divider" />
|
|
3130
|
+
<section class="pf-c-app-launcher__group">
|
|
3131
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
3132
|
+
<ul>
|
|
3133
|
+
<li
|
|
3134
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
3135
|
+
>
|
|
3136
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3137
|
+
Link 1
|
|
3138
|
+
<span
|
|
3139
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3140
|
+
>
|
|
3141
|
+
<i
|
|
3142
|
+
class="fas fa-external-link-alt"
|
|
3143
|
+
aria-hidden="true"
|
|
3144
|
+
></i>
|
|
3145
|
+
</span>
|
|
3146
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3147
|
+
</a>
|
|
3148
|
+
<button
|
|
3149
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3150
|
+
type="button"
|
|
3151
|
+
aria-label="Favorite"
|
|
3152
|
+
>
|
|
3153
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3154
|
+
</button>
|
|
3155
|
+
</li>
|
|
3156
|
+
<li
|
|
3157
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
3158
|
+
>
|
|
3159
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3160
|
+
Link 2
|
|
3161
|
+
<span
|
|
3162
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3163
|
+
>
|
|
3164
|
+
<i
|
|
3165
|
+
class="fas fa-external-link-alt"
|
|
3166
|
+
aria-hidden="true"
|
|
3167
|
+
></i>
|
|
3168
|
+
</span>
|
|
3169
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3170
|
+
</a>
|
|
3171
|
+
<button
|
|
3172
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3173
|
+
type="button"
|
|
3174
|
+
aria-label="Favorite"
|
|
3175
|
+
>
|
|
3176
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3177
|
+
</button>
|
|
3178
|
+
</li>
|
|
3179
|
+
</ul>
|
|
3180
|
+
</section>
|
|
3181
|
+
</div>
|
|
3182
|
+
</nav>
|
|
3183
|
+
</div>
|
|
3184
|
+
<div class="pf-c-toolbar__item">
|
|
3185
|
+
<div class="pf-c-dropdown">
|
|
3186
|
+
<button
|
|
3187
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3188
|
+
id="jump-links-horizontal-example-masthead-settings-button"
|
|
3189
|
+
aria-expanded="false"
|
|
3190
|
+
type="button"
|
|
3191
|
+
aria-label="Settings"
|
|
3192
|
+
>
|
|
3193
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
3194
|
+
</button>
|
|
3195
|
+
<ul
|
|
3196
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3197
|
+
aria-labelledby="jump-links-horizontal-example-masthead-settings-button"
|
|
3198
|
+
hidden
|
|
3199
|
+
>
|
|
3200
|
+
<li>
|
|
3201
|
+
<button
|
|
3202
|
+
class="pf-c-dropdown__menu-item"
|
|
3203
|
+
type="button"
|
|
3204
|
+
>Settings</button>
|
|
3205
|
+
</li>
|
|
3206
|
+
<li>
|
|
3207
|
+
<button
|
|
3208
|
+
class="pf-c-dropdown__menu-item"
|
|
3209
|
+
type="button"
|
|
3210
|
+
>Use the beta release</button>
|
|
3211
|
+
</li>
|
|
3212
|
+
</ul>
|
|
3213
|
+
</div>
|
|
3214
|
+
</div>
|
|
3215
|
+
<div class="pf-c-toolbar__item">
|
|
3216
|
+
<div class="pf-c-dropdown">
|
|
3217
|
+
<button
|
|
3218
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3219
|
+
id="jump-links-horizontal-example-masthead-help-button"
|
|
3220
|
+
aria-expanded="false"
|
|
3221
|
+
type="button"
|
|
3222
|
+
aria-label="Help"
|
|
3223
|
+
>
|
|
3224
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
3225
|
+
</button>
|
|
3226
|
+
<ul
|
|
3227
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3228
|
+
aria-labelledby="jump-links-horizontal-example-masthead-help-button"
|
|
3229
|
+
hidden
|
|
3230
|
+
>
|
|
3231
|
+
<li>
|
|
3232
|
+
<button
|
|
3233
|
+
class="pf-c-dropdown__menu-item"
|
|
3234
|
+
type="button"
|
|
3235
|
+
>Support options</button>
|
|
3236
|
+
</li>
|
|
3237
|
+
<li>
|
|
3238
|
+
<button
|
|
3239
|
+
class="pf-c-dropdown__menu-item"
|
|
3240
|
+
type="button"
|
|
3241
|
+
>Open support case</button>
|
|
3242
|
+
</li>
|
|
3243
|
+
<li>
|
|
3244
|
+
<button
|
|
3245
|
+
class="pf-c-dropdown__menu-item"
|
|
3246
|
+
type="button"
|
|
3247
|
+
>API documentation</button>
|
|
3248
|
+
</li>
|
|
3249
|
+
</ul>
|
|
3250
|
+
</div>
|
|
3251
|
+
</div>
|
|
3252
|
+
</div>
|
|
3253
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
3254
|
+
<div class="pf-c-dropdown">
|
|
3255
|
+
<button
|
|
3256
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
3257
|
+
type="button"
|
|
3258
|
+
aria-expanded="false"
|
|
3259
|
+
aria-label="Actions"
|
|
3260
|
+
>
|
|
3261
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
3262
|
+
</button>
|
|
3263
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
3264
|
+
<div class="pf-c-menu__content">
|
|
3265
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
3266
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3267
|
+
<li
|
|
3268
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
3269
|
+
role="none"
|
|
3270
|
+
>
|
|
3271
|
+
<button
|
|
3272
|
+
class="pf-c-menu__item"
|
|
3273
|
+
type="button"
|
|
3274
|
+
disabled
|
|
3275
|
+
role="menuitem"
|
|
3276
|
+
>
|
|
3277
|
+
<span class="pf-c-menu__item-description">
|
|
3278
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
3279
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
3280
|
+
</span>
|
|
3281
|
+
</button>
|
|
3282
|
+
</li>
|
|
3283
|
+
<li
|
|
3284
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
3285
|
+
role="none"
|
|
3286
|
+
>
|
|
3287
|
+
<button
|
|
3288
|
+
class="pf-c-menu__item"
|
|
3289
|
+
type="button"
|
|
3290
|
+
disabled
|
|
3291
|
+
role="menuitem"
|
|
3292
|
+
>
|
|
3293
|
+
<span class="pf-c-menu__item-description">
|
|
3294
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
3295
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
3296
|
+
</span>
|
|
3297
|
+
</button>
|
|
3298
|
+
</li>
|
|
3299
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3300
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3301
|
+
<button
|
|
3302
|
+
class="pf-c-menu__item"
|
|
3303
|
+
type="button"
|
|
3304
|
+
role="menuitem"
|
|
3305
|
+
>
|
|
3306
|
+
<span class="pf-c-menu__item-main">
|
|
3307
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
3308
|
+
</span>
|
|
3309
|
+
</button>
|
|
3310
|
+
</li>
|
|
3311
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3312
|
+
<button
|
|
3313
|
+
class="pf-c-menu__item"
|
|
3314
|
+
type="button"
|
|
3315
|
+
role="menuitem"
|
|
3316
|
+
>
|
|
3317
|
+
<span class="pf-c-menu__item-main">
|
|
3318
|
+
<span
|
|
3319
|
+
class="pf-c-menu__item-text"
|
|
3320
|
+
>User management</span>
|
|
3321
|
+
</span>
|
|
3322
|
+
</button>
|
|
3323
|
+
</li>
|
|
3324
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3325
|
+
<button
|
|
3326
|
+
class="pf-c-menu__item"
|
|
3327
|
+
type="button"
|
|
3328
|
+
role="menuitem"
|
|
3329
|
+
>
|
|
3330
|
+
<span class="pf-c-menu__item-main">
|
|
3331
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
3332
|
+
</span>
|
|
3333
|
+
</button>
|
|
3334
|
+
</li>
|
|
3335
|
+
</ul>
|
|
3336
|
+
</section>
|
|
3337
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
3338
|
+
<section class="pf-c-menu__group">
|
|
3339
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3340
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3341
|
+
<button
|
|
3342
|
+
class="pf-c-menu__item"
|
|
3343
|
+
type="button"
|
|
3344
|
+
role="menuitem"
|
|
3345
|
+
aria-expanded="false"
|
|
3346
|
+
>
|
|
3347
|
+
<span class="pf-c-menu__item-main">
|
|
3348
|
+
<span class="pf-c-menu__item-icon">
|
|
3349
|
+
<i
|
|
3350
|
+
class="fas fa-fw fa-cog"
|
|
3351
|
+
aria-hidden="true"
|
|
3352
|
+
></i>
|
|
3353
|
+
</span>
|
|
3354
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
3355
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3356
|
+
<i class="fas fa-angle-right"></i>
|
|
3357
|
+
</span>
|
|
3358
|
+
</span>
|
|
3359
|
+
</button>
|
|
3360
|
+
<div class="pf-c-menu" hidden>
|
|
3361
|
+
<div class="pf-c-menu__content">
|
|
3362
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3363
|
+
<li
|
|
3364
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
3365
|
+
role="none"
|
|
3366
|
+
>
|
|
3367
|
+
<button
|
|
3368
|
+
class="pf-c-menu__item"
|
|
3369
|
+
type="button"
|
|
3370
|
+
role="menuitem"
|
|
3371
|
+
>
|
|
3372
|
+
<span class="pf-c-menu__item-main">
|
|
3373
|
+
<span
|
|
3374
|
+
class="pf-c-menu__item-toggle-icon"
|
|
3375
|
+
>
|
|
3376
|
+
<i class="fas fa-angle-left"></i>
|
|
3377
|
+
</span>
|
|
3378
|
+
<span class="pf-c-menu__item-icon">
|
|
3379
|
+
<i
|
|
3380
|
+
class="fas fa-fw fa-cog"
|
|
3381
|
+
aria-hidden="true"
|
|
3382
|
+
></i>
|
|
3383
|
+
</span>
|
|
3384
|
+
<span
|
|
3385
|
+
class="pf-c-menu__item-text"
|
|
3386
|
+
>Settings</span>
|
|
3387
|
+
</span>
|
|
3388
|
+
</button>
|
|
3389
|
+
</li>
|
|
3390
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3391
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3392
|
+
<a
|
|
3393
|
+
class="pf-c-menu__item"
|
|
3394
|
+
href="#"
|
|
3395
|
+
role="menuitem"
|
|
3396
|
+
>
|
|
3397
|
+
<span class="pf-c-menu__item-main">
|
|
3398
|
+
<span
|
|
3399
|
+
class="pf-c-menu__item-text"
|
|
3400
|
+
>Customer support</span>
|
|
3401
|
+
</span>
|
|
3402
|
+
</a>
|
|
3403
|
+
</li>
|
|
3404
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3405
|
+
<a
|
|
3406
|
+
class="pf-c-menu__item"
|
|
3407
|
+
href="#"
|
|
3408
|
+
role="menuitem"
|
|
3409
|
+
>
|
|
3410
|
+
<span class="pf-c-menu__item-main">
|
|
3411
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
3412
|
+
</span>
|
|
3413
|
+
</a>
|
|
3414
|
+
</li>
|
|
3415
|
+
</ul>
|
|
3416
|
+
</div>
|
|
3417
|
+
</div>
|
|
3418
|
+
</li>
|
|
3419
|
+
|
|
3420
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3421
|
+
<button
|
|
3422
|
+
class="pf-c-menu__item"
|
|
3423
|
+
type="button"
|
|
3424
|
+
role="menuitem"
|
|
3425
|
+
aria-expanded="false"
|
|
3426
|
+
>
|
|
3427
|
+
<span class="pf-c-menu__item-main">
|
|
3428
|
+
<span class="pf-c-menu__item-icon">
|
|
3429
|
+
<i
|
|
3430
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
3431
|
+
aria-hidden="true"
|
|
3432
|
+
></i>
|
|
3433
|
+
</span>
|
|
3434
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
3435
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3436
|
+
<i class="fas fa-angle-right"></i>
|
|
3437
|
+
</span>
|
|
3438
|
+
</span>
|
|
3439
|
+
</button>
|
|
3440
|
+
<div class="pf-c-menu" hidden>
|
|
3441
|
+
<div class="pf-c-menu__content">
|
|
3442
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3443
|
+
<li
|
|
3444
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
3445
|
+
role="none"
|
|
3446
|
+
>
|
|
3447
|
+
<button
|
|
3448
|
+
class="pf-c-menu__item"
|
|
3449
|
+
type="button"
|
|
3450
|
+
role="menuitem"
|
|
3451
|
+
>
|
|
3452
|
+
<span class="pf-c-menu__item-main">
|
|
3453
|
+
<span
|
|
3454
|
+
class="pf-c-menu__item-toggle-icon"
|
|
3455
|
+
>
|
|
3456
|
+
<i class="fas fa-angle-left"></i>
|
|
3457
|
+
</span>
|
|
3458
|
+
<span class="pf-c-menu__item-icon">
|
|
3459
|
+
<i
|
|
3460
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
3461
|
+
aria-hidden="true"
|
|
3462
|
+
></i>
|
|
3463
|
+
</span>
|
|
3464
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
3465
|
+
</span>
|
|
3466
|
+
</button>
|
|
3467
|
+
</li>
|
|
3468
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3469
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3470
|
+
<a
|
|
3471
|
+
class="pf-c-menu__item"
|
|
3472
|
+
href="#"
|
|
3473
|
+
role="menuitem"
|
|
3474
|
+
>
|
|
3475
|
+
<span class="pf-c-menu__item-main">
|
|
3476
|
+
<span
|
|
3477
|
+
class="pf-c-menu__item-text"
|
|
3478
|
+
>Support options</span>
|
|
3479
|
+
</span>
|
|
3480
|
+
</a>
|
|
3481
|
+
</li>
|
|
3482
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3483
|
+
<a
|
|
3484
|
+
class="pf-c-menu__item"
|
|
3485
|
+
href="#"
|
|
3486
|
+
role="menuitem"
|
|
3487
|
+
>
|
|
3488
|
+
<span class="pf-c-menu__item-main">
|
|
3489
|
+
<span
|
|
3490
|
+
class="pf-c-menu__item-text"
|
|
3491
|
+
>Open support case</span>
|
|
3492
|
+
</span>
|
|
3493
|
+
</a>
|
|
3494
|
+
</li>
|
|
3495
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3496
|
+
<a
|
|
3497
|
+
class="pf-c-menu__item"
|
|
3498
|
+
href="#"
|
|
3499
|
+
role="menuitem"
|
|
3500
|
+
>
|
|
3501
|
+
<span class="pf-c-menu__item-main">
|
|
3502
|
+
<span
|
|
3503
|
+
class="pf-c-menu__item-text"
|
|
3504
|
+
>API documentation</span>
|
|
3505
|
+
</span>
|
|
3506
|
+
</a>
|
|
3507
|
+
</li>
|
|
3508
|
+
</ul>
|
|
3509
|
+
</div>
|
|
3510
|
+
</div>
|
|
3511
|
+
</li>
|
|
3512
|
+
|
|
3513
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3514
|
+
<button
|
|
3515
|
+
class="pf-c-menu__item"
|
|
3516
|
+
type="button"
|
|
3517
|
+
role="menuitem"
|
|
3518
|
+
>
|
|
3519
|
+
<span class="pf-c-menu__item-main">
|
|
3520
|
+
<span class="pf-c-menu__item-icon">
|
|
3521
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
3522
|
+
</span>
|
|
3523
|
+
<span
|
|
3524
|
+
class="pf-c-menu__item-text"
|
|
3525
|
+
>Application launcher</span>
|
|
3526
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3527
|
+
<i class="fas fa-angle-right"></i>
|
|
3528
|
+
</span>
|
|
3529
|
+
</span>
|
|
3530
|
+
</button>
|
|
3531
|
+
<div class="pf-c-menu" hidden>
|
|
3532
|
+
<div class="pf-c-menu__header">
|
|
3533
|
+
<button
|
|
3534
|
+
class="pf-c-menu__item"
|
|
3535
|
+
type="button"
|
|
3536
|
+
role="menuitem"
|
|
3537
|
+
>
|
|
3538
|
+
<span class="pf-c-menu__item-main">
|
|
3539
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3540
|
+
<i class="fas fa-angle-left"></i>
|
|
3541
|
+
</span>
|
|
3542
|
+
<span class="pf-c-menu__item-icon">
|
|
3543
|
+
<i
|
|
3544
|
+
class="fas fa-fw fa-th"
|
|
3545
|
+
aria-hidden="true"
|
|
3546
|
+
></i>
|
|
3547
|
+
</span>
|
|
3548
|
+
<span
|
|
3549
|
+
class="pf-c-menu__item-text"
|
|
3550
|
+
>Application launcher</span>
|
|
3551
|
+
</span>
|
|
3552
|
+
</button>
|
|
3553
|
+
</div>
|
|
3554
|
+
<div class="pf-c-menu__search">
|
|
3555
|
+
<div class="pf-c-menu__search-input">
|
|
3556
|
+
<div class="pf-c-search-input">
|
|
3557
|
+
<div class="pf-c-search-input__bar">
|
|
3558
|
+
<span class="pf-c-search-input__text">
|
|
3559
|
+
<span class="pf-c-search-input__icon">
|
|
3560
|
+
<i
|
|
3561
|
+
class="fas fa-search fa-fw"
|
|
3562
|
+
aria-hidden="true"
|
|
3563
|
+
></i>
|
|
3564
|
+
</span>
|
|
3565
|
+
<input
|
|
3566
|
+
class="pf-c-search-input__text-input"
|
|
3567
|
+
type="text"
|
|
3568
|
+
placeholder="Search"
|
|
3569
|
+
aria-label="Search"
|
|
3570
|
+
/>
|
|
3571
|
+
</span>
|
|
3572
|
+
</div>
|
|
3573
|
+
</div>
|
|
3574
|
+
</div>
|
|
3575
|
+
</div>
|
|
3576
|
+
<hr class="pf-c-divider" />
|
|
3577
|
+
<section class="pf-c-menu__group">
|
|
3578
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
3579
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3580
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3581
|
+
<a
|
|
3582
|
+
class="pf-c-menu__item"
|
|
3583
|
+
href="#"
|
|
3584
|
+
role="menuitem"
|
|
3585
|
+
>
|
|
3586
|
+
<span class="pf-c-menu__item-main">
|
|
3587
|
+
<span
|
|
3588
|
+
class="pf-c-menu__item-text"
|
|
3589
|
+
>Link 1</span>
|
|
3590
|
+
</span>
|
|
3591
|
+
</a>
|
|
3592
|
+
<button
|
|
3593
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
3594
|
+
type="button"
|
|
3595
|
+
aria-label="Starred"
|
|
3596
|
+
>
|
|
3597
|
+
<span class="pf-c-menu__item-action-icon">
|
|
3598
|
+
<i
|
|
3599
|
+
class="fas fa-star"
|
|
3600
|
+
aria-hidden="true"
|
|
3601
|
+
></i>
|
|
3602
|
+
</span>
|
|
3603
|
+
</button>
|
|
3604
|
+
</li>
|
|
3605
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3606
|
+
<a
|
|
3607
|
+
class="pf-c-menu__item"
|
|
3608
|
+
href="#"
|
|
3609
|
+
role="menuitem"
|
|
3610
|
+
target="_blank"
|
|
3611
|
+
>
|
|
3612
|
+
<span class="pf-c-menu__item-main">
|
|
3613
|
+
<span
|
|
3614
|
+
class="pf-c-menu__item-text"
|
|
3615
|
+
>Link 2</span>
|
|
3616
|
+
<span
|
|
3617
|
+
class="pf-c-menu__item-external-icon"
|
|
3618
|
+
>
|
|
3619
|
+
<i
|
|
3620
|
+
class="fas fa-external-link-alt"
|
|
3621
|
+
aria-hidden="true"
|
|
3622
|
+
></i>
|
|
3623
|
+
</span>
|
|
3624
|
+
<span
|
|
3625
|
+
class="pf-screen-reader"
|
|
3626
|
+
>(opens new window)</span>
|
|
3627
|
+
</span>
|
|
3628
|
+
</a>
|
|
3629
|
+
<button
|
|
3630
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
3631
|
+
type="button"
|
|
3632
|
+
aria-label="Not starred"
|
|
3633
|
+
>
|
|
3634
|
+
<span class="pf-c-menu__item-action-icon">
|
|
3635
|
+
<i
|
|
3636
|
+
class="fas fa-star"
|
|
3637
|
+
aria-hidden="true"
|
|
3638
|
+
></i>
|
|
3639
|
+
</span>
|
|
3640
|
+
</button>
|
|
3641
|
+
</li>
|
|
3642
|
+
</ul>
|
|
3643
|
+
</section>
|
|
3644
|
+
<hr class="pf-c-divider" />
|
|
3645
|
+
<section class="pf-c-menu__group">
|
|
3646
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
3647
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3648
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3649
|
+
<a
|
|
3650
|
+
class="pf-c-menu__item"
|
|
3651
|
+
href="#"
|
|
3652
|
+
role="menuitem"
|
|
3653
|
+
>
|
|
3654
|
+
<span class="pf-c-menu__item-main">
|
|
3655
|
+
<span
|
|
3656
|
+
class="pf-c-menu__item-text"
|
|
3657
|
+
>Link 1</span>
|
|
3658
|
+
</span>
|
|
3659
|
+
</a>
|
|
3660
|
+
<button
|
|
3661
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
3662
|
+
type="button"
|
|
3663
|
+
aria-label="Not starred"
|
|
3664
|
+
>
|
|
3665
|
+
<span class="pf-c-menu__item-action-icon">
|
|
3666
|
+
<i
|
|
3667
|
+
class="fas fa-star"
|
|
3668
|
+
aria-hidden="true"
|
|
3669
|
+
></i>
|
|
3670
|
+
</span>
|
|
3671
|
+
</button>
|
|
3672
|
+
</li>
|
|
3673
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3674
|
+
<a
|
|
3675
|
+
class="pf-c-menu__item"
|
|
3676
|
+
href="#"
|
|
3677
|
+
role="menuitem"
|
|
3678
|
+
target="_blank"
|
|
3679
|
+
>
|
|
3680
|
+
<span class="pf-c-menu__item-main">
|
|
3681
|
+
<span
|
|
3682
|
+
class="pf-c-menu__item-text"
|
|
3683
|
+
>Link 2</span>
|
|
3684
|
+
<span
|
|
3685
|
+
class="pf-c-menu__item-external-icon"
|
|
3686
|
+
>
|
|
3687
|
+
<i
|
|
3688
|
+
class="fas fa-external-link-alt"
|
|
3689
|
+
aria-hidden="true"
|
|
3690
|
+
></i>
|
|
3691
|
+
</span>
|
|
3692
|
+
<span
|
|
3693
|
+
class="pf-screen-reader"
|
|
3694
|
+
>(opens new window)</span>
|
|
3695
|
+
</span>
|
|
3696
|
+
</a>
|
|
3697
|
+
<button
|
|
3698
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
3699
|
+
type="button"
|
|
3700
|
+
aria-label="Starred"
|
|
3701
|
+
>
|
|
3702
|
+
<span class="pf-c-menu__item-action-icon">
|
|
3703
|
+
<i
|
|
3704
|
+
class="fas fa-star"
|
|
3705
|
+
aria-hidden="true"
|
|
3706
|
+
></i>
|
|
3707
|
+
</span>
|
|
3708
|
+
</button>
|
|
3709
|
+
</li>
|
|
3710
|
+
</ul>
|
|
3711
|
+
</section>
|
|
3712
|
+
</div>
|
|
3713
|
+
</li>
|
|
3714
|
+
</ul>
|
|
3715
|
+
</section>
|
|
3716
|
+
</div>
|
|
3717
|
+
</div>
|
|
3718
|
+
</div>
|
|
3719
|
+
</div>
|
|
3720
|
+
</div>
|
|
3721
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
3722
|
+
<div
|
|
3723
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
3724
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
3725
|
+
>
|
|
1140
3726
|
<button
|
|
1141
|
-
class="pf-c-
|
|
3727
|
+
class="pf-c-dropdown__toggle"
|
|
3728
|
+
id="jump-links-horizontal-example-masthead-profile-button"
|
|
3729
|
+
aria-expanded="false"
|
|
1142
3730
|
type="button"
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
3731
|
+
>
|
|
3732
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
3733
|
+
<img
|
|
3734
|
+
class="pf-c-avatar"
|
|
3735
|
+
src="/assets/images/img_avatar.svg"
|
|
3736
|
+
alt="Avatar image"
|
|
3737
|
+
/>
|
|
3738
|
+
</span>
|
|
3739
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
3740
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
3741
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3742
|
+
</span>
|
|
3743
|
+
</button>
|
|
3744
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
3745
|
+
<section class="pf-c-dropdown__group">
|
|
3746
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
3747
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
3748
|
+
<div>123456789</div>
|
|
3749
|
+
</div>
|
|
3750
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
3751
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
3752
|
+
<div>mshaksho@redhat.com</div>
|
|
3753
|
+
</div>
|
|
3754
|
+
</section>
|
|
3755
|
+
<hr class="pf-c-divider" />
|
|
3756
|
+
<section class="pf-c-dropdown__group">
|
|
3757
|
+
<ul>
|
|
3758
|
+
<li>
|
|
3759
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
3760
|
+
</li>
|
|
3761
|
+
<li>
|
|
3762
|
+
<a
|
|
3763
|
+
class="pf-c-dropdown__menu-item"
|
|
3764
|
+
href="#"
|
|
3765
|
+
>User management</a>
|
|
3766
|
+
</li>
|
|
3767
|
+
<li>
|
|
3768
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
3769
|
+
</li>
|
|
3770
|
+
</ul>
|
|
3771
|
+
</section>
|
|
3772
|
+
</div>
|
|
3773
|
+
</div>
|
|
3774
|
+
</div>
|
|
1151
3775
|
</div>
|
|
1152
3776
|
</div>
|
|
1153
3777
|
</div>
|
|
1154
|
-
<img
|
|
1155
|
-
class="pf-c-avatar"
|
|
1156
|
-
src="/assets/images/img_avatar.svg"
|
|
1157
|
-
alt="Avatar image"
|
|
1158
|
-
/>
|
|
1159
3778
|
</div>
|
|
1160
3779
|
</header>
|
|
1161
3780
|
<div class="pf-c-page__sidebar">
|
|
1162
3781
|
<div class="pf-c-page__sidebar-body">
|
|
1163
|
-
<nav
|
|
3782
|
+
<nav
|
|
3783
|
+
class="pf-c-nav"
|
|
3784
|
+
id="jump-links-horizontal-example-primary-nav"
|
|
3785
|
+
aria-label="Global"
|
|
3786
|
+
>
|
|
1164
3787
|
<ul class="pf-c-nav__list">
|
|
1165
3788
|
<li class="pf-c-nav__item">
|
|
1166
3789
|
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
@@ -1185,7 +3808,11 @@ section: components
|
|
|
1185
3808
|
</nav>
|
|
1186
3809
|
</div>
|
|
1187
3810
|
</div>
|
|
1188
|
-
<main
|
|
3811
|
+
<main
|
|
3812
|
+
class="pf-c-page__main"
|
|
3813
|
+
tabindex="-1"
|
|
3814
|
+
id="main-content-jump-links-horizontal-example"
|
|
3815
|
+
>
|
|
1189
3816
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1190
3817
|
<div class="pf-c-page__main-body">
|
|
1191
3818
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -1238,27 +3865,27 @@ section: components
|
|
|
1238
3865
|
</div>
|
|
1239
3866
|
<ul class="pf-c-jump-links__list">
|
|
1240
3867
|
<li class="pf-c-jump-links__item pf-m-current">
|
|
1241
|
-
<a class="pf-c-jump-links__link" href="
|
|
3868
|
+
<a class="pf-c-jump-links__link" href="#-first">
|
|
1242
3869
|
<span class="pf-c-jump-links__link-text">First section</span>
|
|
1243
3870
|
</a>
|
|
1244
3871
|
</li>
|
|
1245
3872
|
<li class="pf-c-jump-links__item">
|
|
1246
|
-
<a class="pf-c-jump-links__link" href="
|
|
3873
|
+
<a class="pf-c-jump-links__link" href="#-second">
|
|
1247
3874
|
<span class="pf-c-jump-links__link-text">Second section</span>
|
|
1248
3875
|
</a>
|
|
1249
3876
|
</li>
|
|
1250
3877
|
<li class="pf-c-jump-links__item">
|
|
1251
|
-
<a class="pf-c-jump-links__link" href="
|
|
3878
|
+
<a class="pf-c-jump-links__link" href="#-third">
|
|
1252
3879
|
<span class="pf-c-jump-links__link-text">Third section</span>
|
|
1253
3880
|
</a>
|
|
1254
3881
|
</li>
|
|
1255
3882
|
<li class="pf-c-jump-links__item">
|
|
1256
|
-
<a class="pf-c-jump-links__link" href="
|
|
3883
|
+
<a class="pf-c-jump-links__link" href="#-fourth">
|
|
1257
3884
|
<span class="pf-c-jump-links__link-text">Fourth section</span>
|
|
1258
3885
|
</a>
|
|
1259
3886
|
</li>
|
|
1260
3887
|
<li class="pf-c-jump-links__item">
|
|
1261
|
-
<a class="pf-c-jump-links__link" href="
|
|
3888
|
+
<a class="pf-c-jump-links__link" href="#-fifth">
|
|
1262
3889
|
<span class="pf-c-jump-links__link-text">Fifth section</span>
|
|
1263
3890
|
</a>
|
|
1264
3891
|
</li>
|
|
@@ -1268,19 +3895,19 @@ section: components
|
|
|
1268
3895
|
</section>
|
|
1269
3896
|
<section class="pf-c-page__main-section">
|
|
1270
3897
|
<div class="pf-c-content">
|
|
1271
|
-
<h2 id="
|
|
3898
|
+
<h2 id="-first">First section</h2>
|
|
1272
3899
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1273
3900
|
|
|
1274
|
-
<h2 id="
|
|
3901
|
+
<h2 id="-second">Second section</h2>
|
|
1275
3902
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1276
3903
|
|
|
1277
|
-
<h2 id="
|
|
3904
|
+
<h2 id="-third">Third section</h2>
|
|
1278
3905
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1279
3906
|
|
|
1280
|
-
<h2 id="
|
|
3907
|
+
<h2 id="-fourth">Fourth section</h2>
|
|
1281
3908
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1282
3909
|
|
|
1283
|
-
<h2 id="
|
|
3910
|
+
<h2 id="-fifth">Fifth section</h2>
|
|
1284
3911
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1285
3912
|
</div>
|
|
1286
3913
|
</section>
|