@patternfly/patternfly 4.184.3 → 4.185.2
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/RELEASE-NOTES.md +22 -0
- 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/Form/form.css +4 -2
- package/components/Form/form.scss +4 -2
- 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/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 +1065 -260
- 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 +3777 -1553
- package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
- package/docs/demos/Drawer/examples/Drawer.md +2554 -439
- 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 +5521 -34
- 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 +14 -35
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6003 -1512
- package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
- package/docs/demos/Table/examples/Table.md +26 -65
- package/docs/demos/Tabs/examples/Tabs.md +10149 -4897
- package/docs/demos/Toolbar/examples/Toolbar.md +797 -149
- package/docs/demos/Wizard/examples/Wizard.md +3418 -288
- 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 +11 -4
- package/patternfly.css +11 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -6,164 +6,809 @@ section: components
|
|
|
6
6
|
### Toast
|
|
7
7
|
|
|
8
8
|
```html isFullscreen
|
|
9
|
-
<div class="pf-c-page" id="alert-
|
|
9
|
+
<div class="pf-c-page" id="alert-basic-example">
|
|
10
10
|
<a
|
|
11
11
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
12
|
-
href="#main-content-alert-
|
|
12
|
+
href="#main-content-alert-basic-example"
|
|
13
13
|
>Skip to content</a>
|
|
14
|
-
<header class="pf-c-
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
<header class="pf-c-masthead" id="alert-basic-example-masthead">
|
|
15
|
+
<span class="pf-c-masthead__toggle">
|
|
16
|
+
<button
|
|
17
|
+
class="pf-c-button pf-m-plain"
|
|
18
|
+
type="button"
|
|
19
|
+
aria-label="Global navigation"
|
|
20
|
+
>
|
|
21
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
22
|
+
</button>
|
|
23
|
+
</span>
|
|
24
|
+
<div class="pf-c-masthead__main">
|
|
25
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
26
|
+
<picture
|
|
27
|
+
class="pf-c-brand pf-m-picture"
|
|
28
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
24
29
|
>
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
<source
|
|
31
|
+
media="(min-width: 768px)"
|
|
32
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
33
|
+
/>
|
|
34
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
35
|
+
<img
|
|
36
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
37
|
+
alt="Fallback patternFly default logo"
|
|
38
|
+
/>
|
|
39
|
+
</picture>
|
|
34
40
|
</a>
|
|
35
41
|
</div>
|
|
36
|
-
<div class="pf-c-
|
|
37
|
-
<div
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
>
|
|
46
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
47
|
-
</button>
|
|
48
|
-
</div>
|
|
49
|
-
<div
|
|
50
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
51
|
-
>
|
|
52
|
-
<button
|
|
53
|
-
class="pf-c-button pf-m-plain"
|
|
54
|
-
type="button"
|
|
55
|
-
aria-label="Help"
|
|
56
|
-
>
|
|
57
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
58
|
-
</button>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
<div class="pf-c-page__header-tools-group">
|
|
62
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
63
|
-
<div class="pf-c-dropdown">
|
|
64
|
-
<button
|
|
65
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
66
|
-
id="alert-toast-example-dropdown-kebab-1-button"
|
|
67
|
-
aria-expanded="false"
|
|
68
|
-
type="button"
|
|
69
|
-
aria-label="Actions"
|
|
70
|
-
>
|
|
71
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
72
|
-
</button>
|
|
73
|
-
<ul
|
|
74
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
75
|
-
aria-labelledby="alert-toast-example-dropdown-kebab-1-button"
|
|
76
|
-
hidden
|
|
42
|
+
<div class="pf-c-masthead__content">
|
|
43
|
+
<div
|
|
44
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
45
|
+
id="alert-basic-example-masthead-toolbar"
|
|
46
|
+
>
|
|
47
|
+
<div class="pf-c-toolbar__content">
|
|
48
|
+
<div class="pf-c-toolbar__content-section">
|
|
49
|
+
<div
|
|
50
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
77
51
|
>
|
|
78
|
-
<
|
|
79
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
80
|
-
</li>
|
|
81
|
-
<li>
|
|
82
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
83
|
-
</li>
|
|
84
|
-
<li>
|
|
85
|
-
<a
|
|
86
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
87
|
-
href="#"
|
|
88
|
-
aria-disabled="true"
|
|
89
|
-
tabindex="-1"
|
|
90
|
-
>Disabled link</a>
|
|
91
|
-
</li>
|
|
92
|
-
<li>
|
|
52
|
+
<div class="pf-c-toolbar__item">
|
|
93
53
|
<button
|
|
94
|
-
class="pf-c-
|
|
54
|
+
class="pf-c-button pf-m-plain"
|
|
95
55
|
type="button"
|
|
96
|
-
|
|
97
|
-
>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
</
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
56
|
+
aria-label="Notifications"
|
|
57
|
+
>
|
|
58
|
+
<span class="pf-c-notification-badge">
|
|
59
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
60
|
+
</span>
|
|
61
|
+
</button>
|
|
62
|
+
</div>
|
|
63
|
+
<div
|
|
64
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
65
|
+
>
|
|
66
|
+
<div class="pf-c-toolbar__item">
|
|
67
|
+
<nav
|
|
68
|
+
class="pf-c-app-launcher"
|
|
69
|
+
aria-label="Application launcher"
|
|
70
|
+
id="alert-basic-example-masthead-icon-group--app-launcher"
|
|
71
|
+
>
|
|
72
|
+
<button
|
|
73
|
+
class="pf-c-app-launcher__toggle"
|
|
74
|
+
type="button"
|
|
75
|
+
id="alert-basic-example-masthead-icon-group--app-launcher-button"
|
|
76
|
+
aria-expanded="false"
|
|
77
|
+
aria-label="Application launcher"
|
|
78
|
+
>
|
|
79
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
80
|
+
</button>
|
|
81
|
+
<div
|
|
82
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
83
|
+
hidden
|
|
84
|
+
>
|
|
85
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
86
|
+
<div class="pf-c-search-input">
|
|
87
|
+
<div class="pf-c-search-input__bar">
|
|
88
|
+
<span class="pf-c-search-input__text">
|
|
89
|
+
<span class="pf-c-search-input__icon">
|
|
90
|
+
<i
|
|
91
|
+
class="fas fa-search fa-fw"
|
|
92
|
+
aria-hidden="true"
|
|
93
|
+
></i>
|
|
94
|
+
</span>
|
|
95
|
+
<input
|
|
96
|
+
class="pf-c-search-input__text-input"
|
|
97
|
+
type="text"
|
|
98
|
+
placeholder="Filter by name"
|
|
99
|
+
aria-label="Filter by name"
|
|
100
|
+
/>
|
|
101
|
+
</span>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<section class="pf-c-app-launcher__group">
|
|
106
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
107
|
+
<ul>
|
|
108
|
+
<li
|
|
109
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
110
|
+
>
|
|
111
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
112
|
+
Link 1
|
|
113
|
+
<span
|
|
114
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
115
|
+
>
|
|
116
|
+
<i
|
|
117
|
+
class="fas fa-external-link-alt"
|
|
118
|
+
aria-hidden="true"
|
|
119
|
+
></i>
|
|
120
|
+
</span>
|
|
121
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
122
|
+
</a>
|
|
123
|
+
<button
|
|
124
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
125
|
+
type="button"
|
|
126
|
+
aria-label="Favorite"
|
|
127
|
+
>
|
|
128
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
129
|
+
</button>
|
|
130
|
+
</li>
|
|
131
|
+
<li
|
|
132
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
133
|
+
>
|
|
134
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
135
|
+
Link 2
|
|
136
|
+
<span
|
|
137
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
138
|
+
>
|
|
139
|
+
<i
|
|
140
|
+
class="fas fa-external-link-alt"
|
|
141
|
+
aria-hidden="true"
|
|
142
|
+
></i>
|
|
143
|
+
</span>
|
|
144
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
145
|
+
</a>
|
|
146
|
+
<button
|
|
147
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
148
|
+
type="button"
|
|
149
|
+
aria-label="Favorite"
|
|
150
|
+
>
|
|
151
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
152
|
+
</button>
|
|
153
|
+
</li>
|
|
154
|
+
</ul>
|
|
155
|
+
</section>
|
|
156
|
+
<hr class="pf-c-divider" />
|
|
157
|
+
<section class="pf-c-app-launcher__group">
|
|
158
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
159
|
+
<ul>
|
|
160
|
+
<li
|
|
161
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
162
|
+
>
|
|
163
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
164
|
+
Link 1
|
|
165
|
+
<span
|
|
166
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
167
|
+
>
|
|
168
|
+
<i
|
|
169
|
+
class="fas fa-external-link-alt"
|
|
170
|
+
aria-hidden="true"
|
|
171
|
+
></i>
|
|
172
|
+
</span>
|
|
173
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
174
|
+
</a>
|
|
175
|
+
<button
|
|
176
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
177
|
+
type="button"
|
|
178
|
+
aria-label="Favorite"
|
|
179
|
+
>
|
|
180
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
181
|
+
</button>
|
|
182
|
+
</li>
|
|
183
|
+
<li
|
|
184
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
185
|
+
>
|
|
186
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
187
|
+
Link 2
|
|
188
|
+
<span
|
|
189
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
190
|
+
>
|
|
191
|
+
<i
|
|
192
|
+
class="fas fa-external-link-alt"
|
|
193
|
+
aria-hidden="true"
|
|
194
|
+
></i>
|
|
195
|
+
</span>
|
|
196
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
197
|
+
</a>
|
|
198
|
+
<button
|
|
199
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
200
|
+
type="button"
|
|
201
|
+
aria-label="Favorite"
|
|
202
|
+
>
|
|
203
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
204
|
+
</button>
|
|
205
|
+
</li>
|
|
206
|
+
</ul>
|
|
207
|
+
</section>
|
|
208
|
+
</div>
|
|
209
|
+
</nav>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="pf-c-toolbar__item">
|
|
212
|
+
<div class="pf-c-dropdown">
|
|
213
|
+
<button
|
|
214
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
215
|
+
id="alert-basic-example-masthead-settings-button"
|
|
216
|
+
aria-expanded="false"
|
|
217
|
+
type="button"
|
|
218
|
+
aria-label="Settings"
|
|
219
|
+
>
|
|
220
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
221
|
+
</button>
|
|
222
|
+
<ul
|
|
223
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
224
|
+
aria-labelledby="alert-basic-example-masthead-settings-button"
|
|
225
|
+
hidden
|
|
226
|
+
>
|
|
227
|
+
<li>
|
|
228
|
+
<button
|
|
229
|
+
class="pf-c-dropdown__menu-item"
|
|
230
|
+
type="button"
|
|
231
|
+
>Settings</button>
|
|
232
|
+
</li>
|
|
233
|
+
<li>
|
|
234
|
+
<button
|
|
235
|
+
class="pf-c-dropdown__menu-item"
|
|
236
|
+
type="button"
|
|
237
|
+
>Use the beta release</button>
|
|
238
|
+
</li>
|
|
239
|
+
</ul>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="pf-c-toolbar__item">
|
|
243
|
+
<div class="pf-c-dropdown">
|
|
244
|
+
<button
|
|
245
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
246
|
+
id="alert-basic-example-masthead-help-button"
|
|
247
|
+
aria-expanded="false"
|
|
248
|
+
type="button"
|
|
249
|
+
aria-label="Help"
|
|
250
|
+
>
|
|
251
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
252
|
+
</button>
|
|
253
|
+
<ul
|
|
254
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
255
|
+
aria-labelledby="alert-basic-example-masthead-help-button"
|
|
256
|
+
hidden
|
|
257
|
+
>
|
|
258
|
+
<li>
|
|
259
|
+
<button
|
|
260
|
+
class="pf-c-dropdown__menu-item"
|
|
261
|
+
type="button"
|
|
262
|
+
>Support options</button>
|
|
263
|
+
</li>
|
|
264
|
+
<li>
|
|
265
|
+
<button
|
|
266
|
+
class="pf-c-dropdown__menu-item"
|
|
267
|
+
type="button"
|
|
268
|
+
>Open support case</button>
|
|
269
|
+
</li>
|
|
270
|
+
<li>
|
|
271
|
+
<button
|
|
272
|
+
class="pf-c-dropdown__menu-item"
|
|
273
|
+
type="button"
|
|
274
|
+
>API documentation</button>
|
|
275
|
+
</li>
|
|
276
|
+
</ul>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
281
|
+
<div class="pf-c-dropdown">
|
|
282
|
+
<button
|
|
283
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
284
|
+
type="button"
|
|
285
|
+
aria-expanded="false"
|
|
286
|
+
aria-label="Actions"
|
|
287
|
+
>
|
|
288
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
289
|
+
</button>
|
|
290
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
291
|
+
<div class="pf-c-menu__content">
|
|
292
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
293
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
294
|
+
<li
|
|
295
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
296
|
+
role="none"
|
|
297
|
+
>
|
|
298
|
+
<button
|
|
299
|
+
class="pf-c-menu__item"
|
|
300
|
+
type="button"
|
|
301
|
+
disabled
|
|
302
|
+
role="menuitem"
|
|
303
|
+
>
|
|
304
|
+
<span class="pf-c-menu__item-description">
|
|
305
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
306
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
307
|
+
</span>
|
|
308
|
+
</button>
|
|
309
|
+
</li>
|
|
310
|
+
<li
|
|
311
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
312
|
+
role="none"
|
|
313
|
+
>
|
|
314
|
+
<button
|
|
315
|
+
class="pf-c-menu__item"
|
|
316
|
+
type="button"
|
|
317
|
+
disabled
|
|
318
|
+
role="menuitem"
|
|
319
|
+
>
|
|
320
|
+
<span class="pf-c-menu__item-description">
|
|
321
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
322
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
323
|
+
</span>
|
|
324
|
+
</button>
|
|
325
|
+
</li>
|
|
326
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
327
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
328
|
+
<button
|
|
329
|
+
class="pf-c-menu__item"
|
|
330
|
+
type="button"
|
|
331
|
+
role="menuitem"
|
|
332
|
+
>
|
|
333
|
+
<span class="pf-c-menu__item-main">
|
|
334
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
335
|
+
</span>
|
|
336
|
+
</button>
|
|
337
|
+
</li>
|
|
338
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
339
|
+
<button
|
|
340
|
+
class="pf-c-menu__item"
|
|
341
|
+
type="button"
|
|
342
|
+
role="menuitem"
|
|
343
|
+
>
|
|
344
|
+
<span class="pf-c-menu__item-main">
|
|
345
|
+
<span
|
|
346
|
+
class="pf-c-menu__item-text"
|
|
347
|
+
>User management</span>
|
|
348
|
+
</span>
|
|
349
|
+
</button>
|
|
350
|
+
</li>
|
|
351
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
352
|
+
<button
|
|
353
|
+
class="pf-c-menu__item"
|
|
354
|
+
type="button"
|
|
355
|
+
role="menuitem"
|
|
356
|
+
>
|
|
357
|
+
<span class="pf-c-menu__item-main">
|
|
358
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
359
|
+
</span>
|
|
360
|
+
</button>
|
|
361
|
+
</li>
|
|
362
|
+
</ul>
|
|
363
|
+
</section>
|
|
364
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
365
|
+
<section class="pf-c-menu__group">
|
|
366
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
367
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
368
|
+
<button
|
|
369
|
+
class="pf-c-menu__item"
|
|
370
|
+
type="button"
|
|
371
|
+
role="menuitem"
|
|
372
|
+
aria-expanded="false"
|
|
373
|
+
>
|
|
374
|
+
<span class="pf-c-menu__item-main">
|
|
375
|
+
<span class="pf-c-menu__item-icon">
|
|
376
|
+
<i
|
|
377
|
+
class="fas fa-fw fa-cog"
|
|
378
|
+
aria-hidden="true"
|
|
379
|
+
></i>
|
|
380
|
+
</span>
|
|
381
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
382
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
383
|
+
<i class="fas fa-angle-right"></i>
|
|
384
|
+
</span>
|
|
385
|
+
</span>
|
|
386
|
+
</button>
|
|
387
|
+
<div class="pf-c-menu" hidden>
|
|
388
|
+
<div class="pf-c-menu__content">
|
|
389
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
390
|
+
<li
|
|
391
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
392
|
+
role="none"
|
|
393
|
+
>
|
|
394
|
+
<button
|
|
395
|
+
class="pf-c-menu__item"
|
|
396
|
+
type="button"
|
|
397
|
+
role="menuitem"
|
|
398
|
+
>
|
|
399
|
+
<span class="pf-c-menu__item-main">
|
|
400
|
+
<span
|
|
401
|
+
class="pf-c-menu__item-toggle-icon"
|
|
402
|
+
>
|
|
403
|
+
<i class="fas fa-angle-left"></i>
|
|
404
|
+
</span>
|
|
405
|
+
<span class="pf-c-menu__item-icon">
|
|
406
|
+
<i
|
|
407
|
+
class="fas fa-fw fa-cog"
|
|
408
|
+
aria-hidden="true"
|
|
409
|
+
></i>
|
|
410
|
+
</span>
|
|
411
|
+
<span
|
|
412
|
+
class="pf-c-menu__item-text"
|
|
413
|
+
>Settings</span>
|
|
414
|
+
</span>
|
|
415
|
+
</button>
|
|
416
|
+
</li>
|
|
417
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
418
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
419
|
+
<a
|
|
420
|
+
class="pf-c-menu__item"
|
|
421
|
+
href="#"
|
|
422
|
+
role="menuitem"
|
|
423
|
+
>
|
|
424
|
+
<span class="pf-c-menu__item-main">
|
|
425
|
+
<span
|
|
426
|
+
class="pf-c-menu__item-text"
|
|
427
|
+
>Customer support</span>
|
|
428
|
+
</span>
|
|
429
|
+
</a>
|
|
430
|
+
</li>
|
|
431
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
432
|
+
<a
|
|
433
|
+
class="pf-c-menu__item"
|
|
434
|
+
href="#"
|
|
435
|
+
role="menuitem"
|
|
436
|
+
>
|
|
437
|
+
<span class="pf-c-menu__item-main">
|
|
438
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
439
|
+
</span>
|
|
440
|
+
</a>
|
|
441
|
+
</li>
|
|
442
|
+
</ul>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
</li>
|
|
446
|
+
|
|
447
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
448
|
+
<button
|
|
449
|
+
class="pf-c-menu__item"
|
|
450
|
+
type="button"
|
|
451
|
+
role="menuitem"
|
|
452
|
+
aria-expanded="false"
|
|
453
|
+
>
|
|
454
|
+
<span class="pf-c-menu__item-main">
|
|
455
|
+
<span class="pf-c-menu__item-icon">
|
|
456
|
+
<i
|
|
457
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
458
|
+
aria-hidden="true"
|
|
459
|
+
></i>
|
|
460
|
+
</span>
|
|
461
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
462
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
463
|
+
<i class="fas fa-angle-right"></i>
|
|
464
|
+
</span>
|
|
465
|
+
</span>
|
|
466
|
+
</button>
|
|
467
|
+
<div class="pf-c-menu" hidden>
|
|
468
|
+
<div class="pf-c-menu__content">
|
|
469
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
470
|
+
<li
|
|
471
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
472
|
+
role="none"
|
|
473
|
+
>
|
|
474
|
+
<button
|
|
475
|
+
class="pf-c-menu__item"
|
|
476
|
+
type="button"
|
|
477
|
+
role="menuitem"
|
|
478
|
+
>
|
|
479
|
+
<span class="pf-c-menu__item-main">
|
|
480
|
+
<span
|
|
481
|
+
class="pf-c-menu__item-toggle-icon"
|
|
482
|
+
>
|
|
483
|
+
<i class="fas fa-angle-left"></i>
|
|
484
|
+
</span>
|
|
485
|
+
<span class="pf-c-menu__item-icon">
|
|
486
|
+
<i
|
|
487
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
488
|
+
aria-hidden="true"
|
|
489
|
+
></i>
|
|
490
|
+
</span>
|
|
491
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
492
|
+
</span>
|
|
493
|
+
</button>
|
|
494
|
+
</li>
|
|
495
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
496
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
497
|
+
<a
|
|
498
|
+
class="pf-c-menu__item"
|
|
499
|
+
href="#"
|
|
500
|
+
role="menuitem"
|
|
501
|
+
>
|
|
502
|
+
<span class="pf-c-menu__item-main">
|
|
503
|
+
<span
|
|
504
|
+
class="pf-c-menu__item-text"
|
|
505
|
+
>Support options</span>
|
|
506
|
+
</span>
|
|
507
|
+
</a>
|
|
508
|
+
</li>
|
|
509
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
510
|
+
<a
|
|
511
|
+
class="pf-c-menu__item"
|
|
512
|
+
href="#"
|
|
513
|
+
role="menuitem"
|
|
514
|
+
>
|
|
515
|
+
<span class="pf-c-menu__item-main">
|
|
516
|
+
<span
|
|
517
|
+
class="pf-c-menu__item-text"
|
|
518
|
+
>Open support case</span>
|
|
519
|
+
</span>
|
|
520
|
+
</a>
|
|
521
|
+
</li>
|
|
522
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
523
|
+
<a
|
|
524
|
+
class="pf-c-menu__item"
|
|
525
|
+
href="#"
|
|
526
|
+
role="menuitem"
|
|
527
|
+
>
|
|
528
|
+
<span class="pf-c-menu__item-main">
|
|
529
|
+
<span
|
|
530
|
+
class="pf-c-menu__item-text"
|
|
531
|
+
>API documentation</span>
|
|
532
|
+
</span>
|
|
533
|
+
</a>
|
|
534
|
+
</li>
|
|
535
|
+
</ul>
|
|
536
|
+
</div>
|
|
537
|
+
</div>
|
|
538
|
+
</li>
|
|
539
|
+
|
|
540
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
541
|
+
<button
|
|
542
|
+
class="pf-c-menu__item"
|
|
543
|
+
type="button"
|
|
544
|
+
role="menuitem"
|
|
545
|
+
>
|
|
546
|
+
<span class="pf-c-menu__item-main">
|
|
547
|
+
<span class="pf-c-menu__item-icon">
|
|
548
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
549
|
+
</span>
|
|
550
|
+
<span
|
|
551
|
+
class="pf-c-menu__item-text"
|
|
552
|
+
>Application launcher</span>
|
|
553
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
554
|
+
<i class="fas fa-angle-right"></i>
|
|
555
|
+
</span>
|
|
556
|
+
</span>
|
|
557
|
+
</button>
|
|
558
|
+
<div class="pf-c-menu" hidden>
|
|
559
|
+
<div class="pf-c-menu__header">
|
|
560
|
+
<button
|
|
561
|
+
class="pf-c-menu__item"
|
|
562
|
+
type="button"
|
|
563
|
+
role="menuitem"
|
|
564
|
+
>
|
|
565
|
+
<span class="pf-c-menu__item-main">
|
|
566
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
567
|
+
<i class="fas fa-angle-left"></i>
|
|
568
|
+
</span>
|
|
569
|
+
<span class="pf-c-menu__item-icon">
|
|
570
|
+
<i
|
|
571
|
+
class="fas fa-fw fa-th"
|
|
572
|
+
aria-hidden="true"
|
|
573
|
+
></i>
|
|
574
|
+
</span>
|
|
575
|
+
<span
|
|
576
|
+
class="pf-c-menu__item-text"
|
|
577
|
+
>Application launcher</span>
|
|
578
|
+
</span>
|
|
579
|
+
</button>
|
|
580
|
+
</div>
|
|
581
|
+
<div class="pf-c-menu__search">
|
|
582
|
+
<div class="pf-c-menu__search-input">
|
|
583
|
+
<div class="pf-c-search-input">
|
|
584
|
+
<div class="pf-c-search-input__bar">
|
|
585
|
+
<span class="pf-c-search-input__text">
|
|
586
|
+
<span class="pf-c-search-input__icon">
|
|
587
|
+
<i
|
|
588
|
+
class="fas fa-search fa-fw"
|
|
589
|
+
aria-hidden="true"
|
|
590
|
+
></i>
|
|
591
|
+
</span>
|
|
592
|
+
<input
|
|
593
|
+
class="pf-c-search-input__text-input"
|
|
594
|
+
type="text"
|
|
595
|
+
placeholder="Search"
|
|
596
|
+
aria-label="Search"
|
|
597
|
+
/>
|
|
598
|
+
</span>
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
<hr class="pf-c-divider" />
|
|
604
|
+
<section class="pf-c-menu__group">
|
|
605
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
606
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
607
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
608
|
+
<a
|
|
609
|
+
class="pf-c-menu__item"
|
|
610
|
+
href="#"
|
|
611
|
+
role="menuitem"
|
|
612
|
+
>
|
|
613
|
+
<span class="pf-c-menu__item-main">
|
|
614
|
+
<span
|
|
615
|
+
class="pf-c-menu__item-text"
|
|
616
|
+
>Link 1</span>
|
|
617
|
+
</span>
|
|
618
|
+
</a>
|
|
619
|
+
<button
|
|
620
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
621
|
+
type="button"
|
|
622
|
+
aria-label="Starred"
|
|
623
|
+
>
|
|
624
|
+
<span class="pf-c-menu__item-action-icon">
|
|
625
|
+
<i
|
|
626
|
+
class="fas fa-star"
|
|
627
|
+
aria-hidden="true"
|
|
628
|
+
></i>
|
|
629
|
+
</span>
|
|
630
|
+
</button>
|
|
631
|
+
</li>
|
|
632
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
633
|
+
<a
|
|
634
|
+
class="pf-c-menu__item"
|
|
635
|
+
href="#"
|
|
636
|
+
role="menuitem"
|
|
637
|
+
target="_blank"
|
|
638
|
+
>
|
|
639
|
+
<span class="pf-c-menu__item-main">
|
|
640
|
+
<span
|
|
641
|
+
class="pf-c-menu__item-text"
|
|
642
|
+
>Link 2</span>
|
|
643
|
+
<span
|
|
644
|
+
class="pf-c-menu__item-external-icon"
|
|
645
|
+
>
|
|
646
|
+
<i
|
|
647
|
+
class="fas fa-external-link-alt"
|
|
648
|
+
aria-hidden="true"
|
|
649
|
+
></i>
|
|
650
|
+
</span>
|
|
651
|
+
<span
|
|
652
|
+
class="pf-screen-reader"
|
|
653
|
+
>(opens new window)</span>
|
|
654
|
+
</span>
|
|
655
|
+
</a>
|
|
656
|
+
<button
|
|
657
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
658
|
+
type="button"
|
|
659
|
+
aria-label="Not starred"
|
|
660
|
+
>
|
|
661
|
+
<span class="pf-c-menu__item-action-icon">
|
|
662
|
+
<i
|
|
663
|
+
class="fas fa-star"
|
|
664
|
+
aria-hidden="true"
|
|
665
|
+
></i>
|
|
666
|
+
</span>
|
|
667
|
+
</button>
|
|
668
|
+
</li>
|
|
669
|
+
</ul>
|
|
670
|
+
</section>
|
|
671
|
+
<hr class="pf-c-divider" />
|
|
672
|
+
<section class="pf-c-menu__group">
|
|
673
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
674
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
675
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
676
|
+
<a
|
|
677
|
+
class="pf-c-menu__item"
|
|
678
|
+
href="#"
|
|
679
|
+
role="menuitem"
|
|
680
|
+
>
|
|
681
|
+
<span class="pf-c-menu__item-main">
|
|
682
|
+
<span
|
|
683
|
+
class="pf-c-menu__item-text"
|
|
684
|
+
>Link 1</span>
|
|
685
|
+
</span>
|
|
686
|
+
</a>
|
|
687
|
+
<button
|
|
688
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
689
|
+
type="button"
|
|
690
|
+
aria-label="Not starred"
|
|
691
|
+
>
|
|
692
|
+
<span class="pf-c-menu__item-action-icon">
|
|
693
|
+
<i
|
|
694
|
+
class="fas fa-star"
|
|
695
|
+
aria-hidden="true"
|
|
696
|
+
></i>
|
|
697
|
+
</span>
|
|
698
|
+
</button>
|
|
699
|
+
</li>
|
|
700
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
701
|
+
<a
|
|
702
|
+
class="pf-c-menu__item"
|
|
703
|
+
href="#"
|
|
704
|
+
role="menuitem"
|
|
705
|
+
target="_blank"
|
|
706
|
+
>
|
|
707
|
+
<span class="pf-c-menu__item-main">
|
|
708
|
+
<span
|
|
709
|
+
class="pf-c-menu__item-text"
|
|
710
|
+
>Link 2</span>
|
|
711
|
+
<span
|
|
712
|
+
class="pf-c-menu__item-external-icon"
|
|
713
|
+
>
|
|
714
|
+
<i
|
|
715
|
+
class="fas fa-external-link-alt"
|
|
716
|
+
aria-hidden="true"
|
|
717
|
+
></i>
|
|
718
|
+
</span>
|
|
719
|
+
<span
|
|
720
|
+
class="pf-screen-reader"
|
|
721
|
+
>(opens new window)</span>
|
|
722
|
+
</span>
|
|
723
|
+
</a>
|
|
724
|
+
<button
|
|
725
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
726
|
+
type="button"
|
|
727
|
+
aria-label="Starred"
|
|
728
|
+
>
|
|
729
|
+
<span class="pf-c-menu__item-action-icon">
|
|
730
|
+
<i
|
|
731
|
+
class="fas fa-star"
|
|
732
|
+
aria-hidden="true"
|
|
733
|
+
></i>
|
|
734
|
+
</span>
|
|
735
|
+
</button>
|
|
736
|
+
</li>
|
|
737
|
+
</ul>
|
|
738
|
+
</section>
|
|
739
|
+
</div>
|
|
740
|
+
</li>
|
|
741
|
+
</ul>
|
|
742
|
+
</section>
|
|
743
|
+
</div>
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
749
|
+
<div
|
|
750
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
751
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
752
|
+
>
|
|
141
753
|
<button
|
|
142
|
-
class="pf-c-
|
|
754
|
+
class="pf-c-dropdown__toggle"
|
|
755
|
+
id="alert-basic-example-masthead-profile-button"
|
|
756
|
+
aria-expanded="false"
|
|
143
757
|
type="button"
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
758
|
+
>
|
|
759
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
760
|
+
<img
|
|
761
|
+
class="pf-c-avatar"
|
|
762
|
+
src="/assets/images/img_avatar.svg"
|
|
763
|
+
alt="Avatar image"
|
|
764
|
+
/>
|
|
765
|
+
</span>
|
|
766
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
767
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
768
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
769
|
+
</span>
|
|
770
|
+
</button>
|
|
771
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
772
|
+
<section class="pf-c-dropdown__group">
|
|
773
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
774
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
775
|
+
<div>123456789</div>
|
|
776
|
+
</div>
|
|
777
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
778
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
779
|
+
<div>mshaksho@redhat.com</div>
|
|
780
|
+
</div>
|
|
781
|
+
</section>
|
|
782
|
+
<hr class="pf-c-divider" />
|
|
783
|
+
<section class="pf-c-dropdown__group">
|
|
784
|
+
<ul>
|
|
785
|
+
<li>
|
|
786
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
787
|
+
</li>
|
|
788
|
+
<li>
|
|
789
|
+
<a
|
|
790
|
+
class="pf-c-dropdown__menu-item"
|
|
791
|
+
href="#"
|
|
792
|
+
>User management</a>
|
|
793
|
+
</li>
|
|
794
|
+
<li>
|
|
795
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
796
|
+
</li>
|
|
797
|
+
</ul>
|
|
798
|
+
</section>
|
|
799
|
+
</div>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
152
802
|
</div>
|
|
153
803
|
</div>
|
|
154
804
|
</div>
|
|
155
|
-
<img
|
|
156
|
-
class="pf-c-avatar"
|
|
157
|
-
src="/assets/images/img_avatar.svg"
|
|
158
|
-
alt="Avatar image"
|
|
159
|
-
/>
|
|
160
805
|
</div>
|
|
161
806
|
</header>
|
|
162
807
|
<div class="pf-c-page__sidebar">
|
|
163
808
|
<div class="pf-c-page__sidebar-body">
|
|
164
809
|
<nav
|
|
165
810
|
class="pf-c-nav"
|
|
166
|
-
id="alert-
|
|
811
|
+
id="alert-basic-example-primary-nav"
|
|
167
812
|
aria-label="Global"
|
|
168
813
|
>
|
|
169
814
|
<ul class="pf-c-nav__list">
|
|
@@ -193,7 +838,7 @@ section: components
|
|
|
193
838
|
<main
|
|
194
839
|
class="pf-c-page__main"
|
|
195
840
|
tabindex="-1"
|
|
196
|
-
id="main-content-alert-
|
|
841
|
+
id="main-content-alert-basic-example"
|
|
197
842
|
>
|
|
198
843
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
199
844
|
<div class="pf-c-page__main-body">
|
|
@@ -354,162 +999,811 @@ section: components
|
|
|
354
999
|
### Inline Alert in Horizontal Form
|
|
355
1000
|
|
|
356
1001
|
```html isFullscreen
|
|
357
|
-
<div class="pf-c-page">
|
|
1002
|
+
<div class="pf-c-page" id="alert-horizontal-example">
|
|
358
1003
|
<a
|
|
359
1004
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
360
|
-
href="#main-content-"
|
|
1005
|
+
href="#main-content-alert-horizontal-example"
|
|
361
1006
|
>Skip to content</a>
|
|
362
|
-
<header class="pf-c-
|
|
363
|
-
<
|
|
364
|
-
<
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
1007
|
+
<header class="pf-c-masthead" id="alert-horizontal-example-masthead">
|
|
1008
|
+
<span class="pf-c-masthead__toggle">
|
|
1009
|
+
<button
|
|
1010
|
+
class="pf-c-button pf-m-plain"
|
|
1011
|
+
type="button"
|
|
1012
|
+
aria-label="Global navigation"
|
|
1013
|
+
>
|
|
1014
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1015
|
+
</button>
|
|
1016
|
+
</span>
|
|
1017
|
+
<div class="pf-c-masthead__main">
|
|
1018
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1019
|
+
<picture
|
|
1020
|
+
class="pf-c-brand pf-m-picture"
|
|
1021
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
372
1022
|
>
|
|
373
|
-
<
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
1023
|
+
<source
|
|
1024
|
+
media="(min-width: 768px)"
|
|
1025
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1026
|
+
/>
|
|
1027
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1028
|
+
<img
|
|
1029
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1030
|
+
alt="Fallback patternFly default logo"
|
|
1031
|
+
/>
|
|
1032
|
+
</picture>
|
|
382
1033
|
</a>
|
|
383
1034
|
</div>
|
|
384
|
-
<div class="pf-c-
|
|
385
|
-
<div
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
>
|
|
394
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
395
|
-
</button>
|
|
396
|
-
</div>
|
|
397
|
-
<div
|
|
398
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
399
|
-
>
|
|
400
|
-
<button
|
|
401
|
-
class="pf-c-button pf-m-plain"
|
|
402
|
-
type="button"
|
|
403
|
-
aria-label="Help"
|
|
404
|
-
>
|
|
405
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
406
|
-
</button>
|
|
407
|
-
</div>
|
|
408
|
-
</div>
|
|
409
|
-
<div class="pf-c-page__header-tools-group">
|
|
410
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
411
|
-
<div class="pf-c-dropdown">
|
|
412
|
-
<button
|
|
413
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
414
|
-
id="-dropdown-kebab-1-button"
|
|
415
|
-
aria-expanded="false"
|
|
416
|
-
type="button"
|
|
417
|
-
aria-label="Actions"
|
|
418
|
-
>
|
|
419
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
420
|
-
</button>
|
|
421
|
-
<ul
|
|
422
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
423
|
-
aria-labelledby="-dropdown-kebab-1-button"
|
|
424
|
-
hidden
|
|
1035
|
+
<div class="pf-c-masthead__content">
|
|
1036
|
+
<div
|
|
1037
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1038
|
+
id="alert-horizontal-example-masthead-toolbar"
|
|
1039
|
+
>
|
|
1040
|
+
<div class="pf-c-toolbar__content">
|
|
1041
|
+
<div class="pf-c-toolbar__content-section">
|
|
1042
|
+
<div
|
|
1043
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
425
1044
|
>
|
|
426
|
-
<
|
|
427
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
428
|
-
</li>
|
|
429
|
-
<li>
|
|
430
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
431
|
-
</li>
|
|
432
|
-
<li>
|
|
433
|
-
<a
|
|
434
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
435
|
-
href="#"
|
|
436
|
-
aria-disabled="true"
|
|
437
|
-
tabindex="-1"
|
|
438
|
-
>Disabled link</a>
|
|
439
|
-
</li>
|
|
440
|
-
<li>
|
|
1045
|
+
<div class="pf-c-toolbar__item">
|
|
441
1046
|
<button
|
|
442
|
-
class="pf-c-
|
|
1047
|
+
class="pf-c-button pf-m-plain"
|
|
443
1048
|
type="button"
|
|
444
|
-
|
|
445
|
-
>
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
</
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
1049
|
+
aria-label="Notifications"
|
|
1050
|
+
>
|
|
1051
|
+
<span class="pf-c-notification-badge">
|
|
1052
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
1053
|
+
</span>
|
|
1054
|
+
</button>
|
|
1055
|
+
</div>
|
|
1056
|
+
<div
|
|
1057
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1058
|
+
>
|
|
1059
|
+
<div class="pf-c-toolbar__item">
|
|
1060
|
+
<nav
|
|
1061
|
+
class="pf-c-app-launcher"
|
|
1062
|
+
aria-label="Application launcher"
|
|
1063
|
+
id="alert-horizontal-example-masthead-icon-group--app-launcher"
|
|
1064
|
+
>
|
|
1065
|
+
<button
|
|
1066
|
+
class="pf-c-app-launcher__toggle"
|
|
1067
|
+
type="button"
|
|
1068
|
+
id="alert-horizontal-example-masthead-icon-group--app-launcher-button"
|
|
1069
|
+
aria-expanded="false"
|
|
1070
|
+
aria-label="Application launcher"
|
|
1071
|
+
>
|
|
1072
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1073
|
+
</button>
|
|
1074
|
+
<div
|
|
1075
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1076
|
+
hidden
|
|
1077
|
+
>
|
|
1078
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1079
|
+
<div class="pf-c-search-input">
|
|
1080
|
+
<div class="pf-c-search-input__bar">
|
|
1081
|
+
<span class="pf-c-search-input__text">
|
|
1082
|
+
<span class="pf-c-search-input__icon">
|
|
1083
|
+
<i
|
|
1084
|
+
class="fas fa-search fa-fw"
|
|
1085
|
+
aria-hidden="true"
|
|
1086
|
+
></i>
|
|
1087
|
+
</span>
|
|
1088
|
+
<input
|
|
1089
|
+
class="pf-c-search-input__text-input"
|
|
1090
|
+
type="text"
|
|
1091
|
+
placeholder="Filter by name"
|
|
1092
|
+
aria-label="Filter by name"
|
|
1093
|
+
/>
|
|
1094
|
+
</span>
|
|
1095
|
+
</div>
|
|
1096
|
+
</div>
|
|
1097
|
+
</div>
|
|
1098
|
+
<section class="pf-c-app-launcher__group">
|
|
1099
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1100
|
+
<ul>
|
|
1101
|
+
<li
|
|
1102
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1103
|
+
>
|
|
1104
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1105
|
+
Link 1
|
|
1106
|
+
<span
|
|
1107
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1108
|
+
>
|
|
1109
|
+
<i
|
|
1110
|
+
class="fas fa-external-link-alt"
|
|
1111
|
+
aria-hidden="true"
|
|
1112
|
+
></i>
|
|
1113
|
+
</span>
|
|
1114
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1115
|
+
</a>
|
|
1116
|
+
<button
|
|
1117
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1118
|
+
type="button"
|
|
1119
|
+
aria-label="Favorite"
|
|
1120
|
+
>
|
|
1121
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1122
|
+
</button>
|
|
1123
|
+
</li>
|
|
1124
|
+
<li
|
|
1125
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1126
|
+
>
|
|
1127
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1128
|
+
Link 2
|
|
1129
|
+
<span
|
|
1130
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1131
|
+
>
|
|
1132
|
+
<i
|
|
1133
|
+
class="fas fa-external-link-alt"
|
|
1134
|
+
aria-hidden="true"
|
|
1135
|
+
></i>
|
|
1136
|
+
</span>
|
|
1137
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1138
|
+
</a>
|
|
1139
|
+
<button
|
|
1140
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1141
|
+
type="button"
|
|
1142
|
+
aria-label="Favorite"
|
|
1143
|
+
>
|
|
1144
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1145
|
+
</button>
|
|
1146
|
+
</li>
|
|
1147
|
+
</ul>
|
|
1148
|
+
</section>
|
|
1149
|
+
<hr class="pf-c-divider" />
|
|
1150
|
+
<section class="pf-c-app-launcher__group">
|
|
1151
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1152
|
+
<ul>
|
|
1153
|
+
<li
|
|
1154
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1155
|
+
>
|
|
1156
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1157
|
+
Link 1
|
|
1158
|
+
<span
|
|
1159
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1160
|
+
>
|
|
1161
|
+
<i
|
|
1162
|
+
class="fas fa-external-link-alt"
|
|
1163
|
+
aria-hidden="true"
|
|
1164
|
+
></i>
|
|
1165
|
+
</span>
|
|
1166
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1167
|
+
</a>
|
|
1168
|
+
<button
|
|
1169
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1170
|
+
type="button"
|
|
1171
|
+
aria-label="Favorite"
|
|
1172
|
+
>
|
|
1173
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1174
|
+
</button>
|
|
1175
|
+
</li>
|
|
1176
|
+
<li
|
|
1177
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1178
|
+
>
|
|
1179
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1180
|
+
Link 2
|
|
1181
|
+
<span
|
|
1182
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1183
|
+
>
|
|
1184
|
+
<i
|
|
1185
|
+
class="fas fa-external-link-alt"
|
|
1186
|
+
aria-hidden="true"
|
|
1187
|
+
></i>
|
|
1188
|
+
</span>
|
|
1189
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1190
|
+
</a>
|
|
1191
|
+
<button
|
|
1192
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1193
|
+
type="button"
|
|
1194
|
+
aria-label="Favorite"
|
|
1195
|
+
>
|
|
1196
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1197
|
+
</button>
|
|
1198
|
+
</li>
|
|
1199
|
+
</ul>
|
|
1200
|
+
</section>
|
|
1201
|
+
</div>
|
|
1202
|
+
</nav>
|
|
1203
|
+
</div>
|
|
1204
|
+
<div class="pf-c-toolbar__item">
|
|
1205
|
+
<div class="pf-c-dropdown">
|
|
1206
|
+
<button
|
|
1207
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1208
|
+
id="alert-horizontal-example-masthead-settings-button"
|
|
1209
|
+
aria-expanded="false"
|
|
1210
|
+
type="button"
|
|
1211
|
+
aria-label="Settings"
|
|
1212
|
+
>
|
|
1213
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1214
|
+
</button>
|
|
1215
|
+
<ul
|
|
1216
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1217
|
+
aria-labelledby="alert-horizontal-example-masthead-settings-button"
|
|
1218
|
+
hidden
|
|
1219
|
+
>
|
|
1220
|
+
<li>
|
|
1221
|
+
<button
|
|
1222
|
+
class="pf-c-dropdown__menu-item"
|
|
1223
|
+
type="button"
|
|
1224
|
+
>Settings</button>
|
|
1225
|
+
</li>
|
|
1226
|
+
<li>
|
|
1227
|
+
<button
|
|
1228
|
+
class="pf-c-dropdown__menu-item"
|
|
1229
|
+
type="button"
|
|
1230
|
+
>Use the beta release</button>
|
|
1231
|
+
</li>
|
|
1232
|
+
</ul>
|
|
1233
|
+
</div>
|
|
1234
|
+
</div>
|
|
1235
|
+
<div class="pf-c-toolbar__item">
|
|
1236
|
+
<div class="pf-c-dropdown">
|
|
1237
|
+
<button
|
|
1238
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1239
|
+
id="alert-horizontal-example-masthead-help-button"
|
|
1240
|
+
aria-expanded="false"
|
|
1241
|
+
type="button"
|
|
1242
|
+
aria-label="Help"
|
|
1243
|
+
>
|
|
1244
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1245
|
+
</button>
|
|
1246
|
+
<ul
|
|
1247
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1248
|
+
aria-labelledby="alert-horizontal-example-masthead-help-button"
|
|
1249
|
+
hidden
|
|
1250
|
+
>
|
|
1251
|
+
<li>
|
|
1252
|
+
<button
|
|
1253
|
+
class="pf-c-dropdown__menu-item"
|
|
1254
|
+
type="button"
|
|
1255
|
+
>Support options</button>
|
|
1256
|
+
</li>
|
|
1257
|
+
<li>
|
|
1258
|
+
<button
|
|
1259
|
+
class="pf-c-dropdown__menu-item"
|
|
1260
|
+
type="button"
|
|
1261
|
+
>Open support case</button>
|
|
1262
|
+
</li>
|
|
1263
|
+
<li>
|
|
1264
|
+
<button
|
|
1265
|
+
class="pf-c-dropdown__menu-item"
|
|
1266
|
+
type="button"
|
|
1267
|
+
>API documentation</button>
|
|
1268
|
+
</li>
|
|
1269
|
+
</ul>
|
|
1270
|
+
</div>
|
|
1271
|
+
</div>
|
|
1272
|
+
</div>
|
|
1273
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1274
|
+
<div class="pf-c-dropdown">
|
|
1275
|
+
<button
|
|
1276
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1277
|
+
type="button"
|
|
1278
|
+
aria-expanded="false"
|
|
1279
|
+
aria-label="Actions"
|
|
1280
|
+
>
|
|
1281
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1282
|
+
</button>
|
|
1283
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
1284
|
+
<div class="pf-c-menu__content">
|
|
1285
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1286
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1287
|
+
<li
|
|
1288
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1289
|
+
role="none"
|
|
1290
|
+
>
|
|
1291
|
+
<button
|
|
1292
|
+
class="pf-c-menu__item"
|
|
1293
|
+
type="button"
|
|
1294
|
+
disabled
|
|
1295
|
+
role="menuitem"
|
|
1296
|
+
>
|
|
1297
|
+
<span class="pf-c-menu__item-description">
|
|
1298
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1299
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
1300
|
+
</span>
|
|
1301
|
+
</button>
|
|
1302
|
+
</li>
|
|
1303
|
+
<li
|
|
1304
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1305
|
+
role="none"
|
|
1306
|
+
>
|
|
1307
|
+
<button
|
|
1308
|
+
class="pf-c-menu__item"
|
|
1309
|
+
type="button"
|
|
1310
|
+
disabled
|
|
1311
|
+
role="menuitem"
|
|
1312
|
+
>
|
|
1313
|
+
<span class="pf-c-menu__item-description">
|
|
1314
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1315
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1316
|
+
</span>
|
|
1317
|
+
</button>
|
|
1318
|
+
</li>
|
|
1319
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1320
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1321
|
+
<button
|
|
1322
|
+
class="pf-c-menu__item"
|
|
1323
|
+
type="button"
|
|
1324
|
+
role="menuitem"
|
|
1325
|
+
>
|
|
1326
|
+
<span class="pf-c-menu__item-main">
|
|
1327
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
1328
|
+
</span>
|
|
1329
|
+
</button>
|
|
1330
|
+
</li>
|
|
1331
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1332
|
+
<button
|
|
1333
|
+
class="pf-c-menu__item"
|
|
1334
|
+
type="button"
|
|
1335
|
+
role="menuitem"
|
|
1336
|
+
>
|
|
1337
|
+
<span class="pf-c-menu__item-main">
|
|
1338
|
+
<span
|
|
1339
|
+
class="pf-c-menu__item-text"
|
|
1340
|
+
>User management</span>
|
|
1341
|
+
</span>
|
|
1342
|
+
</button>
|
|
1343
|
+
</li>
|
|
1344
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1345
|
+
<button
|
|
1346
|
+
class="pf-c-menu__item"
|
|
1347
|
+
type="button"
|
|
1348
|
+
role="menuitem"
|
|
1349
|
+
>
|
|
1350
|
+
<span class="pf-c-menu__item-main">
|
|
1351
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1352
|
+
</span>
|
|
1353
|
+
</button>
|
|
1354
|
+
</li>
|
|
1355
|
+
</ul>
|
|
1356
|
+
</section>
|
|
1357
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1358
|
+
<section class="pf-c-menu__group">
|
|
1359
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1360
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1361
|
+
<button
|
|
1362
|
+
class="pf-c-menu__item"
|
|
1363
|
+
type="button"
|
|
1364
|
+
role="menuitem"
|
|
1365
|
+
aria-expanded="false"
|
|
1366
|
+
>
|
|
1367
|
+
<span class="pf-c-menu__item-main">
|
|
1368
|
+
<span class="pf-c-menu__item-icon">
|
|
1369
|
+
<i
|
|
1370
|
+
class="fas fa-fw fa-cog"
|
|
1371
|
+
aria-hidden="true"
|
|
1372
|
+
></i>
|
|
1373
|
+
</span>
|
|
1374
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1375
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1376
|
+
<i class="fas fa-angle-right"></i>
|
|
1377
|
+
</span>
|
|
1378
|
+
</span>
|
|
1379
|
+
</button>
|
|
1380
|
+
<div class="pf-c-menu" hidden>
|
|
1381
|
+
<div class="pf-c-menu__content">
|
|
1382
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1383
|
+
<li
|
|
1384
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1385
|
+
role="none"
|
|
1386
|
+
>
|
|
1387
|
+
<button
|
|
1388
|
+
class="pf-c-menu__item"
|
|
1389
|
+
type="button"
|
|
1390
|
+
role="menuitem"
|
|
1391
|
+
>
|
|
1392
|
+
<span class="pf-c-menu__item-main">
|
|
1393
|
+
<span
|
|
1394
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1395
|
+
>
|
|
1396
|
+
<i class="fas fa-angle-left"></i>
|
|
1397
|
+
</span>
|
|
1398
|
+
<span class="pf-c-menu__item-icon">
|
|
1399
|
+
<i
|
|
1400
|
+
class="fas fa-fw fa-cog"
|
|
1401
|
+
aria-hidden="true"
|
|
1402
|
+
></i>
|
|
1403
|
+
</span>
|
|
1404
|
+
<span
|
|
1405
|
+
class="pf-c-menu__item-text"
|
|
1406
|
+
>Settings</span>
|
|
1407
|
+
</span>
|
|
1408
|
+
</button>
|
|
1409
|
+
</li>
|
|
1410
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1411
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1412
|
+
<a
|
|
1413
|
+
class="pf-c-menu__item"
|
|
1414
|
+
href="#"
|
|
1415
|
+
role="menuitem"
|
|
1416
|
+
>
|
|
1417
|
+
<span class="pf-c-menu__item-main">
|
|
1418
|
+
<span
|
|
1419
|
+
class="pf-c-menu__item-text"
|
|
1420
|
+
>Customer support</span>
|
|
1421
|
+
</span>
|
|
1422
|
+
</a>
|
|
1423
|
+
</li>
|
|
1424
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1425
|
+
<a
|
|
1426
|
+
class="pf-c-menu__item"
|
|
1427
|
+
href="#"
|
|
1428
|
+
role="menuitem"
|
|
1429
|
+
>
|
|
1430
|
+
<span class="pf-c-menu__item-main">
|
|
1431
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
1432
|
+
</span>
|
|
1433
|
+
</a>
|
|
1434
|
+
</li>
|
|
1435
|
+
</ul>
|
|
1436
|
+
</div>
|
|
1437
|
+
</div>
|
|
1438
|
+
</li>
|
|
1439
|
+
|
|
1440
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1441
|
+
<button
|
|
1442
|
+
class="pf-c-menu__item"
|
|
1443
|
+
type="button"
|
|
1444
|
+
role="menuitem"
|
|
1445
|
+
aria-expanded="false"
|
|
1446
|
+
>
|
|
1447
|
+
<span class="pf-c-menu__item-main">
|
|
1448
|
+
<span class="pf-c-menu__item-icon">
|
|
1449
|
+
<i
|
|
1450
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1451
|
+
aria-hidden="true"
|
|
1452
|
+
></i>
|
|
1453
|
+
</span>
|
|
1454
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1455
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1456
|
+
<i class="fas fa-angle-right"></i>
|
|
1457
|
+
</span>
|
|
1458
|
+
</span>
|
|
1459
|
+
</button>
|
|
1460
|
+
<div class="pf-c-menu" hidden>
|
|
1461
|
+
<div class="pf-c-menu__content">
|
|
1462
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1463
|
+
<li
|
|
1464
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1465
|
+
role="none"
|
|
1466
|
+
>
|
|
1467
|
+
<button
|
|
1468
|
+
class="pf-c-menu__item"
|
|
1469
|
+
type="button"
|
|
1470
|
+
role="menuitem"
|
|
1471
|
+
>
|
|
1472
|
+
<span class="pf-c-menu__item-main">
|
|
1473
|
+
<span
|
|
1474
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1475
|
+
>
|
|
1476
|
+
<i class="fas fa-angle-left"></i>
|
|
1477
|
+
</span>
|
|
1478
|
+
<span class="pf-c-menu__item-icon">
|
|
1479
|
+
<i
|
|
1480
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1481
|
+
aria-hidden="true"
|
|
1482
|
+
></i>
|
|
1483
|
+
</span>
|
|
1484
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
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
|
+
<a
|
|
1491
|
+
class="pf-c-menu__item"
|
|
1492
|
+
href="#"
|
|
1493
|
+
role="menuitem"
|
|
1494
|
+
>
|
|
1495
|
+
<span class="pf-c-menu__item-main">
|
|
1496
|
+
<span
|
|
1497
|
+
class="pf-c-menu__item-text"
|
|
1498
|
+
>Support options</span>
|
|
1499
|
+
</span>
|
|
1500
|
+
</a>
|
|
1501
|
+
</li>
|
|
1502
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1503
|
+
<a
|
|
1504
|
+
class="pf-c-menu__item"
|
|
1505
|
+
href="#"
|
|
1506
|
+
role="menuitem"
|
|
1507
|
+
>
|
|
1508
|
+
<span class="pf-c-menu__item-main">
|
|
1509
|
+
<span
|
|
1510
|
+
class="pf-c-menu__item-text"
|
|
1511
|
+
>Open support case</span>
|
|
1512
|
+
</span>
|
|
1513
|
+
</a>
|
|
1514
|
+
</li>
|
|
1515
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1516
|
+
<a
|
|
1517
|
+
class="pf-c-menu__item"
|
|
1518
|
+
href="#"
|
|
1519
|
+
role="menuitem"
|
|
1520
|
+
>
|
|
1521
|
+
<span class="pf-c-menu__item-main">
|
|
1522
|
+
<span
|
|
1523
|
+
class="pf-c-menu__item-text"
|
|
1524
|
+
>API documentation</span>
|
|
1525
|
+
</span>
|
|
1526
|
+
</a>
|
|
1527
|
+
</li>
|
|
1528
|
+
</ul>
|
|
1529
|
+
</div>
|
|
1530
|
+
</div>
|
|
1531
|
+
</li>
|
|
1532
|
+
|
|
1533
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1534
|
+
<button
|
|
1535
|
+
class="pf-c-menu__item"
|
|
1536
|
+
type="button"
|
|
1537
|
+
role="menuitem"
|
|
1538
|
+
>
|
|
1539
|
+
<span class="pf-c-menu__item-main">
|
|
1540
|
+
<span class="pf-c-menu__item-icon">
|
|
1541
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
1542
|
+
</span>
|
|
1543
|
+
<span
|
|
1544
|
+
class="pf-c-menu__item-text"
|
|
1545
|
+
>Application launcher</span>
|
|
1546
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1547
|
+
<i class="fas fa-angle-right"></i>
|
|
1548
|
+
</span>
|
|
1549
|
+
</span>
|
|
1550
|
+
</button>
|
|
1551
|
+
<div class="pf-c-menu" hidden>
|
|
1552
|
+
<div class="pf-c-menu__header">
|
|
1553
|
+
<button
|
|
1554
|
+
class="pf-c-menu__item"
|
|
1555
|
+
type="button"
|
|
1556
|
+
role="menuitem"
|
|
1557
|
+
>
|
|
1558
|
+
<span class="pf-c-menu__item-main">
|
|
1559
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1560
|
+
<i class="fas fa-angle-left"></i>
|
|
1561
|
+
</span>
|
|
1562
|
+
<span class="pf-c-menu__item-icon">
|
|
1563
|
+
<i
|
|
1564
|
+
class="fas fa-fw fa-th"
|
|
1565
|
+
aria-hidden="true"
|
|
1566
|
+
></i>
|
|
1567
|
+
</span>
|
|
1568
|
+
<span
|
|
1569
|
+
class="pf-c-menu__item-text"
|
|
1570
|
+
>Application launcher</span>
|
|
1571
|
+
</span>
|
|
1572
|
+
</button>
|
|
1573
|
+
</div>
|
|
1574
|
+
<div class="pf-c-menu__search">
|
|
1575
|
+
<div class="pf-c-menu__search-input">
|
|
1576
|
+
<div class="pf-c-search-input">
|
|
1577
|
+
<div class="pf-c-search-input__bar">
|
|
1578
|
+
<span class="pf-c-search-input__text">
|
|
1579
|
+
<span class="pf-c-search-input__icon">
|
|
1580
|
+
<i
|
|
1581
|
+
class="fas fa-search fa-fw"
|
|
1582
|
+
aria-hidden="true"
|
|
1583
|
+
></i>
|
|
1584
|
+
</span>
|
|
1585
|
+
<input
|
|
1586
|
+
class="pf-c-search-input__text-input"
|
|
1587
|
+
type="text"
|
|
1588
|
+
placeholder="Search"
|
|
1589
|
+
aria-label="Search"
|
|
1590
|
+
/>
|
|
1591
|
+
</span>
|
|
1592
|
+
</div>
|
|
1593
|
+
</div>
|
|
1594
|
+
</div>
|
|
1595
|
+
</div>
|
|
1596
|
+
<hr class="pf-c-divider" />
|
|
1597
|
+
<section class="pf-c-menu__group">
|
|
1598
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1599
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1600
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1601
|
+
<a
|
|
1602
|
+
class="pf-c-menu__item"
|
|
1603
|
+
href="#"
|
|
1604
|
+
role="menuitem"
|
|
1605
|
+
>
|
|
1606
|
+
<span class="pf-c-menu__item-main">
|
|
1607
|
+
<span
|
|
1608
|
+
class="pf-c-menu__item-text"
|
|
1609
|
+
>Link 1</span>
|
|
1610
|
+
</span>
|
|
1611
|
+
</a>
|
|
1612
|
+
<button
|
|
1613
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1614
|
+
type="button"
|
|
1615
|
+
aria-label="Starred"
|
|
1616
|
+
>
|
|
1617
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1618
|
+
<i
|
|
1619
|
+
class="fas fa-star"
|
|
1620
|
+
aria-hidden="true"
|
|
1621
|
+
></i>
|
|
1622
|
+
</span>
|
|
1623
|
+
</button>
|
|
1624
|
+
</li>
|
|
1625
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1626
|
+
<a
|
|
1627
|
+
class="pf-c-menu__item"
|
|
1628
|
+
href="#"
|
|
1629
|
+
role="menuitem"
|
|
1630
|
+
target="_blank"
|
|
1631
|
+
>
|
|
1632
|
+
<span class="pf-c-menu__item-main">
|
|
1633
|
+
<span
|
|
1634
|
+
class="pf-c-menu__item-text"
|
|
1635
|
+
>Link 2</span>
|
|
1636
|
+
<span
|
|
1637
|
+
class="pf-c-menu__item-external-icon"
|
|
1638
|
+
>
|
|
1639
|
+
<i
|
|
1640
|
+
class="fas fa-external-link-alt"
|
|
1641
|
+
aria-hidden="true"
|
|
1642
|
+
></i>
|
|
1643
|
+
</span>
|
|
1644
|
+
<span
|
|
1645
|
+
class="pf-screen-reader"
|
|
1646
|
+
>(opens new window)</span>
|
|
1647
|
+
</span>
|
|
1648
|
+
</a>
|
|
1649
|
+
<button
|
|
1650
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1651
|
+
type="button"
|
|
1652
|
+
aria-label="Not starred"
|
|
1653
|
+
>
|
|
1654
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1655
|
+
<i
|
|
1656
|
+
class="fas fa-star"
|
|
1657
|
+
aria-hidden="true"
|
|
1658
|
+
></i>
|
|
1659
|
+
</span>
|
|
1660
|
+
</button>
|
|
1661
|
+
</li>
|
|
1662
|
+
</ul>
|
|
1663
|
+
</section>
|
|
1664
|
+
<hr class="pf-c-divider" />
|
|
1665
|
+
<section class="pf-c-menu__group">
|
|
1666
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1667
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1668
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1669
|
+
<a
|
|
1670
|
+
class="pf-c-menu__item"
|
|
1671
|
+
href="#"
|
|
1672
|
+
role="menuitem"
|
|
1673
|
+
>
|
|
1674
|
+
<span class="pf-c-menu__item-main">
|
|
1675
|
+
<span
|
|
1676
|
+
class="pf-c-menu__item-text"
|
|
1677
|
+
>Link 1</span>
|
|
1678
|
+
</span>
|
|
1679
|
+
</a>
|
|
1680
|
+
<button
|
|
1681
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1682
|
+
type="button"
|
|
1683
|
+
aria-label="Not starred"
|
|
1684
|
+
>
|
|
1685
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1686
|
+
<i
|
|
1687
|
+
class="fas fa-star"
|
|
1688
|
+
aria-hidden="true"
|
|
1689
|
+
></i>
|
|
1690
|
+
</span>
|
|
1691
|
+
</button>
|
|
1692
|
+
</li>
|
|
1693
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1694
|
+
<a
|
|
1695
|
+
class="pf-c-menu__item"
|
|
1696
|
+
href="#"
|
|
1697
|
+
role="menuitem"
|
|
1698
|
+
target="_blank"
|
|
1699
|
+
>
|
|
1700
|
+
<span class="pf-c-menu__item-main">
|
|
1701
|
+
<span
|
|
1702
|
+
class="pf-c-menu__item-text"
|
|
1703
|
+
>Link 2</span>
|
|
1704
|
+
<span
|
|
1705
|
+
class="pf-c-menu__item-external-icon"
|
|
1706
|
+
>
|
|
1707
|
+
<i
|
|
1708
|
+
class="fas fa-external-link-alt"
|
|
1709
|
+
aria-hidden="true"
|
|
1710
|
+
></i>
|
|
1711
|
+
</span>
|
|
1712
|
+
<span
|
|
1713
|
+
class="pf-screen-reader"
|
|
1714
|
+
>(opens new window)</span>
|
|
1715
|
+
</span>
|
|
1716
|
+
</a>
|
|
1717
|
+
<button
|
|
1718
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1719
|
+
type="button"
|
|
1720
|
+
aria-label="Starred"
|
|
1721
|
+
>
|
|
1722
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1723
|
+
<i
|
|
1724
|
+
class="fas fa-star"
|
|
1725
|
+
aria-hidden="true"
|
|
1726
|
+
></i>
|
|
1727
|
+
</span>
|
|
1728
|
+
</button>
|
|
1729
|
+
</li>
|
|
1730
|
+
</ul>
|
|
1731
|
+
</section>
|
|
1732
|
+
</div>
|
|
1733
|
+
</li>
|
|
1734
|
+
</ul>
|
|
1735
|
+
</section>
|
|
1736
|
+
</div>
|
|
1737
|
+
</div>
|
|
1738
|
+
</div>
|
|
1739
|
+
</div>
|
|
1740
|
+
</div>
|
|
1741
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1742
|
+
<div
|
|
1743
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1744
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1745
|
+
>
|
|
489
1746
|
<button
|
|
490
|
-
class="pf-c-
|
|
1747
|
+
class="pf-c-dropdown__toggle"
|
|
1748
|
+
id="alert-horizontal-example-masthead-profile-button"
|
|
1749
|
+
aria-expanded="false"
|
|
491
1750
|
type="button"
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
1751
|
+
>
|
|
1752
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1753
|
+
<img
|
|
1754
|
+
class="pf-c-avatar"
|
|
1755
|
+
src="/assets/images/img_avatar.svg"
|
|
1756
|
+
alt="Avatar image"
|
|
1757
|
+
/>
|
|
1758
|
+
</span>
|
|
1759
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1760
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1761
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1762
|
+
</span>
|
|
1763
|
+
</button>
|
|
1764
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1765
|
+
<section class="pf-c-dropdown__group">
|
|
1766
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1767
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1768
|
+
<div>123456789</div>
|
|
1769
|
+
</div>
|
|
1770
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1771
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1772
|
+
<div>mshaksho@redhat.com</div>
|
|
1773
|
+
</div>
|
|
1774
|
+
</section>
|
|
1775
|
+
<hr class="pf-c-divider" />
|
|
1776
|
+
<section class="pf-c-dropdown__group">
|
|
1777
|
+
<ul>
|
|
1778
|
+
<li>
|
|
1779
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
1780
|
+
</li>
|
|
1781
|
+
<li>
|
|
1782
|
+
<a
|
|
1783
|
+
class="pf-c-dropdown__menu-item"
|
|
1784
|
+
href="#"
|
|
1785
|
+
>User management</a>
|
|
1786
|
+
</li>
|
|
1787
|
+
<li>
|
|
1788
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1789
|
+
</li>
|
|
1790
|
+
</ul>
|
|
1791
|
+
</section>
|
|
1792
|
+
</div>
|
|
1793
|
+
</div>
|
|
1794
|
+
</div>
|
|
500
1795
|
</div>
|
|
501
1796
|
</div>
|
|
502
1797
|
</div>
|
|
503
|
-
<img
|
|
504
|
-
class="pf-c-avatar"
|
|
505
|
-
src="/assets/images/img_avatar.svg"
|
|
506
|
-
alt="Avatar image"
|
|
507
|
-
/>
|
|
508
1798
|
</div>
|
|
509
1799
|
</header>
|
|
510
1800
|
<div class="pf-c-page__sidebar">
|
|
511
1801
|
<div class="pf-c-page__sidebar-body">
|
|
512
|
-
<nav
|
|
1802
|
+
<nav
|
|
1803
|
+
class="pf-c-nav"
|
|
1804
|
+
id="alert-horizontal-example-primary-nav"
|
|
1805
|
+
aria-label="Global"
|
|
1806
|
+
>
|
|
513
1807
|
<ul class="pf-c-nav__list">
|
|
514
1808
|
<li class="pf-c-nav__item">
|
|
515
1809
|
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
@@ -534,36 +1828,57 @@ section: components
|
|
|
534
1828
|
</nav>
|
|
535
1829
|
</div>
|
|
536
1830
|
</div>
|
|
537
|
-
<main
|
|
538
|
-
|
|
1831
|
+
<main
|
|
1832
|
+
class="pf-c-page__main"
|
|
1833
|
+
tabindex="-1"
|
|
1834
|
+
id="main-content-alert-horizontal-example"
|
|
1835
|
+
>
|
|
1836
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
539
1837
|
<div class="pf-c-page__main-body">
|
|
540
|
-
<nav class="pf-c-
|
|
541
|
-
<
|
|
542
|
-
<li class="pf-c-
|
|
1838
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1839
|
+
<ol class="pf-c-breadcrumb__list">
|
|
1840
|
+
<li class="pf-c-breadcrumb__item">
|
|
1841
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1842
|
+
</li>
|
|
1843
|
+
<li class="pf-c-breadcrumb__item">
|
|
1844
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1845
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1846
|
+
</span>
|
|
1847
|
+
|
|
1848
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1849
|
+
</li>
|
|
1850
|
+
<li class="pf-c-breadcrumb__item">
|
|
1851
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1852
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1853
|
+
</span>
|
|
1854
|
+
|
|
1855
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1856
|
+
</li>
|
|
1857
|
+
<li class="pf-c-breadcrumb__item">
|
|
1858
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1859
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1860
|
+
</span>
|
|
1861
|
+
|
|
543
1862
|
<a
|
|
544
1863
|
href="#"
|
|
545
|
-
class="pf-c-
|
|
1864
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
546
1865
|
aria-current="page"
|
|
547
|
-
>
|
|
548
|
-
</li>
|
|
549
|
-
<li class="pf-c-nav__item">
|
|
550
|
-
<a href="#" class="pf-c-nav__link">Item 2</a>
|
|
551
|
-
</li>
|
|
552
|
-
<li class="pf-c-nav__item">
|
|
553
|
-
<a href="#" class="pf-c-nav__link">Item 3</a>
|
|
1866
|
+
>Section landing</a>
|
|
554
1867
|
</li>
|
|
555
|
-
</
|
|
1868
|
+
</ol>
|
|
556
1869
|
</nav>
|
|
557
1870
|
</div>
|
|
558
1871
|
</section>
|
|
559
|
-
<section class="pf-c-page__main-section pf-m-light">
|
|
560
|
-
<div class="pf-c-
|
|
561
|
-
<
|
|
562
|
-
|
|
1872
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1873
|
+
<div class="pf-c-page__main-body">
|
|
1874
|
+
<div class="pf-c-content">
|
|
1875
|
+
<h1>Main title</h1>
|
|
1876
|
+
<p>This is a full page demo.</p>
|
|
1877
|
+
</div>
|
|
563
1878
|
</div>
|
|
564
1879
|
</section>
|
|
565
1880
|
<section class="pf-c-page__main-section pf-m-light">
|
|
566
|
-
<form novalidate class="pf-c-form pf-m-horizontal">
|
|
1881
|
+
<form novalidate class="pf-c-form pf-m-limit-width pf-m-horizontal">
|
|
567
1882
|
<div class="pf-c-form__alert">
|
|
568
1883
|
<div
|
|
569
1884
|
class="pf-c-alert pf-m-danger pf-m-inline"
|
|
@@ -582,7 +1897,7 @@ section: components
|
|
|
582
1897
|
<div class="pf-c-form__group-label">
|
|
583
1898
|
<label
|
|
584
1899
|
class="pf-c-form__label"
|
|
585
|
-
for="horizontal-
|
|
1900
|
+
for="alert-horizontal-example-form-name"
|
|
586
1901
|
>
|
|
587
1902
|
<span class="pf-c-form__label-text">Name</span>
|
|
588
1903
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -593,14 +1908,14 @@ section: components
|
|
|
593
1908
|
class="pf-c-form-control"
|
|
594
1909
|
required
|
|
595
1910
|
type="text"
|
|
596
|
-
id="horizontal-
|
|
597
|
-
name="horizontal-
|
|
1911
|
+
id="alert-horizontal-example-form-name"
|
|
1912
|
+
name="alert-horizontal-example-form-name"
|
|
598
1913
|
aria-invalid="true"
|
|
599
|
-
aria-describedby="horizontal-
|
|
1914
|
+
aria-describedby="alert-horizontal-example-form-name-helper"
|
|
600
1915
|
/>
|
|
601
1916
|
<p
|
|
602
1917
|
class="pf-c-form__helper-text pf-m-error"
|
|
603
|
-
id="horizontal-
|
|
1918
|
+
id="alert-horizontal-example-form-name-helper"
|
|
604
1919
|
aria-live="polite"
|
|
605
1920
|
>Required field</p>
|
|
606
1921
|
</div>
|
|
@@ -609,7 +1924,7 @@ section: components
|
|
|
609
1924
|
<div class="pf-c-form__group-label">
|
|
610
1925
|
<label
|
|
611
1926
|
class="pf-c-form__label"
|
|
612
|
-
for="horizontal-
|
|
1927
|
+
for="alert-horizontal-example-form-email"
|
|
613
1928
|
>
|
|
614
1929
|
<span class="pf-c-form__label-text">Email</span>
|
|
615
1930
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -620,8 +1935,8 @@ section: components
|
|
|
620
1935
|
class="pf-c-form-control"
|
|
621
1936
|
type="text"
|
|
622
1937
|
value="patternfly@patternfly.com"
|
|
623
|
-
id="horizontal-
|
|
624
|
-
name="horizontal-
|
|
1938
|
+
id="alert-horizontal-example-form-email"
|
|
1939
|
+
name="alert-horizontal-example-form-email"
|
|
625
1940
|
required
|
|
626
1941
|
/>
|
|
627
1942
|
</div>
|
|
@@ -630,7 +1945,7 @@ section: components
|
|
|
630
1945
|
<div class="pf-c-form__group-label">
|
|
631
1946
|
<label
|
|
632
1947
|
class="pf-c-form__label"
|
|
633
|
-
for="horizontal-
|
|
1948
|
+
for="alert-horizontal-example-form-phone"
|
|
634
1949
|
>
|
|
635
1950
|
<span class="pf-c-form__label-text">Phone number</span>
|
|
636
1951
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -641,14 +1956,14 @@ section: components
|
|
|
641
1956
|
class="pf-c-form-control"
|
|
642
1957
|
required
|
|
643
1958
|
type="text"
|
|
644
|
-
id="horizontal-
|
|
645
|
-
name="horizontal-
|
|
1959
|
+
id="alert-horizontal-example-form-phone"
|
|
1960
|
+
name="alert-horizontal-example-form-phone"
|
|
646
1961
|
aria-invalid="true"
|
|
647
|
-
aria-describedby="horizontal-
|
|
1962
|
+
aria-describedby="alert-horizontal-example-form-phone-helper"
|
|
648
1963
|
/>
|
|
649
1964
|
<p
|
|
650
1965
|
class="pf-c-form__helper-text pf-m-error"
|
|
651
|
-
id="horizontal-
|
|
1966
|
+
id="alert-horizontal-example-form-phone-helper"
|
|
652
1967
|
aria-live="polite"
|
|
653
1968
|
>Required field</p>
|
|
654
1969
|
</div>
|
|
@@ -656,15 +1971,15 @@ section: components
|
|
|
656
1971
|
<div
|
|
657
1972
|
class="pf-c-form__group"
|
|
658
1973
|
role="group"
|
|
659
|
-
aria-labelledby="horizontal-
|
|
1974
|
+
aria-labelledby="alert-horizontal-example-form-check-group-legend"
|
|
660
1975
|
>
|
|
661
1976
|
<div
|
|
662
1977
|
class="pf-c-form__group-label pf-m-no-padding-top"
|
|
663
|
-
id="horizontal-
|
|
1978
|
+
id="alert-horizontal-example-form-check-group-legend"
|
|
664
1979
|
>
|
|
665
1980
|
<span
|
|
666
1981
|
class="pf-c-form__label"
|
|
667
|
-
for="horizontal-
|
|
1982
|
+
for="alert-horizontal-example-form-experience"
|
|
668
1983
|
>
|
|
669
1984
|
<span class="pf-c-form__label-text">Your experience</span>
|
|
670
1985
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -673,7 +1988,7 @@ section: components
|
|
|
673
1988
|
<div class="pf-c-form__group-control">
|
|
674
1989
|
<p
|
|
675
1990
|
class="pf-c-form__helper-text pf-m-error"
|
|
676
|
-
id="horizontal-
|
|
1991
|
+
id="alert-horizontal-example-form-simple-info-helper"
|
|
677
1992
|
aria-live="polite"
|
|
678
1993
|
>
|
|
679
1994
|
<span class="pf-c-form__helper-text-icon">
|
|
@@ -685,26 +2000,26 @@ section: components
|
|
|
685
2000
|
<input
|
|
686
2001
|
class="pf-c-check__input"
|
|
687
2002
|
type="checkbox"
|
|
688
|
-
id="alt-
|
|
689
|
-
name="alt-
|
|
2003
|
+
id="alt-checkbox1"
|
|
2004
|
+
name="alt-checkbox1"
|
|
690
2005
|
/>
|
|
691
2006
|
|
|
692
2007
|
<label
|
|
693
2008
|
class="pf-c-check__label"
|
|
694
|
-
for="alt-
|
|
2009
|
+
for="alt-checkbox1"
|
|
695
2010
|
>Follow up via email.</label>
|
|
696
2011
|
</div>
|
|
697
2012
|
<div class="pf-c-check">
|
|
698
2013
|
<input
|
|
699
2014
|
class="pf-c-check__input"
|
|
700
2015
|
type="checkbox"
|
|
701
|
-
id="alt-
|
|
702
|
-
name="alt-
|
|
2016
|
+
id="alt-checkbox2"
|
|
2017
|
+
name="alt-checkbox2"
|
|
703
2018
|
/>
|
|
704
2019
|
|
|
705
2020
|
<label
|
|
706
2021
|
class="pf-c-check__label"
|
|
707
|
-
for="alt-
|
|
2022
|
+
for="alt-checkbox2"
|
|
708
2023
|
>Remember my password for 30 days.</label>
|
|
709
2024
|
</div>
|
|
710
2025
|
</div>
|
|
@@ -727,162 +2042,811 @@ section: components
|
|
|
727
2042
|
### Inline Alert in Stacked Form
|
|
728
2043
|
|
|
729
2044
|
```html isFullscreen
|
|
730
|
-
<div class="pf-c-page">
|
|
2045
|
+
<div class="pf-c-page" id="alert-stacked-example">
|
|
731
2046
|
<a
|
|
732
2047
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
733
|
-
href="#main-content-"
|
|
2048
|
+
href="#main-content-alert-stacked-example"
|
|
734
2049
|
>Skip to content</a>
|
|
735
|
-
<header class="pf-c-
|
|
736
|
-
<
|
|
737
|
-
<
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
2050
|
+
<header class="pf-c-masthead" id="alert-stacked-example-masthead">
|
|
2051
|
+
<span class="pf-c-masthead__toggle">
|
|
2052
|
+
<button
|
|
2053
|
+
class="pf-c-button pf-m-plain"
|
|
2054
|
+
type="button"
|
|
2055
|
+
aria-label="Global navigation"
|
|
2056
|
+
>
|
|
2057
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2058
|
+
</button>
|
|
2059
|
+
</span>
|
|
2060
|
+
<div class="pf-c-masthead__main">
|
|
2061
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
2062
|
+
<picture
|
|
2063
|
+
class="pf-c-brand pf-m-picture"
|
|
2064
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
745
2065
|
>
|
|
746
|
-
<
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
2066
|
+
<source
|
|
2067
|
+
media="(min-width: 768px)"
|
|
2068
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
2069
|
+
/>
|
|
2070
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
2071
|
+
<img
|
|
2072
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
2073
|
+
alt="Fallback patternFly default logo"
|
|
2074
|
+
/>
|
|
2075
|
+
</picture>
|
|
755
2076
|
</a>
|
|
756
2077
|
</div>
|
|
757
|
-
<div class="pf-c-
|
|
758
|
-
<div
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
>
|
|
767
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
768
|
-
</button>
|
|
769
|
-
</div>
|
|
770
|
-
<div
|
|
771
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
772
|
-
>
|
|
773
|
-
<button
|
|
774
|
-
class="pf-c-button pf-m-plain"
|
|
775
|
-
type="button"
|
|
776
|
-
aria-label="Help"
|
|
777
|
-
>
|
|
778
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
779
|
-
</button>
|
|
780
|
-
</div>
|
|
781
|
-
</div>
|
|
782
|
-
<div class="pf-c-page__header-tools-group">
|
|
783
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
784
|
-
<div class="pf-c-dropdown">
|
|
785
|
-
<button
|
|
786
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
787
|
-
id="-dropdown-kebab-1-button"
|
|
788
|
-
aria-expanded="false"
|
|
789
|
-
type="button"
|
|
790
|
-
aria-label="Actions"
|
|
791
|
-
>
|
|
792
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
793
|
-
</button>
|
|
794
|
-
<ul
|
|
795
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
796
|
-
aria-labelledby="-dropdown-kebab-1-button"
|
|
797
|
-
hidden
|
|
2078
|
+
<div class="pf-c-masthead__content">
|
|
2079
|
+
<div
|
|
2080
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2081
|
+
id="alert-stacked-example-masthead-toolbar"
|
|
2082
|
+
>
|
|
2083
|
+
<div class="pf-c-toolbar__content">
|
|
2084
|
+
<div class="pf-c-toolbar__content-section">
|
|
2085
|
+
<div
|
|
2086
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
798
2087
|
>
|
|
799
|
-
<
|
|
800
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
801
|
-
</li>
|
|
802
|
-
<li>
|
|
803
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
804
|
-
</li>
|
|
805
|
-
<li>
|
|
806
|
-
<a
|
|
807
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
808
|
-
href="#"
|
|
809
|
-
aria-disabled="true"
|
|
810
|
-
tabindex="-1"
|
|
811
|
-
>Disabled link</a>
|
|
812
|
-
</li>
|
|
813
|
-
<li>
|
|
2088
|
+
<div class="pf-c-toolbar__item">
|
|
814
2089
|
<button
|
|
815
|
-
class="pf-c-
|
|
2090
|
+
class="pf-c-button pf-m-plain"
|
|
816
2091
|
type="button"
|
|
817
|
-
|
|
818
|
-
>
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
</
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
2092
|
+
aria-label="Notifications"
|
|
2093
|
+
>
|
|
2094
|
+
<span class="pf-c-notification-badge">
|
|
2095
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
2096
|
+
</span>
|
|
2097
|
+
</button>
|
|
2098
|
+
</div>
|
|
2099
|
+
<div
|
|
2100
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
2101
|
+
>
|
|
2102
|
+
<div class="pf-c-toolbar__item">
|
|
2103
|
+
<nav
|
|
2104
|
+
class="pf-c-app-launcher"
|
|
2105
|
+
aria-label="Application launcher"
|
|
2106
|
+
id="alert-stacked-example-masthead-icon-group--app-launcher"
|
|
2107
|
+
>
|
|
2108
|
+
<button
|
|
2109
|
+
class="pf-c-app-launcher__toggle"
|
|
2110
|
+
type="button"
|
|
2111
|
+
id="alert-stacked-example-masthead-icon-group--app-launcher-button"
|
|
2112
|
+
aria-expanded="false"
|
|
2113
|
+
aria-label="Application launcher"
|
|
2114
|
+
>
|
|
2115
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
2116
|
+
</button>
|
|
2117
|
+
<div
|
|
2118
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
2119
|
+
hidden
|
|
2120
|
+
>
|
|
2121
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
2122
|
+
<div class="pf-c-search-input">
|
|
2123
|
+
<div class="pf-c-search-input__bar">
|
|
2124
|
+
<span class="pf-c-search-input__text">
|
|
2125
|
+
<span class="pf-c-search-input__icon">
|
|
2126
|
+
<i
|
|
2127
|
+
class="fas fa-search fa-fw"
|
|
2128
|
+
aria-hidden="true"
|
|
2129
|
+
></i>
|
|
2130
|
+
</span>
|
|
2131
|
+
<input
|
|
2132
|
+
class="pf-c-search-input__text-input"
|
|
2133
|
+
type="text"
|
|
2134
|
+
placeholder="Filter by name"
|
|
2135
|
+
aria-label="Filter by name"
|
|
2136
|
+
/>
|
|
2137
|
+
</span>
|
|
2138
|
+
</div>
|
|
2139
|
+
</div>
|
|
2140
|
+
</div>
|
|
2141
|
+
<section class="pf-c-app-launcher__group">
|
|
2142
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
2143
|
+
<ul>
|
|
2144
|
+
<li
|
|
2145
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2146
|
+
>
|
|
2147
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2148
|
+
Link 1
|
|
2149
|
+
<span
|
|
2150
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2151
|
+
>
|
|
2152
|
+
<i
|
|
2153
|
+
class="fas fa-external-link-alt"
|
|
2154
|
+
aria-hidden="true"
|
|
2155
|
+
></i>
|
|
2156
|
+
</span>
|
|
2157
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2158
|
+
</a>
|
|
2159
|
+
<button
|
|
2160
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2161
|
+
type="button"
|
|
2162
|
+
aria-label="Favorite"
|
|
2163
|
+
>
|
|
2164
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2165
|
+
</button>
|
|
2166
|
+
</li>
|
|
2167
|
+
<li
|
|
2168
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2169
|
+
>
|
|
2170
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2171
|
+
Link 2
|
|
2172
|
+
<span
|
|
2173
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2174
|
+
>
|
|
2175
|
+
<i
|
|
2176
|
+
class="fas fa-external-link-alt"
|
|
2177
|
+
aria-hidden="true"
|
|
2178
|
+
></i>
|
|
2179
|
+
</span>
|
|
2180
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2181
|
+
</a>
|
|
2182
|
+
<button
|
|
2183
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2184
|
+
type="button"
|
|
2185
|
+
aria-label="Favorite"
|
|
2186
|
+
>
|
|
2187
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2188
|
+
</button>
|
|
2189
|
+
</li>
|
|
2190
|
+
</ul>
|
|
2191
|
+
</section>
|
|
2192
|
+
<hr class="pf-c-divider" />
|
|
2193
|
+
<section class="pf-c-app-launcher__group">
|
|
2194
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
2195
|
+
<ul>
|
|
2196
|
+
<li
|
|
2197
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2198
|
+
>
|
|
2199
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2200
|
+
Link 1
|
|
2201
|
+
<span
|
|
2202
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2203
|
+
>
|
|
2204
|
+
<i
|
|
2205
|
+
class="fas fa-external-link-alt"
|
|
2206
|
+
aria-hidden="true"
|
|
2207
|
+
></i>
|
|
2208
|
+
</span>
|
|
2209
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2210
|
+
</a>
|
|
2211
|
+
<button
|
|
2212
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2213
|
+
type="button"
|
|
2214
|
+
aria-label="Favorite"
|
|
2215
|
+
>
|
|
2216
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2217
|
+
</button>
|
|
2218
|
+
</li>
|
|
2219
|
+
<li
|
|
2220
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2221
|
+
>
|
|
2222
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2223
|
+
Link 2
|
|
2224
|
+
<span
|
|
2225
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2226
|
+
>
|
|
2227
|
+
<i
|
|
2228
|
+
class="fas fa-external-link-alt"
|
|
2229
|
+
aria-hidden="true"
|
|
2230
|
+
></i>
|
|
2231
|
+
</span>
|
|
2232
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2233
|
+
</a>
|
|
2234
|
+
<button
|
|
2235
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2236
|
+
type="button"
|
|
2237
|
+
aria-label="Favorite"
|
|
2238
|
+
>
|
|
2239
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2240
|
+
</button>
|
|
2241
|
+
</li>
|
|
2242
|
+
</ul>
|
|
2243
|
+
</section>
|
|
2244
|
+
</div>
|
|
2245
|
+
</nav>
|
|
2246
|
+
</div>
|
|
2247
|
+
<div class="pf-c-toolbar__item">
|
|
2248
|
+
<div class="pf-c-dropdown">
|
|
2249
|
+
<button
|
|
2250
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2251
|
+
id="alert-stacked-example-masthead-settings-button"
|
|
2252
|
+
aria-expanded="false"
|
|
2253
|
+
type="button"
|
|
2254
|
+
aria-label="Settings"
|
|
2255
|
+
>
|
|
2256
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2257
|
+
</button>
|
|
2258
|
+
<ul
|
|
2259
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2260
|
+
aria-labelledby="alert-stacked-example-masthead-settings-button"
|
|
2261
|
+
hidden
|
|
2262
|
+
>
|
|
2263
|
+
<li>
|
|
2264
|
+
<button
|
|
2265
|
+
class="pf-c-dropdown__menu-item"
|
|
2266
|
+
type="button"
|
|
2267
|
+
>Settings</button>
|
|
2268
|
+
</li>
|
|
2269
|
+
<li>
|
|
2270
|
+
<button
|
|
2271
|
+
class="pf-c-dropdown__menu-item"
|
|
2272
|
+
type="button"
|
|
2273
|
+
>Use the beta release</button>
|
|
2274
|
+
</li>
|
|
2275
|
+
</ul>
|
|
2276
|
+
</div>
|
|
2277
|
+
</div>
|
|
2278
|
+
<div class="pf-c-toolbar__item">
|
|
2279
|
+
<div class="pf-c-dropdown">
|
|
2280
|
+
<button
|
|
2281
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2282
|
+
id="alert-stacked-example-masthead-help-button"
|
|
2283
|
+
aria-expanded="false"
|
|
2284
|
+
type="button"
|
|
2285
|
+
aria-label="Help"
|
|
2286
|
+
>
|
|
2287
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
2288
|
+
</button>
|
|
2289
|
+
<ul
|
|
2290
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2291
|
+
aria-labelledby="alert-stacked-example-masthead-help-button"
|
|
2292
|
+
hidden
|
|
2293
|
+
>
|
|
2294
|
+
<li>
|
|
2295
|
+
<button
|
|
2296
|
+
class="pf-c-dropdown__menu-item"
|
|
2297
|
+
type="button"
|
|
2298
|
+
>Support options</button>
|
|
2299
|
+
</li>
|
|
2300
|
+
<li>
|
|
2301
|
+
<button
|
|
2302
|
+
class="pf-c-dropdown__menu-item"
|
|
2303
|
+
type="button"
|
|
2304
|
+
>Open support case</button>
|
|
2305
|
+
</li>
|
|
2306
|
+
<li>
|
|
2307
|
+
<button
|
|
2308
|
+
class="pf-c-dropdown__menu-item"
|
|
2309
|
+
type="button"
|
|
2310
|
+
>API documentation</button>
|
|
2311
|
+
</li>
|
|
2312
|
+
</ul>
|
|
2313
|
+
</div>
|
|
2314
|
+
</div>
|
|
2315
|
+
</div>
|
|
2316
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
2317
|
+
<div class="pf-c-dropdown">
|
|
2318
|
+
<button
|
|
2319
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
2320
|
+
type="button"
|
|
2321
|
+
aria-expanded="false"
|
|
2322
|
+
aria-label="Actions"
|
|
2323
|
+
>
|
|
2324
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2325
|
+
</button>
|
|
2326
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
2327
|
+
<div class="pf-c-menu__content">
|
|
2328
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
2329
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2330
|
+
<li
|
|
2331
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2332
|
+
role="none"
|
|
2333
|
+
>
|
|
2334
|
+
<button
|
|
2335
|
+
class="pf-c-menu__item"
|
|
2336
|
+
type="button"
|
|
2337
|
+
disabled
|
|
2338
|
+
role="menuitem"
|
|
2339
|
+
>
|
|
2340
|
+
<span class="pf-c-menu__item-description">
|
|
2341
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2342
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
2343
|
+
</span>
|
|
2344
|
+
</button>
|
|
2345
|
+
</li>
|
|
2346
|
+
<li
|
|
2347
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2348
|
+
role="none"
|
|
2349
|
+
>
|
|
2350
|
+
<button
|
|
2351
|
+
class="pf-c-menu__item"
|
|
2352
|
+
type="button"
|
|
2353
|
+
disabled
|
|
2354
|
+
role="menuitem"
|
|
2355
|
+
>
|
|
2356
|
+
<span class="pf-c-menu__item-description">
|
|
2357
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2358
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
2359
|
+
</span>
|
|
2360
|
+
</button>
|
|
2361
|
+
</li>
|
|
2362
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2363
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2364
|
+
<button
|
|
2365
|
+
class="pf-c-menu__item"
|
|
2366
|
+
type="button"
|
|
2367
|
+
role="menuitem"
|
|
2368
|
+
>
|
|
2369
|
+
<span class="pf-c-menu__item-main">
|
|
2370
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
2371
|
+
</span>
|
|
2372
|
+
</button>
|
|
2373
|
+
</li>
|
|
2374
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2375
|
+
<button
|
|
2376
|
+
class="pf-c-menu__item"
|
|
2377
|
+
type="button"
|
|
2378
|
+
role="menuitem"
|
|
2379
|
+
>
|
|
2380
|
+
<span class="pf-c-menu__item-main">
|
|
2381
|
+
<span
|
|
2382
|
+
class="pf-c-menu__item-text"
|
|
2383
|
+
>User management</span>
|
|
2384
|
+
</span>
|
|
2385
|
+
</button>
|
|
2386
|
+
</li>
|
|
2387
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2388
|
+
<button
|
|
2389
|
+
class="pf-c-menu__item"
|
|
2390
|
+
type="button"
|
|
2391
|
+
role="menuitem"
|
|
2392
|
+
>
|
|
2393
|
+
<span class="pf-c-menu__item-main">
|
|
2394
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
2395
|
+
</span>
|
|
2396
|
+
</button>
|
|
2397
|
+
</li>
|
|
2398
|
+
</ul>
|
|
2399
|
+
</section>
|
|
2400
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
2401
|
+
<section class="pf-c-menu__group">
|
|
2402
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2403
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2404
|
+
<button
|
|
2405
|
+
class="pf-c-menu__item"
|
|
2406
|
+
type="button"
|
|
2407
|
+
role="menuitem"
|
|
2408
|
+
aria-expanded="false"
|
|
2409
|
+
>
|
|
2410
|
+
<span class="pf-c-menu__item-main">
|
|
2411
|
+
<span class="pf-c-menu__item-icon">
|
|
2412
|
+
<i
|
|
2413
|
+
class="fas fa-fw fa-cog"
|
|
2414
|
+
aria-hidden="true"
|
|
2415
|
+
></i>
|
|
2416
|
+
</span>
|
|
2417
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
2418
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2419
|
+
<i class="fas fa-angle-right"></i>
|
|
2420
|
+
</span>
|
|
2421
|
+
</span>
|
|
2422
|
+
</button>
|
|
2423
|
+
<div class="pf-c-menu" hidden>
|
|
2424
|
+
<div class="pf-c-menu__content">
|
|
2425
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2426
|
+
<li
|
|
2427
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2428
|
+
role="none"
|
|
2429
|
+
>
|
|
2430
|
+
<button
|
|
2431
|
+
class="pf-c-menu__item"
|
|
2432
|
+
type="button"
|
|
2433
|
+
role="menuitem"
|
|
2434
|
+
>
|
|
2435
|
+
<span class="pf-c-menu__item-main">
|
|
2436
|
+
<span
|
|
2437
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2438
|
+
>
|
|
2439
|
+
<i class="fas fa-angle-left"></i>
|
|
2440
|
+
</span>
|
|
2441
|
+
<span class="pf-c-menu__item-icon">
|
|
2442
|
+
<i
|
|
2443
|
+
class="fas fa-fw fa-cog"
|
|
2444
|
+
aria-hidden="true"
|
|
2445
|
+
></i>
|
|
2446
|
+
</span>
|
|
2447
|
+
<span
|
|
2448
|
+
class="pf-c-menu__item-text"
|
|
2449
|
+
>Settings</span>
|
|
2450
|
+
</span>
|
|
2451
|
+
</button>
|
|
2452
|
+
</li>
|
|
2453
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2454
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2455
|
+
<a
|
|
2456
|
+
class="pf-c-menu__item"
|
|
2457
|
+
href="#"
|
|
2458
|
+
role="menuitem"
|
|
2459
|
+
>
|
|
2460
|
+
<span class="pf-c-menu__item-main">
|
|
2461
|
+
<span
|
|
2462
|
+
class="pf-c-menu__item-text"
|
|
2463
|
+
>Customer support</span>
|
|
2464
|
+
</span>
|
|
2465
|
+
</a>
|
|
2466
|
+
</li>
|
|
2467
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2468
|
+
<a
|
|
2469
|
+
class="pf-c-menu__item"
|
|
2470
|
+
href="#"
|
|
2471
|
+
role="menuitem"
|
|
2472
|
+
>
|
|
2473
|
+
<span class="pf-c-menu__item-main">
|
|
2474
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
2475
|
+
</span>
|
|
2476
|
+
</a>
|
|
2477
|
+
</li>
|
|
2478
|
+
</ul>
|
|
2479
|
+
</div>
|
|
2480
|
+
</div>
|
|
2481
|
+
</li>
|
|
2482
|
+
|
|
2483
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2484
|
+
<button
|
|
2485
|
+
class="pf-c-menu__item"
|
|
2486
|
+
type="button"
|
|
2487
|
+
role="menuitem"
|
|
2488
|
+
aria-expanded="false"
|
|
2489
|
+
>
|
|
2490
|
+
<span class="pf-c-menu__item-main">
|
|
2491
|
+
<span class="pf-c-menu__item-icon">
|
|
2492
|
+
<i
|
|
2493
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2494
|
+
aria-hidden="true"
|
|
2495
|
+
></i>
|
|
2496
|
+
</span>
|
|
2497
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2498
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2499
|
+
<i class="fas fa-angle-right"></i>
|
|
2500
|
+
</span>
|
|
2501
|
+
</span>
|
|
2502
|
+
</button>
|
|
2503
|
+
<div class="pf-c-menu" hidden>
|
|
2504
|
+
<div class="pf-c-menu__content">
|
|
2505
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2506
|
+
<li
|
|
2507
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2508
|
+
role="none"
|
|
2509
|
+
>
|
|
2510
|
+
<button
|
|
2511
|
+
class="pf-c-menu__item"
|
|
2512
|
+
type="button"
|
|
2513
|
+
role="menuitem"
|
|
2514
|
+
>
|
|
2515
|
+
<span class="pf-c-menu__item-main">
|
|
2516
|
+
<span
|
|
2517
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2518
|
+
>
|
|
2519
|
+
<i class="fas fa-angle-left"></i>
|
|
2520
|
+
</span>
|
|
2521
|
+
<span class="pf-c-menu__item-icon">
|
|
2522
|
+
<i
|
|
2523
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2524
|
+
aria-hidden="true"
|
|
2525
|
+
></i>
|
|
2526
|
+
</span>
|
|
2527
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2528
|
+
</span>
|
|
2529
|
+
</button>
|
|
2530
|
+
</li>
|
|
2531
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2532
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2533
|
+
<a
|
|
2534
|
+
class="pf-c-menu__item"
|
|
2535
|
+
href="#"
|
|
2536
|
+
role="menuitem"
|
|
2537
|
+
>
|
|
2538
|
+
<span class="pf-c-menu__item-main">
|
|
2539
|
+
<span
|
|
2540
|
+
class="pf-c-menu__item-text"
|
|
2541
|
+
>Support options</span>
|
|
2542
|
+
</span>
|
|
2543
|
+
</a>
|
|
2544
|
+
</li>
|
|
2545
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2546
|
+
<a
|
|
2547
|
+
class="pf-c-menu__item"
|
|
2548
|
+
href="#"
|
|
2549
|
+
role="menuitem"
|
|
2550
|
+
>
|
|
2551
|
+
<span class="pf-c-menu__item-main">
|
|
2552
|
+
<span
|
|
2553
|
+
class="pf-c-menu__item-text"
|
|
2554
|
+
>Open support case</span>
|
|
2555
|
+
</span>
|
|
2556
|
+
</a>
|
|
2557
|
+
</li>
|
|
2558
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2559
|
+
<a
|
|
2560
|
+
class="pf-c-menu__item"
|
|
2561
|
+
href="#"
|
|
2562
|
+
role="menuitem"
|
|
2563
|
+
>
|
|
2564
|
+
<span class="pf-c-menu__item-main">
|
|
2565
|
+
<span
|
|
2566
|
+
class="pf-c-menu__item-text"
|
|
2567
|
+
>API documentation</span>
|
|
2568
|
+
</span>
|
|
2569
|
+
</a>
|
|
2570
|
+
</li>
|
|
2571
|
+
</ul>
|
|
2572
|
+
</div>
|
|
2573
|
+
</div>
|
|
2574
|
+
</li>
|
|
2575
|
+
|
|
2576
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2577
|
+
<button
|
|
2578
|
+
class="pf-c-menu__item"
|
|
2579
|
+
type="button"
|
|
2580
|
+
role="menuitem"
|
|
2581
|
+
>
|
|
2582
|
+
<span class="pf-c-menu__item-main">
|
|
2583
|
+
<span class="pf-c-menu__item-icon">
|
|
2584
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
2585
|
+
</span>
|
|
2586
|
+
<span
|
|
2587
|
+
class="pf-c-menu__item-text"
|
|
2588
|
+
>Application launcher</span>
|
|
2589
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2590
|
+
<i class="fas fa-angle-right"></i>
|
|
2591
|
+
</span>
|
|
2592
|
+
</span>
|
|
2593
|
+
</button>
|
|
2594
|
+
<div class="pf-c-menu" hidden>
|
|
2595
|
+
<div class="pf-c-menu__header">
|
|
2596
|
+
<button
|
|
2597
|
+
class="pf-c-menu__item"
|
|
2598
|
+
type="button"
|
|
2599
|
+
role="menuitem"
|
|
2600
|
+
>
|
|
2601
|
+
<span class="pf-c-menu__item-main">
|
|
2602
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2603
|
+
<i class="fas fa-angle-left"></i>
|
|
2604
|
+
</span>
|
|
2605
|
+
<span class="pf-c-menu__item-icon">
|
|
2606
|
+
<i
|
|
2607
|
+
class="fas fa-fw fa-th"
|
|
2608
|
+
aria-hidden="true"
|
|
2609
|
+
></i>
|
|
2610
|
+
</span>
|
|
2611
|
+
<span
|
|
2612
|
+
class="pf-c-menu__item-text"
|
|
2613
|
+
>Application launcher</span>
|
|
2614
|
+
</span>
|
|
2615
|
+
</button>
|
|
2616
|
+
</div>
|
|
2617
|
+
<div class="pf-c-menu__search">
|
|
2618
|
+
<div class="pf-c-menu__search-input">
|
|
2619
|
+
<div class="pf-c-search-input">
|
|
2620
|
+
<div class="pf-c-search-input__bar">
|
|
2621
|
+
<span class="pf-c-search-input__text">
|
|
2622
|
+
<span class="pf-c-search-input__icon">
|
|
2623
|
+
<i
|
|
2624
|
+
class="fas fa-search fa-fw"
|
|
2625
|
+
aria-hidden="true"
|
|
2626
|
+
></i>
|
|
2627
|
+
</span>
|
|
2628
|
+
<input
|
|
2629
|
+
class="pf-c-search-input__text-input"
|
|
2630
|
+
type="text"
|
|
2631
|
+
placeholder="Search"
|
|
2632
|
+
aria-label="Search"
|
|
2633
|
+
/>
|
|
2634
|
+
</span>
|
|
2635
|
+
</div>
|
|
2636
|
+
</div>
|
|
2637
|
+
</div>
|
|
2638
|
+
</div>
|
|
2639
|
+
<hr class="pf-c-divider" />
|
|
2640
|
+
<section class="pf-c-menu__group">
|
|
2641
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
2642
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2643
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2644
|
+
<a
|
|
2645
|
+
class="pf-c-menu__item"
|
|
2646
|
+
href="#"
|
|
2647
|
+
role="menuitem"
|
|
2648
|
+
>
|
|
2649
|
+
<span class="pf-c-menu__item-main">
|
|
2650
|
+
<span
|
|
2651
|
+
class="pf-c-menu__item-text"
|
|
2652
|
+
>Link 1</span>
|
|
2653
|
+
</span>
|
|
2654
|
+
</a>
|
|
2655
|
+
<button
|
|
2656
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2657
|
+
type="button"
|
|
2658
|
+
aria-label="Starred"
|
|
2659
|
+
>
|
|
2660
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2661
|
+
<i
|
|
2662
|
+
class="fas fa-star"
|
|
2663
|
+
aria-hidden="true"
|
|
2664
|
+
></i>
|
|
2665
|
+
</span>
|
|
2666
|
+
</button>
|
|
2667
|
+
</li>
|
|
2668
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2669
|
+
<a
|
|
2670
|
+
class="pf-c-menu__item"
|
|
2671
|
+
href="#"
|
|
2672
|
+
role="menuitem"
|
|
2673
|
+
target="_blank"
|
|
2674
|
+
>
|
|
2675
|
+
<span class="pf-c-menu__item-main">
|
|
2676
|
+
<span
|
|
2677
|
+
class="pf-c-menu__item-text"
|
|
2678
|
+
>Link 2</span>
|
|
2679
|
+
<span
|
|
2680
|
+
class="pf-c-menu__item-external-icon"
|
|
2681
|
+
>
|
|
2682
|
+
<i
|
|
2683
|
+
class="fas fa-external-link-alt"
|
|
2684
|
+
aria-hidden="true"
|
|
2685
|
+
></i>
|
|
2686
|
+
</span>
|
|
2687
|
+
<span
|
|
2688
|
+
class="pf-screen-reader"
|
|
2689
|
+
>(opens new window)</span>
|
|
2690
|
+
</span>
|
|
2691
|
+
</a>
|
|
2692
|
+
<button
|
|
2693
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2694
|
+
type="button"
|
|
2695
|
+
aria-label="Not starred"
|
|
2696
|
+
>
|
|
2697
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2698
|
+
<i
|
|
2699
|
+
class="fas fa-star"
|
|
2700
|
+
aria-hidden="true"
|
|
2701
|
+
></i>
|
|
2702
|
+
</span>
|
|
2703
|
+
</button>
|
|
2704
|
+
</li>
|
|
2705
|
+
</ul>
|
|
2706
|
+
</section>
|
|
2707
|
+
<hr class="pf-c-divider" />
|
|
2708
|
+
<section class="pf-c-menu__group">
|
|
2709
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
2710
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2711
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2712
|
+
<a
|
|
2713
|
+
class="pf-c-menu__item"
|
|
2714
|
+
href="#"
|
|
2715
|
+
role="menuitem"
|
|
2716
|
+
>
|
|
2717
|
+
<span class="pf-c-menu__item-main">
|
|
2718
|
+
<span
|
|
2719
|
+
class="pf-c-menu__item-text"
|
|
2720
|
+
>Link 1</span>
|
|
2721
|
+
</span>
|
|
2722
|
+
</a>
|
|
2723
|
+
<button
|
|
2724
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2725
|
+
type="button"
|
|
2726
|
+
aria-label="Not starred"
|
|
2727
|
+
>
|
|
2728
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2729
|
+
<i
|
|
2730
|
+
class="fas fa-star"
|
|
2731
|
+
aria-hidden="true"
|
|
2732
|
+
></i>
|
|
2733
|
+
</span>
|
|
2734
|
+
</button>
|
|
2735
|
+
</li>
|
|
2736
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2737
|
+
<a
|
|
2738
|
+
class="pf-c-menu__item"
|
|
2739
|
+
href="#"
|
|
2740
|
+
role="menuitem"
|
|
2741
|
+
target="_blank"
|
|
2742
|
+
>
|
|
2743
|
+
<span class="pf-c-menu__item-main">
|
|
2744
|
+
<span
|
|
2745
|
+
class="pf-c-menu__item-text"
|
|
2746
|
+
>Link 2</span>
|
|
2747
|
+
<span
|
|
2748
|
+
class="pf-c-menu__item-external-icon"
|
|
2749
|
+
>
|
|
2750
|
+
<i
|
|
2751
|
+
class="fas fa-external-link-alt"
|
|
2752
|
+
aria-hidden="true"
|
|
2753
|
+
></i>
|
|
2754
|
+
</span>
|
|
2755
|
+
<span
|
|
2756
|
+
class="pf-screen-reader"
|
|
2757
|
+
>(opens new window)</span>
|
|
2758
|
+
</span>
|
|
2759
|
+
</a>
|
|
2760
|
+
<button
|
|
2761
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2762
|
+
type="button"
|
|
2763
|
+
aria-label="Starred"
|
|
2764
|
+
>
|
|
2765
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2766
|
+
<i
|
|
2767
|
+
class="fas fa-star"
|
|
2768
|
+
aria-hidden="true"
|
|
2769
|
+
></i>
|
|
2770
|
+
</span>
|
|
2771
|
+
</button>
|
|
2772
|
+
</li>
|
|
2773
|
+
</ul>
|
|
2774
|
+
</section>
|
|
2775
|
+
</div>
|
|
2776
|
+
</li>
|
|
2777
|
+
</ul>
|
|
2778
|
+
</section>
|
|
2779
|
+
</div>
|
|
2780
|
+
</div>
|
|
2781
|
+
</div>
|
|
2782
|
+
</div>
|
|
2783
|
+
</div>
|
|
2784
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
2785
|
+
<div
|
|
2786
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
2787
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
2788
|
+
>
|
|
862
2789
|
<button
|
|
863
|
-
class="pf-c-
|
|
2790
|
+
class="pf-c-dropdown__toggle"
|
|
2791
|
+
id="alert-stacked-example-masthead-profile-button"
|
|
2792
|
+
aria-expanded="false"
|
|
864
2793
|
type="button"
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
2794
|
+
>
|
|
2795
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
2796
|
+
<img
|
|
2797
|
+
class="pf-c-avatar"
|
|
2798
|
+
src="/assets/images/img_avatar.svg"
|
|
2799
|
+
alt="Avatar image"
|
|
2800
|
+
/>
|
|
2801
|
+
</span>
|
|
2802
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
2803
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2804
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2805
|
+
</span>
|
|
2806
|
+
</button>
|
|
2807
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
2808
|
+
<section class="pf-c-dropdown__group">
|
|
2809
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2810
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2811
|
+
<div>123456789</div>
|
|
2812
|
+
</div>
|
|
2813
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2814
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2815
|
+
<div>mshaksho@redhat.com</div>
|
|
2816
|
+
</div>
|
|
2817
|
+
</section>
|
|
2818
|
+
<hr class="pf-c-divider" />
|
|
2819
|
+
<section class="pf-c-dropdown__group">
|
|
2820
|
+
<ul>
|
|
2821
|
+
<li>
|
|
2822
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
2823
|
+
</li>
|
|
2824
|
+
<li>
|
|
2825
|
+
<a
|
|
2826
|
+
class="pf-c-dropdown__menu-item"
|
|
2827
|
+
href="#"
|
|
2828
|
+
>User management</a>
|
|
2829
|
+
</li>
|
|
2830
|
+
<li>
|
|
2831
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
2832
|
+
</li>
|
|
2833
|
+
</ul>
|
|
2834
|
+
</section>
|
|
2835
|
+
</div>
|
|
2836
|
+
</div>
|
|
2837
|
+
</div>
|
|
873
2838
|
</div>
|
|
874
2839
|
</div>
|
|
875
2840
|
</div>
|
|
876
|
-
<img
|
|
877
|
-
class="pf-c-avatar"
|
|
878
|
-
src="/assets/images/img_avatar.svg"
|
|
879
|
-
alt="Avatar image"
|
|
880
|
-
/>
|
|
881
2841
|
</div>
|
|
882
2842
|
</header>
|
|
883
2843
|
<div class="pf-c-page__sidebar">
|
|
884
2844
|
<div class="pf-c-page__sidebar-body">
|
|
885
|
-
<nav
|
|
2845
|
+
<nav
|
|
2846
|
+
class="pf-c-nav"
|
|
2847
|
+
id="alert-stacked-example-primary-nav"
|
|
2848
|
+
aria-label="Global"
|
|
2849
|
+
>
|
|
886
2850
|
<ul class="pf-c-nav__list">
|
|
887
2851
|
<li class="pf-c-nav__item">
|
|
888
2852
|
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
@@ -907,32 +2871,53 @@ section: components
|
|
|
907
2871
|
</nav>
|
|
908
2872
|
</div>
|
|
909
2873
|
</div>
|
|
910
|
-
<main
|
|
911
|
-
|
|
2874
|
+
<main
|
|
2875
|
+
class="pf-c-page__main"
|
|
2876
|
+
tabindex="-1"
|
|
2877
|
+
id="main-content-alert-stacked-example"
|
|
2878
|
+
>
|
|
2879
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
912
2880
|
<div class="pf-c-page__main-body">
|
|
913
|
-
<nav class="pf-c-
|
|
914
|
-
<
|
|
915
|
-
<li class="pf-c-
|
|
2881
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
2882
|
+
<ol class="pf-c-breadcrumb__list">
|
|
2883
|
+
<li class="pf-c-breadcrumb__item">
|
|
2884
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
2885
|
+
</li>
|
|
2886
|
+
<li class="pf-c-breadcrumb__item">
|
|
2887
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2888
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2889
|
+
</span>
|
|
2890
|
+
|
|
2891
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2892
|
+
</li>
|
|
2893
|
+
<li class="pf-c-breadcrumb__item">
|
|
2894
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2895
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2896
|
+
</span>
|
|
2897
|
+
|
|
2898
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2899
|
+
</li>
|
|
2900
|
+
<li class="pf-c-breadcrumb__item">
|
|
2901
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2902
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2903
|
+
</span>
|
|
2904
|
+
|
|
916
2905
|
<a
|
|
917
2906
|
href="#"
|
|
918
|
-
class="pf-c-
|
|
2907
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
919
2908
|
aria-current="page"
|
|
920
|
-
>
|
|
921
|
-
</li>
|
|
922
|
-
<li class="pf-c-nav__item">
|
|
923
|
-
<a href="#" class="pf-c-nav__link">Item 2</a>
|
|
924
|
-
</li>
|
|
925
|
-
<li class="pf-c-nav__item">
|
|
926
|
-
<a href="#" class="pf-c-nav__link">Item 3</a>
|
|
2909
|
+
>Section landing</a>
|
|
927
2910
|
</li>
|
|
928
|
-
</
|
|
2911
|
+
</ol>
|
|
929
2912
|
</nav>
|
|
930
2913
|
</div>
|
|
931
2914
|
</section>
|
|
932
|
-
<section class="pf-c-page__main-section pf-m-light">
|
|
933
|
-
<div class="pf-c-
|
|
934
|
-
<
|
|
935
|
-
|
|
2915
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2916
|
+
<div class="pf-c-page__main-body">
|
|
2917
|
+
<div class="pf-c-content">
|
|
2918
|
+
<h1>Main title</h1>
|
|
2919
|
+
<p>This is a full page demo.</p>
|
|
2920
|
+
</div>
|
|
936
2921
|
</div>
|
|
937
2922
|
</section>
|
|
938
2923
|
<section class="pf-c-page__main-section pf-m-light">
|
|
@@ -953,7 +2938,10 @@ section: components
|
|
|
953
2938
|
</div>
|
|
954
2939
|
<div class="pf-c-form__group">
|
|
955
2940
|
<div class="pf-c-form__group-label">
|
|
956
|
-
<label
|
|
2941
|
+
<label
|
|
2942
|
+
class="pf-c-form__label"
|
|
2943
|
+
for="alert-stacked-example-form-form-name"
|
|
2944
|
+
>
|
|
957
2945
|
<span class="pf-c-form__label-text">Full name</span>
|
|
958
2946
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
959
2947
|
</label>
|
|
@@ -963,21 +2951,24 @@ section: components
|
|
|
963
2951
|
class="pf-c-form-control"
|
|
964
2952
|
required
|
|
965
2953
|
type="text"
|
|
966
|
-
id="stacked-
|
|
967
|
-
name="stacked-
|
|
2954
|
+
id="alert-stacked-example-form-form-name"
|
|
2955
|
+
name="alert-stacked-example-form-form-name"
|
|
968
2956
|
aria-invalid="true"
|
|
969
|
-
aria-describedby="stacked-
|
|
2957
|
+
aria-describedby="alert-stacked-example-form-form-name-helper"
|
|
970
2958
|
/>
|
|
971
2959
|
<p
|
|
972
2960
|
class="pf-c-form__helper-text pf-m-error"
|
|
973
|
-
id="stacked-
|
|
2961
|
+
id="alert-stacked-example-form-form-name-helper-name"
|
|
974
2962
|
aria-live="polite"
|
|
975
2963
|
>Required field</p>
|
|
976
2964
|
</div>
|
|
977
2965
|
</div>
|
|
978
2966
|
<div class="pf-c-form__group">
|
|
979
2967
|
<div class="pf-c-form__group-label">
|
|
980
|
-
<label
|
|
2968
|
+
<label
|
|
2969
|
+
class="pf-c-form__label"
|
|
2970
|
+
for="alert-stacked-example-form-form-email"
|
|
2971
|
+
>
|
|
981
2972
|
<span class="pf-c-form__label-text">Email</span>
|
|
982
2973
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
983
2974
|
</label>
|
|
@@ -987,20 +2978,23 @@ section: components
|
|
|
987
2978
|
class="pf-c-form-control"
|
|
988
2979
|
type="text"
|
|
989
2980
|
value="patternfly.com"
|
|
990
|
-
id="stacked-
|
|
991
|
-
name="stacked-
|
|
2981
|
+
id="alert-stacked-example-form-form-email"
|
|
2982
|
+
name="alert-stacked-example-form-form-email"
|
|
992
2983
|
required
|
|
993
2984
|
/>
|
|
994
2985
|
</div>
|
|
995
2986
|
<p
|
|
996
2987
|
class="pf-c-form__helper-text pf-m-error"
|
|
997
|
-
id="stacked-
|
|
2988
|
+
id="alert-stacked-example-form-form-email-helper-email"
|
|
998
2989
|
aria-live="polite"
|
|
999
2990
|
>Enter a valid email address: example@gmail.com</p>
|
|
1000
2991
|
</div>
|
|
1001
2992
|
<div class="pf-c-form__group">
|
|
1002
2993
|
<div class="pf-c-form__group-label">
|
|
1003
|
-
<label
|
|
2994
|
+
<label
|
|
2995
|
+
class="pf-c-form__label"
|
|
2996
|
+
for="alert-stacked-example-form-form-state"
|
|
2997
|
+
>
|
|
1004
2998
|
<span class="pf-c-form__label-text">State of residence</span>
|
|
1005
2999
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1006
3000
|
</label>
|
|
@@ -1021,29 +3015,29 @@ section: components
|
|
|
1021
3015
|
</select>
|
|
1022
3016
|
<p
|
|
1023
3017
|
class="pf-c-form__helper-text pf-m-error"
|
|
1024
|
-
id="stacked-
|
|
3018
|
+
id="alert-stacked-example-form-form-email-helper-state"
|
|
1025
3019
|
aria-live="polite"
|
|
1026
3020
|
>Required field</p>
|
|
1027
3021
|
</div>
|
|
1028
3022
|
<div
|
|
1029
3023
|
class="pf-c-form__group"
|
|
1030
3024
|
role="group"
|
|
1031
|
-
aria-labelledby="stacked-
|
|
3025
|
+
aria-labelledby="alert-stacked-example-form-check-group-legend"
|
|
1032
3026
|
>
|
|
1033
3027
|
<div
|
|
1034
3028
|
class="pf-c-form__group-label pf-m-no-padding-top"
|
|
1035
|
-
id="stacked-
|
|
3029
|
+
id="alert-stacked-example-form-check-group-legend"
|
|
1036
3030
|
>
|
|
1037
3031
|
<span
|
|
1038
3032
|
class="pf-c-form__label"
|
|
1039
|
-
for="stacked-
|
|
3033
|
+
for="alert-stacked-example-form-form-experience"
|
|
1040
3034
|
>
|
|
1041
3035
|
<span class="pf-c-form__label-text">How can we contact you?</span>
|
|
1042
3036
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1043
3037
|
</span>
|
|
1044
3038
|
<p
|
|
1045
3039
|
class="pf-c-form__helper-text pf-m-error"
|
|
1046
|
-
id="stacked-
|
|
3040
|
+
id="alert-stacked-example-form-simple-form-info-helper-contact"
|
|
1047
3041
|
aria-live="polite"
|
|
1048
3042
|
>
|
|
1049
3043
|
<span class="pf-c-form__helper-text-icon">
|