@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
|
@@ -7,6 +7,922 @@ wrapperTag: div
|
|
|
7
7
|
### Basic
|
|
8
8
|
|
|
9
9
|
```html isFullscreen
|
|
10
|
+
<div class="pf-c-page" id="wizard-basic-example">
|
|
11
|
+
<a
|
|
12
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
13
|
+
href="#main-content-wizard-basic-example"
|
|
14
|
+
>Skip to content</a>
|
|
15
|
+
<header class="pf-c-masthead" id="wizard-basic-example-masthead">
|
|
16
|
+
<span class="pf-c-masthead__toggle">
|
|
17
|
+
<button
|
|
18
|
+
class="pf-c-button pf-m-plain"
|
|
19
|
+
type="button"
|
|
20
|
+
aria-label="Global navigation"
|
|
21
|
+
>
|
|
22
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
23
|
+
</button>
|
|
24
|
+
</span>
|
|
25
|
+
<div class="pf-c-masthead__main">
|
|
26
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
27
|
+
<picture
|
|
28
|
+
class="pf-c-brand pf-m-picture"
|
|
29
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
30
|
+
>
|
|
31
|
+
<source
|
|
32
|
+
media="(min-width: 768px)"
|
|
33
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
34
|
+
/>
|
|
35
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
36
|
+
<img
|
|
37
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
38
|
+
alt="Fallback patternFly default logo"
|
|
39
|
+
/>
|
|
40
|
+
</picture>
|
|
41
|
+
</a>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="pf-c-masthead__content">
|
|
44
|
+
<div
|
|
45
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
46
|
+
id="wizard-basic-example-masthead-toolbar"
|
|
47
|
+
>
|
|
48
|
+
<div class="pf-c-toolbar__content">
|
|
49
|
+
<div class="pf-c-toolbar__content-section">
|
|
50
|
+
<div
|
|
51
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
52
|
+
>
|
|
53
|
+
<div class="pf-c-toolbar__item">
|
|
54
|
+
<button
|
|
55
|
+
class="pf-c-button pf-m-plain"
|
|
56
|
+
type="button"
|
|
57
|
+
aria-label="Notifications"
|
|
58
|
+
>
|
|
59
|
+
<span class="pf-c-notification-badge">
|
|
60
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
61
|
+
</span>
|
|
62
|
+
</button>
|
|
63
|
+
</div>
|
|
64
|
+
<div
|
|
65
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
66
|
+
>
|
|
67
|
+
<div class="pf-c-toolbar__item">
|
|
68
|
+
<nav
|
|
69
|
+
class="pf-c-app-launcher"
|
|
70
|
+
aria-label="Application launcher"
|
|
71
|
+
id="wizard-basic-example-masthead-icon-group--app-launcher"
|
|
72
|
+
>
|
|
73
|
+
<button
|
|
74
|
+
class="pf-c-app-launcher__toggle"
|
|
75
|
+
type="button"
|
|
76
|
+
id="wizard-basic-example-masthead-icon-group--app-launcher-button"
|
|
77
|
+
aria-expanded="false"
|
|
78
|
+
aria-label="Application launcher"
|
|
79
|
+
>
|
|
80
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
81
|
+
</button>
|
|
82
|
+
<div
|
|
83
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
84
|
+
hidden
|
|
85
|
+
>
|
|
86
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
87
|
+
<div class="pf-c-search-input">
|
|
88
|
+
<div class="pf-c-search-input__bar">
|
|
89
|
+
<span class="pf-c-search-input__text">
|
|
90
|
+
<span class="pf-c-search-input__icon">
|
|
91
|
+
<i
|
|
92
|
+
class="fas fa-search fa-fw"
|
|
93
|
+
aria-hidden="true"
|
|
94
|
+
></i>
|
|
95
|
+
</span>
|
|
96
|
+
<input
|
|
97
|
+
class="pf-c-search-input__text-input"
|
|
98
|
+
type="text"
|
|
99
|
+
placeholder="Filter by name"
|
|
100
|
+
aria-label="Filter by name"
|
|
101
|
+
/>
|
|
102
|
+
</span>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<section class="pf-c-app-launcher__group">
|
|
107
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
108
|
+
<ul>
|
|
109
|
+
<li
|
|
110
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
111
|
+
>
|
|
112
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
113
|
+
Link 1
|
|
114
|
+
<span
|
|
115
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
116
|
+
>
|
|
117
|
+
<i
|
|
118
|
+
class="fas fa-external-link-alt"
|
|
119
|
+
aria-hidden="true"
|
|
120
|
+
></i>
|
|
121
|
+
</span>
|
|
122
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
123
|
+
</a>
|
|
124
|
+
<button
|
|
125
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
126
|
+
type="button"
|
|
127
|
+
aria-label="Favorite"
|
|
128
|
+
>
|
|
129
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
130
|
+
</button>
|
|
131
|
+
</li>
|
|
132
|
+
<li
|
|
133
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
134
|
+
>
|
|
135
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
136
|
+
Link 2
|
|
137
|
+
<span
|
|
138
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
139
|
+
>
|
|
140
|
+
<i
|
|
141
|
+
class="fas fa-external-link-alt"
|
|
142
|
+
aria-hidden="true"
|
|
143
|
+
></i>
|
|
144
|
+
</span>
|
|
145
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
146
|
+
</a>
|
|
147
|
+
<button
|
|
148
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
149
|
+
type="button"
|
|
150
|
+
aria-label="Favorite"
|
|
151
|
+
>
|
|
152
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
153
|
+
</button>
|
|
154
|
+
</li>
|
|
155
|
+
</ul>
|
|
156
|
+
</section>
|
|
157
|
+
<hr class="pf-c-divider" />
|
|
158
|
+
<section class="pf-c-app-launcher__group">
|
|
159
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
160
|
+
<ul>
|
|
161
|
+
<li
|
|
162
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
163
|
+
>
|
|
164
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
165
|
+
Link 1
|
|
166
|
+
<span
|
|
167
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
168
|
+
>
|
|
169
|
+
<i
|
|
170
|
+
class="fas fa-external-link-alt"
|
|
171
|
+
aria-hidden="true"
|
|
172
|
+
></i>
|
|
173
|
+
</span>
|
|
174
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
175
|
+
</a>
|
|
176
|
+
<button
|
|
177
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
178
|
+
type="button"
|
|
179
|
+
aria-label="Favorite"
|
|
180
|
+
>
|
|
181
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
182
|
+
</button>
|
|
183
|
+
</li>
|
|
184
|
+
<li
|
|
185
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
186
|
+
>
|
|
187
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
188
|
+
Link 2
|
|
189
|
+
<span
|
|
190
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
191
|
+
>
|
|
192
|
+
<i
|
|
193
|
+
class="fas fa-external-link-alt"
|
|
194
|
+
aria-hidden="true"
|
|
195
|
+
></i>
|
|
196
|
+
</span>
|
|
197
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
198
|
+
</a>
|
|
199
|
+
<button
|
|
200
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
201
|
+
type="button"
|
|
202
|
+
aria-label="Favorite"
|
|
203
|
+
>
|
|
204
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
205
|
+
</button>
|
|
206
|
+
</li>
|
|
207
|
+
</ul>
|
|
208
|
+
</section>
|
|
209
|
+
</div>
|
|
210
|
+
</nav>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="pf-c-toolbar__item">
|
|
213
|
+
<div class="pf-c-dropdown">
|
|
214
|
+
<button
|
|
215
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
216
|
+
id="wizard-basic-example-masthead-settings-button"
|
|
217
|
+
aria-expanded="false"
|
|
218
|
+
type="button"
|
|
219
|
+
aria-label="Settings"
|
|
220
|
+
>
|
|
221
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
222
|
+
</button>
|
|
223
|
+
<ul
|
|
224
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
225
|
+
aria-labelledby="wizard-basic-example-masthead-settings-button"
|
|
226
|
+
hidden
|
|
227
|
+
>
|
|
228
|
+
<li>
|
|
229
|
+
<button
|
|
230
|
+
class="pf-c-dropdown__menu-item"
|
|
231
|
+
type="button"
|
|
232
|
+
>Settings</button>
|
|
233
|
+
</li>
|
|
234
|
+
<li>
|
|
235
|
+
<button
|
|
236
|
+
class="pf-c-dropdown__menu-item"
|
|
237
|
+
type="button"
|
|
238
|
+
>Use the beta release</button>
|
|
239
|
+
</li>
|
|
240
|
+
</ul>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="pf-c-toolbar__item">
|
|
244
|
+
<div class="pf-c-dropdown">
|
|
245
|
+
<button
|
|
246
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
247
|
+
id="wizard-basic-example-masthead-help-button"
|
|
248
|
+
aria-expanded="false"
|
|
249
|
+
type="button"
|
|
250
|
+
aria-label="Help"
|
|
251
|
+
>
|
|
252
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
253
|
+
</button>
|
|
254
|
+
<ul
|
|
255
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
256
|
+
aria-labelledby="wizard-basic-example-masthead-help-button"
|
|
257
|
+
hidden
|
|
258
|
+
>
|
|
259
|
+
<li>
|
|
260
|
+
<button
|
|
261
|
+
class="pf-c-dropdown__menu-item"
|
|
262
|
+
type="button"
|
|
263
|
+
>Support options</button>
|
|
264
|
+
</li>
|
|
265
|
+
<li>
|
|
266
|
+
<button
|
|
267
|
+
class="pf-c-dropdown__menu-item"
|
|
268
|
+
type="button"
|
|
269
|
+
>Open support case</button>
|
|
270
|
+
</li>
|
|
271
|
+
<li>
|
|
272
|
+
<button
|
|
273
|
+
class="pf-c-dropdown__menu-item"
|
|
274
|
+
type="button"
|
|
275
|
+
>API documentation</button>
|
|
276
|
+
</li>
|
|
277
|
+
</ul>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
282
|
+
<div class="pf-c-dropdown">
|
|
283
|
+
<button
|
|
284
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
285
|
+
type="button"
|
|
286
|
+
aria-expanded="false"
|
|
287
|
+
aria-label="Actions"
|
|
288
|
+
>
|
|
289
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
290
|
+
</button>
|
|
291
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
292
|
+
<div class="pf-c-menu__content">
|
|
293
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
294
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
295
|
+
<li
|
|
296
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
297
|
+
role="none"
|
|
298
|
+
>
|
|
299
|
+
<button
|
|
300
|
+
class="pf-c-menu__item"
|
|
301
|
+
type="button"
|
|
302
|
+
disabled
|
|
303
|
+
role="menuitem"
|
|
304
|
+
>
|
|
305
|
+
<span class="pf-c-menu__item-description">
|
|
306
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
307
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
308
|
+
</span>
|
|
309
|
+
</button>
|
|
310
|
+
</li>
|
|
311
|
+
<li
|
|
312
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
313
|
+
role="none"
|
|
314
|
+
>
|
|
315
|
+
<button
|
|
316
|
+
class="pf-c-menu__item"
|
|
317
|
+
type="button"
|
|
318
|
+
disabled
|
|
319
|
+
role="menuitem"
|
|
320
|
+
>
|
|
321
|
+
<span class="pf-c-menu__item-description">
|
|
322
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
323
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
324
|
+
</span>
|
|
325
|
+
</button>
|
|
326
|
+
</li>
|
|
327
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
328
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
329
|
+
<button
|
|
330
|
+
class="pf-c-menu__item"
|
|
331
|
+
type="button"
|
|
332
|
+
role="menuitem"
|
|
333
|
+
>
|
|
334
|
+
<span class="pf-c-menu__item-main">
|
|
335
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
336
|
+
</span>
|
|
337
|
+
</button>
|
|
338
|
+
</li>
|
|
339
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
340
|
+
<button
|
|
341
|
+
class="pf-c-menu__item"
|
|
342
|
+
type="button"
|
|
343
|
+
role="menuitem"
|
|
344
|
+
>
|
|
345
|
+
<span class="pf-c-menu__item-main">
|
|
346
|
+
<span
|
|
347
|
+
class="pf-c-menu__item-text"
|
|
348
|
+
>User management</span>
|
|
349
|
+
</span>
|
|
350
|
+
</button>
|
|
351
|
+
</li>
|
|
352
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
353
|
+
<button
|
|
354
|
+
class="pf-c-menu__item"
|
|
355
|
+
type="button"
|
|
356
|
+
role="menuitem"
|
|
357
|
+
>
|
|
358
|
+
<span class="pf-c-menu__item-main">
|
|
359
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
360
|
+
</span>
|
|
361
|
+
</button>
|
|
362
|
+
</li>
|
|
363
|
+
</ul>
|
|
364
|
+
</section>
|
|
365
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
366
|
+
<section class="pf-c-menu__group">
|
|
367
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
368
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
369
|
+
<button
|
|
370
|
+
class="pf-c-menu__item"
|
|
371
|
+
type="button"
|
|
372
|
+
role="menuitem"
|
|
373
|
+
aria-expanded="false"
|
|
374
|
+
>
|
|
375
|
+
<span class="pf-c-menu__item-main">
|
|
376
|
+
<span class="pf-c-menu__item-icon">
|
|
377
|
+
<i
|
|
378
|
+
class="fas fa-fw fa-cog"
|
|
379
|
+
aria-hidden="true"
|
|
380
|
+
></i>
|
|
381
|
+
</span>
|
|
382
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
383
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
384
|
+
<i class="fas fa-angle-right"></i>
|
|
385
|
+
</span>
|
|
386
|
+
</span>
|
|
387
|
+
</button>
|
|
388
|
+
<div class="pf-c-menu" hidden>
|
|
389
|
+
<div class="pf-c-menu__content">
|
|
390
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
391
|
+
<li
|
|
392
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
393
|
+
role="none"
|
|
394
|
+
>
|
|
395
|
+
<button
|
|
396
|
+
class="pf-c-menu__item"
|
|
397
|
+
type="button"
|
|
398
|
+
role="menuitem"
|
|
399
|
+
>
|
|
400
|
+
<span class="pf-c-menu__item-main">
|
|
401
|
+
<span
|
|
402
|
+
class="pf-c-menu__item-toggle-icon"
|
|
403
|
+
>
|
|
404
|
+
<i class="fas fa-angle-left"></i>
|
|
405
|
+
</span>
|
|
406
|
+
<span class="pf-c-menu__item-icon">
|
|
407
|
+
<i
|
|
408
|
+
class="fas fa-fw fa-cog"
|
|
409
|
+
aria-hidden="true"
|
|
410
|
+
></i>
|
|
411
|
+
</span>
|
|
412
|
+
<span
|
|
413
|
+
class="pf-c-menu__item-text"
|
|
414
|
+
>Settings</span>
|
|
415
|
+
</span>
|
|
416
|
+
</button>
|
|
417
|
+
</li>
|
|
418
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
419
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
420
|
+
<a
|
|
421
|
+
class="pf-c-menu__item"
|
|
422
|
+
href="#"
|
|
423
|
+
role="menuitem"
|
|
424
|
+
>
|
|
425
|
+
<span class="pf-c-menu__item-main">
|
|
426
|
+
<span
|
|
427
|
+
class="pf-c-menu__item-text"
|
|
428
|
+
>Customer support</span>
|
|
429
|
+
</span>
|
|
430
|
+
</a>
|
|
431
|
+
</li>
|
|
432
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
433
|
+
<a
|
|
434
|
+
class="pf-c-menu__item"
|
|
435
|
+
href="#"
|
|
436
|
+
role="menuitem"
|
|
437
|
+
>
|
|
438
|
+
<span class="pf-c-menu__item-main">
|
|
439
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
440
|
+
</span>
|
|
441
|
+
</a>
|
|
442
|
+
</li>
|
|
443
|
+
</ul>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
</li>
|
|
447
|
+
|
|
448
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
449
|
+
<button
|
|
450
|
+
class="pf-c-menu__item"
|
|
451
|
+
type="button"
|
|
452
|
+
role="menuitem"
|
|
453
|
+
aria-expanded="false"
|
|
454
|
+
>
|
|
455
|
+
<span class="pf-c-menu__item-main">
|
|
456
|
+
<span class="pf-c-menu__item-icon">
|
|
457
|
+
<i
|
|
458
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
459
|
+
aria-hidden="true"
|
|
460
|
+
></i>
|
|
461
|
+
</span>
|
|
462
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
463
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
464
|
+
<i class="fas fa-angle-right"></i>
|
|
465
|
+
</span>
|
|
466
|
+
</span>
|
|
467
|
+
</button>
|
|
468
|
+
<div class="pf-c-menu" hidden>
|
|
469
|
+
<div class="pf-c-menu__content">
|
|
470
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
471
|
+
<li
|
|
472
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
473
|
+
role="none"
|
|
474
|
+
>
|
|
475
|
+
<button
|
|
476
|
+
class="pf-c-menu__item"
|
|
477
|
+
type="button"
|
|
478
|
+
role="menuitem"
|
|
479
|
+
>
|
|
480
|
+
<span class="pf-c-menu__item-main">
|
|
481
|
+
<span
|
|
482
|
+
class="pf-c-menu__item-toggle-icon"
|
|
483
|
+
>
|
|
484
|
+
<i class="fas fa-angle-left"></i>
|
|
485
|
+
</span>
|
|
486
|
+
<span class="pf-c-menu__item-icon">
|
|
487
|
+
<i
|
|
488
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
489
|
+
aria-hidden="true"
|
|
490
|
+
></i>
|
|
491
|
+
</span>
|
|
492
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
493
|
+
</span>
|
|
494
|
+
</button>
|
|
495
|
+
</li>
|
|
496
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
497
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
498
|
+
<a
|
|
499
|
+
class="pf-c-menu__item"
|
|
500
|
+
href="#"
|
|
501
|
+
role="menuitem"
|
|
502
|
+
>
|
|
503
|
+
<span class="pf-c-menu__item-main">
|
|
504
|
+
<span
|
|
505
|
+
class="pf-c-menu__item-text"
|
|
506
|
+
>Support options</span>
|
|
507
|
+
</span>
|
|
508
|
+
</a>
|
|
509
|
+
</li>
|
|
510
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
511
|
+
<a
|
|
512
|
+
class="pf-c-menu__item"
|
|
513
|
+
href="#"
|
|
514
|
+
role="menuitem"
|
|
515
|
+
>
|
|
516
|
+
<span class="pf-c-menu__item-main">
|
|
517
|
+
<span
|
|
518
|
+
class="pf-c-menu__item-text"
|
|
519
|
+
>Open support case</span>
|
|
520
|
+
</span>
|
|
521
|
+
</a>
|
|
522
|
+
</li>
|
|
523
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
524
|
+
<a
|
|
525
|
+
class="pf-c-menu__item"
|
|
526
|
+
href="#"
|
|
527
|
+
role="menuitem"
|
|
528
|
+
>
|
|
529
|
+
<span class="pf-c-menu__item-main">
|
|
530
|
+
<span
|
|
531
|
+
class="pf-c-menu__item-text"
|
|
532
|
+
>API documentation</span>
|
|
533
|
+
</span>
|
|
534
|
+
</a>
|
|
535
|
+
</li>
|
|
536
|
+
</ul>
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
</li>
|
|
540
|
+
|
|
541
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
542
|
+
<button
|
|
543
|
+
class="pf-c-menu__item"
|
|
544
|
+
type="button"
|
|
545
|
+
role="menuitem"
|
|
546
|
+
>
|
|
547
|
+
<span class="pf-c-menu__item-main">
|
|
548
|
+
<span class="pf-c-menu__item-icon">
|
|
549
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
550
|
+
</span>
|
|
551
|
+
<span
|
|
552
|
+
class="pf-c-menu__item-text"
|
|
553
|
+
>Application launcher</span>
|
|
554
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
555
|
+
<i class="fas fa-angle-right"></i>
|
|
556
|
+
</span>
|
|
557
|
+
</span>
|
|
558
|
+
</button>
|
|
559
|
+
<div class="pf-c-menu" hidden>
|
|
560
|
+
<div class="pf-c-menu__header">
|
|
561
|
+
<button
|
|
562
|
+
class="pf-c-menu__item"
|
|
563
|
+
type="button"
|
|
564
|
+
role="menuitem"
|
|
565
|
+
>
|
|
566
|
+
<span class="pf-c-menu__item-main">
|
|
567
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
568
|
+
<i class="fas fa-angle-left"></i>
|
|
569
|
+
</span>
|
|
570
|
+
<span class="pf-c-menu__item-icon">
|
|
571
|
+
<i
|
|
572
|
+
class="fas fa-fw fa-th"
|
|
573
|
+
aria-hidden="true"
|
|
574
|
+
></i>
|
|
575
|
+
</span>
|
|
576
|
+
<span
|
|
577
|
+
class="pf-c-menu__item-text"
|
|
578
|
+
>Application launcher</span>
|
|
579
|
+
</span>
|
|
580
|
+
</button>
|
|
581
|
+
</div>
|
|
582
|
+
<div class="pf-c-menu__search">
|
|
583
|
+
<div class="pf-c-menu__search-input">
|
|
584
|
+
<div class="pf-c-search-input">
|
|
585
|
+
<div class="pf-c-search-input__bar">
|
|
586
|
+
<span class="pf-c-search-input__text">
|
|
587
|
+
<span class="pf-c-search-input__icon">
|
|
588
|
+
<i
|
|
589
|
+
class="fas fa-search fa-fw"
|
|
590
|
+
aria-hidden="true"
|
|
591
|
+
></i>
|
|
592
|
+
</span>
|
|
593
|
+
<input
|
|
594
|
+
class="pf-c-search-input__text-input"
|
|
595
|
+
type="text"
|
|
596
|
+
placeholder="Search"
|
|
597
|
+
aria-label="Search"
|
|
598
|
+
/>
|
|
599
|
+
</span>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
<hr class="pf-c-divider" />
|
|
605
|
+
<section class="pf-c-menu__group">
|
|
606
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
607
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
608
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
609
|
+
<a
|
|
610
|
+
class="pf-c-menu__item"
|
|
611
|
+
href="#"
|
|
612
|
+
role="menuitem"
|
|
613
|
+
>
|
|
614
|
+
<span class="pf-c-menu__item-main">
|
|
615
|
+
<span
|
|
616
|
+
class="pf-c-menu__item-text"
|
|
617
|
+
>Link 1</span>
|
|
618
|
+
</span>
|
|
619
|
+
</a>
|
|
620
|
+
<button
|
|
621
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
622
|
+
type="button"
|
|
623
|
+
aria-label="Starred"
|
|
624
|
+
>
|
|
625
|
+
<span class="pf-c-menu__item-action-icon">
|
|
626
|
+
<i
|
|
627
|
+
class="fas fa-star"
|
|
628
|
+
aria-hidden="true"
|
|
629
|
+
></i>
|
|
630
|
+
</span>
|
|
631
|
+
</button>
|
|
632
|
+
</li>
|
|
633
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
634
|
+
<a
|
|
635
|
+
class="pf-c-menu__item"
|
|
636
|
+
href="#"
|
|
637
|
+
role="menuitem"
|
|
638
|
+
target="_blank"
|
|
639
|
+
>
|
|
640
|
+
<span class="pf-c-menu__item-main">
|
|
641
|
+
<span
|
|
642
|
+
class="pf-c-menu__item-text"
|
|
643
|
+
>Link 2</span>
|
|
644
|
+
<span
|
|
645
|
+
class="pf-c-menu__item-external-icon"
|
|
646
|
+
>
|
|
647
|
+
<i
|
|
648
|
+
class="fas fa-external-link-alt"
|
|
649
|
+
aria-hidden="true"
|
|
650
|
+
></i>
|
|
651
|
+
</span>
|
|
652
|
+
<span
|
|
653
|
+
class="pf-screen-reader"
|
|
654
|
+
>(opens new window)</span>
|
|
655
|
+
</span>
|
|
656
|
+
</a>
|
|
657
|
+
<button
|
|
658
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
659
|
+
type="button"
|
|
660
|
+
aria-label="Not starred"
|
|
661
|
+
>
|
|
662
|
+
<span class="pf-c-menu__item-action-icon">
|
|
663
|
+
<i
|
|
664
|
+
class="fas fa-star"
|
|
665
|
+
aria-hidden="true"
|
|
666
|
+
></i>
|
|
667
|
+
</span>
|
|
668
|
+
</button>
|
|
669
|
+
</li>
|
|
670
|
+
</ul>
|
|
671
|
+
</section>
|
|
672
|
+
<hr class="pf-c-divider" />
|
|
673
|
+
<section class="pf-c-menu__group">
|
|
674
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
675
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
676
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
677
|
+
<a
|
|
678
|
+
class="pf-c-menu__item"
|
|
679
|
+
href="#"
|
|
680
|
+
role="menuitem"
|
|
681
|
+
>
|
|
682
|
+
<span class="pf-c-menu__item-main">
|
|
683
|
+
<span
|
|
684
|
+
class="pf-c-menu__item-text"
|
|
685
|
+
>Link 1</span>
|
|
686
|
+
</span>
|
|
687
|
+
</a>
|
|
688
|
+
<button
|
|
689
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
690
|
+
type="button"
|
|
691
|
+
aria-label="Not starred"
|
|
692
|
+
>
|
|
693
|
+
<span class="pf-c-menu__item-action-icon">
|
|
694
|
+
<i
|
|
695
|
+
class="fas fa-star"
|
|
696
|
+
aria-hidden="true"
|
|
697
|
+
></i>
|
|
698
|
+
</span>
|
|
699
|
+
</button>
|
|
700
|
+
</li>
|
|
701
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
702
|
+
<a
|
|
703
|
+
class="pf-c-menu__item"
|
|
704
|
+
href="#"
|
|
705
|
+
role="menuitem"
|
|
706
|
+
target="_blank"
|
|
707
|
+
>
|
|
708
|
+
<span class="pf-c-menu__item-main">
|
|
709
|
+
<span
|
|
710
|
+
class="pf-c-menu__item-text"
|
|
711
|
+
>Link 2</span>
|
|
712
|
+
<span
|
|
713
|
+
class="pf-c-menu__item-external-icon"
|
|
714
|
+
>
|
|
715
|
+
<i
|
|
716
|
+
class="fas fa-external-link-alt"
|
|
717
|
+
aria-hidden="true"
|
|
718
|
+
></i>
|
|
719
|
+
</span>
|
|
720
|
+
<span
|
|
721
|
+
class="pf-screen-reader"
|
|
722
|
+
>(opens new window)</span>
|
|
723
|
+
</span>
|
|
724
|
+
</a>
|
|
725
|
+
<button
|
|
726
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
727
|
+
type="button"
|
|
728
|
+
aria-label="Starred"
|
|
729
|
+
>
|
|
730
|
+
<span class="pf-c-menu__item-action-icon">
|
|
731
|
+
<i
|
|
732
|
+
class="fas fa-star"
|
|
733
|
+
aria-hidden="true"
|
|
734
|
+
></i>
|
|
735
|
+
</span>
|
|
736
|
+
</button>
|
|
737
|
+
</li>
|
|
738
|
+
</ul>
|
|
739
|
+
</section>
|
|
740
|
+
</div>
|
|
741
|
+
</li>
|
|
742
|
+
</ul>
|
|
743
|
+
</section>
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
</div>
|
|
749
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
750
|
+
<div
|
|
751
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
752
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
753
|
+
>
|
|
754
|
+
<button
|
|
755
|
+
class="pf-c-dropdown__toggle"
|
|
756
|
+
id="wizard-basic-example-masthead-profile-button"
|
|
757
|
+
aria-expanded="false"
|
|
758
|
+
type="button"
|
|
759
|
+
>
|
|
760
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
761
|
+
<img
|
|
762
|
+
class="pf-c-avatar"
|
|
763
|
+
src="/assets/images/img_avatar.svg"
|
|
764
|
+
alt="Avatar image"
|
|
765
|
+
/>
|
|
766
|
+
</span>
|
|
767
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
768
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
769
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
770
|
+
</span>
|
|
771
|
+
</button>
|
|
772
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
773
|
+
<section class="pf-c-dropdown__group">
|
|
774
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
775
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
776
|
+
<div>123456789</div>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
779
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
780
|
+
<div>mshaksho@redhat.com</div>
|
|
781
|
+
</div>
|
|
782
|
+
</section>
|
|
783
|
+
<hr class="pf-c-divider" />
|
|
784
|
+
<section class="pf-c-dropdown__group">
|
|
785
|
+
<ul>
|
|
786
|
+
<li>
|
|
787
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
788
|
+
</li>
|
|
789
|
+
<li>
|
|
790
|
+
<a
|
|
791
|
+
class="pf-c-dropdown__menu-item"
|
|
792
|
+
href="#"
|
|
793
|
+
>User management</a>
|
|
794
|
+
</li>
|
|
795
|
+
<li>
|
|
796
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
797
|
+
</li>
|
|
798
|
+
</ul>
|
|
799
|
+
</section>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
802
|
+
</div>
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
</header>
|
|
808
|
+
<div class="pf-c-page__sidebar">
|
|
809
|
+
<div class="pf-c-page__sidebar-body">
|
|
810
|
+
<nav
|
|
811
|
+
class="pf-c-nav"
|
|
812
|
+
id="wizard-basic-example-primary-nav"
|
|
813
|
+
aria-label="Global"
|
|
814
|
+
>
|
|
815
|
+
<ul class="pf-c-nav__list">
|
|
816
|
+
<li class="pf-c-nav__item">
|
|
817
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
818
|
+
</li>
|
|
819
|
+
<li class="pf-c-nav__item">
|
|
820
|
+
<a
|
|
821
|
+
href="#"
|
|
822
|
+
class="pf-c-nav__link pf-m-current"
|
|
823
|
+
aria-current="page"
|
|
824
|
+
>Policy</a>
|
|
825
|
+
</li>
|
|
826
|
+
<li class="pf-c-nav__item">
|
|
827
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
828
|
+
</li>
|
|
829
|
+
<li class="pf-c-nav__item">
|
|
830
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
831
|
+
</li>
|
|
832
|
+
<li class="pf-c-nav__item">
|
|
833
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
834
|
+
</li>
|
|
835
|
+
</ul>
|
|
836
|
+
</nav>
|
|
837
|
+
</div>
|
|
838
|
+
</div>
|
|
839
|
+
<main
|
|
840
|
+
class="pf-c-page__main"
|
|
841
|
+
tabindex="-1"
|
|
842
|
+
id="main-content-wizard-basic-example"
|
|
843
|
+
>
|
|
844
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
845
|
+
<div class="pf-c-page__main-body">
|
|
846
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
847
|
+
<ol class="pf-c-breadcrumb__list">
|
|
848
|
+
<li class="pf-c-breadcrumb__item">
|
|
849
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
850
|
+
</li>
|
|
851
|
+
<li class="pf-c-breadcrumb__item">
|
|
852
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
853
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
854
|
+
</span>
|
|
855
|
+
|
|
856
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
857
|
+
</li>
|
|
858
|
+
<li class="pf-c-breadcrumb__item">
|
|
859
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
860
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
861
|
+
</span>
|
|
862
|
+
|
|
863
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
864
|
+
</li>
|
|
865
|
+
<li class="pf-c-breadcrumb__item">
|
|
866
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
867
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
868
|
+
</span>
|
|
869
|
+
|
|
870
|
+
<a
|
|
871
|
+
href="#"
|
|
872
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
873
|
+
aria-current="page"
|
|
874
|
+
>Section landing</a>
|
|
875
|
+
</li>
|
|
876
|
+
</ol>
|
|
877
|
+
</nav>
|
|
878
|
+
</div>
|
|
879
|
+
</section>
|
|
880
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
881
|
+
<div class="pf-c-page__main-body">
|
|
882
|
+
<div class="pf-c-content">
|
|
883
|
+
<h1>Main title</h1>
|
|
884
|
+
<p>This is a full page demo.</p>
|
|
885
|
+
</div>
|
|
886
|
+
</div>
|
|
887
|
+
</section>
|
|
888
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
889
|
+
<div class="pf-c-page__main-body">
|
|
890
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
891
|
+
<div class="pf-c-card">
|
|
892
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
893
|
+
</div>
|
|
894
|
+
<div class="pf-c-card">
|
|
895
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
896
|
+
</div>
|
|
897
|
+
<div class="pf-c-card">
|
|
898
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
899
|
+
</div>
|
|
900
|
+
<div class="pf-c-card">
|
|
901
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
902
|
+
</div>
|
|
903
|
+
<div class="pf-c-card">
|
|
904
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
905
|
+
</div>
|
|
906
|
+
<div class="pf-c-card">
|
|
907
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
908
|
+
</div>
|
|
909
|
+
<div class="pf-c-card">
|
|
910
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
911
|
+
</div>
|
|
912
|
+
<div class="pf-c-card">
|
|
913
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
914
|
+
</div>
|
|
915
|
+
<div class="pf-c-card">
|
|
916
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
917
|
+
</div>
|
|
918
|
+
<div class="pf-c-card">
|
|
919
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
920
|
+
</div>
|
|
921
|
+
</div>
|
|
922
|
+
</div>
|
|
923
|
+
</section>
|
|
924
|
+
</main>
|
|
925
|
+
</div>
|
|
10
926
|
<div class="pf-c-backdrop">
|
|
11
927
|
<div class="pf-l-bullseye">
|
|
12
928
|
<div
|
|
@@ -87,7 +1003,7 @@ wrapperTag: div
|
|
|
87
1003
|
</li>
|
|
88
1004
|
</ol>
|
|
89
1005
|
</nav>
|
|
90
|
-
<main class="pf-c-wizard__main">
|
|
1006
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
91
1007
|
<div class="pf-c-wizard__main-body">
|
|
92
1008
|
<form novalidate class="pf-c-form">
|
|
93
1009
|
<div class="pf-c-form__group">
|
|
@@ -252,6 +1168,922 @@ wrapperTag: div
|
|
|
252
1168
|
### Nav expanded (mobile)
|
|
253
1169
|
|
|
254
1170
|
```html isFullscreen
|
|
1171
|
+
<div class="pf-c-page" id="wizard-nav-expanded-example">
|
|
1172
|
+
<a
|
|
1173
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1174
|
+
href="#main-content-wizard-nav-expanded-example"
|
|
1175
|
+
>Skip to content</a>
|
|
1176
|
+
<header class="pf-c-masthead" id="wizard-nav-expanded-example-masthead">
|
|
1177
|
+
<span class="pf-c-masthead__toggle">
|
|
1178
|
+
<button
|
|
1179
|
+
class="pf-c-button pf-m-plain"
|
|
1180
|
+
type="button"
|
|
1181
|
+
aria-label="Global navigation"
|
|
1182
|
+
>
|
|
1183
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1184
|
+
</button>
|
|
1185
|
+
</span>
|
|
1186
|
+
<div class="pf-c-masthead__main">
|
|
1187
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1188
|
+
<picture
|
|
1189
|
+
class="pf-c-brand pf-m-picture"
|
|
1190
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1191
|
+
>
|
|
1192
|
+
<source
|
|
1193
|
+
media="(min-width: 768px)"
|
|
1194
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1195
|
+
/>
|
|
1196
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1197
|
+
<img
|
|
1198
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1199
|
+
alt="Fallback patternFly default logo"
|
|
1200
|
+
/>
|
|
1201
|
+
</picture>
|
|
1202
|
+
</a>
|
|
1203
|
+
</div>
|
|
1204
|
+
<div class="pf-c-masthead__content">
|
|
1205
|
+
<div
|
|
1206
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1207
|
+
id="wizard-nav-expanded-example-masthead-toolbar"
|
|
1208
|
+
>
|
|
1209
|
+
<div class="pf-c-toolbar__content">
|
|
1210
|
+
<div class="pf-c-toolbar__content-section">
|
|
1211
|
+
<div
|
|
1212
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1213
|
+
>
|
|
1214
|
+
<div class="pf-c-toolbar__item">
|
|
1215
|
+
<button
|
|
1216
|
+
class="pf-c-button pf-m-plain"
|
|
1217
|
+
type="button"
|
|
1218
|
+
aria-label="Notifications"
|
|
1219
|
+
>
|
|
1220
|
+
<span class="pf-c-notification-badge">
|
|
1221
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
1222
|
+
</span>
|
|
1223
|
+
</button>
|
|
1224
|
+
</div>
|
|
1225
|
+
<div
|
|
1226
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1227
|
+
>
|
|
1228
|
+
<div class="pf-c-toolbar__item">
|
|
1229
|
+
<nav
|
|
1230
|
+
class="pf-c-app-launcher"
|
|
1231
|
+
aria-label="Application launcher"
|
|
1232
|
+
id="wizard-nav-expanded-example-masthead-icon-group--app-launcher"
|
|
1233
|
+
>
|
|
1234
|
+
<button
|
|
1235
|
+
class="pf-c-app-launcher__toggle"
|
|
1236
|
+
type="button"
|
|
1237
|
+
id="wizard-nav-expanded-example-masthead-icon-group--app-launcher-button"
|
|
1238
|
+
aria-expanded="false"
|
|
1239
|
+
aria-label="Application launcher"
|
|
1240
|
+
>
|
|
1241
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1242
|
+
</button>
|
|
1243
|
+
<div
|
|
1244
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1245
|
+
hidden
|
|
1246
|
+
>
|
|
1247
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1248
|
+
<div class="pf-c-search-input">
|
|
1249
|
+
<div class="pf-c-search-input__bar">
|
|
1250
|
+
<span class="pf-c-search-input__text">
|
|
1251
|
+
<span class="pf-c-search-input__icon">
|
|
1252
|
+
<i
|
|
1253
|
+
class="fas fa-search fa-fw"
|
|
1254
|
+
aria-hidden="true"
|
|
1255
|
+
></i>
|
|
1256
|
+
</span>
|
|
1257
|
+
<input
|
|
1258
|
+
class="pf-c-search-input__text-input"
|
|
1259
|
+
type="text"
|
|
1260
|
+
placeholder="Filter by name"
|
|
1261
|
+
aria-label="Filter by name"
|
|
1262
|
+
/>
|
|
1263
|
+
</span>
|
|
1264
|
+
</div>
|
|
1265
|
+
</div>
|
|
1266
|
+
</div>
|
|
1267
|
+
<section class="pf-c-app-launcher__group">
|
|
1268
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1269
|
+
<ul>
|
|
1270
|
+
<li
|
|
1271
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1272
|
+
>
|
|
1273
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1274
|
+
Link 1
|
|
1275
|
+
<span
|
|
1276
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1277
|
+
>
|
|
1278
|
+
<i
|
|
1279
|
+
class="fas fa-external-link-alt"
|
|
1280
|
+
aria-hidden="true"
|
|
1281
|
+
></i>
|
|
1282
|
+
</span>
|
|
1283
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1284
|
+
</a>
|
|
1285
|
+
<button
|
|
1286
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1287
|
+
type="button"
|
|
1288
|
+
aria-label="Favorite"
|
|
1289
|
+
>
|
|
1290
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1291
|
+
</button>
|
|
1292
|
+
</li>
|
|
1293
|
+
<li
|
|
1294
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1295
|
+
>
|
|
1296
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1297
|
+
Link 2
|
|
1298
|
+
<span
|
|
1299
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1300
|
+
>
|
|
1301
|
+
<i
|
|
1302
|
+
class="fas fa-external-link-alt"
|
|
1303
|
+
aria-hidden="true"
|
|
1304
|
+
></i>
|
|
1305
|
+
</span>
|
|
1306
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1307
|
+
</a>
|
|
1308
|
+
<button
|
|
1309
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1310
|
+
type="button"
|
|
1311
|
+
aria-label="Favorite"
|
|
1312
|
+
>
|
|
1313
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1314
|
+
</button>
|
|
1315
|
+
</li>
|
|
1316
|
+
</ul>
|
|
1317
|
+
</section>
|
|
1318
|
+
<hr class="pf-c-divider" />
|
|
1319
|
+
<section class="pf-c-app-launcher__group">
|
|
1320
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1321
|
+
<ul>
|
|
1322
|
+
<li
|
|
1323
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1324
|
+
>
|
|
1325
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1326
|
+
Link 1
|
|
1327
|
+
<span
|
|
1328
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1329
|
+
>
|
|
1330
|
+
<i
|
|
1331
|
+
class="fas fa-external-link-alt"
|
|
1332
|
+
aria-hidden="true"
|
|
1333
|
+
></i>
|
|
1334
|
+
</span>
|
|
1335
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1336
|
+
</a>
|
|
1337
|
+
<button
|
|
1338
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1339
|
+
type="button"
|
|
1340
|
+
aria-label="Favorite"
|
|
1341
|
+
>
|
|
1342
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1343
|
+
</button>
|
|
1344
|
+
</li>
|
|
1345
|
+
<li
|
|
1346
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1347
|
+
>
|
|
1348
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1349
|
+
Link 2
|
|
1350
|
+
<span
|
|
1351
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1352
|
+
>
|
|
1353
|
+
<i
|
|
1354
|
+
class="fas fa-external-link-alt"
|
|
1355
|
+
aria-hidden="true"
|
|
1356
|
+
></i>
|
|
1357
|
+
</span>
|
|
1358
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1359
|
+
</a>
|
|
1360
|
+
<button
|
|
1361
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1362
|
+
type="button"
|
|
1363
|
+
aria-label="Favorite"
|
|
1364
|
+
>
|
|
1365
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1366
|
+
</button>
|
|
1367
|
+
</li>
|
|
1368
|
+
</ul>
|
|
1369
|
+
</section>
|
|
1370
|
+
</div>
|
|
1371
|
+
</nav>
|
|
1372
|
+
</div>
|
|
1373
|
+
<div class="pf-c-toolbar__item">
|
|
1374
|
+
<div class="pf-c-dropdown">
|
|
1375
|
+
<button
|
|
1376
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1377
|
+
id="wizard-nav-expanded-example-masthead-settings-button"
|
|
1378
|
+
aria-expanded="false"
|
|
1379
|
+
type="button"
|
|
1380
|
+
aria-label="Settings"
|
|
1381
|
+
>
|
|
1382
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1383
|
+
</button>
|
|
1384
|
+
<ul
|
|
1385
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1386
|
+
aria-labelledby="wizard-nav-expanded-example-masthead-settings-button"
|
|
1387
|
+
hidden
|
|
1388
|
+
>
|
|
1389
|
+
<li>
|
|
1390
|
+
<button
|
|
1391
|
+
class="pf-c-dropdown__menu-item"
|
|
1392
|
+
type="button"
|
|
1393
|
+
>Settings</button>
|
|
1394
|
+
</li>
|
|
1395
|
+
<li>
|
|
1396
|
+
<button
|
|
1397
|
+
class="pf-c-dropdown__menu-item"
|
|
1398
|
+
type="button"
|
|
1399
|
+
>Use the beta release</button>
|
|
1400
|
+
</li>
|
|
1401
|
+
</ul>
|
|
1402
|
+
</div>
|
|
1403
|
+
</div>
|
|
1404
|
+
<div class="pf-c-toolbar__item">
|
|
1405
|
+
<div class="pf-c-dropdown">
|
|
1406
|
+
<button
|
|
1407
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1408
|
+
id="wizard-nav-expanded-example-masthead-help-button"
|
|
1409
|
+
aria-expanded="false"
|
|
1410
|
+
type="button"
|
|
1411
|
+
aria-label="Help"
|
|
1412
|
+
>
|
|
1413
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1414
|
+
</button>
|
|
1415
|
+
<ul
|
|
1416
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1417
|
+
aria-labelledby="wizard-nav-expanded-example-masthead-help-button"
|
|
1418
|
+
hidden
|
|
1419
|
+
>
|
|
1420
|
+
<li>
|
|
1421
|
+
<button
|
|
1422
|
+
class="pf-c-dropdown__menu-item"
|
|
1423
|
+
type="button"
|
|
1424
|
+
>Support options</button>
|
|
1425
|
+
</li>
|
|
1426
|
+
<li>
|
|
1427
|
+
<button
|
|
1428
|
+
class="pf-c-dropdown__menu-item"
|
|
1429
|
+
type="button"
|
|
1430
|
+
>Open support case</button>
|
|
1431
|
+
</li>
|
|
1432
|
+
<li>
|
|
1433
|
+
<button
|
|
1434
|
+
class="pf-c-dropdown__menu-item"
|
|
1435
|
+
type="button"
|
|
1436
|
+
>API documentation</button>
|
|
1437
|
+
</li>
|
|
1438
|
+
</ul>
|
|
1439
|
+
</div>
|
|
1440
|
+
</div>
|
|
1441
|
+
</div>
|
|
1442
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1443
|
+
<div class="pf-c-dropdown">
|
|
1444
|
+
<button
|
|
1445
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1446
|
+
type="button"
|
|
1447
|
+
aria-expanded="false"
|
|
1448
|
+
aria-label="Actions"
|
|
1449
|
+
>
|
|
1450
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1451
|
+
</button>
|
|
1452
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
1453
|
+
<div class="pf-c-menu__content">
|
|
1454
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1455
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1456
|
+
<li
|
|
1457
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1458
|
+
role="none"
|
|
1459
|
+
>
|
|
1460
|
+
<button
|
|
1461
|
+
class="pf-c-menu__item"
|
|
1462
|
+
type="button"
|
|
1463
|
+
disabled
|
|
1464
|
+
role="menuitem"
|
|
1465
|
+
>
|
|
1466
|
+
<span class="pf-c-menu__item-description">
|
|
1467
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1468
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
1469
|
+
</span>
|
|
1470
|
+
</button>
|
|
1471
|
+
</li>
|
|
1472
|
+
<li
|
|
1473
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1474
|
+
role="none"
|
|
1475
|
+
>
|
|
1476
|
+
<button
|
|
1477
|
+
class="pf-c-menu__item"
|
|
1478
|
+
type="button"
|
|
1479
|
+
disabled
|
|
1480
|
+
role="menuitem"
|
|
1481
|
+
>
|
|
1482
|
+
<span class="pf-c-menu__item-description">
|
|
1483
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1484
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1485
|
+
</span>
|
|
1486
|
+
</button>
|
|
1487
|
+
</li>
|
|
1488
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1489
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1490
|
+
<button
|
|
1491
|
+
class="pf-c-menu__item"
|
|
1492
|
+
type="button"
|
|
1493
|
+
role="menuitem"
|
|
1494
|
+
>
|
|
1495
|
+
<span class="pf-c-menu__item-main">
|
|
1496
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
1497
|
+
</span>
|
|
1498
|
+
</button>
|
|
1499
|
+
</li>
|
|
1500
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1501
|
+
<button
|
|
1502
|
+
class="pf-c-menu__item"
|
|
1503
|
+
type="button"
|
|
1504
|
+
role="menuitem"
|
|
1505
|
+
>
|
|
1506
|
+
<span class="pf-c-menu__item-main">
|
|
1507
|
+
<span
|
|
1508
|
+
class="pf-c-menu__item-text"
|
|
1509
|
+
>User management</span>
|
|
1510
|
+
</span>
|
|
1511
|
+
</button>
|
|
1512
|
+
</li>
|
|
1513
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1514
|
+
<button
|
|
1515
|
+
class="pf-c-menu__item"
|
|
1516
|
+
type="button"
|
|
1517
|
+
role="menuitem"
|
|
1518
|
+
>
|
|
1519
|
+
<span class="pf-c-menu__item-main">
|
|
1520
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1521
|
+
</span>
|
|
1522
|
+
</button>
|
|
1523
|
+
</li>
|
|
1524
|
+
</ul>
|
|
1525
|
+
</section>
|
|
1526
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1527
|
+
<section class="pf-c-menu__group">
|
|
1528
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1529
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1530
|
+
<button
|
|
1531
|
+
class="pf-c-menu__item"
|
|
1532
|
+
type="button"
|
|
1533
|
+
role="menuitem"
|
|
1534
|
+
aria-expanded="false"
|
|
1535
|
+
>
|
|
1536
|
+
<span class="pf-c-menu__item-main">
|
|
1537
|
+
<span class="pf-c-menu__item-icon">
|
|
1538
|
+
<i
|
|
1539
|
+
class="fas fa-fw fa-cog"
|
|
1540
|
+
aria-hidden="true"
|
|
1541
|
+
></i>
|
|
1542
|
+
</span>
|
|
1543
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1544
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1545
|
+
<i class="fas fa-angle-right"></i>
|
|
1546
|
+
</span>
|
|
1547
|
+
</span>
|
|
1548
|
+
</button>
|
|
1549
|
+
<div class="pf-c-menu" hidden>
|
|
1550
|
+
<div class="pf-c-menu__content">
|
|
1551
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1552
|
+
<li
|
|
1553
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1554
|
+
role="none"
|
|
1555
|
+
>
|
|
1556
|
+
<button
|
|
1557
|
+
class="pf-c-menu__item"
|
|
1558
|
+
type="button"
|
|
1559
|
+
role="menuitem"
|
|
1560
|
+
>
|
|
1561
|
+
<span class="pf-c-menu__item-main">
|
|
1562
|
+
<span
|
|
1563
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1564
|
+
>
|
|
1565
|
+
<i class="fas fa-angle-left"></i>
|
|
1566
|
+
</span>
|
|
1567
|
+
<span class="pf-c-menu__item-icon">
|
|
1568
|
+
<i
|
|
1569
|
+
class="fas fa-fw fa-cog"
|
|
1570
|
+
aria-hidden="true"
|
|
1571
|
+
></i>
|
|
1572
|
+
</span>
|
|
1573
|
+
<span
|
|
1574
|
+
class="pf-c-menu__item-text"
|
|
1575
|
+
>Settings</span>
|
|
1576
|
+
</span>
|
|
1577
|
+
</button>
|
|
1578
|
+
</li>
|
|
1579
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1580
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1581
|
+
<a
|
|
1582
|
+
class="pf-c-menu__item"
|
|
1583
|
+
href="#"
|
|
1584
|
+
role="menuitem"
|
|
1585
|
+
>
|
|
1586
|
+
<span class="pf-c-menu__item-main">
|
|
1587
|
+
<span
|
|
1588
|
+
class="pf-c-menu__item-text"
|
|
1589
|
+
>Customer support</span>
|
|
1590
|
+
</span>
|
|
1591
|
+
</a>
|
|
1592
|
+
</li>
|
|
1593
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1594
|
+
<a
|
|
1595
|
+
class="pf-c-menu__item"
|
|
1596
|
+
href="#"
|
|
1597
|
+
role="menuitem"
|
|
1598
|
+
>
|
|
1599
|
+
<span class="pf-c-menu__item-main">
|
|
1600
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
1601
|
+
</span>
|
|
1602
|
+
</a>
|
|
1603
|
+
</li>
|
|
1604
|
+
</ul>
|
|
1605
|
+
</div>
|
|
1606
|
+
</div>
|
|
1607
|
+
</li>
|
|
1608
|
+
|
|
1609
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1610
|
+
<button
|
|
1611
|
+
class="pf-c-menu__item"
|
|
1612
|
+
type="button"
|
|
1613
|
+
role="menuitem"
|
|
1614
|
+
aria-expanded="false"
|
|
1615
|
+
>
|
|
1616
|
+
<span class="pf-c-menu__item-main">
|
|
1617
|
+
<span class="pf-c-menu__item-icon">
|
|
1618
|
+
<i
|
|
1619
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1620
|
+
aria-hidden="true"
|
|
1621
|
+
></i>
|
|
1622
|
+
</span>
|
|
1623
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1624
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1625
|
+
<i class="fas fa-angle-right"></i>
|
|
1626
|
+
</span>
|
|
1627
|
+
</span>
|
|
1628
|
+
</button>
|
|
1629
|
+
<div class="pf-c-menu" hidden>
|
|
1630
|
+
<div class="pf-c-menu__content">
|
|
1631
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1632
|
+
<li
|
|
1633
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1634
|
+
role="none"
|
|
1635
|
+
>
|
|
1636
|
+
<button
|
|
1637
|
+
class="pf-c-menu__item"
|
|
1638
|
+
type="button"
|
|
1639
|
+
role="menuitem"
|
|
1640
|
+
>
|
|
1641
|
+
<span class="pf-c-menu__item-main">
|
|
1642
|
+
<span
|
|
1643
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1644
|
+
>
|
|
1645
|
+
<i class="fas fa-angle-left"></i>
|
|
1646
|
+
</span>
|
|
1647
|
+
<span class="pf-c-menu__item-icon">
|
|
1648
|
+
<i
|
|
1649
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1650
|
+
aria-hidden="true"
|
|
1651
|
+
></i>
|
|
1652
|
+
</span>
|
|
1653
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1654
|
+
</span>
|
|
1655
|
+
</button>
|
|
1656
|
+
</li>
|
|
1657
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1658
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1659
|
+
<a
|
|
1660
|
+
class="pf-c-menu__item"
|
|
1661
|
+
href="#"
|
|
1662
|
+
role="menuitem"
|
|
1663
|
+
>
|
|
1664
|
+
<span class="pf-c-menu__item-main">
|
|
1665
|
+
<span
|
|
1666
|
+
class="pf-c-menu__item-text"
|
|
1667
|
+
>Support options</span>
|
|
1668
|
+
</span>
|
|
1669
|
+
</a>
|
|
1670
|
+
</li>
|
|
1671
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1672
|
+
<a
|
|
1673
|
+
class="pf-c-menu__item"
|
|
1674
|
+
href="#"
|
|
1675
|
+
role="menuitem"
|
|
1676
|
+
>
|
|
1677
|
+
<span class="pf-c-menu__item-main">
|
|
1678
|
+
<span
|
|
1679
|
+
class="pf-c-menu__item-text"
|
|
1680
|
+
>Open support case</span>
|
|
1681
|
+
</span>
|
|
1682
|
+
</a>
|
|
1683
|
+
</li>
|
|
1684
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1685
|
+
<a
|
|
1686
|
+
class="pf-c-menu__item"
|
|
1687
|
+
href="#"
|
|
1688
|
+
role="menuitem"
|
|
1689
|
+
>
|
|
1690
|
+
<span class="pf-c-menu__item-main">
|
|
1691
|
+
<span
|
|
1692
|
+
class="pf-c-menu__item-text"
|
|
1693
|
+
>API documentation</span>
|
|
1694
|
+
</span>
|
|
1695
|
+
</a>
|
|
1696
|
+
</li>
|
|
1697
|
+
</ul>
|
|
1698
|
+
</div>
|
|
1699
|
+
</div>
|
|
1700
|
+
</li>
|
|
1701
|
+
|
|
1702
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1703
|
+
<button
|
|
1704
|
+
class="pf-c-menu__item"
|
|
1705
|
+
type="button"
|
|
1706
|
+
role="menuitem"
|
|
1707
|
+
>
|
|
1708
|
+
<span class="pf-c-menu__item-main">
|
|
1709
|
+
<span class="pf-c-menu__item-icon">
|
|
1710
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
1711
|
+
</span>
|
|
1712
|
+
<span
|
|
1713
|
+
class="pf-c-menu__item-text"
|
|
1714
|
+
>Application launcher</span>
|
|
1715
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1716
|
+
<i class="fas fa-angle-right"></i>
|
|
1717
|
+
</span>
|
|
1718
|
+
</span>
|
|
1719
|
+
</button>
|
|
1720
|
+
<div class="pf-c-menu" hidden>
|
|
1721
|
+
<div class="pf-c-menu__header">
|
|
1722
|
+
<button
|
|
1723
|
+
class="pf-c-menu__item"
|
|
1724
|
+
type="button"
|
|
1725
|
+
role="menuitem"
|
|
1726
|
+
>
|
|
1727
|
+
<span class="pf-c-menu__item-main">
|
|
1728
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1729
|
+
<i class="fas fa-angle-left"></i>
|
|
1730
|
+
</span>
|
|
1731
|
+
<span class="pf-c-menu__item-icon">
|
|
1732
|
+
<i
|
|
1733
|
+
class="fas fa-fw fa-th"
|
|
1734
|
+
aria-hidden="true"
|
|
1735
|
+
></i>
|
|
1736
|
+
</span>
|
|
1737
|
+
<span
|
|
1738
|
+
class="pf-c-menu__item-text"
|
|
1739
|
+
>Application launcher</span>
|
|
1740
|
+
</span>
|
|
1741
|
+
</button>
|
|
1742
|
+
</div>
|
|
1743
|
+
<div class="pf-c-menu__search">
|
|
1744
|
+
<div class="pf-c-menu__search-input">
|
|
1745
|
+
<div class="pf-c-search-input">
|
|
1746
|
+
<div class="pf-c-search-input__bar">
|
|
1747
|
+
<span class="pf-c-search-input__text">
|
|
1748
|
+
<span class="pf-c-search-input__icon">
|
|
1749
|
+
<i
|
|
1750
|
+
class="fas fa-search fa-fw"
|
|
1751
|
+
aria-hidden="true"
|
|
1752
|
+
></i>
|
|
1753
|
+
</span>
|
|
1754
|
+
<input
|
|
1755
|
+
class="pf-c-search-input__text-input"
|
|
1756
|
+
type="text"
|
|
1757
|
+
placeholder="Search"
|
|
1758
|
+
aria-label="Search"
|
|
1759
|
+
/>
|
|
1760
|
+
</span>
|
|
1761
|
+
</div>
|
|
1762
|
+
</div>
|
|
1763
|
+
</div>
|
|
1764
|
+
</div>
|
|
1765
|
+
<hr class="pf-c-divider" />
|
|
1766
|
+
<section class="pf-c-menu__group">
|
|
1767
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1768
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1769
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1770
|
+
<a
|
|
1771
|
+
class="pf-c-menu__item"
|
|
1772
|
+
href="#"
|
|
1773
|
+
role="menuitem"
|
|
1774
|
+
>
|
|
1775
|
+
<span class="pf-c-menu__item-main">
|
|
1776
|
+
<span
|
|
1777
|
+
class="pf-c-menu__item-text"
|
|
1778
|
+
>Link 1</span>
|
|
1779
|
+
</span>
|
|
1780
|
+
</a>
|
|
1781
|
+
<button
|
|
1782
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1783
|
+
type="button"
|
|
1784
|
+
aria-label="Starred"
|
|
1785
|
+
>
|
|
1786
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1787
|
+
<i
|
|
1788
|
+
class="fas fa-star"
|
|
1789
|
+
aria-hidden="true"
|
|
1790
|
+
></i>
|
|
1791
|
+
</span>
|
|
1792
|
+
</button>
|
|
1793
|
+
</li>
|
|
1794
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1795
|
+
<a
|
|
1796
|
+
class="pf-c-menu__item"
|
|
1797
|
+
href="#"
|
|
1798
|
+
role="menuitem"
|
|
1799
|
+
target="_blank"
|
|
1800
|
+
>
|
|
1801
|
+
<span class="pf-c-menu__item-main">
|
|
1802
|
+
<span
|
|
1803
|
+
class="pf-c-menu__item-text"
|
|
1804
|
+
>Link 2</span>
|
|
1805
|
+
<span
|
|
1806
|
+
class="pf-c-menu__item-external-icon"
|
|
1807
|
+
>
|
|
1808
|
+
<i
|
|
1809
|
+
class="fas fa-external-link-alt"
|
|
1810
|
+
aria-hidden="true"
|
|
1811
|
+
></i>
|
|
1812
|
+
</span>
|
|
1813
|
+
<span
|
|
1814
|
+
class="pf-screen-reader"
|
|
1815
|
+
>(opens new window)</span>
|
|
1816
|
+
</span>
|
|
1817
|
+
</a>
|
|
1818
|
+
<button
|
|
1819
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1820
|
+
type="button"
|
|
1821
|
+
aria-label="Not starred"
|
|
1822
|
+
>
|
|
1823
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1824
|
+
<i
|
|
1825
|
+
class="fas fa-star"
|
|
1826
|
+
aria-hidden="true"
|
|
1827
|
+
></i>
|
|
1828
|
+
</span>
|
|
1829
|
+
</button>
|
|
1830
|
+
</li>
|
|
1831
|
+
</ul>
|
|
1832
|
+
</section>
|
|
1833
|
+
<hr class="pf-c-divider" />
|
|
1834
|
+
<section class="pf-c-menu__group">
|
|
1835
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1836
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1837
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1838
|
+
<a
|
|
1839
|
+
class="pf-c-menu__item"
|
|
1840
|
+
href="#"
|
|
1841
|
+
role="menuitem"
|
|
1842
|
+
>
|
|
1843
|
+
<span class="pf-c-menu__item-main">
|
|
1844
|
+
<span
|
|
1845
|
+
class="pf-c-menu__item-text"
|
|
1846
|
+
>Link 1</span>
|
|
1847
|
+
</span>
|
|
1848
|
+
</a>
|
|
1849
|
+
<button
|
|
1850
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1851
|
+
type="button"
|
|
1852
|
+
aria-label="Not starred"
|
|
1853
|
+
>
|
|
1854
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1855
|
+
<i
|
|
1856
|
+
class="fas fa-star"
|
|
1857
|
+
aria-hidden="true"
|
|
1858
|
+
></i>
|
|
1859
|
+
</span>
|
|
1860
|
+
</button>
|
|
1861
|
+
</li>
|
|
1862
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1863
|
+
<a
|
|
1864
|
+
class="pf-c-menu__item"
|
|
1865
|
+
href="#"
|
|
1866
|
+
role="menuitem"
|
|
1867
|
+
target="_blank"
|
|
1868
|
+
>
|
|
1869
|
+
<span class="pf-c-menu__item-main">
|
|
1870
|
+
<span
|
|
1871
|
+
class="pf-c-menu__item-text"
|
|
1872
|
+
>Link 2</span>
|
|
1873
|
+
<span
|
|
1874
|
+
class="pf-c-menu__item-external-icon"
|
|
1875
|
+
>
|
|
1876
|
+
<i
|
|
1877
|
+
class="fas fa-external-link-alt"
|
|
1878
|
+
aria-hidden="true"
|
|
1879
|
+
></i>
|
|
1880
|
+
</span>
|
|
1881
|
+
<span
|
|
1882
|
+
class="pf-screen-reader"
|
|
1883
|
+
>(opens new window)</span>
|
|
1884
|
+
</span>
|
|
1885
|
+
</a>
|
|
1886
|
+
<button
|
|
1887
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1888
|
+
type="button"
|
|
1889
|
+
aria-label="Starred"
|
|
1890
|
+
>
|
|
1891
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1892
|
+
<i
|
|
1893
|
+
class="fas fa-star"
|
|
1894
|
+
aria-hidden="true"
|
|
1895
|
+
></i>
|
|
1896
|
+
</span>
|
|
1897
|
+
</button>
|
|
1898
|
+
</li>
|
|
1899
|
+
</ul>
|
|
1900
|
+
</section>
|
|
1901
|
+
</div>
|
|
1902
|
+
</li>
|
|
1903
|
+
</ul>
|
|
1904
|
+
</section>
|
|
1905
|
+
</div>
|
|
1906
|
+
</div>
|
|
1907
|
+
</div>
|
|
1908
|
+
</div>
|
|
1909
|
+
</div>
|
|
1910
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1911
|
+
<div
|
|
1912
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1913
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1914
|
+
>
|
|
1915
|
+
<button
|
|
1916
|
+
class="pf-c-dropdown__toggle"
|
|
1917
|
+
id="wizard-nav-expanded-example-masthead-profile-button"
|
|
1918
|
+
aria-expanded="false"
|
|
1919
|
+
type="button"
|
|
1920
|
+
>
|
|
1921
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1922
|
+
<img
|
|
1923
|
+
class="pf-c-avatar"
|
|
1924
|
+
src="/assets/images/img_avatar.svg"
|
|
1925
|
+
alt="Avatar image"
|
|
1926
|
+
/>
|
|
1927
|
+
</span>
|
|
1928
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1929
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1930
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1931
|
+
</span>
|
|
1932
|
+
</button>
|
|
1933
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1934
|
+
<section class="pf-c-dropdown__group">
|
|
1935
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1936
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1937
|
+
<div>123456789</div>
|
|
1938
|
+
</div>
|
|
1939
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1940
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1941
|
+
<div>mshaksho@redhat.com</div>
|
|
1942
|
+
</div>
|
|
1943
|
+
</section>
|
|
1944
|
+
<hr class="pf-c-divider" />
|
|
1945
|
+
<section class="pf-c-dropdown__group">
|
|
1946
|
+
<ul>
|
|
1947
|
+
<li>
|
|
1948
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
1949
|
+
</li>
|
|
1950
|
+
<li>
|
|
1951
|
+
<a
|
|
1952
|
+
class="pf-c-dropdown__menu-item"
|
|
1953
|
+
href="#"
|
|
1954
|
+
>User management</a>
|
|
1955
|
+
</li>
|
|
1956
|
+
<li>
|
|
1957
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1958
|
+
</li>
|
|
1959
|
+
</ul>
|
|
1960
|
+
</section>
|
|
1961
|
+
</div>
|
|
1962
|
+
</div>
|
|
1963
|
+
</div>
|
|
1964
|
+
</div>
|
|
1965
|
+
</div>
|
|
1966
|
+
</div>
|
|
1967
|
+
</div>
|
|
1968
|
+
</header>
|
|
1969
|
+
<div class="pf-c-page__sidebar">
|
|
1970
|
+
<div class="pf-c-page__sidebar-body">
|
|
1971
|
+
<nav
|
|
1972
|
+
class="pf-c-nav"
|
|
1973
|
+
id="wizard-nav-expanded-example-primary-nav"
|
|
1974
|
+
aria-label="Global"
|
|
1975
|
+
>
|
|
1976
|
+
<ul class="pf-c-nav__list">
|
|
1977
|
+
<li class="pf-c-nav__item">
|
|
1978
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1979
|
+
</li>
|
|
1980
|
+
<li class="pf-c-nav__item">
|
|
1981
|
+
<a
|
|
1982
|
+
href="#"
|
|
1983
|
+
class="pf-c-nav__link pf-m-current"
|
|
1984
|
+
aria-current="page"
|
|
1985
|
+
>Policy</a>
|
|
1986
|
+
</li>
|
|
1987
|
+
<li class="pf-c-nav__item">
|
|
1988
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1989
|
+
</li>
|
|
1990
|
+
<li class="pf-c-nav__item">
|
|
1991
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1992
|
+
</li>
|
|
1993
|
+
<li class="pf-c-nav__item">
|
|
1994
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1995
|
+
</li>
|
|
1996
|
+
</ul>
|
|
1997
|
+
</nav>
|
|
1998
|
+
</div>
|
|
1999
|
+
</div>
|
|
2000
|
+
<main
|
|
2001
|
+
class="pf-c-page__main"
|
|
2002
|
+
tabindex="-1"
|
|
2003
|
+
id="main-content-wizard-nav-expanded-example"
|
|
2004
|
+
>
|
|
2005
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
2006
|
+
<div class="pf-c-page__main-body">
|
|
2007
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
2008
|
+
<ol class="pf-c-breadcrumb__list">
|
|
2009
|
+
<li class="pf-c-breadcrumb__item">
|
|
2010
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
2011
|
+
</li>
|
|
2012
|
+
<li class="pf-c-breadcrumb__item">
|
|
2013
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2014
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2015
|
+
</span>
|
|
2016
|
+
|
|
2017
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2018
|
+
</li>
|
|
2019
|
+
<li class="pf-c-breadcrumb__item">
|
|
2020
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2021
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2022
|
+
</span>
|
|
2023
|
+
|
|
2024
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2025
|
+
</li>
|
|
2026
|
+
<li class="pf-c-breadcrumb__item">
|
|
2027
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2028
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2029
|
+
</span>
|
|
2030
|
+
|
|
2031
|
+
<a
|
|
2032
|
+
href="#"
|
|
2033
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
2034
|
+
aria-current="page"
|
|
2035
|
+
>Section landing</a>
|
|
2036
|
+
</li>
|
|
2037
|
+
</ol>
|
|
2038
|
+
</nav>
|
|
2039
|
+
</div>
|
|
2040
|
+
</section>
|
|
2041
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2042
|
+
<div class="pf-c-page__main-body">
|
|
2043
|
+
<div class="pf-c-content">
|
|
2044
|
+
<h1>Main title</h1>
|
|
2045
|
+
<p>This is a full page demo.</p>
|
|
2046
|
+
</div>
|
|
2047
|
+
</div>
|
|
2048
|
+
</section>
|
|
2049
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
2050
|
+
<div class="pf-c-page__main-body">
|
|
2051
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
2052
|
+
<div class="pf-c-card">
|
|
2053
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2054
|
+
</div>
|
|
2055
|
+
<div class="pf-c-card">
|
|
2056
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2057
|
+
</div>
|
|
2058
|
+
<div class="pf-c-card">
|
|
2059
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2060
|
+
</div>
|
|
2061
|
+
<div class="pf-c-card">
|
|
2062
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2063
|
+
</div>
|
|
2064
|
+
<div class="pf-c-card">
|
|
2065
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2066
|
+
</div>
|
|
2067
|
+
<div class="pf-c-card">
|
|
2068
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2069
|
+
</div>
|
|
2070
|
+
<div class="pf-c-card">
|
|
2071
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2072
|
+
</div>
|
|
2073
|
+
<div class="pf-c-card">
|
|
2074
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2075
|
+
</div>
|
|
2076
|
+
<div class="pf-c-card">
|
|
2077
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2078
|
+
</div>
|
|
2079
|
+
<div class="pf-c-card">
|
|
2080
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2081
|
+
</div>
|
|
2082
|
+
</div>
|
|
2083
|
+
</div>
|
|
2084
|
+
</section>
|
|
2085
|
+
</main>
|
|
2086
|
+
</div>
|
|
255
2087
|
<div class="pf-c-backdrop">
|
|
256
2088
|
<div class="pf-l-bullseye">
|
|
257
2089
|
<div
|
|
@@ -332,7 +2164,7 @@ wrapperTag: div
|
|
|
332
2164
|
</li>
|
|
333
2165
|
</ol>
|
|
334
2166
|
</nav>
|
|
335
|
-
<main class="pf-c-wizard__main">
|
|
2167
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
336
2168
|
<div class="pf-c-wizard__main-body">
|
|
337
2169
|
<form novalidate class="pf-c-form">
|
|
338
2170
|
<div class="pf-c-form__group">
|
|
@@ -497,173 +2329,821 @@ wrapperTag: div
|
|
|
497
2329
|
### In page
|
|
498
2330
|
|
|
499
2331
|
```html isFullscreen
|
|
500
|
-
<div class="pf-c-page" id="wizard-in-page">
|
|
2332
|
+
<div class="pf-c-page" id="wizard-in-page-example">
|
|
501
2333
|
<a
|
|
502
2334
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
503
|
-
href="#main-content-wizard-in-page"
|
|
2335
|
+
href="#main-content-wizard-in-page-example"
|
|
504
2336
|
>Skip to content</a>
|
|
505
|
-
<header class="pf-c-
|
|
506
|
-
<
|
|
507
|
-
<
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
2337
|
+
<header class="pf-c-masthead" id="wizard-in-page-example-masthead">
|
|
2338
|
+
<span class="pf-c-masthead__toggle">
|
|
2339
|
+
<button
|
|
2340
|
+
class="pf-c-button pf-m-plain"
|
|
2341
|
+
type="button"
|
|
2342
|
+
aria-label="Global navigation"
|
|
2343
|
+
>
|
|
2344
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2345
|
+
</button>
|
|
2346
|
+
</span>
|
|
2347
|
+
<div class="pf-c-masthead__main">
|
|
2348
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
2349
|
+
<picture
|
|
2350
|
+
class="pf-c-brand pf-m-picture"
|
|
2351
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
515
2352
|
>
|
|
516
|
-
<
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
2353
|
+
<source
|
|
2354
|
+
media="(min-width: 768px)"
|
|
2355
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
2356
|
+
/>
|
|
2357
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
2358
|
+
<img
|
|
2359
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
2360
|
+
alt="Fallback patternFly default logo"
|
|
2361
|
+
/>
|
|
2362
|
+
</picture>
|
|
525
2363
|
</a>
|
|
526
2364
|
</div>
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
>
|
|
533
|
-
<
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
aria-label="Settings"
|
|
537
|
-
>
|
|
538
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
539
|
-
</button>
|
|
540
|
-
</div>
|
|
541
|
-
<div
|
|
542
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
543
|
-
>
|
|
544
|
-
<button
|
|
545
|
-
class="pf-c-button pf-m-plain"
|
|
546
|
-
type="button"
|
|
547
|
-
aria-label="Help"
|
|
548
|
-
>
|
|
549
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
550
|
-
</button>
|
|
551
|
-
</div>
|
|
552
|
-
</div>
|
|
553
|
-
<div class="pf-c-page__header-tools-group">
|
|
554
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
555
|
-
<div class="pf-c-dropdown">
|
|
556
|
-
<button
|
|
557
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
558
|
-
id="wizard-in-page-dropdown-kebab-1-button"
|
|
559
|
-
aria-expanded="false"
|
|
560
|
-
type="button"
|
|
561
|
-
aria-label="Actions"
|
|
562
|
-
>
|
|
563
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
564
|
-
</button>
|
|
565
|
-
<ul
|
|
566
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
567
|
-
aria-labelledby="wizard-in-page-dropdown-kebab-1-button"
|
|
568
|
-
hidden
|
|
2365
|
+
<div class="pf-c-masthead__content">
|
|
2366
|
+
<div
|
|
2367
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2368
|
+
id="wizard-in-page-example-masthead-toolbar"
|
|
2369
|
+
>
|
|
2370
|
+
<div class="pf-c-toolbar__content">
|
|
2371
|
+
<div class="pf-c-toolbar__content-section">
|
|
2372
|
+
<div
|
|
2373
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
569
2374
|
>
|
|
570
|
-
<
|
|
571
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
572
|
-
</li>
|
|
573
|
-
<li>
|
|
574
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
575
|
-
</li>
|
|
576
|
-
<li>
|
|
577
|
-
<a
|
|
578
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
579
|
-
href="#"
|
|
580
|
-
aria-disabled="true"
|
|
581
|
-
tabindex="-1"
|
|
582
|
-
>Disabled link</a>
|
|
583
|
-
</li>
|
|
584
|
-
<li>
|
|
2375
|
+
<div class="pf-c-toolbar__item">
|
|
585
2376
|
<button
|
|
586
|
-
class="pf-c-
|
|
2377
|
+
class="pf-c-button pf-m-plain"
|
|
587
2378
|
type="button"
|
|
588
|
-
|
|
589
|
-
>
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
</
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
2379
|
+
aria-label="Notifications"
|
|
2380
|
+
>
|
|
2381
|
+
<span class="pf-c-notification-badge">
|
|
2382
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
2383
|
+
</span>
|
|
2384
|
+
</button>
|
|
2385
|
+
</div>
|
|
2386
|
+
<div
|
|
2387
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
2388
|
+
>
|
|
2389
|
+
<div class="pf-c-toolbar__item">
|
|
2390
|
+
<nav
|
|
2391
|
+
class="pf-c-app-launcher"
|
|
2392
|
+
aria-label="Application launcher"
|
|
2393
|
+
id="wizard-in-page-example-masthead-icon-group--app-launcher"
|
|
2394
|
+
>
|
|
2395
|
+
<button
|
|
2396
|
+
class="pf-c-app-launcher__toggle"
|
|
2397
|
+
type="button"
|
|
2398
|
+
id="wizard-in-page-example-masthead-icon-group--app-launcher-button"
|
|
2399
|
+
aria-expanded="false"
|
|
2400
|
+
aria-label="Application launcher"
|
|
2401
|
+
>
|
|
2402
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
2403
|
+
</button>
|
|
2404
|
+
<div
|
|
2405
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
2406
|
+
hidden
|
|
2407
|
+
>
|
|
2408
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
2409
|
+
<div class="pf-c-search-input">
|
|
2410
|
+
<div class="pf-c-search-input__bar">
|
|
2411
|
+
<span class="pf-c-search-input__text">
|
|
2412
|
+
<span class="pf-c-search-input__icon">
|
|
2413
|
+
<i
|
|
2414
|
+
class="fas fa-search fa-fw"
|
|
2415
|
+
aria-hidden="true"
|
|
2416
|
+
></i>
|
|
2417
|
+
</span>
|
|
2418
|
+
<input
|
|
2419
|
+
class="pf-c-search-input__text-input"
|
|
2420
|
+
type="text"
|
|
2421
|
+
placeholder="Filter by name"
|
|
2422
|
+
aria-label="Filter by name"
|
|
2423
|
+
/>
|
|
2424
|
+
</span>
|
|
2425
|
+
</div>
|
|
2426
|
+
</div>
|
|
2427
|
+
</div>
|
|
2428
|
+
<section class="pf-c-app-launcher__group">
|
|
2429
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
2430
|
+
<ul>
|
|
2431
|
+
<li
|
|
2432
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2433
|
+
>
|
|
2434
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2435
|
+
Link 1
|
|
2436
|
+
<span
|
|
2437
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2438
|
+
>
|
|
2439
|
+
<i
|
|
2440
|
+
class="fas fa-external-link-alt"
|
|
2441
|
+
aria-hidden="true"
|
|
2442
|
+
></i>
|
|
2443
|
+
</span>
|
|
2444
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2445
|
+
</a>
|
|
2446
|
+
<button
|
|
2447
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2448
|
+
type="button"
|
|
2449
|
+
aria-label="Favorite"
|
|
2450
|
+
>
|
|
2451
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2452
|
+
</button>
|
|
2453
|
+
</li>
|
|
2454
|
+
<li
|
|
2455
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2456
|
+
>
|
|
2457
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2458
|
+
Link 2
|
|
2459
|
+
<span
|
|
2460
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2461
|
+
>
|
|
2462
|
+
<i
|
|
2463
|
+
class="fas fa-external-link-alt"
|
|
2464
|
+
aria-hidden="true"
|
|
2465
|
+
></i>
|
|
2466
|
+
</span>
|
|
2467
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2468
|
+
</a>
|
|
2469
|
+
<button
|
|
2470
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2471
|
+
type="button"
|
|
2472
|
+
aria-label="Favorite"
|
|
2473
|
+
>
|
|
2474
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2475
|
+
</button>
|
|
2476
|
+
</li>
|
|
2477
|
+
</ul>
|
|
2478
|
+
</section>
|
|
2479
|
+
<hr class="pf-c-divider" />
|
|
2480
|
+
<section class="pf-c-app-launcher__group">
|
|
2481
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
2482
|
+
<ul>
|
|
2483
|
+
<li
|
|
2484
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2485
|
+
>
|
|
2486
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2487
|
+
Link 1
|
|
2488
|
+
<span
|
|
2489
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2490
|
+
>
|
|
2491
|
+
<i
|
|
2492
|
+
class="fas fa-external-link-alt"
|
|
2493
|
+
aria-hidden="true"
|
|
2494
|
+
></i>
|
|
2495
|
+
</span>
|
|
2496
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2497
|
+
</a>
|
|
2498
|
+
<button
|
|
2499
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2500
|
+
type="button"
|
|
2501
|
+
aria-label="Favorite"
|
|
2502
|
+
>
|
|
2503
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2504
|
+
</button>
|
|
2505
|
+
</li>
|
|
2506
|
+
<li
|
|
2507
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2508
|
+
>
|
|
2509
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2510
|
+
Link 2
|
|
2511
|
+
<span
|
|
2512
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2513
|
+
>
|
|
2514
|
+
<i
|
|
2515
|
+
class="fas fa-external-link-alt"
|
|
2516
|
+
aria-hidden="true"
|
|
2517
|
+
></i>
|
|
2518
|
+
</span>
|
|
2519
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2520
|
+
</a>
|
|
2521
|
+
<button
|
|
2522
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2523
|
+
type="button"
|
|
2524
|
+
aria-label="Favorite"
|
|
2525
|
+
>
|
|
2526
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2527
|
+
</button>
|
|
2528
|
+
</li>
|
|
2529
|
+
</ul>
|
|
2530
|
+
</section>
|
|
2531
|
+
</div>
|
|
2532
|
+
</nav>
|
|
2533
|
+
</div>
|
|
2534
|
+
<div class="pf-c-toolbar__item">
|
|
2535
|
+
<div class="pf-c-dropdown">
|
|
2536
|
+
<button
|
|
2537
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2538
|
+
id="wizard-in-page-example-masthead-settings-button"
|
|
2539
|
+
aria-expanded="false"
|
|
2540
|
+
type="button"
|
|
2541
|
+
aria-label="Settings"
|
|
2542
|
+
>
|
|
2543
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2544
|
+
</button>
|
|
2545
|
+
<ul
|
|
2546
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2547
|
+
aria-labelledby="wizard-in-page-example-masthead-settings-button"
|
|
2548
|
+
hidden
|
|
2549
|
+
>
|
|
2550
|
+
<li>
|
|
2551
|
+
<button
|
|
2552
|
+
class="pf-c-dropdown__menu-item"
|
|
2553
|
+
type="button"
|
|
2554
|
+
>Settings</button>
|
|
2555
|
+
</li>
|
|
2556
|
+
<li>
|
|
2557
|
+
<button
|
|
2558
|
+
class="pf-c-dropdown__menu-item"
|
|
2559
|
+
type="button"
|
|
2560
|
+
>Use the beta release</button>
|
|
2561
|
+
</li>
|
|
2562
|
+
</ul>
|
|
2563
|
+
</div>
|
|
2564
|
+
</div>
|
|
2565
|
+
<div class="pf-c-toolbar__item">
|
|
2566
|
+
<div class="pf-c-dropdown">
|
|
2567
|
+
<button
|
|
2568
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2569
|
+
id="wizard-in-page-example-masthead-help-button"
|
|
2570
|
+
aria-expanded="false"
|
|
2571
|
+
type="button"
|
|
2572
|
+
aria-label="Help"
|
|
2573
|
+
>
|
|
2574
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
2575
|
+
</button>
|
|
2576
|
+
<ul
|
|
2577
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2578
|
+
aria-labelledby="wizard-in-page-example-masthead-help-button"
|
|
2579
|
+
hidden
|
|
2580
|
+
>
|
|
2581
|
+
<li>
|
|
2582
|
+
<button
|
|
2583
|
+
class="pf-c-dropdown__menu-item"
|
|
2584
|
+
type="button"
|
|
2585
|
+
>Support options</button>
|
|
2586
|
+
</li>
|
|
2587
|
+
<li>
|
|
2588
|
+
<button
|
|
2589
|
+
class="pf-c-dropdown__menu-item"
|
|
2590
|
+
type="button"
|
|
2591
|
+
>Open support case</button>
|
|
2592
|
+
</li>
|
|
2593
|
+
<li>
|
|
2594
|
+
<button
|
|
2595
|
+
class="pf-c-dropdown__menu-item"
|
|
2596
|
+
type="button"
|
|
2597
|
+
>API documentation</button>
|
|
2598
|
+
</li>
|
|
2599
|
+
</ul>
|
|
2600
|
+
</div>
|
|
2601
|
+
</div>
|
|
2602
|
+
</div>
|
|
2603
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
2604
|
+
<div class="pf-c-dropdown">
|
|
2605
|
+
<button
|
|
2606
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
2607
|
+
type="button"
|
|
2608
|
+
aria-expanded="false"
|
|
2609
|
+
aria-label="Actions"
|
|
2610
|
+
>
|
|
2611
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2612
|
+
</button>
|
|
2613
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
2614
|
+
<div class="pf-c-menu__content">
|
|
2615
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
2616
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2617
|
+
<li
|
|
2618
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2619
|
+
role="none"
|
|
2620
|
+
>
|
|
2621
|
+
<button
|
|
2622
|
+
class="pf-c-menu__item"
|
|
2623
|
+
type="button"
|
|
2624
|
+
disabled
|
|
2625
|
+
role="menuitem"
|
|
2626
|
+
>
|
|
2627
|
+
<span class="pf-c-menu__item-description">
|
|
2628
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2629
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
2630
|
+
</span>
|
|
2631
|
+
</button>
|
|
2632
|
+
</li>
|
|
2633
|
+
<li
|
|
2634
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2635
|
+
role="none"
|
|
2636
|
+
>
|
|
2637
|
+
<button
|
|
2638
|
+
class="pf-c-menu__item"
|
|
2639
|
+
type="button"
|
|
2640
|
+
disabled
|
|
2641
|
+
role="menuitem"
|
|
2642
|
+
>
|
|
2643
|
+
<span class="pf-c-menu__item-description">
|
|
2644
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2645
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
2646
|
+
</span>
|
|
2647
|
+
</button>
|
|
2648
|
+
</li>
|
|
2649
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2650
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2651
|
+
<button
|
|
2652
|
+
class="pf-c-menu__item"
|
|
2653
|
+
type="button"
|
|
2654
|
+
role="menuitem"
|
|
2655
|
+
>
|
|
2656
|
+
<span class="pf-c-menu__item-main">
|
|
2657
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
2658
|
+
</span>
|
|
2659
|
+
</button>
|
|
2660
|
+
</li>
|
|
2661
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2662
|
+
<button
|
|
2663
|
+
class="pf-c-menu__item"
|
|
2664
|
+
type="button"
|
|
2665
|
+
role="menuitem"
|
|
2666
|
+
>
|
|
2667
|
+
<span class="pf-c-menu__item-main">
|
|
2668
|
+
<span
|
|
2669
|
+
class="pf-c-menu__item-text"
|
|
2670
|
+
>User management</span>
|
|
2671
|
+
</span>
|
|
2672
|
+
</button>
|
|
2673
|
+
</li>
|
|
2674
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2675
|
+
<button
|
|
2676
|
+
class="pf-c-menu__item"
|
|
2677
|
+
type="button"
|
|
2678
|
+
role="menuitem"
|
|
2679
|
+
>
|
|
2680
|
+
<span class="pf-c-menu__item-main">
|
|
2681
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
2682
|
+
</span>
|
|
2683
|
+
</button>
|
|
2684
|
+
</li>
|
|
2685
|
+
</ul>
|
|
2686
|
+
</section>
|
|
2687
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
2688
|
+
<section class="pf-c-menu__group">
|
|
2689
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2690
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2691
|
+
<button
|
|
2692
|
+
class="pf-c-menu__item"
|
|
2693
|
+
type="button"
|
|
2694
|
+
role="menuitem"
|
|
2695
|
+
aria-expanded="false"
|
|
2696
|
+
>
|
|
2697
|
+
<span class="pf-c-menu__item-main">
|
|
2698
|
+
<span class="pf-c-menu__item-icon">
|
|
2699
|
+
<i
|
|
2700
|
+
class="fas fa-fw fa-cog"
|
|
2701
|
+
aria-hidden="true"
|
|
2702
|
+
></i>
|
|
2703
|
+
</span>
|
|
2704
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
2705
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2706
|
+
<i class="fas fa-angle-right"></i>
|
|
2707
|
+
</span>
|
|
2708
|
+
</span>
|
|
2709
|
+
</button>
|
|
2710
|
+
<div class="pf-c-menu" hidden>
|
|
2711
|
+
<div class="pf-c-menu__content">
|
|
2712
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2713
|
+
<li
|
|
2714
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2715
|
+
role="none"
|
|
2716
|
+
>
|
|
2717
|
+
<button
|
|
2718
|
+
class="pf-c-menu__item"
|
|
2719
|
+
type="button"
|
|
2720
|
+
role="menuitem"
|
|
2721
|
+
>
|
|
2722
|
+
<span class="pf-c-menu__item-main">
|
|
2723
|
+
<span
|
|
2724
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2725
|
+
>
|
|
2726
|
+
<i class="fas fa-angle-left"></i>
|
|
2727
|
+
</span>
|
|
2728
|
+
<span class="pf-c-menu__item-icon">
|
|
2729
|
+
<i
|
|
2730
|
+
class="fas fa-fw fa-cog"
|
|
2731
|
+
aria-hidden="true"
|
|
2732
|
+
></i>
|
|
2733
|
+
</span>
|
|
2734
|
+
<span
|
|
2735
|
+
class="pf-c-menu__item-text"
|
|
2736
|
+
>Settings</span>
|
|
2737
|
+
</span>
|
|
2738
|
+
</button>
|
|
2739
|
+
</li>
|
|
2740
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2741
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2742
|
+
<a
|
|
2743
|
+
class="pf-c-menu__item"
|
|
2744
|
+
href="#"
|
|
2745
|
+
role="menuitem"
|
|
2746
|
+
>
|
|
2747
|
+
<span class="pf-c-menu__item-main">
|
|
2748
|
+
<span
|
|
2749
|
+
class="pf-c-menu__item-text"
|
|
2750
|
+
>Customer support</span>
|
|
2751
|
+
</span>
|
|
2752
|
+
</a>
|
|
2753
|
+
</li>
|
|
2754
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2755
|
+
<a
|
|
2756
|
+
class="pf-c-menu__item"
|
|
2757
|
+
href="#"
|
|
2758
|
+
role="menuitem"
|
|
2759
|
+
>
|
|
2760
|
+
<span class="pf-c-menu__item-main">
|
|
2761
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
2762
|
+
</span>
|
|
2763
|
+
</a>
|
|
2764
|
+
</li>
|
|
2765
|
+
</ul>
|
|
2766
|
+
</div>
|
|
2767
|
+
</div>
|
|
2768
|
+
</li>
|
|
2769
|
+
|
|
2770
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2771
|
+
<button
|
|
2772
|
+
class="pf-c-menu__item"
|
|
2773
|
+
type="button"
|
|
2774
|
+
role="menuitem"
|
|
2775
|
+
aria-expanded="false"
|
|
2776
|
+
>
|
|
2777
|
+
<span class="pf-c-menu__item-main">
|
|
2778
|
+
<span class="pf-c-menu__item-icon">
|
|
2779
|
+
<i
|
|
2780
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2781
|
+
aria-hidden="true"
|
|
2782
|
+
></i>
|
|
2783
|
+
</span>
|
|
2784
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2785
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2786
|
+
<i class="fas fa-angle-right"></i>
|
|
2787
|
+
</span>
|
|
2788
|
+
</span>
|
|
2789
|
+
</button>
|
|
2790
|
+
<div class="pf-c-menu" hidden>
|
|
2791
|
+
<div class="pf-c-menu__content">
|
|
2792
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2793
|
+
<li
|
|
2794
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2795
|
+
role="none"
|
|
2796
|
+
>
|
|
2797
|
+
<button
|
|
2798
|
+
class="pf-c-menu__item"
|
|
2799
|
+
type="button"
|
|
2800
|
+
role="menuitem"
|
|
2801
|
+
>
|
|
2802
|
+
<span class="pf-c-menu__item-main">
|
|
2803
|
+
<span
|
|
2804
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2805
|
+
>
|
|
2806
|
+
<i class="fas fa-angle-left"></i>
|
|
2807
|
+
</span>
|
|
2808
|
+
<span class="pf-c-menu__item-icon">
|
|
2809
|
+
<i
|
|
2810
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2811
|
+
aria-hidden="true"
|
|
2812
|
+
></i>
|
|
2813
|
+
</span>
|
|
2814
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2815
|
+
</span>
|
|
2816
|
+
</button>
|
|
2817
|
+
</li>
|
|
2818
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2819
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2820
|
+
<a
|
|
2821
|
+
class="pf-c-menu__item"
|
|
2822
|
+
href="#"
|
|
2823
|
+
role="menuitem"
|
|
2824
|
+
>
|
|
2825
|
+
<span class="pf-c-menu__item-main">
|
|
2826
|
+
<span
|
|
2827
|
+
class="pf-c-menu__item-text"
|
|
2828
|
+
>Support options</span>
|
|
2829
|
+
</span>
|
|
2830
|
+
</a>
|
|
2831
|
+
</li>
|
|
2832
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2833
|
+
<a
|
|
2834
|
+
class="pf-c-menu__item"
|
|
2835
|
+
href="#"
|
|
2836
|
+
role="menuitem"
|
|
2837
|
+
>
|
|
2838
|
+
<span class="pf-c-menu__item-main">
|
|
2839
|
+
<span
|
|
2840
|
+
class="pf-c-menu__item-text"
|
|
2841
|
+
>Open support case</span>
|
|
2842
|
+
</span>
|
|
2843
|
+
</a>
|
|
2844
|
+
</li>
|
|
2845
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2846
|
+
<a
|
|
2847
|
+
class="pf-c-menu__item"
|
|
2848
|
+
href="#"
|
|
2849
|
+
role="menuitem"
|
|
2850
|
+
>
|
|
2851
|
+
<span class="pf-c-menu__item-main">
|
|
2852
|
+
<span
|
|
2853
|
+
class="pf-c-menu__item-text"
|
|
2854
|
+
>API documentation</span>
|
|
2855
|
+
</span>
|
|
2856
|
+
</a>
|
|
2857
|
+
</li>
|
|
2858
|
+
</ul>
|
|
2859
|
+
</div>
|
|
2860
|
+
</div>
|
|
2861
|
+
</li>
|
|
2862
|
+
|
|
2863
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2864
|
+
<button
|
|
2865
|
+
class="pf-c-menu__item"
|
|
2866
|
+
type="button"
|
|
2867
|
+
role="menuitem"
|
|
2868
|
+
>
|
|
2869
|
+
<span class="pf-c-menu__item-main">
|
|
2870
|
+
<span class="pf-c-menu__item-icon">
|
|
2871
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
2872
|
+
</span>
|
|
2873
|
+
<span
|
|
2874
|
+
class="pf-c-menu__item-text"
|
|
2875
|
+
>Application launcher</span>
|
|
2876
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2877
|
+
<i class="fas fa-angle-right"></i>
|
|
2878
|
+
</span>
|
|
2879
|
+
</span>
|
|
2880
|
+
</button>
|
|
2881
|
+
<div class="pf-c-menu" hidden>
|
|
2882
|
+
<div class="pf-c-menu__header">
|
|
2883
|
+
<button
|
|
2884
|
+
class="pf-c-menu__item"
|
|
2885
|
+
type="button"
|
|
2886
|
+
role="menuitem"
|
|
2887
|
+
>
|
|
2888
|
+
<span class="pf-c-menu__item-main">
|
|
2889
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2890
|
+
<i class="fas fa-angle-left"></i>
|
|
2891
|
+
</span>
|
|
2892
|
+
<span class="pf-c-menu__item-icon">
|
|
2893
|
+
<i
|
|
2894
|
+
class="fas fa-fw fa-th"
|
|
2895
|
+
aria-hidden="true"
|
|
2896
|
+
></i>
|
|
2897
|
+
</span>
|
|
2898
|
+
<span
|
|
2899
|
+
class="pf-c-menu__item-text"
|
|
2900
|
+
>Application launcher</span>
|
|
2901
|
+
</span>
|
|
2902
|
+
</button>
|
|
2903
|
+
</div>
|
|
2904
|
+
<div class="pf-c-menu__search">
|
|
2905
|
+
<div class="pf-c-menu__search-input">
|
|
2906
|
+
<div class="pf-c-search-input">
|
|
2907
|
+
<div class="pf-c-search-input__bar">
|
|
2908
|
+
<span class="pf-c-search-input__text">
|
|
2909
|
+
<span class="pf-c-search-input__icon">
|
|
2910
|
+
<i
|
|
2911
|
+
class="fas fa-search fa-fw"
|
|
2912
|
+
aria-hidden="true"
|
|
2913
|
+
></i>
|
|
2914
|
+
</span>
|
|
2915
|
+
<input
|
|
2916
|
+
class="pf-c-search-input__text-input"
|
|
2917
|
+
type="text"
|
|
2918
|
+
placeholder="Search"
|
|
2919
|
+
aria-label="Search"
|
|
2920
|
+
/>
|
|
2921
|
+
</span>
|
|
2922
|
+
</div>
|
|
2923
|
+
</div>
|
|
2924
|
+
</div>
|
|
2925
|
+
</div>
|
|
2926
|
+
<hr class="pf-c-divider" />
|
|
2927
|
+
<section class="pf-c-menu__group">
|
|
2928
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
2929
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2930
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2931
|
+
<a
|
|
2932
|
+
class="pf-c-menu__item"
|
|
2933
|
+
href="#"
|
|
2934
|
+
role="menuitem"
|
|
2935
|
+
>
|
|
2936
|
+
<span class="pf-c-menu__item-main">
|
|
2937
|
+
<span
|
|
2938
|
+
class="pf-c-menu__item-text"
|
|
2939
|
+
>Link 1</span>
|
|
2940
|
+
</span>
|
|
2941
|
+
</a>
|
|
2942
|
+
<button
|
|
2943
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2944
|
+
type="button"
|
|
2945
|
+
aria-label="Starred"
|
|
2946
|
+
>
|
|
2947
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2948
|
+
<i
|
|
2949
|
+
class="fas fa-star"
|
|
2950
|
+
aria-hidden="true"
|
|
2951
|
+
></i>
|
|
2952
|
+
</span>
|
|
2953
|
+
</button>
|
|
2954
|
+
</li>
|
|
2955
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2956
|
+
<a
|
|
2957
|
+
class="pf-c-menu__item"
|
|
2958
|
+
href="#"
|
|
2959
|
+
role="menuitem"
|
|
2960
|
+
target="_blank"
|
|
2961
|
+
>
|
|
2962
|
+
<span class="pf-c-menu__item-main">
|
|
2963
|
+
<span
|
|
2964
|
+
class="pf-c-menu__item-text"
|
|
2965
|
+
>Link 2</span>
|
|
2966
|
+
<span
|
|
2967
|
+
class="pf-c-menu__item-external-icon"
|
|
2968
|
+
>
|
|
2969
|
+
<i
|
|
2970
|
+
class="fas fa-external-link-alt"
|
|
2971
|
+
aria-hidden="true"
|
|
2972
|
+
></i>
|
|
2973
|
+
</span>
|
|
2974
|
+
<span
|
|
2975
|
+
class="pf-screen-reader"
|
|
2976
|
+
>(opens new window)</span>
|
|
2977
|
+
</span>
|
|
2978
|
+
</a>
|
|
2979
|
+
<button
|
|
2980
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2981
|
+
type="button"
|
|
2982
|
+
aria-label="Not starred"
|
|
2983
|
+
>
|
|
2984
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2985
|
+
<i
|
|
2986
|
+
class="fas fa-star"
|
|
2987
|
+
aria-hidden="true"
|
|
2988
|
+
></i>
|
|
2989
|
+
</span>
|
|
2990
|
+
</button>
|
|
2991
|
+
</li>
|
|
2992
|
+
</ul>
|
|
2993
|
+
</section>
|
|
2994
|
+
<hr class="pf-c-divider" />
|
|
2995
|
+
<section class="pf-c-menu__group">
|
|
2996
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
2997
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2998
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2999
|
+
<a
|
|
3000
|
+
class="pf-c-menu__item"
|
|
3001
|
+
href="#"
|
|
3002
|
+
role="menuitem"
|
|
3003
|
+
>
|
|
3004
|
+
<span class="pf-c-menu__item-main">
|
|
3005
|
+
<span
|
|
3006
|
+
class="pf-c-menu__item-text"
|
|
3007
|
+
>Link 1</span>
|
|
3008
|
+
</span>
|
|
3009
|
+
</a>
|
|
3010
|
+
<button
|
|
3011
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
3012
|
+
type="button"
|
|
3013
|
+
aria-label="Not starred"
|
|
3014
|
+
>
|
|
3015
|
+
<span class="pf-c-menu__item-action-icon">
|
|
3016
|
+
<i
|
|
3017
|
+
class="fas fa-star"
|
|
3018
|
+
aria-hidden="true"
|
|
3019
|
+
></i>
|
|
3020
|
+
</span>
|
|
3021
|
+
</button>
|
|
3022
|
+
</li>
|
|
3023
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3024
|
+
<a
|
|
3025
|
+
class="pf-c-menu__item"
|
|
3026
|
+
href="#"
|
|
3027
|
+
role="menuitem"
|
|
3028
|
+
target="_blank"
|
|
3029
|
+
>
|
|
3030
|
+
<span class="pf-c-menu__item-main">
|
|
3031
|
+
<span
|
|
3032
|
+
class="pf-c-menu__item-text"
|
|
3033
|
+
>Link 2</span>
|
|
3034
|
+
<span
|
|
3035
|
+
class="pf-c-menu__item-external-icon"
|
|
3036
|
+
>
|
|
3037
|
+
<i
|
|
3038
|
+
class="fas fa-external-link-alt"
|
|
3039
|
+
aria-hidden="true"
|
|
3040
|
+
></i>
|
|
3041
|
+
</span>
|
|
3042
|
+
<span
|
|
3043
|
+
class="pf-screen-reader"
|
|
3044
|
+
>(opens new window)</span>
|
|
3045
|
+
</span>
|
|
3046
|
+
</a>
|
|
3047
|
+
<button
|
|
3048
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
3049
|
+
type="button"
|
|
3050
|
+
aria-label="Starred"
|
|
3051
|
+
>
|
|
3052
|
+
<span class="pf-c-menu__item-action-icon">
|
|
3053
|
+
<i
|
|
3054
|
+
class="fas fa-star"
|
|
3055
|
+
aria-hidden="true"
|
|
3056
|
+
></i>
|
|
3057
|
+
</span>
|
|
3058
|
+
</button>
|
|
3059
|
+
</li>
|
|
3060
|
+
</ul>
|
|
3061
|
+
</section>
|
|
3062
|
+
</div>
|
|
3063
|
+
</li>
|
|
3064
|
+
</ul>
|
|
3065
|
+
</section>
|
|
3066
|
+
</div>
|
|
3067
|
+
</div>
|
|
3068
|
+
</div>
|
|
3069
|
+
</div>
|
|
3070
|
+
</div>
|
|
3071
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
3072
|
+
<div
|
|
3073
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
3074
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
3075
|
+
>
|
|
633
3076
|
<button
|
|
634
|
-
class="pf-c-
|
|
3077
|
+
class="pf-c-dropdown__toggle"
|
|
3078
|
+
id="wizard-in-page-example-masthead-profile-button"
|
|
3079
|
+
aria-expanded="false"
|
|
635
3080
|
type="button"
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
3081
|
+
>
|
|
3082
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
3083
|
+
<img
|
|
3084
|
+
class="pf-c-avatar"
|
|
3085
|
+
src="/assets/images/img_avatar.svg"
|
|
3086
|
+
alt="Avatar image"
|
|
3087
|
+
/>
|
|
3088
|
+
</span>
|
|
3089
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
3090
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
3091
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3092
|
+
</span>
|
|
3093
|
+
</button>
|
|
3094
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
3095
|
+
<section class="pf-c-dropdown__group">
|
|
3096
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
3097
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
3098
|
+
<div>123456789</div>
|
|
3099
|
+
</div>
|
|
3100
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
3101
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
3102
|
+
<div>mshaksho@redhat.com</div>
|
|
3103
|
+
</div>
|
|
3104
|
+
</section>
|
|
3105
|
+
<hr class="pf-c-divider" />
|
|
3106
|
+
<section class="pf-c-dropdown__group">
|
|
3107
|
+
<ul>
|
|
3108
|
+
<li>
|
|
3109
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
3110
|
+
</li>
|
|
3111
|
+
<li>
|
|
3112
|
+
<a
|
|
3113
|
+
class="pf-c-dropdown__menu-item"
|
|
3114
|
+
href="#"
|
|
3115
|
+
>User management</a>
|
|
3116
|
+
</li>
|
|
3117
|
+
<li>
|
|
3118
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
3119
|
+
</li>
|
|
3120
|
+
</ul>
|
|
3121
|
+
</section>
|
|
3122
|
+
</div>
|
|
3123
|
+
</div>
|
|
3124
|
+
</div>
|
|
644
3125
|
</div>
|
|
645
3126
|
</div>
|
|
646
3127
|
</div>
|
|
647
|
-
<img
|
|
648
|
-
class="pf-c-avatar"
|
|
649
|
-
src="/assets/images/img_avatar.svg"
|
|
650
|
-
alt="Avatar image"
|
|
651
|
-
/>
|
|
652
3128
|
</div>
|
|
653
3129
|
</header>
|
|
654
3130
|
<div class="pf-c-page__sidebar">
|
|
655
3131
|
<div class="pf-c-page__sidebar-body">
|
|
656
|
-
<nav
|
|
3132
|
+
<nav
|
|
3133
|
+
class="pf-c-nav"
|
|
3134
|
+
id="wizard-in-page-example-primary-nav"
|
|
3135
|
+
aria-label="Global"
|
|
3136
|
+
>
|
|
657
3137
|
<ul class="pf-c-nav__list">
|
|
3138
|
+
<li class="pf-c-nav__item">
|
|
3139
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
3140
|
+
</li>
|
|
658
3141
|
<li class="pf-c-nav__item">
|
|
659
3142
|
<a
|
|
660
3143
|
href="#"
|
|
661
3144
|
class="pf-c-nav__link pf-m-current"
|
|
662
3145
|
aria-current="page"
|
|
663
|
-
>
|
|
664
|
-
</li>
|
|
665
|
-
<li class="pf-c-nav__item">
|
|
666
|
-
<a href="#" class="pf-c-nav__link">Policy</a>
|
|
3146
|
+
>Policy</a>
|
|
667
3147
|
</li>
|
|
668
3148
|
<li class="pf-c-nav__item">
|
|
669
3149
|
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
@@ -678,7 +3158,11 @@ wrapperTag: div
|
|
|
678
3158
|
</nav>
|
|
679
3159
|
</div>
|
|
680
3160
|
</div>
|
|
681
|
-
<main
|
|
3161
|
+
<main
|
|
3162
|
+
class="pf-c-page__main"
|
|
3163
|
+
tabindex="-1"
|
|
3164
|
+
id="main-content-wizard-in-page-example"
|
|
3165
|
+
>
|
|
682
3166
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
683
3167
|
<div class="pf-c-page__main-body">
|
|
684
3168
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -723,6 +3207,7 @@ wrapperTag: div
|
|
|
723
3207
|
</div>
|
|
724
3208
|
</div>
|
|
725
3209
|
</section>
|
|
3210
|
+
|
|
726
3211
|
<section class="pf-c-page__main-wizard pf-m-limit-width">
|
|
727
3212
|
<div class="pf-c-page__main-body">
|
|
728
3213
|
<div class="pf-c-wizard">
|
|
@@ -784,7 +3269,7 @@ wrapperTag: div
|
|
|
784
3269
|
</li>
|
|
785
3270
|
</ol>
|
|
786
3271
|
</nav>
|
|
787
|
-
<div class="pf-c-wizard__main">
|
|
3272
|
+
<div class="pf-c-wizard__main" tabindex="0">
|
|
788
3273
|
<div class="pf-c-wizard__main-body">
|
|
789
3274
|
<form novalidate class="pf-c-form">
|
|
790
3275
|
<div class="pf-c-form__group">
|
|
@@ -950,177 +3435,821 @@ wrapperTag: div
|
|
|
950
3435
|
### In page nav expanded (mobile)
|
|
951
3436
|
|
|
952
3437
|
```html isFullscreen
|
|
953
|
-
<div class="pf-c-page" id="
|
|
3438
|
+
<div class="pf-c-page" id="in-page-nav-expanded-example">
|
|
954
3439
|
<a
|
|
955
3440
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
956
|
-
href="#main-content-
|
|
3441
|
+
href="#main-content-in-page-nav-expanded-example"
|
|
957
3442
|
>Skip to content</a>
|
|
958
|
-
<header class="pf-c-
|
|
959
|
-
<
|
|
960
|
-
<
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
3443
|
+
<header class="pf-c-masthead" id="in-page-nav-expanded-example-masthead">
|
|
3444
|
+
<span class="pf-c-masthead__toggle">
|
|
3445
|
+
<button
|
|
3446
|
+
class="pf-c-button pf-m-plain"
|
|
3447
|
+
type="button"
|
|
3448
|
+
aria-label="Global navigation"
|
|
3449
|
+
>
|
|
3450
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
3451
|
+
</button>
|
|
3452
|
+
</span>
|
|
3453
|
+
<div class="pf-c-masthead__main">
|
|
3454
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
3455
|
+
<picture
|
|
3456
|
+
class="pf-c-brand pf-m-picture"
|
|
3457
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
968
3458
|
>
|
|
969
|
-
<
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
3459
|
+
<source
|
|
3460
|
+
media="(min-width: 768px)"
|
|
3461
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
3462
|
+
/>
|
|
3463
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
3464
|
+
<img
|
|
3465
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
3466
|
+
alt="Fallback patternFly default logo"
|
|
3467
|
+
/>
|
|
3468
|
+
</picture>
|
|
978
3469
|
</a>
|
|
979
3470
|
</div>
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
>
|
|
986
|
-
<
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
aria-label="Settings"
|
|
990
|
-
>
|
|
991
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
992
|
-
</button>
|
|
993
|
-
</div>
|
|
994
|
-
<div
|
|
995
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
996
|
-
>
|
|
997
|
-
<button
|
|
998
|
-
class="pf-c-button pf-m-plain"
|
|
999
|
-
type="button"
|
|
1000
|
-
aria-label="Help"
|
|
1001
|
-
>
|
|
1002
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1003
|
-
</button>
|
|
1004
|
-
</div>
|
|
1005
|
-
</div>
|
|
1006
|
-
<div class="pf-c-page__header-tools-group">
|
|
1007
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
1008
|
-
<div class="pf-c-dropdown">
|
|
1009
|
-
<button
|
|
1010
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1011
|
-
id="wizard-in-page-expanded-dropdown-kebab-1-button"
|
|
1012
|
-
aria-expanded="false"
|
|
1013
|
-
type="button"
|
|
1014
|
-
aria-label="Actions"
|
|
1015
|
-
>
|
|
1016
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1017
|
-
</button>
|
|
1018
|
-
<ul
|
|
1019
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1020
|
-
aria-labelledby="wizard-in-page-expanded-dropdown-kebab-1-button"
|
|
1021
|
-
hidden
|
|
3471
|
+
<div class="pf-c-masthead__content">
|
|
3472
|
+
<div
|
|
3473
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
3474
|
+
id="in-page-nav-expanded-example-masthead-toolbar"
|
|
3475
|
+
>
|
|
3476
|
+
<div class="pf-c-toolbar__content">
|
|
3477
|
+
<div class="pf-c-toolbar__content-section">
|
|
3478
|
+
<div
|
|
3479
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1022
3480
|
>
|
|
1023
|
-
<
|
|
1024
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1025
|
-
</li>
|
|
1026
|
-
<li>
|
|
1027
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1028
|
-
</li>
|
|
1029
|
-
<li>
|
|
1030
|
-
<a
|
|
1031
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1032
|
-
href="#"
|
|
1033
|
-
aria-disabled="true"
|
|
1034
|
-
tabindex="-1"
|
|
1035
|
-
>Disabled link</a>
|
|
1036
|
-
</li>
|
|
1037
|
-
<li>
|
|
3481
|
+
<div class="pf-c-toolbar__item">
|
|
1038
3482
|
<button
|
|
1039
|
-
class="pf-c-
|
|
3483
|
+
class="pf-c-button pf-m-plain"
|
|
1040
3484
|
type="button"
|
|
1041
|
-
|
|
1042
|
-
>
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
</
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
3485
|
+
aria-label="Notifications"
|
|
3486
|
+
>
|
|
3487
|
+
<span class="pf-c-notification-badge">
|
|
3488
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
3489
|
+
</span>
|
|
3490
|
+
</button>
|
|
3491
|
+
</div>
|
|
3492
|
+
<div
|
|
3493
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
3494
|
+
>
|
|
3495
|
+
<div class="pf-c-toolbar__item">
|
|
3496
|
+
<nav
|
|
3497
|
+
class="pf-c-app-launcher"
|
|
3498
|
+
aria-label="Application launcher"
|
|
3499
|
+
id="in-page-nav-expanded-example-masthead-icon-group--app-launcher"
|
|
3500
|
+
>
|
|
3501
|
+
<button
|
|
3502
|
+
class="pf-c-app-launcher__toggle"
|
|
3503
|
+
type="button"
|
|
3504
|
+
id="in-page-nav-expanded-example-masthead-icon-group--app-launcher-button"
|
|
3505
|
+
aria-expanded="false"
|
|
3506
|
+
aria-label="Application launcher"
|
|
3507
|
+
>
|
|
3508
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
3509
|
+
</button>
|
|
3510
|
+
<div
|
|
3511
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
3512
|
+
hidden
|
|
3513
|
+
>
|
|
3514
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
3515
|
+
<div class="pf-c-search-input">
|
|
3516
|
+
<div class="pf-c-search-input__bar">
|
|
3517
|
+
<span class="pf-c-search-input__text">
|
|
3518
|
+
<span class="pf-c-search-input__icon">
|
|
3519
|
+
<i
|
|
3520
|
+
class="fas fa-search fa-fw"
|
|
3521
|
+
aria-hidden="true"
|
|
3522
|
+
></i>
|
|
3523
|
+
</span>
|
|
3524
|
+
<input
|
|
3525
|
+
class="pf-c-search-input__text-input"
|
|
3526
|
+
type="text"
|
|
3527
|
+
placeholder="Filter by name"
|
|
3528
|
+
aria-label="Filter by name"
|
|
3529
|
+
/>
|
|
3530
|
+
</span>
|
|
3531
|
+
</div>
|
|
3532
|
+
</div>
|
|
3533
|
+
</div>
|
|
3534
|
+
<section class="pf-c-app-launcher__group">
|
|
3535
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
3536
|
+
<ul>
|
|
3537
|
+
<li
|
|
3538
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
3539
|
+
>
|
|
3540
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3541
|
+
Link 1
|
|
3542
|
+
<span
|
|
3543
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3544
|
+
>
|
|
3545
|
+
<i
|
|
3546
|
+
class="fas fa-external-link-alt"
|
|
3547
|
+
aria-hidden="true"
|
|
3548
|
+
></i>
|
|
3549
|
+
</span>
|
|
3550
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3551
|
+
</a>
|
|
3552
|
+
<button
|
|
3553
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3554
|
+
type="button"
|
|
3555
|
+
aria-label="Favorite"
|
|
3556
|
+
>
|
|
3557
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3558
|
+
</button>
|
|
3559
|
+
</li>
|
|
3560
|
+
<li
|
|
3561
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
3562
|
+
>
|
|
3563
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3564
|
+
Link 2
|
|
3565
|
+
<span
|
|
3566
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3567
|
+
>
|
|
3568
|
+
<i
|
|
3569
|
+
class="fas fa-external-link-alt"
|
|
3570
|
+
aria-hidden="true"
|
|
3571
|
+
></i>
|
|
3572
|
+
</span>
|
|
3573
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3574
|
+
</a>
|
|
3575
|
+
<button
|
|
3576
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3577
|
+
type="button"
|
|
3578
|
+
aria-label="Favorite"
|
|
3579
|
+
>
|
|
3580
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3581
|
+
</button>
|
|
3582
|
+
</li>
|
|
3583
|
+
</ul>
|
|
3584
|
+
</section>
|
|
3585
|
+
<hr class="pf-c-divider" />
|
|
3586
|
+
<section class="pf-c-app-launcher__group">
|
|
3587
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
3588
|
+
<ul>
|
|
3589
|
+
<li
|
|
3590
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
3591
|
+
>
|
|
3592
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3593
|
+
Link 1
|
|
3594
|
+
<span
|
|
3595
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3596
|
+
>
|
|
3597
|
+
<i
|
|
3598
|
+
class="fas fa-external-link-alt"
|
|
3599
|
+
aria-hidden="true"
|
|
3600
|
+
></i>
|
|
3601
|
+
</span>
|
|
3602
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3603
|
+
</a>
|
|
3604
|
+
<button
|
|
3605
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3606
|
+
type="button"
|
|
3607
|
+
aria-label="Favorite"
|
|
3608
|
+
>
|
|
3609
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3610
|
+
</button>
|
|
3611
|
+
</li>
|
|
3612
|
+
<li
|
|
3613
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
3614
|
+
>
|
|
3615
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3616
|
+
Link 2
|
|
3617
|
+
<span
|
|
3618
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3619
|
+
>
|
|
3620
|
+
<i
|
|
3621
|
+
class="fas fa-external-link-alt"
|
|
3622
|
+
aria-hidden="true"
|
|
3623
|
+
></i>
|
|
3624
|
+
</span>
|
|
3625
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3626
|
+
</a>
|
|
3627
|
+
<button
|
|
3628
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3629
|
+
type="button"
|
|
3630
|
+
aria-label="Favorite"
|
|
3631
|
+
>
|
|
3632
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3633
|
+
</button>
|
|
3634
|
+
</li>
|
|
3635
|
+
</ul>
|
|
3636
|
+
</section>
|
|
3637
|
+
</div>
|
|
3638
|
+
</nav>
|
|
3639
|
+
</div>
|
|
3640
|
+
<div class="pf-c-toolbar__item">
|
|
3641
|
+
<div class="pf-c-dropdown">
|
|
3642
|
+
<button
|
|
3643
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3644
|
+
id="in-page-nav-expanded-example-masthead-settings-button"
|
|
3645
|
+
aria-expanded="false"
|
|
3646
|
+
type="button"
|
|
3647
|
+
aria-label="Settings"
|
|
3648
|
+
>
|
|
3649
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
3650
|
+
</button>
|
|
3651
|
+
<ul
|
|
3652
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3653
|
+
aria-labelledby="in-page-nav-expanded-example-masthead-settings-button"
|
|
3654
|
+
hidden
|
|
3655
|
+
>
|
|
3656
|
+
<li>
|
|
3657
|
+
<button
|
|
3658
|
+
class="pf-c-dropdown__menu-item"
|
|
3659
|
+
type="button"
|
|
3660
|
+
>Settings</button>
|
|
3661
|
+
</li>
|
|
3662
|
+
<li>
|
|
3663
|
+
<button
|
|
3664
|
+
class="pf-c-dropdown__menu-item"
|
|
3665
|
+
type="button"
|
|
3666
|
+
>Use the beta release</button>
|
|
3667
|
+
</li>
|
|
3668
|
+
</ul>
|
|
3669
|
+
</div>
|
|
3670
|
+
</div>
|
|
3671
|
+
<div class="pf-c-toolbar__item">
|
|
3672
|
+
<div class="pf-c-dropdown">
|
|
3673
|
+
<button
|
|
3674
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3675
|
+
id="in-page-nav-expanded-example-masthead-help-button"
|
|
3676
|
+
aria-expanded="false"
|
|
3677
|
+
type="button"
|
|
3678
|
+
aria-label="Help"
|
|
3679
|
+
>
|
|
3680
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
3681
|
+
</button>
|
|
3682
|
+
<ul
|
|
3683
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3684
|
+
aria-labelledby="in-page-nav-expanded-example-masthead-help-button"
|
|
3685
|
+
hidden
|
|
3686
|
+
>
|
|
3687
|
+
<li>
|
|
3688
|
+
<button
|
|
3689
|
+
class="pf-c-dropdown__menu-item"
|
|
3690
|
+
type="button"
|
|
3691
|
+
>Support options</button>
|
|
3692
|
+
</li>
|
|
3693
|
+
<li>
|
|
3694
|
+
<button
|
|
3695
|
+
class="pf-c-dropdown__menu-item"
|
|
3696
|
+
type="button"
|
|
3697
|
+
>Open support case</button>
|
|
3698
|
+
</li>
|
|
3699
|
+
<li>
|
|
3700
|
+
<button
|
|
3701
|
+
class="pf-c-dropdown__menu-item"
|
|
3702
|
+
type="button"
|
|
3703
|
+
>API documentation</button>
|
|
3704
|
+
</li>
|
|
3705
|
+
</ul>
|
|
3706
|
+
</div>
|
|
3707
|
+
</div>
|
|
3708
|
+
</div>
|
|
3709
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
3710
|
+
<div class="pf-c-dropdown">
|
|
3711
|
+
<button
|
|
3712
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
3713
|
+
type="button"
|
|
3714
|
+
aria-expanded="false"
|
|
3715
|
+
aria-label="Actions"
|
|
3716
|
+
>
|
|
3717
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
3718
|
+
</button>
|
|
3719
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
3720
|
+
<div class="pf-c-menu__content">
|
|
3721
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
3722
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3723
|
+
<li
|
|
3724
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
3725
|
+
role="none"
|
|
3726
|
+
>
|
|
3727
|
+
<button
|
|
3728
|
+
class="pf-c-menu__item"
|
|
3729
|
+
type="button"
|
|
3730
|
+
disabled
|
|
3731
|
+
role="menuitem"
|
|
3732
|
+
>
|
|
3733
|
+
<span class="pf-c-menu__item-description">
|
|
3734
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
3735
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
3736
|
+
</span>
|
|
3737
|
+
</button>
|
|
3738
|
+
</li>
|
|
3739
|
+
<li
|
|
3740
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
3741
|
+
role="none"
|
|
3742
|
+
>
|
|
3743
|
+
<button
|
|
3744
|
+
class="pf-c-menu__item"
|
|
3745
|
+
type="button"
|
|
3746
|
+
disabled
|
|
3747
|
+
role="menuitem"
|
|
3748
|
+
>
|
|
3749
|
+
<span class="pf-c-menu__item-description">
|
|
3750
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
3751
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
3752
|
+
</span>
|
|
3753
|
+
</button>
|
|
3754
|
+
</li>
|
|
3755
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3756
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3757
|
+
<button
|
|
3758
|
+
class="pf-c-menu__item"
|
|
3759
|
+
type="button"
|
|
3760
|
+
role="menuitem"
|
|
3761
|
+
>
|
|
3762
|
+
<span class="pf-c-menu__item-main">
|
|
3763
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
3764
|
+
</span>
|
|
3765
|
+
</button>
|
|
3766
|
+
</li>
|
|
3767
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3768
|
+
<button
|
|
3769
|
+
class="pf-c-menu__item"
|
|
3770
|
+
type="button"
|
|
3771
|
+
role="menuitem"
|
|
3772
|
+
>
|
|
3773
|
+
<span class="pf-c-menu__item-main">
|
|
3774
|
+
<span
|
|
3775
|
+
class="pf-c-menu__item-text"
|
|
3776
|
+
>User management</span>
|
|
3777
|
+
</span>
|
|
3778
|
+
</button>
|
|
3779
|
+
</li>
|
|
3780
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3781
|
+
<button
|
|
3782
|
+
class="pf-c-menu__item"
|
|
3783
|
+
type="button"
|
|
3784
|
+
role="menuitem"
|
|
3785
|
+
>
|
|
3786
|
+
<span class="pf-c-menu__item-main">
|
|
3787
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
3788
|
+
</span>
|
|
3789
|
+
</button>
|
|
3790
|
+
</li>
|
|
3791
|
+
</ul>
|
|
3792
|
+
</section>
|
|
3793
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
3794
|
+
<section class="pf-c-menu__group">
|
|
3795
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3796
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3797
|
+
<button
|
|
3798
|
+
class="pf-c-menu__item"
|
|
3799
|
+
type="button"
|
|
3800
|
+
role="menuitem"
|
|
3801
|
+
aria-expanded="false"
|
|
3802
|
+
>
|
|
3803
|
+
<span class="pf-c-menu__item-main">
|
|
3804
|
+
<span class="pf-c-menu__item-icon">
|
|
3805
|
+
<i
|
|
3806
|
+
class="fas fa-fw fa-cog"
|
|
3807
|
+
aria-hidden="true"
|
|
3808
|
+
></i>
|
|
3809
|
+
</span>
|
|
3810
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
3811
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3812
|
+
<i class="fas fa-angle-right"></i>
|
|
3813
|
+
</span>
|
|
3814
|
+
</span>
|
|
3815
|
+
</button>
|
|
3816
|
+
<div class="pf-c-menu" hidden>
|
|
3817
|
+
<div class="pf-c-menu__content">
|
|
3818
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3819
|
+
<li
|
|
3820
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
3821
|
+
role="none"
|
|
3822
|
+
>
|
|
3823
|
+
<button
|
|
3824
|
+
class="pf-c-menu__item"
|
|
3825
|
+
type="button"
|
|
3826
|
+
role="menuitem"
|
|
3827
|
+
>
|
|
3828
|
+
<span class="pf-c-menu__item-main">
|
|
3829
|
+
<span
|
|
3830
|
+
class="pf-c-menu__item-toggle-icon"
|
|
3831
|
+
>
|
|
3832
|
+
<i class="fas fa-angle-left"></i>
|
|
3833
|
+
</span>
|
|
3834
|
+
<span class="pf-c-menu__item-icon">
|
|
3835
|
+
<i
|
|
3836
|
+
class="fas fa-fw fa-cog"
|
|
3837
|
+
aria-hidden="true"
|
|
3838
|
+
></i>
|
|
3839
|
+
</span>
|
|
3840
|
+
<span
|
|
3841
|
+
class="pf-c-menu__item-text"
|
|
3842
|
+
>Settings</span>
|
|
3843
|
+
</span>
|
|
3844
|
+
</button>
|
|
3845
|
+
</li>
|
|
3846
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3847
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3848
|
+
<a
|
|
3849
|
+
class="pf-c-menu__item"
|
|
3850
|
+
href="#"
|
|
3851
|
+
role="menuitem"
|
|
3852
|
+
>
|
|
3853
|
+
<span class="pf-c-menu__item-main">
|
|
3854
|
+
<span
|
|
3855
|
+
class="pf-c-menu__item-text"
|
|
3856
|
+
>Customer support</span>
|
|
3857
|
+
</span>
|
|
3858
|
+
</a>
|
|
3859
|
+
</li>
|
|
3860
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3861
|
+
<a
|
|
3862
|
+
class="pf-c-menu__item"
|
|
3863
|
+
href="#"
|
|
3864
|
+
role="menuitem"
|
|
3865
|
+
>
|
|
3866
|
+
<span class="pf-c-menu__item-main">
|
|
3867
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
3868
|
+
</span>
|
|
3869
|
+
</a>
|
|
3870
|
+
</li>
|
|
3871
|
+
</ul>
|
|
3872
|
+
</div>
|
|
3873
|
+
</div>
|
|
3874
|
+
</li>
|
|
3875
|
+
|
|
3876
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3877
|
+
<button
|
|
3878
|
+
class="pf-c-menu__item"
|
|
3879
|
+
type="button"
|
|
3880
|
+
role="menuitem"
|
|
3881
|
+
aria-expanded="false"
|
|
3882
|
+
>
|
|
3883
|
+
<span class="pf-c-menu__item-main">
|
|
3884
|
+
<span class="pf-c-menu__item-icon">
|
|
3885
|
+
<i
|
|
3886
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
3887
|
+
aria-hidden="true"
|
|
3888
|
+
></i>
|
|
3889
|
+
</span>
|
|
3890
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
3891
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3892
|
+
<i class="fas fa-angle-right"></i>
|
|
3893
|
+
</span>
|
|
3894
|
+
</span>
|
|
3895
|
+
</button>
|
|
3896
|
+
<div class="pf-c-menu" hidden>
|
|
3897
|
+
<div class="pf-c-menu__content">
|
|
3898
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3899
|
+
<li
|
|
3900
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
3901
|
+
role="none"
|
|
3902
|
+
>
|
|
3903
|
+
<button
|
|
3904
|
+
class="pf-c-menu__item"
|
|
3905
|
+
type="button"
|
|
3906
|
+
role="menuitem"
|
|
3907
|
+
>
|
|
3908
|
+
<span class="pf-c-menu__item-main">
|
|
3909
|
+
<span
|
|
3910
|
+
class="pf-c-menu__item-toggle-icon"
|
|
3911
|
+
>
|
|
3912
|
+
<i class="fas fa-angle-left"></i>
|
|
3913
|
+
</span>
|
|
3914
|
+
<span class="pf-c-menu__item-icon">
|
|
3915
|
+
<i
|
|
3916
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
3917
|
+
aria-hidden="true"
|
|
3918
|
+
></i>
|
|
3919
|
+
</span>
|
|
3920
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
3921
|
+
</span>
|
|
3922
|
+
</button>
|
|
3923
|
+
</li>
|
|
3924
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3925
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3926
|
+
<a
|
|
3927
|
+
class="pf-c-menu__item"
|
|
3928
|
+
href="#"
|
|
3929
|
+
role="menuitem"
|
|
3930
|
+
>
|
|
3931
|
+
<span class="pf-c-menu__item-main">
|
|
3932
|
+
<span
|
|
3933
|
+
class="pf-c-menu__item-text"
|
|
3934
|
+
>Support options</span>
|
|
3935
|
+
</span>
|
|
3936
|
+
</a>
|
|
3937
|
+
</li>
|
|
3938
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3939
|
+
<a
|
|
3940
|
+
class="pf-c-menu__item"
|
|
3941
|
+
href="#"
|
|
3942
|
+
role="menuitem"
|
|
3943
|
+
>
|
|
3944
|
+
<span class="pf-c-menu__item-main">
|
|
3945
|
+
<span
|
|
3946
|
+
class="pf-c-menu__item-text"
|
|
3947
|
+
>Open support case</span>
|
|
3948
|
+
</span>
|
|
3949
|
+
</a>
|
|
3950
|
+
</li>
|
|
3951
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3952
|
+
<a
|
|
3953
|
+
class="pf-c-menu__item"
|
|
3954
|
+
href="#"
|
|
3955
|
+
role="menuitem"
|
|
3956
|
+
>
|
|
3957
|
+
<span class="pf-c-menu__item-main">
|
|
3958
|
+
<span
|
|
3959
|
+
class="pf-c-menu__item-text"
|
|
3960
|
+
>API documentation</span>
|
|
3961
|
+
</span>
|
|
3962
|
+
</a>
|
|
3963
|
+
</li>
|
|
3964
|
+
</ul>
|
|
3965
|
+
</div>
|
|
3966
|
+
</div>
|
|
3967
|
+
</li>
|
|
3968
|
+
|
|
3969
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3970
|
+
<button
|
|
3971
|
+
class="pf-c-menu__item"
|
|
3972
|
+
type="button"
|
|
3973
|
+
role="menuitem"
|
|
3974
|
+
>
|
|
3975
|
+
<span class="pf-c-menu__item-main">
|
|
3976
|
+
<span class="pf-c-menu__item-icon">
|
|
3977
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
3978
|
+
</span>
|
|
3979
|
+
<span
|
|
3980
|
+
class="pf-c-menu__item-text"
|
|
3981
|
+
>Application launcher</span>
|
|
3982
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3983
|
+
<i class="fas fa-angle-right"></i>
|
|
3984
|
+
</span>
|
|
3985
|
+
</span>
|
|
3986
|
+
</button>
|
|
3987
|
+
<div class="pf-c-menu" hidden>
|
|
3988
|
+
<div class="pf-c-menu__header">
|
|
3989
|
+
<button
|
|
3990
|
+
class="pf-c-menu__item"
|
|
3991
|
+
type="button"
|
|
3992
|
+
role="menuitem"
|
|
3993
|
+
>
|
|
3994
|
+
<span class="pf-c-menu__item-main">
|
|
3995
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3996
|
+
<i class="fas fa-angle-left"></i>
|
|
3997
|
+
</span>
|
|
3998
|
+
<span class="pf-c-menu__item-icon">
|
|
3999
|
+
<i
|
|
4000
|
+
class="fas fa-fw fa-th"
|
|
4001
|
+
aria-hidden="true"
|
|
4002
|
+
></i>
|
|
4003
|
+
</span>
|
|
4004
|
+
<span
|
|
4005
|
+
class="pf-c-menu__item-text"
|
|
4006
|
+
>Application launcher</span>
|
|
4007
|
+
</span>
|
|
4008
|
+
</button>
|
|
4009
|
+
</div>
|
|
4010
|
+
<div class="pf-c-menu__search">
|
|
4011
|
+
<div class="pf-c-menu__search-input">
|
|
4012
|
+
<div class="pf-c-search-input">
|
|
4013
|
+
<div class="pf-c-search-input__bar">
|
|
4014
|
+
<span class="pf-c-search-input__text">
|
|
4015
|
+
<span class="pf-c-search-input__icon">
|
|
4016
|
+
<i
|
|
4017
|
+
class="fas fa-search fa-fw"
|
|
4018
|
+
aria-hidden="true"
|
|
4019
|
+
></i>
|
|
4020
|
+
</span>
|
|
4021
|
+
<input
|
|
4022
|
+
class="pf-c-search-input__text-input"
|
|
4023
|
+
type="text"
|
|
4024
|
+
placeholder="Search"
|
|
4025
|
+
aria-label="Search"
|
|
4026
|
+
/>
|
|
4027
|
+
</span>
|
|
4028
|
+
</div>
|
|
4029
|
+
</div>
|
|
4030
|
+
</div>
|
|
4031
|
+
</div>
|
|
4032
|
+
<hr class="pf-c-divider" />
|
|
4033
|
+
<section class="pf-c-menu__group">
|
|
4034
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
4035
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4036
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4037
|
+
<a
|
|
4038
|
+
class="pf-c-menu__item"
|
|
4039
|
+
href="#"
|
|
4040
|
+
role="menuitem"
|
|
4041
|
+
>
|
|
4042
|
+
<span class="pf-c-menu__item-main">
|
|
4043
|
+
<span
|
|
4044
|
+
class="pf-c-menu__item-text"
|
|
4045
|
+
>Link 1</span>
|
|
4046
|
+
</span>
|
|
4047
|
+
</a>
|
|
4048
|
+
<button
|
|
4049
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
4050
|
+
type="button"
|
|
4051
|
+
aria-label="Starred"
|
|
4052
|
+
>
|
|
4053
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4054
|
+
<i
|
|
4055
|
+
class="fas fa-star"
|
|
4056
|
+
aria-hidden="true"
|
|
4057
|
+
></i>
|
|
4058
|
+
</span>
|
|
4059
|
+
</button>
|
|
4060
|
+
</li>
|
|
4061
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4062
|
+
<a
|
|
4063
|
+
class="pf-c-menu__item"
|
|
4064
|
+
href="#"
|
|
4065
|
+
role="menuitem"
|
|
4066
|
+
target="_blank"
|
|
4067
|
+
>
|
|
4068
|
+
<span class="pf-c-menu__item-main">
|
|
4069
|
+
<span
|
|
4070
|
+
class="pf-c-menu__item-text"
|
|
4071
|
+
>Link 2</span>
|
|
4072
|
+
<span
|
|
4073
|
+
class="pf-c-menu__item-external-icon"
|
|
4074
|
+
>
|
|
4075
|
+
<i
|
|
4076
|
+
class="fas fa-external-link-alt"
|
|
4077
|
+
aria-hidden="true"
|
|
4078
|
+
></i>
|
|
4079
|
+
</span>
|
|
4080
|
+
<span
|
|
4081
|
+
class="pf-screen-reader"
|
|
4082
|
+
>(opens new window)</span>
|
|
4083
|
+
</span>
|
|
4084
|
+
</a>
|
|
4085
|
+
<button
|
|
4086
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
4087
|
+
type="button"
|
|
4088
|
+
aria-label="Not starred"
|
|
4089
|
+
>
|
|
4090
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4091
|
+
<i
|
|
4092
|
+
class="fas fa-star"
|
|
4093
|
+
aria-hidden="true"
|
|
4094
|
+
></i>
|
|
4095
|
+
</span>
|
|
4096
|
+
</button>
|
|
4097
|
+
</li>
|
|
4098
|
+
</ul>
|
|
4099
|
+
</section>
|
|
4100
|
+
<hr class="pf-c-divider" />
|
|
4101
|
+
<section class="pf-c-menu__group">
|
|
4102
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
4103
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4104
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4105
|
+
<a
|
|
4106
|
+
class="pf-c-menu__item"
|
|
4107
|
+
href="#"
|
|
4108
|
+
role="menuitem"
|
|
4109
|
+
>
|
|
4110
|
+
<span class="pf-c-menu__item-main">
|
|
4111
|
+
<span
|
|
4112
|
+
class="pf-c-menu__item-text"
|
|
4113
|
+
>Link 1</span>
|
|
4114
|
+
</span>
|
|
4115
|
+
</a>
|
|
4116
|
+
<button
|
|
4117
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
4118
|
+
type="button"
|
|
4119
|
+
aria-label="Not starred"
|
|
4120
|
+
>
|
|
4121
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4122
|
+
<i
|
|
4123
|
+
class="fas fa-star"
|
|
4124
|
+
aria-hidden="true"
|
|
4125
|
+
></i>
|
|
4126
|
+
</span>
|
|
4127
|
+
</button>
|
|
4128
|
+
</li>
|
|
4129
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4130
|
+
<a
|
|
4131
|
+
class="pf-c-menu__item"
|
|
4132
|
+
href="#"
|
|
4133
|
+
role="menuitem"
|
|
4134
|
+
target="_blank"
|
|
4135
|
+
>
|
|
4136
|
+
<span class="pf-c-menu__item-main">
|
|
4137
|
+
<span
|
|
4138
|
+
class="pf-c-menu__item-text"
|
|
4139
|
+
>Link 2</span>
|
|
4140
|
+
<span
|
|
4141
|
+
class="pf-c-menu__item-external-icon"
|
|
4142
|
+
>
|
|
4143
|
+
<i
|
|
4144
|
+
class="fas fa-external-link-alt"
|
|
4145
|
+
aria-hidden="true"
|
|
4146
|
+
></i>
|
|
4147
|
+
</span>
|
|
4148
|
+
<span
|
|
4149
|
+
class="pf-screen-reader"
|
|
4150
|
+
>(opens new window)</span>
|
|
4151
|
+
</span>
|
|
4152
|
+
</a>
|
|
4153
|
+
<button
|
|
4154
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
4155
|
+
type="button"
|
|
4156
|
+
aria-label="Starred"
|
|
4157
|
+
>
|
|
4158
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4159
|
+
<i
|
|
4160
|
+
class="fas fa-star"
|
|
4161
|
+
aria-hidden="true"
|
|
4162
|
+
></i>
|
|
4163
|
+
</span>
|
|
4164
|
+
</button>
|
|
4165
|
+
</li>
|
|
4166
|
+
</ul>
|
|
4167
|
+
</section>
|
|
4168
|
+
</div>
|
|
4169
|
+
</li>
|
|
4170
|
+
</ul>
|
|
4171
|
+
</section>
|
|
4172
|
+
</div>
|
|
4173
|
+
</div>
|
|
4174
|
+
</div>
|
|
4175
|
+
</div>
|
|
4176
|
+
</div>
|
|
4177
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
4178
|
+
<div
|
|
4179
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
4180
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
4181
|
+
>
|
|
1086
4182
|
<button
|
|
1087
|
-
class="pf-c-
|
|
4183
|
+
class="pf-c-dropdown__toggle"
|
|
4184
|
+
id="in-page-nav-expanded-example-masthead-profile-button"
|
|
4185
|
+
aria-expanded="false"
|
|
1088
4186
|
type="button"
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
4187
|
+
>
|
|
4188
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
4189
|
+
<img
|
|
4190
|
+
class="pf-c-avatar"
|
|
4191
|
+
src="/assets/images/img_avatar.svg"
|
|
4192
|
+
alt="Avatar image"
|
|
4193
|
+
/>
|
|
4194
|
+
</span>
|
|
4195
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
4196
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
4197
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4198
|
+
</span>
|
|
4199
|
+
</button>
|
|
4200
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
4201
|
+
<section class="pf-c-dropdown__group">
|
|
4202
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
4203
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
4204
|
+
<div>123456789</div>
|
|
4205
|
+
</div>
|
|
4206
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
4207
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
4208
|
+
<div>mshaksho@redhat.com</div>
|
|
4209
|
+
</div>
|
|
4210
|
+
</section>
|
|
4211
|
+
<hr class="pf-c-divider" />
|
|
4212
|
+
<section class="pf-c-dropdown__group">
|
|
4213
|
+
<ul>
|
|
4214
|
+
<li>
|
|
4215
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
4216
|
+
</li>
|
|
4217
|
+
<li>
|
|
4218
|
+
<a
|
|
4219
|
+
class="pf-c-dropdown__menu-item"
|
|
4220
|
+
href="#"
|
|
4221
|
+
>User management</a>
|
|
4222
|
+
</li>
|
|
4223
|
+
<li>
|
|
4224
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
4225
|
+
</li>
|
|
4226
|
+
</ul>
|
|
4227
|
+
</section>
|
|
4228
|
+
</div>
|
|
4229
|
+
</div>
|
|
4230
|
+
</div>
|
|
1097
4231
|
</div>
|
|
1098
4232
|
</div>
|
|
1099
4233
|
</div>
|
|
1100
|
-
<img
|
|
1101
|
-
class="pf-c-avatar"
|
|
1102
|
-
src="/assets/images/img_avatar.svg"
|
|
1103
|
-
alt="Avatar image"
|
|
1104
|
-
/>
|
|
1105
4234
|
</div>
|
|
1106
4235
|
</header>
|
|
1107
4236
|
<div class="pf-c-page__sidebar">
|
|
1108
4237
|
<div class="pf-c-page__sidebar-body">
|
|
1109
4238
|
<nav
|
|
1110
4239
|
class="pf-c-nav"
|
|
1111
|
-
id="
|
|
4240
|
+
id="in-page-nav-expanded-example-primary-nav"
|
|
1112
4241
|
aria-label="Global"
|
|
1113
4242
|
>
|
|
1114
4243
|
<ul class="pf-c-nav__list">
|
|
4244
|
+
<li class="pf-c-nav__item">
|
|
4245
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
4246
|
+
</li>
|
|
1115
4247
|
<li class="pf-c-nav__item">
|
|
1116
4248
|
<a
|
|
1117
4249
|
href="#"
|
|
1118
4250
|
class="pf-c-nav__link pf-m-current"
|
|
1119
4251
|
aria-current="page"
|
|
1120
|
-
>
|
|
1121
|
-
</li>
|
|
1122
|
-
<li class="pf-c-nav__item">
|
|
1123
|
-
<a href="#" class="pf-c-nav__link">Policy</a>
|
|
4252
|
+
>Policy</a>
|
|
1124
4253
|
</li>
|
|
1125
4254
|
<li class="pf-c-nav__item">
|
|
1126
4255
|
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
@@ -1138,7 +4267,7 @@ wrapperTag: div
|
|
|
1138
4267
|
<main
|
|
1139
4268
|
class="pf-c-page__main"
|
|
1140
4269
|
tabindex="-1"
|
|
1141
|
-
id="main-content-
|
|
4270
|
+
id="main-content-in-page-nav-expanded-example"
|
|
1142
4271
|
>
|
|
1143
4272
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1144
4273
|
<div class="pf-c-page__main-body">
|
|
@@ -1184,6 +4313,7 @@ wrapperTag: div
|
|
|
1184
4313
|
</div>
|
|
1185
4314
|
</div>
|
|
1186
4315
|
</section>
|
|
4316
|
+
|
|
1187
4317
|
<section class="pf-c-page__main-wizard pf-m-limit-width">
|
|
1188
4318
|
<div class="pf-c-page__main-body">
|
|
1189
4319
|
<div class="pf-c-wizard">
|
|
@@ -1245,7 +4375,7 @@ wrapperTag: div
|
|
|
1245
4375
|
</li>
|
|
1246
4376
|
</ol>
|
|
1247
4377
|
</nav>
|
|
1248
|
-
<div class="pf-c-wizard__main">
|
|
4378
|
+
<div class="pf-c-wizard__main" tabindex="0">
|
|
1249
4379
|
<div class="pf-c-wizard__main-body">
|
|
1250
4380
|
<form novalidate class="pf-c-form">
|
|
1251
4381
|
<div class="pf-c-form__group">
|