@patternfly/patternfly 4.180.0 → 4.182.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/status-icon-sprite.svg +38 -0
- package/components/FormControl/form-control.css +26 -0
- package/components/FormControl/form-control.scss +30 -1
- package/components/Masthead/masthead.css +21 -27
- package/components/Masthead/masthead.scss +21 -27
- package/components/Menu/menu.css +10 -0
- package/components/Menu/menu.scss +14 -0
- package/components/MenuToggle/menu-toggle.css +141 -7
- package/components/MenuToggle/menu-toggle.scss +208 -8
- package/docs/components/FormControl/examples/FormControl.md +151 -0
- package/docs/components/Menu/examples/Menu.md +67 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
- package/docs/components/Page/examples/Page.md +11 -2
- package/docs/components/Table/examples/Table.md +8 -0
- package/docs/components/Wizard/examples/Wizard.md +6 -6
- package/docs/demos/Alert/examples/Alert.md +20 -40
- package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
- package/docs/demos/ContextSelector/examples/ContextSelector.md +86 -166
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
- package/docs/demos/Drawer/examples/Drawer.md +60 -120
- package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
- package/docs/demos/Masthead/examples/Masthead.md +144 -284
- package/docs/demos/Nav/examples/Nav.md +203 -343
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
- package/docs/demos/Page/examples/Page.md +589 -1137
- package/docs/demos/Table/examples/Table.md +26 -26
- package/docs/demos/Tabs/examples/Tabs.md +11 -19
- package/docs/demos/Wizard/examples/Wizard.md +6 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +198 -34
- package/patternfly.css +198 -34
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -0,0 +1,3358 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: 'Description list'
|
|
3
|
+
beta: true
|
|
4
|
+
section: components
|
|
5
|
+
cssPrefix: pf-d-description-list
|
|
6
|
+
---## Examples
|
|
7
|
+
|
|
8
|
+
### Basic
|
|
9
|
+
|
|
10
|
+
```html isFullscreen
|
|
11
|
+
<div class="pf-c-page" id="description-list-basic-demo">
|
|
12
|
+
<a
|
|
13
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
14
|
+
href="#main-content-description-list-basic-demo"
|
|
15
|
+
>Skip to content</a>
|
|
16
|
+
|
|
17
|
+
<header class="pf-c-masthead" id="description-list-basic-demo-masthead">
|
|
18
|
+
<span class="pf-c-masthead__toggle">
|
|
19
|
+
<button
|
|
20
|
+
class="pf-c-button pf-m-plain"
|
|
21
|
+
type="button"
|
|
22
|
+
aria-label="Global navigation"
|
|
23
|
+
>
|
|
24
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
25
|
+
</button>
|
|
26
|
+
</span>
|
|
27
|
+
<div class="pf-c-masthead__main">
|
|
28
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
29
|
+
<picture
|
|
30
|
+
class="pf-c-brand pf-m-picture"
|
|
31
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
32
|
+
>
|
|
33
|
+
<source
|
|
34
|
+
media="(min-width: 768px)"
|
|
35
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
36
|
+
/>
|
|
37
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
38
|
+
<img
|
|
39
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
40
|
+
alt="Fallback patternFly default logo"
|
|
41
|
+
/>
|
|
42
|
+
</picture>
|
|
43
|
+
</a>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="pf-c-masthead__content">
|
|
46
|
+
<div
|
|
47
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
48
|
+
id="description-list-basic-demo-masthead-toolbar"
|
|
49
|
+
>
|
|
50
|
+
<div class="pf-c-toolbar__content">
|
|
51
|
+
<div class="pf-c-toolbar__content-section">
|
|
52
|
+
<div
|
|
53
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
54
|
+
>
|
|
55
|
+
<div class="pf-c-toolbar__item">
|
|
56
|
+
<button
|
|
57
|
+
class="pf-c-button pf-m-plain"
|
|
58
|
+
type="button"
|
|
59
|
+
aria-label="Notifications"
|
|
60
|
+
>
|
|
61
|
+
<span class="pf-c-notification-badge">
|
|
62
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
63
|
+
</span>
|
|
64
|
+
</button>
|
|
65
|
+
</div>
|
|
66
|
+
<div
|
|
67
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
68
|
+
>
|
|
69
|
+
<div class="pf-c-toolbar__item">
|
|
70
|
+
<nav
|
|
71
|
+
class="pf-c-app-launcher"
|
|
72
|
+
aria-label="Application launcher"
|
|
73
|
+
id="description-list-basic-demo-masthead-icon-group--app-launcher"
|
|
74
|
+
>
|
|
75
|
+
<button
|
|
76
|
+
class="pf-c-app-launcher__toggle"
|
|
77
|
+
type="button"
|
|
78
|
+
id="description-list-basic-demo-masthead-icon-group--app-launcher-button"
|
|
79
|
+
aria-expanded="false"
|
|
80
|
+
aria-label="Application launcher"
|
|
81
|
+
>
|
|
82
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
83
|
+
</button>
|
|
84
|
+
<div
|
|
85
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
86
|
+
hidden
|
|
87
|
+
>
|
|
88
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
89
|
+
<div class="pf-c-search-input">
|
|
90
|
+
<div class="pf-c-search-input__bar">
|
|
91
|
+
<span class="pf-c-search-input__text">
|
|
92
|
+
<span class="pf-c-search-input__icon">
|
|
93
|
+
<i
|
|
94
|
+
class="fas fa-search fa-fw"
|
|
95
|
+
aria-hidden="true"
|
|
96
|
+
></i>
|
|
97
|
+
</span>
|
|
98
|
+
<input
|
|
99
|
+
class="pf-c-search-input__text-input"
|
|
100
|
+
type="text"
|
|
101
|
+
placeholder="Filter by name"
|
|
102
|
+
aria-label="Filter by name"
|
|
103
|
+
/>
|
|
104
|
+
</span>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<section class="pf-c-app-launcher__group">
|
|
109
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
110
|
+
<ul>
|
|
111
|
+
<li
|
|
112
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
113
|
+
>
|
|
114
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
115
|
+
Link 1
|
|
116
|
+
<span
|
|
117
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
118
|
+
>
|
|
119
|
+
<i
|
|
120
|
+
class="fas fa-external-link-alt"
|
|
121
|
+
aria-hidden="true"
|
|
122
|
+
></i>
|
|
123
|
+
</span>
|
|
124
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
125
|
+
</a>
|
|
126
|
+
<button
|
|
127
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
128
|
+
type="button"
|
|
129
|
+
aria-label="Favorite"
|
|
130
|
+
>
|
|
131
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
132
|
+
</button>
|
|
133
|
+
</li>
|
|
134
|
+
<li
|
|
135
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
136
|
+
>
|
|
137
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
138
|
+
Link 2
|
|
139
|
+
<span
|
|
140
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
141
|
+
>
|
|
142
|
+
<i
|
|
143
|
+
class="fas fa-external-link-alt"
|
|
144
|
+
aria-hidden="true"
|
|
145
|
+
></i>
|
|
146
|
+
</span>
|
|
147
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
148
|
+
</a>
|
|
149
|
+
<button
|
|
150
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
151
|
+
type="button"
|
|
152
|
+
aria-label="Favorite"
|
|
153
|
+
>
|
|
154
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
155
|
+
</button>
|
|
156
|
+
</li>
|
|
157
|
+
</ul>
|
|
158
|
+
</section>
|
|
159
|
+
<hr class="pf-c-divider" />
|
|
160
|
+
<section class="pf-c-app-launcher__group">
|
|
161
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
162
|
+
<ul>
|
|
163
|
+
<li
|
|
164
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
165
|
+
>
|
|
166
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
167
|
+
Link 1
|
|
168
|
+
<span
|
|
169
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
170
|
+
>
|
|
171
|
+
<i
|
|
172
|
+
class="fas fa-external-link-alt"
|
|
173
|
+
aria-hidden="true"
|
|
174
|
+
></i>
|
|
175
|
+
</span>
|
|
176
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
177
|
+
</a>
|
|
178
|
+
<button
|
|
179
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
180
|
+
type="button"
|
|
181
|
+
aria-label="Favorite"
|
|
182
|
+
>
|
|
183
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
184
|
+
</button>
|
|
185
|
+
</li>
|
|
186
|
+
<li
|
|
187
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
188
|
+
>
|
|
189
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
190
|
+
Link 2
|
|
191
|
+
<span
|
|
192
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
193
|
+
>
|
|
194
|
+
<i
|
|
195
|
+
class="fas fa-external-link-alt"
|
|
196
|
+
aria-hidden="true"
|
|
197
|
+
></i>
|
|
198
|
+
</span>
|
|
199
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
200
|
+
</a>
|
|
201
|
+
<button
|
|
202
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
203
|
+
type="button"
|
|
204
|
+
aria-label="Favorite"
|
|
205
|
+
>
|
|
206
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
207
|
+
</button>
|
|
208
|
+
</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</section>
|
|
211
|
+
</div>
|
|
212
|
+
</nav>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="pf-c-toolbar__item">
|
|
215
|
+
<div class="pf-c-dropdown">
|
|
216
|
+
<button
|
|
217
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
218
|
+
id="description-list-basic-demo-masthead-settings-button"
|
|
219
|
+
aria-expanded="false"
|
|
220
|
+
type="button"
|
|
221
|
+
aria-label="Settings"
|
|
222
|
+
>
|
|
223
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
224
|
+
</button>
|
|
225
|
+
<ul
|
|
226
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
227
|
+
aria-labelledby="description-list-basic-demo-masthead-settings-button"
|
|
228
|
+
hidden
|
|
229
|
+
>
|
|
230
|
+
<li>
|
|
231
|
+
<button
|
|
232
|
+
class="pf-c-dropdown__menu-item"
|
|
233
|
+
type="button"
|
|
234
|
+
>Settings</button>
|
|
235
|
+
</li>
|
|
236
|
+
<li>
|
|
237
|
+
<button
|
|
238
|
+
class="pf-c-dropdown__menu-item"
|
|
239
|
+
type="button"
|
|
240
|
+
>Use the beta release</button>
|
|
241
|
+
</li>
|
|
242
|
+
</ul>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="pf-c-toolbar__item">
|
|
246
|
+
<div class="pf-c-dropdown">
|
|
247
|
+
<button
|
|
248
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
249
|
+
id="description-list-basic-demo-masthead-help-button"
|
|
250
|
+
aria-expanded="false"
|
|
251
|
+
type="button"
|
|
252
|
+
aria-label="Help"
|
|
253
|
+
>
|
|
254
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
255
|
+
</button>
|
|
256
|
+
<ul
|
|
257
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
258
|
+
aria-labelledby="description-list-basic-demo-masthead-help-button"
|
|
259
|
+
hidden
|
|
260
|
+
>
|
|
261
|
+
<li>
|
|
262
|
+
<button
|
|
263
|
+
class="pf-c-dropdown__menu-item"
|
|
264
|
+
type="button"
|
|
265
|
+
>Support options</button>
|
|
266
|
+
</li>
|
|
267
|
+
<li>
|
|
268
|
+
<button
|
|
269
|
+
class="pf-c-dropdown__menu-item"
|
|
270
|
+
type="button"
|
|
271
|
+
>Open support case</button>
|
|
272
|
+
</li>
|
|
273
|
+
<li>
|
|
274
|
+
<button
|
|
275
|
+
class="pf-c-dropdown__menu-item"
|
|
276
|
+
type="button"
|
|
277
|
+
>API documentation</button>
|
|
278
|
+
</li>
|
|
279
|
+
</ul>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
284
|
+
<div class="pf-c-dropdown">
|
|
285
|
+
<button
|
|
286
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
287
|
+
type="button"
|
|
288
|
+
aria-expanded="false"
|
|
289
|
+
aria-label="Actions"
|
|
290
|
+
>
|
|
291
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
292
|
+
</button>
|
|
293
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
294
|
+
<div class="pf-c-menu__content">
|
|
295
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
296
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
297
|
+
<li
|
|
298
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
299
|
+
role="none"
|
|
300
|
+
>
|
|
301
|
+
<button
|
|
302
|
+
class="pf-c-menu__item"
|
|
303
|
+
type="button"
|
|
304
|
+
disabled
|
|
305
|
+
role="menuitem"
|
|
306
|
+
>
|
|
307
|
+
<span class="pf-c-menu__item-description">
|
|
308
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
309
|
+
<div
|
|
310
|
+
class="pf-u-font-size-md"
|
|
311
|
+
>mshaksho@redhat.com</div>
|
|
312
|
+
</span>
|
|
313
|
+
</button>
|
|
314
|
+
</li>
|
|
315
|
+
<li
|
|
316
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
317
|
+
role="none"
|
|
318
|
+
>
|
|
319
|
+
<button
|
|
320
|
+
class="pf-c-menu__item"
|
|
321
|
+
type="button"
|
|
322
|
+
disabled
|
|
323
|
+
role="menuitem"
|
|
324
|
+
>
|
|
325
|
+
<span class="pf-c-menu__item-description">
|
|
326
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
327
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
328
|
+
</span>
|
|
329
|
+
</button>
|
|
330
|
+
</li>
|
|
331
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
332
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
333
|
+
<button
|
|
334
|
+
class="pf-c-menu__item"
|
|
335
|
+
type="button"
|
|
336
|
+
role="menuitem"
|
|
337
|
+
>
|
|
338
|
+
<span class="pf-c-menu__item-main">
|
|
339
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
340
|
+
</span>
|
|
341
|
+
</button>
|
|
342
|
+
</li>
|
|
343
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
344
|
+
<button
|
|
345
|
+
class="pf-c-menu__item"
|
|
346
|
+
type="button"
|
|
347
|
+
role="menuitem"
|
|
348
|
+
>
|
|
349
|
+
<span class="pf-c-menu__item-main">
|
|
350
|
+
<span
|
|
351
|
+
class="pf-c-menu__item-text"
|
|
352
|
+
>User management</span>
|
|
353
|
+
</span>
|
|
354
|
+
</button>
|
|
355
|
+
</li>
|
|
356
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
357
|
+
<button
|
|
358
|
+
class="pf-c-menu__item"
|
|
359
|
+
type="button"
|
|
360
|
+
role="menuitem"
|
|
361
|
+
>
|
|
362
|
+
<span class="pf-c-menu__item-main">
|
|
363
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
364
|
+
</span>
|
|
365
|
+
</button>
|
|
366
|
+
</li>
|
|
367
|
+
</ul>
|
|
368
|
+
</section>
|
|
369
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
370
|
+
<section class="pf-c-menu__group">
|
|
371
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
372
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
373
|
+
<button
|
|
374
|
+
class="pf-c-menu__item"
|
|
375
|
+
type="button"
|
|
376
|
+
role="menuitem"
|
|
377
|
+
aria-expanded="false"
|
|
378
|
+
>
|
|
379
|
+
<span class="pf-c-menu__item-main">
|
|
380
|
+
<span class="pf-c-menu__item-icon">
|
|
381
|
+
<i
|
|
382
|
+
class="fas fa-fw fa-cog"
|
|
383
|
+
aria-hidden="true"
|
|
384
|
+
></i>
|
|
385
|
+
</span>
|
|
386
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
387
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
388
|
+
<i class="fas fa-angle-right"></i>
|
|
389
|
+
</span>
|
|
390
|
+
</span>
|
|
391
|
+
</button>
|
|
392
|
+
<div class="pf-c-menu" hidden>
|
|
393
|
+
<div class="pf-c-menu__content">
|
|
394
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
395
|
+
<li
|
|
396
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
397
|
+
role="none"
|
|
398
|
+
>
|
|
399
|
+
<button
|
|
400
|
+
class="pf-c-menu__item"
|
|
401
|
+
type="button"
|
|
402
|
+
role="menuitem"
|
|
403
|
+
>
|
|
404
|
+
<span class="pf-c-menu__item-main">
|
|
405
|
+
<span
|
|
406
|
+
class="pf-c-menu__item-toggle-icon"
|
|
407
|
+
>
|
|
408
|
+
<i class="fas fa-angle-left"></i>
|
|
409
|
+
</span>
|
|
410
|
+
<span class="pf-c-menu__item-icon">
|
|
411
|
+
<i
|
|
412
|
+
class="fas fa-fw fa-cog"
|
|
413
|
+
aria-hidden="true"
|
|
414
|
+
></i>
|
|
415
|
+
</span>
|
|
416
|
+
<span
|
|
417
|
+
class="pf-c-menu__item-text"
|
|
418
|
+
>Settings</span>
|
|
419
|
+
</span>
|
|
420
|
+
</button>
|
|
421
|
+
</li>
|
|
422
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
423
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
424
|
+
<a
|
|
425
|
+
class="pf-c-menu__item"
|
|
426
|
+
href="#"
|
|
427
|
+
role="menuitem"
|
|
428
|
+
>
|
|
429
|
+
<span class="pf-c-menu__item-main">
|
|
430
|
+
<span
|
|
431
|
+
class="pf-c-menu__item-text"
|
|
432
|
+
>Customer support</span>
|
|
433
|
+
</span>
|
|
434
|
+
</a>
|
|
435
|
+
</li>
|
|
436
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
437
|
+
<a
|
|
438
|
+
class="pf-c-menu__item"
|
|
439
|
+
href="#"
|
|
440
|
+
role="menuitem"
|
|
441
|
+
>
|
|
442
|
+
<span class="pf-c-menu__item-main">
|
|
443
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
444
|
+
</span>
|
|
445
|
+
</a>
|
|
446
|
+
</li>
|
|
447
|
+
</ul>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
</li>
|
|
451
|
+
|
|
452
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
453
|
+
<button
|
|
454
|
+
class="pf-c-menu__item"
|
|
455
|
+
type="button"
|
|
456
|
+
role="menuitem"
|
|
457
|
+
aria-expanded="false"
|
|
458
|
+
>
|
|
459
|
+
<span class="pf-c-menu__item-main">
|
|
460
|
+
<span class="pf-c-menu__item-icon">
|
|
461
|
+
<i
|
|
462
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
463
|
+
aria-hidden="true"
|
|
464
|
+
></i>
|
|
465
|
+
</span>
|
|
466
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
467
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
468
|
+
<i class="fas fa-angle-right"></i>
|
|
469
|
+
</span>
|
|
470
|
+
</span>
|
|
471
|
+
</button>
|
|
472
|
+
<div class="pf-c-menu" hidden>
|
|
473
|
+
<div class="pf-c-menu__content">
|
|
474
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
475
|
+
<li
|
|
476
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
477
|
+
role="none"
|
|
478
|
+
>
|
|
479
|
+
<button
|
|
480
|
+
class="pf-c-menu__item"
|
|
481
|
+
type="button"
|
|
482
|
+
role="menuitem"
|
|
483
|
+
>
|
|
484
|
+
<span class="pf-c-menu__item-main">
|
|
485
|
+
<span
|
|
486
|
+
class="pf-c-menu__item-toggle-icon"
|
|
487
|
+
>
|
|
488
|
+
<i class="fas fa-angle-left"></i>
|
|
489
|
+
</span>
|
|
490
|
+
<span class="pf-c-menu__item-icon">
|
|
491
|
+
<i
|
|
492
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
493
|
+
aria-hidden="true"
|
|
494
|
+
></i>
|
|
495
|
+
</span>
|
|
496
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
497
|
+
</span>
|
|
498
|
+
</button>
|
|
499
|
+
</li>
|
|
500
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
501
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
502
|
+
<a
|
|
503
|
+
class="pf-c-menu__item"
|
|
504
|
+
href="#"
|
|
505
|
+
role="menuitem"
|
|
506
|
+
>
|
|
507
|
+
<span class="pf-c-menu__item-main">
|
|
508
|
+
<span
|
|
509
|
+
class="pf-c-menu__item-text"
|
|
510
|
+
>Support options</span>
|
|
511
|
+
</span>
|
|
512
|
+
</a>
|
|
513
|
+
</li>
|
|
514
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
515
|
+
<a
|
|
516
|
+
class="pf-c-menu__item"
|
|
517
|
+
href="#"
|
|
518
|
+
role="menuitem"
|
|
519
|
+
>
|
|
520
|
+
<span class="pf-c-menu__item-main">
|
|
521
|
+
<span
|
|
522
|
+
class="pf-c-menu__item-text"
|
|
523
|
+
>Open support case</span>
|
|
524
|
+
</span>
|
|
525
|
+
</a>
|
|
526
|
+
</li>
|
|
527
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
528
|
+
<a
|
|
529
|
+
class="pf-c-menu__item"
|
|
530
|
+
href="#"
|
|
531
|
+
role="menuitem"
|
|
532
|
+
>
|
|
533
|
+
<span class="pf-c-menu__item-main">
|
|
534
|
+
<span
|
|
535
|
+
class="pf-c-menu__item-text"
|
|
536
|
+
>API documentation</span>
|
|
537
|
+
</span>
|
|
538
|
+
</a>
|
|
539
|
+
</li>
|
|
540
|
+
</ul>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
</li>
|
|
544
|
+
|
|
545
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
546
|
+
<button
|
|
547
|
+
class="pf-c-menu__item"
|
|
548
|
+
type="button"
|
|
549
|
+
role="menuitem"
|
|
550
|
+
>
|
|
551
|
+
<span class="pf-c-menu__item-main">
|
|
552
|
+
<span class="pf-c-menu__item-icon">
|
|
553
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
554
|
+
</span>
|
|
555
|
+
<span
|
|
556
|
+
class="pf-c-menu__item-text"
|
|
557
|
+
>Application launcher</span>
|
|
558
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
559
|
+
<i class="fas fa-angle-right"></i>
|
|
560
|
+
</span>
|
|
561
|
+
</span>
|
|
562
|
+
</button>
|
|
563
|
+
<div class="pf-c-menu" hidden>
|
|
564
|
+
<div class="pf-c-menu__header">
|
|
565
|
+
<button
|
|
566
|
+
class="pf-c-menu__item"
|
|
567
|
+
type="button"
|
|
568
|
+
role="menuitem"
|
|
569
|
+
>
|
|
570
|
+
<span class="pf-c-menu__item-main">
|
|
571
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
572
|
+
<i class="fas fa-angle-left"></i>
|
|
573
|
+
</span>
|
|
574
|
+
<span class="pf-c-menu__item-icon">
|
|
575
|
+
<i
|
|
576
|
+
class="fas fa-fw fa-th"
|
|
577
|
+
aria-hidden="true"
|
|
578
|
+
></i>
|
|
579
|
+
</span>
|
|
580
|
+
<span
|
|
581
|
+
class="pf-c-menu__item-text"
|
|
582
|
+
>Application launcher</span>
|
|
583
|
+
</span>
|
|
584
|
+
</button>
|
|
585
|
+
</div>
|
|
586
|
+
<div class="pf-c-menu__search">
|
|
587
|
+
<div class="pf-c-menu__search-input">
|
|
588
|
+
<div class="pf-c-search-input">
|
|
589
|
+
<div class="pf-c-search-input__bar">
|
|
590
|
+
<span class="pf-c-search-input__text">
|
|
591
|
+
<span class="pf-c-search-input__icon">
|
|
592
|
+
<i
|
|
593
|
+
class="fas fa-search fa-fw"
|
|
594
|
+
aria-hidden="true"
|
|
595
|
+
></i>
|
|
596
|
+
</span>
|
|
597
|
+
<input
|
|
598
|
+
class="pf-c-search-input__text-input"
|
|
599
|
+
type="text"
|
|
600
|
+
placeholder="Search"
|
|
601
|
+
aria-label="Search"
|
|
602
|
+
/>
|
|
603
|
+
</span>
|
|
604
|
+
</div>
|
|
605
|
+
</div>
|
|
606
|
+
</div>
|
|
607
|
+
</div>
|
|
608
|
+
<hr class="pf-c-divider" />
|
|
609
|
+
<section class="pf-c-menu__group">
|
|
610
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
611
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
612
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
613
|
+
<a
|
|
614
|
+
class="pf-c-menu__item"
|
|
615
|
+
href="#"
|
|
616
|
+
role="menuitem"
|
|
617
|
+
>
|
|
618
|
+
<span class="pf-c-menu__item-main">
|
|
619
|
+
<span
|
|
620
|
+
class="pf-c-menu__item-text"
|
|
621
|
+
>Link 1</span>
|
|
622
|
+
</span>
|
|
623
|
+
</a>
|
|
624
|
+
<button
|
|
625
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
626
|
+
type="button"
|
|
627
|
+
aria-label="Starred"
|
|
628
|
+
>
|
|
629
|
+
<span class="pf-c-menu__item-action-icon">
|
|
630
|
+
<i
|
|
631
|
+
class="fas fa-star"
|
|
632
|
+
aria-hidden="true"
|
|
633
|
+
></i>
|
|
634
|
+
</span>
|
|
635
|
+
</button>
|
|
636
|
+
</li>
|
|
637
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
638
|
+
<a
|
|
639
|
+
class="pf-c-menu__item"
|
|
640
|
+
href="#"
|
|
641
|
+
role="menuitem"
|
|
642
|
+
target="_blank"
|
|
643
|
+
>
|
|
644
|
+
<span class="pf-c-menu__item-main">
|
|
645
|
+
<span
|
|
646
|
+
class="pf-c-menu__item-text"
|
|
647
|
+
>Link 2</span>
|
|
648
|
+
<span
|
|
649
|
+
class="pf-c-menu__item-external-icon"
|
|
650
|
+
>
|
|
651
|
+
<i
|
|
652
|
+
class="fas fa-external-link-alt"
|
|
653
|
+
aria-hidden="true"
|
|
654
|
+
></i>
|
|
655
|
+
</span>
|
|
656
|
+
<span
|
|
657
|
+
class="pf-screen-reader"
|
|
658
|
+
>(opens new window)</span>
|
|
659
|
+
</span>
|
|
660
|
+
</a>
|
|
661
|
+
<button
|
|
662
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
663
|
+
type="button"
|
|
664
|
+
aria-label="Not starred"
|
|
665
|
+
>
|
|
666
|
+
<span class="pf-c-menu__item-action-icon">
|
|
667
|
+
<i
|
|
668
|
+
class="fas fa-star"
|
|
669
|
+
aria-hidden="true"
|
|
670
|
+
></i>
|
|
671
|
+
</span>
|
|
672
|
+
</button>
|
|
673
|
+
</li>
|
|
674
|
+
</ul>
|
|
675
|
+
</section>
|
|
676
|
+
<hr class="pf-c-divider" />
|
|
677
|
+
<section class="pf-c-menu__group">
|
|
678
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
679
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
680
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
681
|
+
<a
|
|
682
|
+
class="pf-c-menu__item"
|
|
683
|
+
href="#"
|
|
684
|
+
role="menuitem"
|
|
685
|
+
>
|
|
686
|
+
<span class="pf-c-menu__item-main">
|
|
687
|
+
<span
|
|
688
|
+
class="pf-c-menu__item-text"
|
|
689
|
+
>Link 1</span>
|
|
690
|
+
</span>
|
|
691
|
+
</a>
|
|
692
|
+
<button
|
|
693
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
694
|
+
type="button"
|
|
695
|
+
aria-label="Not starred"
|
|
696
|
+
>
|
|
697
|
+
<span class="pf-c-menu__item-action-icon">
|
|
698
|
+
<i
|
|
699
|
+
class="fas fa-star"
|
|
700
|
+
aria-hidden="true"
|
|
701
|
+
></i>
|
|
702
|
+
</span>
|
|
703
|
+
</button>
|
|
704
|
+
</li>
|
|
705
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
706
|
+
<a
|
|
707
|
+
class="pf-c-menu__item"
|
|
708
|
+
href="#"
|
|
709
|
+
role="menuitem"
|
|
710
|
+
target="_blank"
|
|
711
|
+
>
|
|
712
|
+
<span class="pf-c-menu__item-main">
|
|
713
|
+
<span
|
|
714
|
+
class="pf-c-menu__item-text"
|
|
715
|
+
>Link 2</span>
|
|
716
|
+
<span
|
|
717
|
+
class="pf-c-menu__item-external-icon"
|
|
718
|
+
>
|
|
719
|
+
<i
|
|
720
|
+
class="fas fa-external-link-alt"
|
|
721
|
+
aria-hidden="true"
|
|
722
|
+
></i>
|
|
723
|
+
</span>
|
|
724
|
+
<span
|
|
725
|
+
class="pf-screen-reader"
|
|
726
|
+
>(opens new window)</span>
|
|
727
|
+
</span>
|
|
728
|
+
</a>
|
|
729
|
+
<button
|
|
730
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
731
|
+
type="button"
|
|
732
|
+
aria-label="Starred"
|
|
733
|
+
>
|
|
734
|
+
<span class="pf-c-menu__item-action-icon">
|
|
735
|
+
<i
|
|
736
|
+
class="fas fa-star"
|
|
737
|
+
aria-hidden="true"
|
|
738
|
+
></i>
|
|
739
|
+
</span>
|
|
740
|
+
</button>
|
|
741
|
+
</li>
|
|
742
|
+
</ul>
|
|
743
|
+
</section>
|
|
744
|
+
</div>
|
|
745
|
+
</li>
|
|
746
|
+
</ul>
|
|
747
|
+
</section>
|
|
748
|
+
</div>
|
|
749
|
+
</div>
|
|
750
|
+
</div>
|
|
751
|
+
</div>
|
|
752
|
+
</div>
|
|
753
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
754
|
+
<div
|
|
755
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
756
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
757
|
+
>
|
|
758
|
+
<button
|
|
759
|
+
class="pf-c-dropdown__toggle"
|
|
760
|
+
id="description-list-basic-demo-masthead-profile-button"
|
|
761
|
+
aria-expanded="false"
|
|
762
|
+
type="button"
|
|
763
|
+
>
|
|
764
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
765
|
+
<img
|
|
766
|
+
class="pf-c-avatar"
|
|
767
|
+
src="/assets/images/img_avatar.svg"
|
|
768
|
+
alt="Avatar image"
|
|
769
|
+
/>
|
|
770
|
+
</span>
|
|
771
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
772
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
773
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
774
|
+
</span>
|
|
775
|
+
</button>
|
|
776
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
777
|
+
<section class="pf-c-dropdown__group">
|
|
778
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
779
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
780
|
+
<div>123456789</div>
|
|
781
|
+
</div>
|
|
782
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
783
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
784
|
+
<div>mshaksho@redhat.com</div>
|
|
785
|
+
</div>
|
|
786
|
+
</section>
|
|
787
|
+
<hr class="pf-c-divider" />
|
|
788
|
+
<section class="pf-c-dropdown__group">
|
|
789
|
+
<ul>
|
|
790
|
+
<li>
|
|
791
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
792
|
+
</li>
|
|
793
|
+
<li>
|
|
794
|
+
<a
|
|
795
|
+
class="pf-c-dropdown__menu-item"
|
|
796
|
+
href="#"
|
|
797
|
+
>User management</a>
|
|
798
|
+
</li>
|
|
799
|
+
<li>
|
|
800
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
801
|
+
</li>
|
|
802
|
+
</ul>
|
|
803
|
+
</section>
|
|
804
|
+
</div>
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
</div>
|
|
808
|
+
</div>
|
|
809
|
+
</div>
|
|
810
|
+
</div>
|
|
811
|
+
</header>
|
|
812
|
+
<div class="pf-c-page__sidebar">
|
|
813
|
+
<div class="pf-c-page__sidebar-body">
|
|
814
|
+
<nav
|
|
815
|
+
class="pf-c-nav"
|
|
816
|
+
id="description-list-basic-demo-primary-nav"
|
|
817
|
+
aria-label="Global"
|
|
818
|
+
>
|
|
819
|
+
<ul class="pf-c-nav__list">
|
|
820
|
+
<li class="pf-c-nav__item">
|
|
821
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
822
|
+
</li>
|
|
823
|
+
<li class="pf-c-nav__item">
|
|
824
|
+
<a
|
|
825
|
+
href="#"
|
|
826
|
+
class="pf-c-nav__link pf-m-current"
|
|
827
|
+
aria-current="page"
|
|
828
|
+
>Policy</a>
|
|
829
|
+
</li>
|
|
830
|
+
<li class="pf-c-nav__item">
|
|
831
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
832
|
+
</li>
|
|
833
|
+
<li class="pf-c-nav__item">
|
|
834
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
835
|
+
</li>
|
|
836
|
+
<li class="pf-c-nav__item">
|
|
837
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
838
|
+
</li>
|
|
839
|
+
</ul>
|
|
840
|
+
</nav>
|
|
841
|
+
</div>
|
|
842
|
+
</div>
|
|
843
|
+
<main
|
|
844
|
+
class="pf-c-page__main"
|
|
845
|
+
tabindex="-1"
|
|
846
|
+
id="main-content-description-list-basic-demo"
|
|
847
|
+
>
|
|
848
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
849
|
+
<div class="pf-c-page__main-body">
|
|
850
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
851
|
+
<ol class="pf-c-breadcrumb__list">
|
|
852
|
+
<li class="pf-c-breadcrumb__item">
|
|
853
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
854
|
+
</li>
|
|
855
|
+
<li class="pf-c-breadcrumb__item">
|
|
856
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
857
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
858
|
+
</span>
|
|
859
|
+
|
|
860
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
861
|
+
</li>
|
|
862
|
+
<li class="pf-c-breadcrumb__item">
|
|
863
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
864
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
865
|
+
</span>
|
|
866
|
+
|
|
867
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
868
|
+
</li>
|
|
869
|
+
<li class="pf-c-breadcrumb__item">
|
|
870
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
871
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
872
|
+
</span>
|
|
873
|
+
|
|
874
|
+
<a
|
|
875
|
+
href="#"
|
|
876
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
877
|
+
aria-current="page"
|
|
878
|
+
>Section landing</a>
|
|
879
|
+
</li>
|
|
880
|
+
</ol>
|
|
881
|
+
</nav>
|
|
882
|
+
</div>
|
|
883
|
+
</section>
|
|
884
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
885
|
+
<div class="pf-c-page__main-body">
|
|
886
|
+
<div class="pf-c-content">
|
|
887
|
+
<h1>Main title</h1>
|
|
888
|
+
<p>This is a full page demo.</p>
|
|
889
|
+
</div>
|
|
890
|
+
</div>
|
|
891
|
+
</section>
|
|
892
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
893
|
+
<div class="pf-c-page__main-body">
|
|
894
|
+
<div class="pf-c-card">
|
|
895
|
+
<div class="pf-c-card__header">
|
|
896
|
+
<h2 class="pf-c-title pf-m-lg">Details</h2>
|
|
897
|
+
</div>
|
|
898
|
+
<hr class="pf-c-divider" />
|
|
899
|
+
<div class="pf-c-card__body">
|
|
900
|
+
<dl class="pf-c-description-list pf-m-auto-fit">
|
|
901
|
+
<div class="pf-c-description-list__group">
|
|
902
|
+
<dt class="pf-c-description-list__term">
|
|
903
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
904
|
+
</dt>
|
|
905
|
+
<dd class="pf-c-description-list__description">
|
|
906
|
+
<div class="pf-c-description-list__text">mary-test</div>
|
|
907
|
+
</dd>
|
|
908
|
+
</div>
|
|
909
|
+
<div class="pf-c-description-list__group">
|
|
910
|
+
<dt class="pf-c-description-list__term">
|
|
911
|
+
<span class="pf-c-description-list__text">Status</span>
|
|
912
|
+
</dt>
|
|
913
|
+
<dd class="pf-c-description-list__description">
|
|
914
|
+
<div class="pf-c-description-list__text">
|
|
915
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
916
|
+
<div class="pf-l-flex__item">
|
|
917
|
+
<i
|
|
918
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
919
|
+
aria-hidden="true"
|
|
920
|
+
></i>
|
|
921
|
+
</div>
|
|
922
|
+
<div class="pf-l-flex__item">
|
|
923
|
+
<span>Active</span>
|
|
924
|
+
</div>
|
|
925
|
+
</div>
|
|
926
|
+
</div>
|
|
927
|
+
</dd>
|
|
928
|
+
</div>
|
|
929
|
+
<div class="pf-c-description-list__group">
|
|
930
|
+
<dt class="pf-c-description-list__term">
|
|
931
|
+
<span class="pf-c-description-list__text">Default pull secret</span>
|
|
932
|
+
</dt>
|
|
933
|
+
<dd class="pf-c-description-list__description">
|
|
934
|
+
<div class="pf-c-description-list__text">
|
|
935
|
+
<span class="pf-u-color-300">Not configured</span>
|
|
936
|
+
</div>
|
|
937
|
+
</dd>
|
|
938
|
+
</div>
|
|
939
|
+
<div class="pf-c-description-list__group">
|
|
940
|
+
<dt class="pf-c-description-list__term">
|
|
941
|
+
<span class="pf-c-description-list__text">Tolerations</span>
|
|
942
|
+
</dt>
|
|
943
|
+
<dd class="pf-c-description-list__description">
|
|
944
|
+
<div class="pf-c-description-list__text">6 Tolerations</div>
|
|
945
|
+
</dd>
|
|
946
|
+
</div>
|
|
947
|
+
<div class="pf-c-description-list__group">
|
|
948
|
+
<dt class="pf-c-description-list__term">
|
|
949
|
+
<span class="pf-c-description-list__text">Network Policies</span>
|
|
950
|
+
</dt>
|
|
951
|
+
<dd class="pf-c-description-list__description">
|
|
952
|
+
<div class="pf-c-description-list__text">
|
|
953
|
+
<a href="#">Network Policies</a>
|
|
954
|
+
</div>
|
|
955
|
+
</dd>
|
|
956
|
+
</div>
|
|
957
|
+
<div class="pf-c-description-list__group">
|
|
958
|
+
<dt class="pf-c-description-list__term">
|
|
959
|
+
<span class="pf-c-description-list__text">Display name</span>
|
|
960
|
+
</dt>
|
|
961
|
+
<dd class="pf-c-description-list__description">
|
|
962
|
+
<div class="pf-c-description-list__text">mary</div>
|
|
963
|
+
</dd>
|
|
964
|
+
</div>
|
|
965
|
+
<div class="pf-c-description-list__group">
|
|
966
|
+
<dt class="pf-c-description-list__term">
|
|
967
|
+
<span class="pf-c-description-list__text">Requester</span>
|
|
968
|
+
</dt>
|
|
969
|
+
<dd class="pf-c-description-list__description">
|
|
970
|
+
<div class="pf-c-description-list__text">kube:admin</div>
|
|
971
|
+
</dd>
|
|
972
|
+
</div>
|
|
973
|
+
<div class="pf-c-description-list__group">
|
|
974
|
+
<dt class="pf-c-description-list__term">
|
|
975
|
+
<span class="pf-c-description-list__text">Created at:</span>
|
|
976
|
+
</dt>
|
|
977
|
+
<dd class="pf-c-description-list__description">
|
|
978
|
+
<div class="pf-c-description-list__text">3 minutes ago</div>
|
|
979
|
+
</dd>
|
|
980
|
+
</div>
|
|
981
|
+
</dl>
|
|
982
|
+
</div>
|
|
983
|
+
</div>
|
|
984
|
+
</div>
|
|
985
|
+
</section>
|
|
986
|
+
</main>
|
|
987
|
+
</div>
|
|
988
|
+
|
|
989
|
+
```
|
|
990
|
+
|
|
991
|
+
### In drawer
|
|
992
|
+
|
|
993
|
+
```html isFullscreen
|
|
994
|
+
<div class="pf-c-page" id="description-list-in-drawer-demo">
|
|
995
|
+
<a
|
|
996
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
997
|
+
href="#main-content-description-list-in-drawer-demo"
|
|
998
|
+
>Skip to content</a>
|
|
999
|
+
|
|
1000
|
+
<header class="pf-c-masthead" id="description-list-in-drawer-demo-masthead">
|
|
1001
|
+
<span class="pf-c-masthead__toggle">
|
|
1002
|
+
<button
|
|
1003
|
+
class="pf-c-button pf-m-plain"
|
|
1004
|
+
type="button"
|
|
1005
|
+
aria-label="Global navigation"
|
|
1006
|
+
>
|
|
1007
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1008
|
+
</button>
|
|
1009
|
+
</span>
|
|
1010
|
+
<div class="pf-c-masthead__main">
|
|
1011
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1012
|
+
<picture
|
|
1013
|
+
class="pf-c-brand pf-m-picture"
|
|
1014
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1015
|
+
>
|
|
1016
|
+
<source
|
|
1017
|
+
media="(min-width: 768px)"
|
|
1018
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1019
|
+
/>
|
|
1020
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1021
|
+
<img
|
|
1022
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1023
|
+
alt="Fallback patternFly default logo"
|
|
1024
|
+
/>
|
|
1025
|
+
</picture>
|
|
1026
|
+
</a>
|
|
1027
|
+
</div>
|
|
1028
|
+
<div class="pf-c-masthead__content">
|
|
1029
|
+
<div
|
|
1030
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1031
|
+
id="description-list-in-drawer-demo-masthead-toolbar"
|
|
1032
|
+
>
|
|
1033
|
+
<div class="pf-c-toolbar__content">
|
|
1034
|
+
<div class="pf-c-toolbar__content-section">
|
|
1035
|
+
<div
|
|
1036
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1037
|
+
>
|
|
1038
|
+
<div class="pf-c-toolbar__item">
|
|
1039
|
+
<button
|
|
1040
|
+
class="pf-c-button pf-m-plain"
|
|
1041
|
+
type="button"
|
|
1042
|
+
aria-label="Notifications"
|
|
1043
|
+
>
|
|
1044
|
+
<span class="pf-c-notification-badge">
|
|
1045
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
1046
|
+
</span>
|
|
1047
|
+
</button>
|
|
1048
|
+
</div>
|
|
1049
|
+
<div
|
|
1050
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1051
|
+
>
|
|
1052
|
+
<div class="pf-c-toolbar__item">
|
|
1053
|
+
<nav
|
|
1054
|
+
class="pf-c-app-launcher"
|
|
1055
|
+
aria-label="Application launcher"
|
|
1056
|
+
id="description-list-in-drawer-demo-masthead-icon-group--app-launcher"
|
|
1057
|
+
>
|
|
1058
|
+
<button
|
|
1059
|
+
class="pf-c-app-launcher__toggle"
|
|
1060
|
+
type="button"
|
|
1061
|
+
id="description-list-in-drawer-demo-masthead-icon-group--app-launcher-button"
|
|
1062
|
+
aria-expanded="false"
|
|
1063
|
+
aria-label="Application launcher"
|
|
1064
|
+
>
|
|
1065
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1066
|
+
</button>
|
|
1067
|
+
<div
|
|
1068
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1069
|
+
hidden
|
|
1070
|
+
>
|
|
1071
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1072
|
+
<div class="pf-c-search-input">
|
|
1073
|
+
<div class="pf-c-search-input__bar">
|
|
1074
|
+
<span class="pf-c-search-input__text">
|
|
1075
|
+
<span class="pf-c-search-input__icon">
|
|
1076
|
+
<i
|
|
1077
|
+
class="fas fa-search fa-fw"
|
|
1078
|
+
aria-hidden="true"
|
|
1079
|
+
></i>
|
|
1080
|
+
</span>
|
|
1081
|
+
<input
|
|
1082
|
+
class="pf-c-search-input__text-input"
|
|
1083
|
+
type="text"
|
|
1084
|
+
placeholder="Filter by name"
|
|
1085
|
+
aria-label="Filter by name"
|
|
1086
|
+
/>
|
|
1087
|
+
</span>
|
|
1088
|
+
</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
</div>
|
|
1091
|
+
<section class="pf-c-app-launcher__group">
|
|
1092
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1093
|
+
<ul>
|
|
1094
|
+
<li
|
|
1095
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1096
|
+
>
|
|
1097
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1098
|
+
Link 1
|
|
1099
|
+
<span
|
|
1100
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1101
|
+
>
|
|
1102
|
+
<i
|
|
1103
|
+
class="fas fa-external-link-alt"
|
|
1104
|
+
aria-hidden="true"
|
|
1105
|
+
></i>
|
|
1106
|
+
</span>
|
|
1107
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1108
|
+
</a>
|
|
1109
|
+
<button
|
|
1110
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1111
|
+
type="button"
|
|
1112
|
+
aria-label="Favorite"
|
|
1113
|
+
>
|
|
1114
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1115
|
+
</button>
|
|
1116
|
+
</li>
|
|
1117
|
+
<li
|
|
1118
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1119
|
+
>
|
|
1120
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1121
|
+
Link 2
|
|
1122
|
+
<span
|
|
1123
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1124
|
+
>
|
|
1125
|
+
<i
|
|
1126
|
+
class="fas fa-external-link-alt"
|
|
1127
|
+
aria-hidden="true"
|
|
1128
|
+
></i>
|
|
1129
|
+
</span>
|
|
1130
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1131
|
+
</a>
|
|
1132
|
+
<button
|
|
1133
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1134
|
+
type="button"
|
|
1135
|
+
aria-label="Favorite"
|
|
1136
|
+
>
|
|
1137
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1138
|
+
</button>
|
|
1139
|
+
</li>
|
|
1140
|
+
</ul>
|
|
1141
|
+
</section>
|
|
1142
|
+
<hr class="pf-c-divider" />
|
|
1143
|
+
<section class="pf-c-app-launcher__group">
|
|
1144
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1145
|
+
<ul>
|
|
1146
|
+
<li
|
|
1147
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1148
|
+
>
|
|
1149
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1150
|
+
Link 1
|
|
1151
|
+
<span
|
|
1152
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1153
|
+
>
|
|
1154
|
+
<i
|
|
1155
|
+
class="fas fa-external-link-alt"
|
|
1156
|
+
aria-hidden="true"
|
|
1157
|
+
></i>
|
|
1158
|
+
</span>
|
|
1159
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1160
|
+
</a>
|
|
1161
|
+
<button
|
|
1162
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1163
|
+
type="button"
|
|
1164
|
+
aria-label="Favorite"
|
|
1165
|
+
>
|
|
1166
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1167
|
+
</button>
|
|
1168
|
+
</li>
|
|
1169
|
+
<li
|
|
1170
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1171
|
+
>
|
|
1172
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1173
|
+
Link 2
|
|
1174
|
+
<span
|
|
1175
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1176
|
+
>
|
|
1177
|
+
<i
|
|
1178
|
+
class="fas fa-external-link-alt"
|
|
1179
|
+
aria-hidden="true"
|
|
1180
|
+
></i>
|
|
1181
|
+
</span>
|
|
1182
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1183
|
+
</a>
|
|
1184
|
+
<button
|
|
1185
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1186
|
+
type="button"
|
|
1187
|
+
aria-label="Favorite"
|
|
1188
|
+
>
|
|
1189
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1190
|
+
</button>
|
|
1191
|
+
</li>
|
|
1192
|
+
</ul>
|
|
1193
|
+
</section>
|
|
1194
|
+
</div>
|
|
1195
|
+
</nav>
|
|
1196
|
+
</div>
|
|
1197
|
+
<div class="pf-c-toolbar__item">
|
|
1198
|
+
<div class="pf-c-dropdown">
|
|
1199
|
+
<button
|
|
1200
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1201
|
+
id="description-list-in-drawer-demo-masthead-settings-button"
|
|
1202
|
+
aria-expanded="false"
|
|
1203
|
+
type="button"
|
|
1204
|
+
aria-label="Settings"
|
|
1205
|
+
>
|
|
1206
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1207
|
+
</button>
|
|
1208
|
+
<ul
|
|
1209
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1210
|
+
aria-labelledby="description-list-in-drawer-demo-masthead-settings-button"
|
|
1211
|
+
hidden
|
|
1212
|
+
>
|
|
1213
|
+
<li>
|
|
1214
|
+
<button
|
|
1215
|
+
class="pf-c-dropdown__menu-item"
|
|
1216
|
+
type="button"
|
|
1217
|
+
>Settings</button>
|
|
1218
|
+
</li>
|
|
1219
|
+
<li>
|
|
1220
|
+
<button
|
|
1221
|
+
class="pf-c-dropdown__menu-item"
|
|
1222
|
+
type="button"
|
|
1223
|
+
>Use the beta release</button>
|
|
1224
|
+
</li>
|
|
1225
|
+
</ul>
|
|
1226
|
+
</div>
|
|
1227
|
+
</div>
|
|
1228
|
+
<div class="pf-c-toolbar__item">
|
|
1229
|
+
<div class="pf-c-dropdown">
|
|
1230
|
+
<button
|
|
1231
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1232
|
+
id="description-list-in-drawer-demo-masthead-help-button"
|
|
1233
|
+
aria-expanded="false"
|
|
1234
|
+
type="button"
|
|
1235
|
+
aria-label="Help"
|
|
1236
|
+
>
|
|
1237
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1238
|
+
</button>
|
|
1239
|
+
<ul
|
|
1240
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1241
|
+
aria-labelledby="description-list-in-drawer-demo-masthead-help-button"
|
|
1242
|
+
hidden
|
|
1243
|
+
>
|
|
1244
|
+
<li>
|
|
1245
|
+
<button
|
|
1246
|
+
class="pf-c-dropdown__menu-item"
|
|
1247
|
+
type="button"
|
|
1248
|
+
>Support options</button>
|
|
1249
|
+
</li>
|
|
1250
|
+
<li>
|
|
1251
|
+
<button
|
|
1252
|
+
class="pf-c-dropdown__menu-item"
|
|
1253
|
+
type="button"
|
|
1254
|
+
>Open support case</button>
|
|
1255
|
+
</li>
|
|
1256
|
+
<li>
|
|
1257
|
+
<button
|
|
1258
|
+
class="pf-c-dropdown__menu-item"
|
|
1259
|
+
type="button"
|
|
1260
|
+
>API documentation</button>
|
|
1261
|
+
</li>
|
|
1262
|
+
</ul>
|
|
1263
|
+
</div>
|
|
1264
|
+
</div>
|
|
1265
|
+
</div>
|
|
1266
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1267
|
+
<div class="pf-c-dropdown">
|
|
1268
|
+
<button
|
|
1269
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1270
|
+
type="button"
|
|
1271
|
+
aria-expanded="false"
|
|
1272
|
+
aria-label="Actions"
|
|
1273
|
+
>
|
|
1274
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1275
|
+
</button>
|
|
1276
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
1277
|
+
<div class="pf-c-menu__content">
|
|
1278
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1279
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1280
|
+
<li
|
|
1281
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1282
|
+
role="none"
|
|
1283
|
+
>
|
|
1284
|
+
<button
|
|
1285
|
+
class="pf-c-menu__item"
|
|
1286
|
+
type="button"
|
|
1287
|
+
disabled
|
|
1288
|
+
role="menuitem"
|
|
1289
|
+
>
|
|
1290
|
+
<span class="pf-c-menu__item-description">
|
|
1291
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1292
|
+
<div
|
|
1293
|
+
class="pf-u-font-size-md"
|
|
1294
|
+
>mshaksho@redhat.com</div>
|
|
1295
|
+
</span>
|
|
1296
|
+
</button>
|
|
1297
|
+
</li>
|
|
1298
|
+
<li
|
|
1299
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1300
|
+
role="none"
|
|
1301
|
+
>
|
|
1302
|
+
<button
|
|
1303
|
+
class="pf-c-menu__item"
|
|
1304
|
+
type="button"
|
|
1305
|
+
disabled
|
|
1306
|
+
role="menuitem"
|
|
1307
|
+
>
|
|
1308
|
+
<span class="pf-c-menu__item-description">
|
|
1309
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1310
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1311
|
+
</span>
|
|
1312
|
+
</button>
|
|
1313
|
+
</li>
|
|
1314
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1315
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1316
|
+
<button
|
|
1317
|
+
class="pf-c-menu__item"
|
|
1318
|
+
type="button"
|
|
1319
|
+
role="menuitem"
|
|
1320
|
+
>
|
|
1321
|
+
<span class="pf-c-menu__item-main">
|
|
1322
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
1323
|
+
</span>
|
|
1324
|
+
</button>
|
|
1325
|
+
</li>
|
|
1326
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1327
|
+
<button
|
|
1328
|
+
class="pf-c-menu__item"
|
|
1329
|
+
type="button"
|
|
1330
|
+
role="menuitem"
|
|
1331
|
+
>
|
|
1332
|
+
<span class="pf-c-menu__item-main">
|
|
1333
|
+
<span
|
|
1334
|
+
class="pf-c-menu__item-text"
|
|
1335
|
+
>User management</span>
|
|
1336
|
+
</span>
|
|
1337
|
+
</button>
|
|
1338
|
+
</li>
|
|
1339
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1340
|
+
<button
|
|
1341
|
+
class="pf-c-menu__item"
|
|
1342
|
+
type="button"
|
|
1343
|
+
role="menuitem"
|
|
1344
|
+
>
|
|
1345
|
+
<span class="pf-c-menu__item-main">
|
|
1346
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1347
|
+
</span>
|
|
1348
|
+
</button>
|
|
1349
|
+
</li>
|
|
1350
|
+
</ul>
|
|
1351
|
+
</section>
|
|
1352
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1353
|
+
<section class="pf-c-menu__group">
|
|
1354
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1355
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1356
|
+
<button
|
|
1357
|
+
class="pf-c-menu__item"
|
|
1358
|
+
type="button"
|
|
1359
|
+
role="menuitem"
|
|
1360
|
+
aria-expanded="false"
|
|
1361
|
+
>
|
|
1362
|
+
<span class="pf-c-menu__item-main">
|
|
1363
|
+
<span class="pf-c-menu__item-icon">
|
|
1364
|
+
<i
|
|
1365
|
+
class="fas fa-fw fa-cog"
|
|
1366
|
+
aria-hidden="true"
|
|
1367
|
+
></i>
|
|
1368
|
+
</span>
|
|
1369
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1370
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1371
|
+
<i class="fas fa-angle-right"></i>
|
|
1372
|
+
</span>
|
|
1373
|
+
</span>
|
|
1374
|
+
</button>
|
|
1375
|
+
<div class="pf-c-menu" hidden>
|
|
1376
|
+
<div class="pf-c-menu__content">
|
|
1377
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1378
|
+
<li
|
|
1379
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1380
|
+
role="none"
|
|
1381
|
+
>
|
|
1382
|
+
<button
|
|
1383
|
+
class="pf-c-menu__item"
|
|
1384
|
+
type="button"
|
|
1385
|
+
role="menuitem"
|
|
1386
|
+
>
|
|
1387
|
+
<span class="pf-c-menu__item-main">
|
|
1388
|
+
<span
|
|
1389
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1390
|
+
>
|
|
1391
|
+
<i class="fas fa-angle-left"></i>
|
|
1392
|
+
</span>
|
|
1393
|
+
<span class="pf-c-menu__item-icon">
|
|
1394
|
+
<i
|
|
1395
|
+
class="fas fa-fw fa-cog"
|
|
1396
|
+
aria-hidden="true"
|
|
1397
|
+
></i>
|
|
1398
|
+
</span>
|
|
1399
|
+
<span
|
|
1400
|
+
class="pf-c-menu__item-text"
|
|
1401
|
+
>Settings</span>
|
|
1402
|
+
</span>
|
|
1403
|
+
</button>
|
|
1404
|
+
</li>
|
|
1405
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1406
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1407
|
+
<a
|
|
1408
|
+
class="pf-c-menu__item"
|
|
1409
|
+
href="#"
|
|
1410
|
+
role="menuitem"
|
|
1411
|
+
>
|
|
1412
|
+
<span class="pf-c-menu__item-main">
|
|
1413
|
+
<span
|
|
1414
|
+
class="pf-c-menu__item-text"
|
|
1415
|
+
>Customer support</span>
|
|
1416
|
+
</span>
|
|
1417
|
+
</a>
|
|
1418
|
+
</li>
|
|
1419
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1420
|
+
<a
|
|
1421
|
+
class="pf-c-menu__item"
|
|
1422
|
+
href="#"
|
|
1423
|
+
role="menuitem"
|
|
1424
|
+
>
|
|
1425
|
+
<span class="pf-c-menu__item-main">
|
|
1426
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
1427
|
+
</span>
|
|
1428
|
+
</a>
|
|
1429
|
+
</li>
|
|
1430
|
+
</ul>
|
|
1431
|
+
</div>
|
|
1432
|
+
</div>
|
|
1433
|
+
</li>
|
|
1434
|
+
|
|
1435
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1436
|
+
<button
|
|
1437
|
+
class="pf-c-menu__item"
|
|
1438
|
+
type="button"
|
|
1439
|
+
role="menuitem"
|
|
1440
|
+
aria-expanded="false"
|
|
1441
|
+
>
|
|
1442
|
+
<span class="pf-c-menu__item-main">
|
|
1443
|
+
<span class="pf-c-menu__item-icon">
|
|
1444
|
+
<i
|
|
1445
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1446
|
+
aria-hidden="true"
|
|
1447
|
+
></i>
|
|
1448
|
+
</span>
|
|
1449
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1450
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1451
|
+
<i class="fas fa-angle-right"></i>
|
|
1452
|
+
</span>
|
|
1453
|
+
</span>
|
|
1454
|
+
</button>
|
|
1455
|
+
<div class="pf-c-menu" hidden>
|
|
1456
|
+
<div class="pf-c-menu__content">
|
|
1457
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1458
|
+
<li
|
|
1459
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1460
|
+
role="none"
|
|
1461
|
+
>
|
|
1462
|
+
<button
|
|
1463
|
+
class="pf-c-menu__item"
|
|
1464
|
+
type="button"
|
|
1465
|
+
role="menuitem"
|
|
1466
|
+
>
|
|
1467
|
+
<span class="pf-c-menu__item-main">
|
|
1468
|
+
<span
|
|
1469
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1470
|
+
>
|
|
1471
|
+
<i class="fas fa-angle-left"></i>
|
|
1472
|
+
</span>
|
|
1473
|
+
<span class="pf-c-menu__item-icon">
|
|
1474
|
+
<i
|
|
1475
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1476
|
+
aria-hidden="true"
|
|
1477
|
+
></i>
|
|
1478
|
+
</span>
|
|
1479
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1480
|
+
</span>
|
|
1481
|
+
</button>
|
|
1482
|
+
</li>
|
|
1483
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1484
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1485
|
+
<a
|
|
1486
|
+
class="pf-c-menu__item"
|
|
1487
|
+
href="#"
|
|
1488
|
+
role="menuitem"
|
|
1489
|
+
>
|
|
1490
|
+
<span class="pf-c-menu__item-main">
|
|
1491
|
+
<span
|
|
1492
|
+
class="pf-c-menu__item-text"
|
|
1493
|
+
>Support options</span>
|
|
1494
|
+
</span>
|
|
1495
|
+
</a>
|
|
1496
|
+
</li>
|
|
1497
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1498
|
+
<a
|
|
1499
|
+
class="pf-c-menu__item"
|
|
1500
|
+
href="#"
|
|
1501
|
+
role="menuitem"
|
|
1502
|
+
>
|
|
1503
|
+
<span class="pf-c-menu__item-main">
|
|
1504
|
+
<span
|
|
1505
|
+
class="pf-c-menu__item-text"
|
|
1506
|
+
>Open support case</span>
|
|
1507
|
+
</span>
|
|
1508
|
+
</a>
|
|
1509
|
+
</li>
|
|
1510
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1511
|
+
<a
|
|
1512
|
+
class="pf-c-menu__item"
|
|
1513
|
+
href="#"
|
|
1514
|
+
role="menuitem"
|
|
1515
|
+
>
|
|
1516
|
+
<span class="pf-c-menu__item-main">
|
|
1517
|
+
<span
|
|
1518
|
+
class="pf-c-menu__item-text"
|
|
1519
|
+
>API documentation</span>
|
|
1520
|
+
</span>
|
|
1521
|
+
</a>
|
|
1522
|
+
</li>
|
|
1523
|
+
</ul>
|
|
1524
|
+
</div>
|
|
1525
|
+
</div>
|
|
1526
|
+
</li>
|
|
1527
|
+
|
|
1528
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1529
|
+
<button
|
|
1530
|
+
class="pf-c-menu__item"
|
|
1531
|
+
type="button"
|
|
1532
|
+
role="menuitem"
|
|
1533
|
+
>
|
|
1534
|
+
<span class="pf-c-menu__item-main">
|
|
1535
|
+
<span class="pf-c-menu__item-icon">
|
|
1536
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
1537
|
+
</span>
|
|
1538
|
+
<span
|
|
1539
|
+
class="pf-c-menu__item-text"
|
|
1540
|
+
>Application launcher</span>
|
|
1541
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1542
|
+
<i class="fas fa-angle-right"></i>
|
|
1543
|
+
</span>
|
|
1544
|
+
</span>
|
|
1545
|
+
</button>
|
|
1546
|
+
<div class="pf-c-menu" hidden>
|
|
1547
|
+
<div class="pf-c-menu__header">
|
|
1548
|
+
<button
|
|
1549
|
+
class="pf-c-menu__item"
|
|
1550
|
+
type="button"
|
|
1551
|
+
role="menuitem"
|
|
1552
|
+
>
|
|
1553
|
+
<span class="pf-c-menu__item-main">
|
|
1554
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1555
|
+
<i class="fas fa-angle-left"></i>
|
|
1556
|
+
</span>
|
|
1557
|
+
<span class="pf-c-menu__item-icon">
|
|
1558
|
+
<i
|
|
1559
|
+
class="fas fa-fw fa-th"
|
|
1560
|
+
aria-hidden="true"
|
|
1561
|
+
></i>
|
|
1562
|
+
</span>
|
|
1563
|
+
<span
|
|
1564
|
+
class="pf-c-menu__item-text"
|
|
1565
|
+
>Application launcher</span>
|
|
1566
|
+
</span>
|
|
1567
|
+
</button>
|
|
1568
|
+
</div>
|
|
1569
|
+
<div class="pf-c-menu__search">
|
|
1570
|
+
<div class="pf-c-menu__search-input">
|
|
1571
|
+
<div class="pf-c-search-input">
|
|
1572
|
+
<div class="pf-c-search-input__bar">
|
|
1573
|
+
<span class="pf-c-search-input__text">
|
|
1574
|
+
<span class="pf-c-search-input__icon">
|
|
1575
|
+
<i
|
|
1576
|
+
class="fas fa-search fa-fw"
|
|
1577
|
+
aria-hidden="true"
|
|
1578
|
+
></i>
|
|
1579
|
+
</span>
|
|
1580
|
+
<input
|
|
1581
|
+
class="pf-c-search-input__text-input"
|
|
1582
|
+
type="text"
|
|
1583
|
+
placeholder="Search"
|
|
1584
|
+
aria-label="Search"
|
|
1585
|
+
/>
|
|
1586
|
+
</span>
|
|
1587
|
+
</div>
|
|
1588
|
+
</div>
|
|
1589
|
+
</div>
|
|
1590
|
+
</div>
|
|
1591
|
+
<hr class="pf-c-divider" />
|
|
1592
|
+
<section class="pf-c-menu__group">
|
|
1593
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1594
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1595
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1596
|
+
<a
|
|
1597
|
+
class="pf-c-menu__item"
|
|
1598
|
+
href="#"
|
|
1599
|
+
role="menuitem"
|
|
1600
|
+
>
|
|
1601
|
+
<span class="pf-c-menu__item-main">
|
|
1602
|
+
<span
|
|
1603
|
+
class="pf-c-menu__item-text"
|
|
1604
|
+
>Link 1</span>
|
|
1605
|
+
</span>
|
|
1606
|
+
</a>
|
|
1607
|
+
<button
|
|
1608
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1609
|
+
type="button"
|
|
1610
|
+
aria-label="Starred"
|
|
1611
|
+
>
|
|
1612
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1613
|
+
<i
|
|
1614
|
+
class="fas fa-star"
|
|
1615
|
+
aria-hidden="true"
|
|
1616
|
+
></i>
|
|
1617
|
+
</span>
|
|
1618
|
+
</button>
|
|
1619
|
+
</li>
|
|
1620
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1621
|
+
<a
|
|
1622
|
+
class="pf-c-menu__item"
|
|
1623
|
+
href="#"
|
|
1624
|
+
role="menuitem"
|
|
1625
|
+
target="_blank"
|
|
1626
|
+
>
|
|
1627
|
+
<span class="pf-c-menu__item-main">
|
|
1628
|
+
<span
|
|
1629
|
+
class="pf-c-menu__item-text"
|
|
1630
|
+
>Link 2</span>
|
|
1631
|
+
<span
|
|
1632
|
+
class="pf-c-menu__item-external-icon"
|
|
1633
|
+
>
|
|
1634
|
+
<i
|
|
1635
|
+
class="fas fa-external-link-alt"
|
|
1636
|
+
aria-hidden="true"
|
|
1637
|
+
></i>
|
|
1638
|
+
</span>
|
|
1639
|
+
<span
|
|
1640
|
+
class="pf-screen-reader"
|
|
1641
|
+
>(opens new window)</span>
|
|
1642
|
+
</span>
|
|
1643
|
+
</a>
|
|
1644
|
+
<button
|
|
1645
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1646
|
+
type="button"
|
|
1647
|
+
aria-label="Not starred"
|
|
1648
|
+
>
|
|
1649
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1650
|
+
<i
|
|
1651
|
+
class="fas fa-star"
|
|
1652
|
+
aria-hidden="true"
|
|
1653
|
+
></i>
|
|
1654
|
+
</span>
|
|
1655
|
+
</button>
|
|
1656
|
+
</li>
|
|
1657
|
+
</ul>
|
|
1658
|
+
</section>
|
|
1659
|
+
<hr class="pf-c-divider" />
|
|
1660
|
+
<section class="pf-c-menu__group">
|
|
1661
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1662
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1663
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1664
|
+
<a
|
|
1665
|
+
class="pf-c-menu__item"
|
|
1666
|
+
href="#"
|
|
1667
|
+
role="menuitem"
|
|
1668
|
+
>
|
|
1669
|
+
<span class="pf-c-menu__item-main">
|
|
1670
|
+
<span
|
|
1671
|
+
class="pf-c-menu__item-text"
|
|
1672
|
+
>Link 1</span>
|
|
1673
|
+
</span>
|
|
1674
|
+
</a>
|
|
1675
|
+
<button
|
|
1676
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1677
|
+
type="button"
|
|
1678
|
+
aria-label="Not starred"
|
|
1679
|
+
>
|
|
1680
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1681
|
+
<i
|
|
1682
|
+
class="fas fa-star"
|
|
1683
|
+
aria-hidden="true"
|
|
1684
|
+
></i>
|
|
1685
|
+
</span>
|
|
1686
|
+
</button>
|
|
1687
|
+
</li>
|
|
1688
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1689
|
+
<a
|
|
1690
|
+
class="pf-c-menu__item"
|
|
1691
|
+
href="#"
|
|
1692
|
+
role="menuitem"
|
|
1693
|
+
target="_blank"
|
|
1694
|
+
>
|
|
1695
|
+
<span class="pf-c-menu__item-main">
|
|
1696
|
+
<span
|
|
1697
|
+
class="pf-c-menu__item-text"
|
|
1698
|
+
>Link 2</span>
|
|
1699
|
+
<span
|
|
1700
|
+
class="pf-c-menu__item-external-icon"
|
|
1701
|
+
>
|
|
1702
|
+
<i
|
|
1703
|
+
class="fas fa-external-link-alt"
|
|
1704
|
+
aria-hidden="true"
|
|
1705
|
+
></i>
|
|
1706
|
+
</span>
|
|
1707
|
+
<span
|
|
1708
|
+
class="pf-screen-reader"
|
|
1709
|
+
>(opens new window)</span>
|
|
1710
|
+
</span>
|
|
1711
|
+
</a>
|
|
1712
|
+
<button
|
|
1713
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1714
|
+
type="button"
|
|
1715
|
+
aria-label="Starred"
|
|
1716
|
+
>
|
|
1717
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1718
|
+
<i
|
|
1719
|
+
class="fas fa-star"
|
|
1720
|
+
aria-hidden="true"
|
|
1721
|
+
></i>
|
|
1722
|
+
</span>
|
|
1723
|
+
</button>
|
|
1724
|
+
</li>
|
|
1725
|
+
</ul>
|
|
1726
|
+
</section>
|
|
1727
|
+
</div>
|
|
1728
|
+
</li>
|
|
1729
|
+
</ul>
|
|
1730
|
+
</section>
|
|
1731
|
+
</div>
|
|
1732
|
+
</div>
|
|
1733
|
+
</div>
|
|
1734
|
+
</div>
|
|
1735
|
+
</div>
|
|
1736
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1737
|
+
<div
|
|
1738
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1739
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1740
|
+
>
|
|
1741
|
+
<button
|
|
1742
|
+
class="pf-c-dropdown__toggle"
|
|
1743
|
+
id="description-list-in-drawer-demo-masthead-profile-button"
|
|
1744
|
+
aria-expanded="false"
|
|
1745
|
+
type="button"
|
|
1746
|
+
>
|
|
1747
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1748
|
+
<img
|
|
1749
|
+
class="pf-c-avatar"
|
|
1750
|
+
src="/assets/images/img_avatar.svg"
|
|
1751
|
+
alt="Avatar image"
|
|
1752
|
+
/>
|
|
1753
|
+
</span>
|
|
1754
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1755
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1756
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1757
|
+
</span>
|
|
1758
|
+
</button>
|
|
1759
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1760
|
+
<section class="pf-c-dropdown__group">
|
|
1761
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1762
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1763
|
+
<div>123456789</div>
|
|
1764
|
+
</div>
|
|
1765
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1766
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1767
|
+
<div>mshaksho@redhat.com</div>
|
|
1768
|
+
</div>
|
|
1769
|
+
</section>
|
|
1770
|
+
<hr class="pf-c-divider" />
|
|
1771
|
+
<section class="pf-c-dropdown__group">
|
|
1772
|
+
<ul>
|
|
1773
|
+
<li>
|
|
1774
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
1775
|
+
</li>
|
|
1776
|
+
<li>
|
|
1777
|
+
<a
|
|
1778
|
+
class="pf-c-dropdown__menu-item"
|
|
1779
|
+
href="#"
|
|
1780
|
+
>User management</a>
|
|
1781
|
+
</li>
|
|
1782
|
+
<li>
|
|
1783
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1784
|
+
</li>
|
|
1785
|
+
</ul>
|
|
1786
|
+
</section>
|
|
1787
|
+
</div>
|
|
1788
|
+
</div>
|
|
1789
|
+
</div>
|
|
1790
|
+
</div>
|
|
1791
|
+
</div>
|
|
1792
|
+
</div>
|
|
1793
|
+
</div>
|
|
1794
|
+
</header>
|
|
1795
|
+
<div class="pf-c-page__sidebar">
|
|
1796
|
+
<div class="pf-c-page__sidebar-body">
|
|
1797
|
+
<nav
|
|
1798
|
+
class="pf-c-nav"
|
|
1799
|
+
id="description-list-in-drawer-demo-primary-nav"
|
|
1800
|
+
aria-label="Global"
|
|
1801
|
+
>
|
|
1802
|
+
<ul class="pf-c-nav__list">
|
|
1803
|
+
<li class="pf-c-nav__item">
|
|
1804
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1805
|
+
</li>
|
|
1806
|
+
<li class="pf-c-nav__item">
|
|
1807
|
+
<a
|
|
1808
|
+
href="#"
|
|
1809
|
+
class="pf-c-nav__link pf-m-current"
|
|
1810
|
+
aria-current="page"
|
|
1811
|
+
>Policy</a>
|
|
1812
|
+
</li>
|
|
1813
|
+
<li class="pf-c-nav__item">
|
|
1814
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1815
|
+
</li>
|
|
1816
|
+
<li class="pf-c-nav__item">
|
|
1817
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1818
|
+
</li>
|
|
1819
|
+
<li class="pf-c-nav__item">
|
|
1820
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1821
|
+
</li>
|
|
1822
|
+
</ul>
|
|
1823
|
+
</nav>
|
|
1824
|
+
</div>
|
|
1825
|
+
</div>
|
|
1826
|
+
<div class="pf-c-page__drawer">
|
|
1827
|
+
<div class="pf-c-drawer pf-m-expanded">
|
|
1828
|
+
<div class="pf-c-drawer__main">
|
|
1829
|
+
<div class="pf-c-drawer__content">
|
|
1830
|
+
<div class="pf-c-drawer__body">
|
|
1831
|
+
<main
|
|
1832
|
+
class="pf-c-page__main"
|
|
1833
|
+
tabindex="-1"
|
|
1834
|
+
id="main-content-description-list-in-drawer-demo"
|
|
1835
|
+
>
|
|
1836
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1837
|
+
<div class="pf-c-page__main-body">
|
|
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
|
+
|
|
1862
|
+
<a
|
|
1863
|
+
href="#"
|
|
1864
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
1865
|
+
aria-current="page"
|
|
1866
|
+
>Section landing</a>
|
|
1867
|
+
</li>
|
|
1868
|
+
</ol>
|
|
1869
|
+
</nav>
|
|
1870
|
+
</div>
|
|
1871
|
+
</section>
|
|
1872
|
+
<section
|
|
1873
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-light"
|
|
1874
|
+
>
|
|
1875
|
+
<div class="pf-c-page__main-body">
|
|
1876
|
+
<div class="pf-c-content">
|
|
1877
|
+
<h1>Main title</h1>
|
|
1878
|
+
<p>This is a full page demo.</p>
|
|
1879
|
+
</div>
|
|
1880
|
+
</div>
|
|
1881
|
+
</section>
|
|
1882
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1883
|
+
<div class="pf-c-page__main-body">
|
|
1884
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
1885
|
+
<div class="pf-c-card">
|
|
1886
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1887
|
+
</div>
|
|
1888
|
+
<div class="pf-c-card">
|
|
1889
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1890
|
+
</div>
|
|
1891
|
+
<div class="pf-c-card">
|
|
1892
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1893
|
+
</div>
|
|
1894
|
+
<div class="pf-c-card">
|
|
1895
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1896
|
+
</div>
|
|
1897
|
+
<div class="pf-c-card">
|
|
1898
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1899
|
+
</div>
|
|
1900
|
+
<div class="pf-c-card">
|
|
1901
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1902
|
+
</div>
|
|
1903
|
+
<div class="pf-c-card">
|
|
1904
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1905
|
+
</div>
|
|
1906
|
+
<div class="pf-c-card">
|
|
1907
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1908
|
+
</div>
|
|
1909
|
+
<div class="pf-c-card">
|
|
1910
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1911
|
+
</div>
|
|
1912
|
+
<div class="pf-c-card">
|
|
1913
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1914
|
+
</div>
|
|
1915
|
+
</div>
|
|
1916
|
+
</div>
|
|
1917
|
+
</section>
|
|
1918
|
+
</main>
|
|
1919
|
+
</div>
|
|
1920
|
+
</div>
|
|
1921
|
+
<div class="pf-c-drawer__panel pf-m-width-33-on-lg">
|
|
1922
|
+
<div class="pf-c-drawer__body">
|
|
1923
|
+
<div class="pf-c-drawer__head">
|
|
1924
|
+
<div class="pf-c-drawer__actions">
|
|
1925
|
+
<div class="pf-c-dropdown">
|
|
1926
|
+
<button
|
|
1927
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1928
|
+
id="-button"
|
|
1929
|
+
aria-expanded="false"
|
|
1930
|
+
type="button"
|
|
1931
|
+
aria-label="Actions"
|
|
1932
|
+
>
|
|
1933
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1934
|
+
</button>
|
|
1935
|
+
<ul
|
|
1936
|
+
class="pf-c-dropdown__menu"
|
|
1937
|
+
aria-labelledby="-button"
|
|
1938
|
+
hidden
|
|
1939
|
+
>
|
|
1940
|
+
<li>
|
|
1941
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1942
|
+
</li>
|
|
1943
|
+
<li>
|
|
1944
|
+
<button
|
|
1945
|
+
class="pf-c-dropdown__menu-item"
|
|
1946
|
+
type="button"
|
|
1947
|
+
>Action</button>
|
|
1948
|
+
</li>
|
|
1949
|
+
<li>
|
|
1950
|
+
<a
|
|
1951
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1952
|
+
href="#"
|
|
1953
|
+
aria-disabled="true"
|
|
1954
|
+
tabindex="-1"
|
|
1955
|
+
>Disabled link</a>
|
|
1956
|
+
</li>
|
|
1957
|
+
<li>
|
|
1958
|
+
<button
|
|
1959
|
+
class="pf-c-dropdown__menu-item"
|
|
1960
|
+
type="button"
|
|
1961
|
+
disabled
|
|
1962
|
+
>Disabled action</button>
|
|
1963
|
+
</li>
|
|
1964
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1965
|
+
<li>
|
|
1966
|
+
<a
|
|
1967
|
+
class="pf-c-dropdown__menu-item"
|
|
1968
|
+
href="#"
|
|
1969
|
+
>Separated link</a>
|
|
1970
|
+
</li>
|
|
1971
|
+
</ul>
|
|
1972
|
+
</div>
|
|
1973
|
+
<div class="pf-c-drawer__close">
|
|
1974
|
+
<button
|
|
1975
|
+
class="pf-c-button pf-m-plain"
|
|
1976
|
+
type="button"
|
|
1977
|
+
aria-label="Close drawer panel"
|
|
1978
|
+
>
|
|
1979
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1980
|
+
</button>
|
|
1981
|
+
</div>
|
|
1982
|
+
</div>
|
|
1983
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
1984
|
+
<div class="pf-l-flex__item">
|
|
1985
|
+
<span class="pf-c-label pf-m-blue pf-m-compact">
|
|
1986
|
+
<span class="pf-c-label__content">DC</span>
|
|
1987
|
+
</span>
|
|
1988
|
+
</div>
|
|
1989
|
+
<div class="pf-l-flex__item">
|
|
1990
|
+
<h2
|
|
1991
|
+
class="pf-c-title pf-m-xl"
|
|
1992
|
+
id="description-list-in-drawer-demo-drawer-label"
|
|
1993
|
+
>mary-test</h2>
|
|
1994
|
+
</div>
|
|
1995
|
+
</div>
|
|
1996
|
+
</div>
|
|
1997
|
+
</div>
|
|
1998
|
+
<div class="pf-c-drawer__body pf-m-no-padding">
|
|
1999
|
+
<div class="pf-c-tabs pf-m-box pf-m-fill">
|
|
2000
|
+
<ul class="pf-c-tabs__list">
|
|
2001
|
+
<li class="pf-c-tabs__item pf-m-current">
|
|
2002
|
+
<button
|
|
2003
|
+
class="pf-c-tabs__link"
|
|
2004
|
+
id="description-list-in-drawer-demo-panel-tabs-tab1-link"
|
|
2005
|
+
>
|
|
2006
|
+
<span class="pf-c-tabs__item-text">Overview</span>
|
|
2007
|
+
</button>
|
|
2008
|
+
</li>
|
|
2009
|
+
<li class="pf-c-tabs__item">
|
|
2010
|
+
<button
|
|
2011
|
+
class="pf-c-tabs__link"
|
|
2012
|
+
id="description-list-in-drawer-demo-panel-tabs-tab2-link"
|
|
2013
|
+
>
|
|
2014
|
+
<span class="pf-c-tabs__item-text">Activity</span>
|
|
2015
|
+
</button>
|
|
2016
|
+
</li>
|
|
2017
|
+
</ul>
|
|
2018
|
+
</div>
|
|
2019
|
+
</div>
|
|
2020
|
+
<div class="pf-c-drawer__body">
|
|
2021
|
+
<section
|
|
2022
|
+
class="pf-c-tab-content"
|
|
2023
|
+
id="description-list-in-drawer-demo-panel-tabs-tab1-panel"
|
|
2024
|
+
aria-labelledby="description-list-in-drawer-demo-panel-tabs-tab1-link"
|
|
2025
|
+
role="tabpanel"
|
|
2026
|
+
tabindex="0"
|
|
2027
|
+
>
|
|
2028
|
+
<div class="pf-c-tab-content__body">
|
|
2029
|
+
<dl
|
|
2030
|
+
class="pf-c-description-list pf-m-fill-columns pf-m-2-col pf-m-compact"
|
|
2031
|
+
>
|
|
2032
|
+
<div class="pf-c-description-list__group">
|
|
2033
|
+
<dt class="pf-c-description-list__term">
|
|
2034
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
2035
|
+
</dt>
|
|
2036
|
+
<dd class="pf-c-description-list__description">
|
|
2037
|
+
<div class="pf-c-description-list__text">mary-test</div>
|
|
2038
|
+
</dd>
|
|
2039
|
+
</div>
|
|
2040
|
+
<div class="pf-c-description-list__group">
|
|
2041
|
+
<dt class="pf-c-description-list__term">
|
|
2042
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
2043
|
+
</dt>
|
|
2044
|
+
<dd class="pf-c-description-list__description">
|
|
2045
|
+
<div class="pf-c-description-list__text">
|
|
2046
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
2047
|
+
<div class="pf-l-flex__item">
|
|
2048
|
+
<span class="pf-c-label pf-m-green">
|
|
2049
|
+
<span class="pf-c-label__content">NS</span>
|
|
2050
|
+
</span>
|
|
2051
|
+
</div>
|
|
2052
|
+
<div class="pf-l-flex__item">
|
|
2053
|
+
<a href="#">mary-test</a>
|
|
2054
|
+
</div>
|
|
2055
|
+
</div>
|
|
2056
|
+
</div>
|
|
2057
|
+
</dd>
|
|
2058
|
+
</div>
|
|
2059
|
+
<div class="pf-c-description-list__group">
|
|
2060
|
+
<dt class="pf-c-description-list__term">
|
|
2061
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
2062
|
+
</dt>
|
|
2063
|
+
<dd class="pf-c-description-list__description">
|
|
2064
|
+
<div class="pf-c-description-list__text">
|
|
2065
|
+
<div class="pf-c-chip">
|
|
2066
|
+
<span class="pf-c-chip__text">app=mary-test</span>
|
|
2067
|
+
</div>
|
|
2068
|
+
</div>
|
|
2069
|
+
</dd>
|
|
2070
|
+
</div>
|
|
2071
|
+
<div class="pf-c-description-list__group">
|
|
2072
|
+
<dt class="pf-c-description-list__term">
|
|
2073
|
+
<span class="pf-c-description-list__text">Node selector</span>
|
|
2074
|
+
</dt>
|
|
2075
|
+
<dd class="pf-c-description-list__description">
|
|
2076
|
+
<p
|
|
2077
|
+
class="pf-c-description-list__text pf-u-color-200"
|
|
2078
|
+
>Nod selector is not available at this time</p>
|
|
2079
|
+
</dd>
|
|
2080
|
+
</div>
|
|
2081
|
+
<div class="pf-c-description-list__group">
|
|
2082
|
+
<dt class="pf-c-description-list__term">
|
|
2083
|
+
<span class="pf-c-description-list__text">Tolerations</span>
|
|
2084
|
+
</dt>
|
|
2085
|
+
<dd class="pf-c-description-list__description">
|
|
2086
|
+
<div
|
|
2087
|
+
class="pf-c-description-list__text pf-u-color-200"
|
|
2088
|
+
>No tolerations</div>
|
|
2089
|
+
</dd>
|
|
2090
|
+
</div>
|
|
2091
|
+
<div class="pf-c-description-list__group">
|
|
2092
|
+
<dt class="pf-c-description-list__term">
|
|
2093
|
+
<span class="pf-c-description-list__text">Annotations</span>
|
|
2094
|
+
</dt>
|
|
2095
|
+
<dd class="pf-c-description-list__description">
|
|
2096
|
+
<div
|
|
2097
|
+
class="pf-c-description-list__text pf-u-color-200"
|
|
2098
|
+
>No annotations</div>
|
|
2099
|
+
</dd>
|
|
2100
|
+
</div>
|
|
2101
|
+
<div class="pf-c-description-list__group">
|
|
2102
|
+
<dt class="pf-c-description-list__term">
|
|
2103
|
+
<span class="pf-c-description-list__text">Status</span>
|
|
2104
|
+
</dt>
|
|
2105
|
+
<dd class="pf-c-description-list__description">
|
|
2106
|
+
<div class="pf-c-description-list__text">Active</div>
|
|
2107
|
+
</dd>
|
|
2108
|
+
</div>
|
|
2109
|
+
<div class="pf-c-description-list__group">
|
|
2110
|
+
<dt class="pf-c-description-list__term">
|
|
2111
|
+
<span class="pf-c-description-list__text">Created at:</span>
|
|
2112
|
+
</dt>
|
|
2113
|
+
<dd class="pf-c-description-list__description">
|
|
2114
|
+
<div class="pf-c-description-list__text">3 minutes ago</div>
|
|
2115
|
+
</dd>
|
|
2116
|
+
</div>
|
|
2117
|
+
<div class="pf-c-description-list__group">
|
|
2118
|
+
<dt class="pf-c-description-list__term">
|
|
2119
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
2120
|
+
</dt>
|
|
2121
|
+
<dd class="pf-c-description-list__description">
|
|
2122
|
+
<div class="pf-c-description-list__text">
|
|
2123
|
+
<a href="#">
|
|
2124
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
2125
|
+
<div class="pf-l-flex__item">
|
|
2126
|
+
<i class="fas fa-search" aria-hidden="true"></i>
|
|
2127
|
+
</div>
|
|
2128
|
+
<div class="pf-l-flex__item">
|
|
2129
|
+
<span>app=MyApp</span>
|
|
2130
|
+
</div>
|
|
2131
|
+
</div>
|
|
2132
|
+
</a>
|
|
2133
|
+
</div>
|
|
2134
|
+
</dd>
|
|
2135
|
+
</div>
|
|
2136
|
+
<div class="pf-c-description-list__group">
|
|
2137
|
+
<dt class="pf-c-description-list__term">
|
|
2138
|
+
<span class="pf-c-description-list__text">Annotations</span>
|
|
2139
|
+
</dt>
|
|
2140
|
+
<dd class="pf-c-description-list__description">
|
|
2141
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
2142
|
+
</dd>
|
|
2143
|
+
</div>
|
|
2144
|
+
<div class="pf-c-description-list__group">
|
|
2145
|
+
<dt class="pf-c-description-list__term">
|
|
2146
|
+
<span class="pf-c-description-list__text">Session affinity</span>
|
|
2147
|
+
</dt>
|
|
2148
|
+
<dd class="pf-c-description-list__description">
|
|
2149
|
+
<div
|
|
2150
|
+
class="pf-c-description-list__text pf-u-color-200"
|
|
2151
|
+
>None</div>
|
|
2152
|
+
</dd>
|
|
2153
|
+
</div>
|
|
2154
|
+
<div class="pf-c-description-list__group">
|
|
2155
|
+
<dt class="pf-c-description-list__term">
|
|
2156
|
+
<span class="pf-c-description-list__text">Latest version</span>
|
|
2157
|
+
</dt>
|
|
2158
|
+
<dd class="pf-c-description-list__description">
|
|
2159
|
+
<div class="pf-c-description-list__text">1.0</div>
|
|
2160
|
+
</dd>
|
|
2161
|
+
</div>
|
|
2162
|
+
<div class="pf-c-description-list__group">
|
|
2163
|
+
<dt class="pf-c-description-list__term">
|
|
2164
|
+
<span class="pf-c-description-list__text">Update strategy</span>
|
|
2165
|
+
</dt>
|
|
2166
|
+
<dd class="pf-c-description-list__description">
|
|
2167
|
+
<div class="pf-c-description-list__text">Rolling</div>
|
|
2168
|
+
</dd>
|
|
2169
|
+
</div>
|
|
2170
|
+
<div class="pf-c-description-list__group">
|
|
2171
|
+
<dt class="pf-c-description-list__term">
|
|
2172
|
+
<span class="pf-c-description-list__text">Timeout</span>
|
|
2173
|
+
</dt>
|
|
2174
|
+
<dd class="pf-c-description-list__description">
|
|
2175
|
+
<div class="pf-c-description-list__text">600 seconds</div>
|
|
2176
|
+
</dd>
|
|
2177
|
+
</div>
|
|
2178
|
+
<div class="pf-c-description-list__group">
|
|
2179
|
+
<dt class="pf-c-description-list__term">
|
|
2180
|
+
<span class="pf-c-description-list__text">Update period</span>
|
|
2181
|
+
</dt>
|
|
2182
|
+
<dd class="pf-c-description-list__description">
|
|
2183
|
+
<div class="pf-c-description-list__text">1 second</div>
|
|
2184
|
+
</dd>
|
|
2185
|
+
</div>
|
|
2186
|
+
<div class="pf-c-description-list__group">
|
|
2187
|
+
<dt class="pf-c-description-list__term">
|
|
2188
|
+
<span class="pf-c-description-list__text">Interval</span>
|
|
2189
|
+
</dt>
|
|
2190
|
+
<dd class="pf-c-description-list__description">
|
|
2191
|
+
<div class="pf-c-description-list__text">1 second</div>
|
|
2192
|
+
</dd>
|
|
2193
|
+
</div>
|
|
2194
|
+
<div class="pf-c-description-list__group">
|
|
2195
|
+
<dt class="pf-c-description-list__term">
|
|
2196
|
+
<span class="pf-c-description-list__text">Max available</span>
|
|
2197
|
+
</dt>
|
|
2198
|
+
<dd class="pf-c-description-list__description">
|
|
2199
|
+
<div class="pf-c-description-list__text">25% of 1 pod</div>
|
|
2200
|
+
</dd>
|
|
2201
|
+
</div>
|
|
2202
|
+
<div class="pf-c-description-list__group">
|
|
2203
|
+
<dt class="pf-c-description-list__term">
|
|
2204
|
+
<span class="pf-c-description-list__text">Max surge</span>
|
|
2205
|
+
</dt>
|
|
2206
|
+
<dd class="pf-c-description-list__description">
|
|
2207
|
+
<div
|
|
2208
|
+
class="pf-c-description-list__text"
|
|
2209
|
+
>25% greater than 1 pod</div>
|
|
2210
|
+
</dd>
|
|
2211
|
+
</div>
|
|
2212
|
+
<div class="pf-c-description-list__group">
|
|
2213
|
+
<dt class="pf-c-description-list__term">
|
|
2214
|
+
<span
|
|
2215
|
+
class="pf-c-description-list__text"
|
|
2216
|
+
>Min ready seconds</span>
|
|
2217
|
+
</dt>
|
|
2218
|
+
<dd class="pf-c-description-list__description">
|
|
2219
|
+
<div
|
|
2220
|
+
class="pf-c-description-list__text pf-u-color-200"
|
|
2221
|
+
>Not configured</div>
|
|
2222
|
+
</dd>
|
|
2223
|
+
</div>
|
|
2224
|
+
<div class="pf-c-description-list__group">
|
|
2225
|
+
<dt class="pf-c-description-list__term">
|
|
2226
|
+
<span class="pf-c-description-list__text">Triggers</span>
|
|
2227
|
+
</dt>
|
|
2228
|
+
<dd class="pf-c-description-list__description">
|
|
2229
|
+
<div class="pf-c-description-list__text">
|
|
2230
|
+
ImageChange,
|
|
2231
|
+
ConfigChange
|
|
2232
|
+
</div>
|
|
2233
|
+
</dd>
|
|
2234
|
+
</div>
|
|
2235
|
+
</dl>
|
|
2236
|
+
</div>
|
|
2237
|
+
</section>
|
|
2238
|
+
<section
|
|
2239
|
+
class="pf-c-tab-content"
|
|
2240
|
+
id="description-list-in-drawer-demo-panel-tabs-tab2-panel"
|
|
2241
|
+
aria-labelledby="description-list-in-drawer-demo-panel-tabs-tab2-link"
|
|
2242
|
+
role="tabpanel"
|
|
2243
|
+
tabindex="0"
|
|
2244
|
+
hidden
|
|
2245
|
+
>
|
|
2246
|
+
<div class="pf-c-tab-content__body">Panel 2</div>
|
|
2247
|
+
</section>
|
|
2248
|
+
</div>
|
|
2249
|
+
</div>
|
|
2250
|
+
</div>
|
|
2251
|
+
</div>
|
|
2252
|
+
</div>
|
|
2253
|
+
</div>
|
|
2254
|
+
|
|
2255
|
+
```
|
|
2256
|
+
|
|
2257
|
+
### Complex content
|
|
2258
|
+
|
|
2259
|
+
```html isFullscreen
|
|
2260
|
+
<div class="pf-c-page" id="description-list-complex-content-demo">
|
|
2261
|
+
<a
|
|
2262
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
2263
|
+
href="#main-content-description-list-complex-content-demo"
|
|
2264
|
+
>Skip to content</a>
|
|
2265
|
+
|
|
2266
|
+
<header
|
|
2267
|
+
class="pf-c-masthead"
|
|
2268
|
+
id="description-list-complex-content-demo-masthead"
|
|
2269
|
+
>
|
|
2270
|
+
<span class="pf-c-masthead__toggle">
|
|
2271
|
+
<button
|
|
2272
|
+
class="pf-c-button pf-m-plain"
|
|
2273
|
+
type="button"
|
|
2274
|
+
aria-label="Global navigation"
|
|
2275
|
+
>
|
|
2276
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2277
|
+
</button>
|
|
2278
|
+
</span>
|
|
2279
|
+
<div class="pf-c-masthead__main">
|
|
2280
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
2281
|
+
<picture
|
|
2282
|
+
class="pf-c-brand pf-m-picture"
|
|
2283
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
2284
|
+
>
|
|
2285
|
+
<source
|
|
2286
|
+
media="(min-width: 768px)"
|
|
2287
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
2288
|
+
/>
|
|
2289
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
2290
|
+
<img
|
|
2291
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
2292
|
+
alt="Fallback patternFly default logo"
|
|
2293
|
+
/>
|
|
2294
|
+
</picture>
|
|
2295
|
+
</a>
|
|
2296
|
+
</div>
|
|
2297
|
+
<div class="pf-c-masthead__content">
|
|
2298
|
+
<div
|
|
2299
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2300
|
+
id="description-list-complex-content-demo-masthead-toolbar"
|
|
2301
|
+
>
|
|
2302
|
+
<div class="pf-c-toolbar__content">
|
|
2303
|
+
<div class="pf-c-toolbar__content-section">
|
|
2304
|
+
<div
|
|
2305
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
2306
|
+
>
|
|
2307
|
+
<div class="pf-c-toolbar__item">
|
|
2308
|
+
<button
|
|
2309
|
+
class="pf-c-button pf-m-plain"
|
|
2310
|
+
type="button"
|
|
2311
|
+
aria-label="Notifications"
|
|
2312
|
+
>
|
|
2313
|
+
<span class="pf-c-notification-badge">
|
|
2314
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
2315
|
+
</span>
|
|
2316
|
+
</button>
|
|
2317
|
+
</div>
|
|
2318
|
+
<div
|
|
2319
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
2320
|
+
>
|
|
2321
|
+
<div class="pf-c-toolbar__item">
|
|
2322
|
+
<nav
|
|
2323
|
+
class="pf-c-app-launcher"
|
|
2324
|
+
aria-label="Application launcher"
|
|
2325
|
+
id="description-list-complex-content-demo-masthead-icon-group--app-launcher"
|
|
2326
|
+
>
|
|
2327
|
+
<button
|
|
2328
|
+
class="pf-c-app-launcher__toggle"
|
|
2329
|
+
type="button"
|
|
2330
|
+
id="description-list-complex-content-demo-masthead-icon-group--app-launcher-button"
|
|
2331
|
+
aria-expanded="false"
|
|
2332
|
+
aria-label="Application launcher"
|
|
2333
|
+
>
|
|
2334
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
2335
|
+
</button>
|
|
2336
|
+
<div
|
|
2337
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
2338
|
+
hidden
|
|
2339
|
+
>
|
|
2340
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
2341
|
+
<div class="pf-c-search-input">
|
|
2342
|
+
<div class="pf-c-search-input__bar">
|
|
2343
|
+
<span class="pf-c-search-input__text">
|
|
2344
|
+
<span class="pf-c-search-input__icon">
|
|
2345
|
+
<i
|
|
2346
|
+
class="fas fa-search fa-fw"
|
|
2347
|
+
aria-hidden="true"
|
|
2348
|
+
></i>
|
|
2349
|
+
</span>
|
|
2350
|
+
<input
|
|
2351
|
+
class="pf-c-search-input__text-input"
|
|
2352
|
+
type="text"
|
|
2353
|
+
placeholder="Filter by name"
|
|
2354
|
+
aria-label="Filter by name"
|
|
2355
|
+
/>
|
|
2356
|
+
</span>
|
|
2357
|
+
</div>
|
|
2358
|
+
</div>
|
|
2359
|
+
</div>
|
|
2360
|
+
<section class="pf-c-app-launcher__group">
|
|
2361
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
2362
|
+
<ul>
|
|
2363
|
+
<li
|
|
2364
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2365
|
+
>
|
|
2366
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2367
|
+
Link 1
|
|
2368
|
+
<span
|
|
2369
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2370
|
+
>
|
|
2371
|
+
<i
|
|
2372
|
+
class="fas fa-external-link-alt"
|
|
2373
|
+
aria-hidden="true"
|
|
2374
|
+
></i>
|
|
2375
|
+
</span>
|
|
2376
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2377
|
+
</a>
|
|
2378
|
+
<button
|
|
2379
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2380
|
+
type="button"
|
|
2381
|
+
aria-label="Favorite"
|
|
2382
|
+
>
|
|
2383
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2384
|
+
</button>
|
|
2385
|
+
</li>
|
|
2386
|
+
<li
|
|
2387
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2388
|
+
>
|
|
2389
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2390
|
+
Link 2
|
|
2391
|
+
<span
|
|
2392
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2393
|
+
>
|
|
2394
|
+
<i
|
|
2395
|
+
class="fas fa-external-link-alt"
|
|
2396
|
+
aria-hidden="true"
|
|
2397
|
+
></i>
|
|
2398
|
+
</span>
|
|
2399
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2400
|
+
</a>
|
|
2401
|
+
<button
|
|
2402
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2403
|
+
type="button"
|
|
2404
|
+
aria-label="Favorite"
|
|
2405
|
+
>
|
|
2406
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2407
|
+
</button>
|
|
2408
|
+
</li>
|
|
2409
|
+
</ul>
|
|
2410
|
+
</section>
|
|
2411
|
+
<hr class="pf-c-divider" />
|
|
2412
|
+
<section class="pf-c-app-launcher__group">
|
|
2413
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
2414
|
+
<ul>
|
|
2415
|
+
<li
|
|
2416
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2417
|
+
>
|
|
2418
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2419
|
+
Link 1
|
|
2420
|
+
<span
|
|
2421
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2422
|
+
>
|
|
2423
|
+
<i
|
|
2424
|
+
class="fas fa-external-link-alt"
|
|
2425
|
+
aria-hidden="true"
|
|
2426
|
+
></i>
|
|
2427
|
+
</span>
|
|
2428
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2429
|
+
</a>
|
|
2430
|
+
<button
|
|
2431
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2432
|
+
type="button"
|
|
2433
|
+
aria-label="Favorite"
|
|
2434
|
+
>
|
|
2435
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2436
|
+
</button>
|
|
2437
|
+
</li>
|
|
2438
|
+
<li
|
|
2439
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2440
|
+
>
|
|
2441
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2442
|
+
Link 2
|
|
2443
|
+
<span
|
|
2444
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2445
|
+
>
|
|
2446
|
+
<i
|
|
2447
|
+
class="fas fa-external-link-alt"
|
|
2448
|
+
aria-hidden="true"
|
|
2449
|
+
></i>
|
|
2450
|
+
</span>
|
|
2451
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2452
|
+
</a>
|
|
2453
|
+
<button
|
|
2454
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2455
|
+
type="button"
|
|
2456
|
+
aria-label="Favorite"
|
|
2457
|
+
>
|
|
2458
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2459
|
+
</button>
|
|
2460
|
+
</li>
|
|
2461
|
+
</ul>
|
|
2462
|
+
</section>
|
|
2463
|
+
</div>
|
|
2464
|
+
</nav>
|
|
2465
|
+
</div>
|
|
2466
|
+
<div class="pf-c-toolbar__item">
|
|
2467
|
+
<div class="pf-c-dropdown">
|
|
2468
|
+
<button
|
|
2469
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2470
|
+
id="description-list-complex-content-demo-masthead-settings-button"
|
|
2471
|
+
aria-expanded="false"
|
|
2472
|
+
type="button"
|
|
2473
|
+
aria-label="Settings"
|
|
2474
|
+
>
|
|
2475
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2476
|
+
</button>
|
|
2477
|
+
<ul
|
|
2478
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2479
|
+
aria-labelledby="description-list-complex-content-demo-masthead-settings-button"
|
|
2480
|
+
hidden
|
|
2481
|
+
>
|
|
2482
|
+
<li>
|
|
2483
|
+
<button
|
|
2484
|
+
class="pf-c-dropdown__menu-item"
|
|
2485
|
+
type="button"
|
|
2486
|
+
>Settings</button>
|
|
2487
|
+
</li>
|
|
2488
|
+
<li>
|
|
2489
|
+
<button
|
|
2490
|
+
class="pf-c-dropdown__menu-item"
|
|
2491
|
+
type="button"
|
|
2492
|
+
>Use the beta release</button>
|
|
2493
|
+
</li>
|
|
2494
|
+
</ul>
|
|
2495
|
+
</div>
|
|
2496
|
+
</div>
|
|
2497
|
+
<div class="pf-c-toolbar__item">
|
|
2498
|
+
<div class="pf-c-dropdown">
|
|
2499
|
+
<button
|
|
2500
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2501
|
+
id="description-list-complex-content-demo-masthead-help-button"
|
|
2502
|
+
aria-expanded="false"
|
|
2503
|
+
type="button"
|
|
2504
|
+
aria-label="Help"
|
|
2505
|
+
>
|
|
2506
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
2507
|
+
</button>
|
|
2508
|
+
<ul
|
|
2509
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2510
|
+
aria-labelledby="description-list-complex-content-demo-masthead-help-button"
|
|
2511
|
+
hidden
|
|
2512
|
+
>
|
|
2513
|
+
<li>
|
|
2514
|
+
<button
|
|
2515
|
+
class="pf-c-dropdown__menu-item"
|
|
2516
|
+
type="button"
|
|
2517
|
+
>Support options</button>
|
|
2518
|
+
</li>
|
|
2519
|
+
<li>
|
|
2520
|
+
<button
|
|
2521
|
+
class="pf-c-dropdown__menu-item"
|
|
2522
|
+
type="button"
|
|
2523
|
+
>Open support case</button>
|
|
2524
|
+
</li>
|
|
2525
|
+
<li>
|
|
2526
|
+
<button
|
|
2527
|
+
class="pf-c-dropdown__menu-item"
|
|
2528
|
+
type="button"
|
|
2529
|
+
>API documentation</button>
|
|
2530
|
+
</li>
|
|
2531
|
+
</ul>
|
|
2532
|
+
</div>
|
|
2533
|
+
</div>
|
|
2534
|
+
</div>
|
|
2535
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
2536
|
+
<div class="pf-c-dropdown">
|
|
2537
|
+
<button
|
|
2538
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
2539
|
+
type="button"
|
|
2540
|
+
aria-expanded="false"
|
|
2541
|
+
aria-label="Actions"
|
|
2542
|
+
>
|
|
2543
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2544
|
+
</button>
|
|
2545
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
2546
|
+
<div class="pf-c-menu__content">
|
|
2547
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
2548
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2549
|
+
<li
|
|
2550
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2551
|
+
role="none"
|
|
2552
|
+
>
|
|
2553
|
+
<button
|
|
2554
|
+
class="pf-c-menu__item"
|
|
2555
|
+
type="button"
|
|
2556
|
+
disabled
|
|
2557
|
+
role="menuitem"
|
|
2558
|
+
>
|
|
2559
|
+
<span class="pf-c-menu__item-description">
|
|
2560
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2561
|
+
<div
|
|
2562
|
+
class="pf-u-font-size-md"
|
|
2563
|
+
>mshaksho@redhat.com</div>
|
|
2564
|
+
</span>
|
|
2565
|
+
</button>
|
|
2566
|
+
</li>
|
|
2567
|
+
<li
|
|
2568
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2569
|
+
role="none"
|
|
2570
|
+
>
|
|
2571
|
+
<button
|
|
2572
|
+
class="pf-c-menu__item"
|
|
2573
|
+
type="button"
|
|
2574
|
+
disabled
|
|
2575
|
+
role="menuitem"
|
|
2576
|
+
>
|
|
2577
|
+
<span class="pf-c-menu__item-description">
|
|
2578
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2579
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
2580
|
+
</span>
|
|
2581
|
+
</button>
|
|
2582
|
+
</li>
|
|
2583
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2584
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2585
|
+
<button
|
|
2586
|
+
class="pf-c-menu__item"
|
|
2587
|
+
type="button"
|
|
2588
|
+
role="menuitem"
|
|
2589
|
+
>
|
|
2590
|
+
<span class="pf-c-menu__item-main">
|
|
2591
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
2592
|
+
</span>
|
|
2593
|
+
</button>
|
|
2594
|
+
</li>
|
|
2595
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
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
|
|
2603
|
+
class="pf-c-menu__item-text"
|
|
2604
|
+
>User management</span>
|
|
2605
|
+
</span>
|
|
2606
|
+
</button>
|
|
2607
|
+
</li>
|
|
2608
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2609
|
+
<button
|
|
2610
|
+
class="pf-c-menu__item"
|
|
2611
|
+
type="button"
|
|
2612
|
+
role="menuitem"
|
|
2613
|
+
>
|
|
2614
|
+
<span class="pf-c-menu__item-main">
|
|
2615
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
2616
|
+
</span>
|
|
2617
|
+
</button>
|
|
2618
|
+
</li>
|
|
2619
|
+
</ul>
|
|
2620
|
+
</section>
|
|
2621
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
2622
|
+
<section class="pf-c-menu__group">
|
|
2623
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2624
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2625
|
+
<button
|
|
2626
|
+
class="pf-c-menu__item"
|
|
2627
|
+
type="button"
|
|
2628
|
+
role="menuitem"
|
|
2629
|
+
aria-expanded="false"
|
|
2630
|
+
>
|
|
2631
|
+
<span class="pf-c-menu__item-main">
|
|
2632
|
+
<span class="pf-c-menu__item-icon">
|
|
2633
|
+
<i
|
|
2634
|
+
class="fas fa-fw fa-cog"
|
|
2635
|
+
aria-hidden="true"
|
|
2636
|
+
></i>
|
|
2637
|
+
</span>
|
|
2638
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
2639
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2640
|
+
<i class="fas fa-angle-right"></i>
|
|
2641
|
+
</span>
|
|
2642
|
+
</span>
|
|
2643
|
+
</button>
|
|
2644
|
+
<div class="pf-c-menu" hidden>
|
|
2645
|
+
<div class="pf-c-menu__content">
|
|
2646
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2647
|
+
<li
|
|
2648
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2649
|
+
role="none"
|
|
2650
|
+
>
|
|
2651
|
+
<button
|
|
2652
|
+
class="pf-c-menu__item"
|
|
2653
|
+
type="button"
|
|
2654
|
+
role="menuitem"
|
|
2655
|
+
>
|
|
2656
|
+
<span class="pf-c-menu__item-main">
|
|
2657
|
+
<span
|
|
2658
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2659
|
+
>
|
|
2660
|
+
<i class="fas fa-angle-left"></i>
|
|
2661
|
+
</span>
|
|
2662
|
+
<span class="pf-c-menu__item-icon">
|
|
2663
|
+
<i
|
|
2664
|
+
class="fas fa-fw fa-cog"
|
|
2665
|
+
aria-hidden="true"
|
|
2666
|
+
></i>
|
|
2667
|
+
</span>
|
|
2668
|
+
<span
|
|
2669
|
+
class="pf-c-menu__item-text"
|
|
2670
|
+
>Settings</span>
|
|
2671
|
+
</span>
|
|
2672
|
+
</button>
|
|
2673
|
+
</li>
|
|
2674
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2675
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2676
|
+
<a
|
|
2677
|
+
class="pf-c-menu__item"
|
|
2678
|
+
href="#"
|
|
2679
|
+
role="menuitem"
|
|
2680
|
+
>
|
|
2681
|
+
<span class="pf-c-menu__item-main">
|
|
2682
|
+
<span
|
|
2683
|
+
class="pf-c-menu__item-text"
|
|
2684
|
+
>Customer support</span>
|
|
2685
|
+
</span>
|
|
2686
|
+
</a>
|
|
2687
|
+
</li>
|
|
2688
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2689
|
+
<a
|
|
2690
|
+
class="pf-c-menu__item"
|
|
2691
|
+
href="#"
|
|
2692
|
+
role="menuitem"
|
|
2693
|
+
>
|
|
2694
|
+
<span class="pf-c-menu__item-main">
|
|
2695
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
2696
|
+
</span>
|
|
2697
|
+
</a>
|
|
2698
|
+
</li>
|
|
2699
|
+
</ul>
|
|
2700
|
+
</div>
|
|
2701
|
+
</div>
|
|
2702
|
+
</li>
|
|
2703
|
+
|
|
2704
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2705
|
+
<button
|
|
2706
|
+
class="pf-c-menu__item"
|
|
2707
|
+
type="button"
|
|
2708
|
+
role="menuitem"
|
|
2709
|
+
aria-expanded="false"
|
|
2710
|
+
>
|
|
2711
|
+
<span class="pf-c-menu__item-main">
|
|
2712
|
+
<span class="pf-c-menu__item-icon">
|
|
2713
|
+
<i
|
|
2714
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2715
|
+
aria-hidden="true"
|
|
2716
|
+
></i>
|
|
2717
|
+
</span>
|
|
2718
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2719
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2720
|
+
<i class="fas fa-angle-right"></i>
|
|
2721
|
+
</span>
|
|
2722
|
+
</span>
|
|
2723
|
+
</button>
|
|
2724
|
+
<div class="pf-c-menu" hidden>
|
|
2725
|
+
<div class="pf-c-menu__content">
|
|
2726
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2727
|
+
<li
|
|
2728
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2729
|
+
role="none"
|
|
2730
|
+
>
|
|
2731
|
+
<button
|
|
2732
|
+
class="pf-c-menu__item"
|
|
2733
|
+
type="button"
|
|
2734
|
+
role="menuitem"
|
|
2735
|
+
>
|
|
2736
|
+
<span class="pf-c-menu__item-main">
|
|
2737
|
+
<span
|
|
2738
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2739
|
+
>
|
|
2740
|
+
<i class="fas fa-angle-left"></i>
|
|
2741
|
+
</span>
|
|
2742
|
+
<span class="pf-c-menu__item-icon">
|
|
2743
|
+
<i
|
|
2744
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2745
|
+
aria-hidden="true"
|
|
2746
|
+
></i>
|
|
2747
|
+
</span>
|
|
2748
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2749
|
+
</span>
|
|
2750
|
+
</button>
|
|
2751
|
+
</li>
|
|
2752
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2753
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2754
|
+
<a
|
|
2755
|
+
class="pf-c-menu__item"
|
|
2756
|
+
href="#"
|
|
2757
|
+
role="menuitem"
|
|
2758
|
+
>
|
|
2759
|
+
<span class="pf-c-menu__item-main">
|
|
2760
|
+
<span
|
|
2761
|
+
class="pf-c-menu__item-text"
|
|
2762
|
+
>Support options</span>
|
|
2763
|
+
</span>
|
|
2764
|
+
</a>
|
|
2765
|
+
</li>
|
|
2766
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2767
|
+
<a
|
|
2768
|
+
class="pf-c-menu__item"
|
|
2769
|
+
href="#"
|
|
2770
|
+
role="menuitem"
|
|
2771
|
+
>
|
|
2772
|
+
<span class="pf-c-menu__item-main">
|
|
2773
|
+
<span
|
|
2774
|
+
class="pf-c-menu__item-text"
|
|
2775
|
+
>Open support case</span>
|
|
2776
|
+
</span>
|
|
2777
|
+
</a>
|
|
2778
|
+
</li>
|
|
2779
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2780
|
+
<a
|
|
2781
|
+
class="pf-c-menu__item"
|
|
2782
|
+
href="#"
|
|
2783
|
+
role="menuitem"
|
|
2784
|
+
>
|
|
2785
|
+
<span class="pf-c-menu__item-main">
|
|
2786
|
+
<span
|
|
2787
|
+
class="pf-c-menu__item-text"
|
|
2788
|
+
>API documentation</span>
|
|
2789
|
+
</span>
|
|
2790
|
+
</a>
|
|
2791
|
+
</li>
|
|
2792
|
+
</ul>
|
|
2793
|
+
</div>
|
|
2794
|
+
</div>
|
|
2795
|
+
</li>
|
|
2796
|
+
|
|
2797
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2798
|
+
<button
|
|
2799
|
+
class="pf-c-menu__item"
|
|
2800
|
+
type="button"
|
|
2801
|
+
role="menuitem"
|
|
2802
|
+
>
|
|
2803
|
+
<span class="pf-c-menu__item-main">
|
|
2804
|
+
<span class="pf-c-menu__item-icon">
|
|
2805
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
2806
|
+
</span>
|
|
2807
|
+
<span
|
|
2808
|
+
class="pf-c-menu__item-text"
|
|
2809
|
+
>Application launcher</span>
|
|
2810
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2811
|
+
<i class="fas fa-angle-right"></i>
|
|
2812
|
+
</span>
|
|
2813
|
+
</span>
|
|
2814
|
+
</button>
|
|
2815
|
+
<div class="pf-c-menu" hidden>
|
|
2816
|
+
<div class="pf-c-menu__header">
|
|
2817
|
+
<button
|
|
2818
|
+
class="pf-c-menu__item"
|
|
2819
|
+
type="button"
|
|
2820
|
+
role="menuitem"
|
|
2821
|
+
>
|
|
2822
|
+
<span class="pf-c-menu__item-main">
|
|
2823
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2824
|
+
<i class="fas fa-angle-left"></i>
|
|
2825
|
+
</span>
|
|
2826
|
+
<span class="pf-c-menu__item-icon">
|
|
2827
|
+
<i
|
|
2828
|
+
class="fas fa-fw fa-th"
|
|
2829
|
+
aria-hidden="true"
|
|
2830
|
+
></i>
|
|
2831
|
+
</span>
|
|
2832
|
+
<span
|
|
2833
|
+
class="pf-c-menu__item-text"
|
|
2834
|
+
>Application launcher</span>
|
|
2835
|
+
</span>
|
|
2836
|
+
</button>
|
|
2837
|
+
</div>
|
|
2838
|
+
<div class="pf-c-menu__search">
|
|
2839
|
+
<div class="pf-c-menu__search-input">
|
|
2840
|
+
<div class="pf-c-search-input">
|
|
2841
|
+
<div class="pf-c-search-input__bar">
|
|
2842
|
+
<span class="pf-c-search-input__text">
|
|
2843
|
+
<span class="pf-c-search-input__icon">
|
|
2844
|
+
<i
|
|
2845
|
+
class="fas fa-search fa-fw"
|
|
2846
|
+
aria-hidden="true"
|
|
2847
|
+
></i>
|
|
2848
|
+
</span>
|
|
2849
|
+
<input
|
|
2850
|
+
class="pf-c-search-input__text-input"
|
|
2851
|
+
type="text"
|
|
2852
|
+
placeholder="Search"
|
|
2853
|
+
aria-label="Search"
|
|
2854
|
+
/>
|
|
2855
|
+
</span>
|
|
2856
|
+
</div>
|
|
2857
|
+
</div>
|
|
2858
|
+
</div>
|
|
2859
|
+
</div>
|
|
2860
|
+
<hr class="pf-c-divider" />
|
|
2861
|
+
<section class="pf-c-menu__group">
|
|
2862
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
2863
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2864
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2865
|
+
<a
|
|
2866
|
+
class="pf-c-menu__item"
|
|
2867
|
+
href="#"
|
|
2868
|
+
role="menuitem"
|
|
2869
|
+
>
|
|
2870
|
+
<span class="pf-c-menu__item-main">
|
|
2871
|
+
<span
|
|
2872
|
+
class="pf-c-menu__item-text"
|
|
2873
|
+
>Link 1</span>
|
|
2874
|
+
</span>
|
|
2875
|
+
</a>
|
|
2876
|
+
<button
|
|
2877
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2878
|
+
type="button"
|
|
2879
|
+
aria-label="Starred"
|
|
2880
|
+
>
|
|
2881
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2882
|
+
<i
|
|
2883
|
+
class="fas fa-star"
|
|
2884
|
+
aria-hidden="true"
|
|
2885
|
+
></i>
|
|
2886
|
+
</span>
|
|
2887
|
+
</button>
|
|
2888
|
+
</li>
|
|
2889
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2890
|
+
<a
|
|
2891
|
+
class="pf-c-menu__item"
|
|
2892
|
+
href="#"
|
|
2893
|
+
role="menuitem"
|
|
2894
|
+
target="_blank"
|
|
2895
|
+
>
|
|
2896
|
+
<span class="pf-c-menu__item-main">
|
|
2897
|
+
<span
|
|
2898
|
+
class="pf-c-menu__item-text"
|
|
2899
|
+
>Link 2</span>
|
|
2900
|
+
<span
|
|
2901
|
+
class="pf-c-menu__item-external-icon"
|
|
2902
|
+
>
|
|
2903
|
+
<i
|
|
2904
|
+
class="fas fa-external-link-alt"
|
|
2905
|
+
aria-hidden="true"
|
|
2906
|
+
></i>
|
|
2907
|
+
</span>
|
|
2908
|
+
<span
|
|
2909
|
+
class="pf-screen-reader"
|
|
2910
|
+
>(opens new window)</span>
|
|
2911
|
+
</span>
|
|
2912
|
+
</a>
|
|
2913
|
+
<button
|
|
2914
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2915
|
+
type="button"
|
|
2916
|
+
aria-label="Not starred"
|
|
2917
|
+
>
|
|
2918
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2919
|
+
<i
|
|
2920
|
+
class="fas fa-star"
|
|
2921
|
+
aria-hidden="true"
|
|
2922
|
+
></i>
|
|
2923
|
+
</span>
|
|
2924
|
+
</button>
|
|
2925
|
+
</li>
|
|
2926
|
+
</ul>
|
|
2927
|
+
</section>
|
|
2928
|
+
<hr class="pf-c-divider" />
|
|
2929
|
+
<section class="pf-c-menu__group">
|
|
2930
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
2931
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2932
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2933
|
+
<a
|
|
2934
|
+
class="pf-c-menu__item"
|
|
2935
|
+
href="#"
|
|
2936
|
+
role="menuitem"
|
|
2937
|
+
>
|
|
2938
|
+
<span class="pf-c-menu__item-main">
|
|
2939
|
+
<span
|
|
2940
|
+
class="pf-c-menu__item-text"
|
|
2941
|
+
>Link 1</span>
|
|
2942
|
+
</span>
|
|
2943
|
+
</a>
|
|
2944
|
+
<button
|
|
2945
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2946
|
+
type="button"
|
|
2947
|
+
aria-label="Not starred"
|
|
2948
|
+
>
|
|
2949
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2950
|
+
<i
|
|
2951
|
+
class="fas fa-star"
|
|
2952
|
+
aria-hidden="true"
|
|
2953
|
+
></i>
|
|
2954
|
+
</span>
|
|
2955
|
+
</button>
|
|
2956
|
+
</li>
|
|
2957
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2958
|
+
<a
|
|
2959
|
+
class="pf-c-menu__item"
|
|
2960
|
+
href="#"
|
|
2961
|
+
role="menuitem"
|
|
2962
|
+
target="_blank"
|
|
2963
|
+
>
|
|
2964
|
+
<span class="pf-c-menu__item-main">
|
|
2965
|
+
<span
|
|
2966
|
+
class="pf-c-menu__item-text"
|
|
2967
|
+
>Link 2</span>
|
|
2968
|
+
<span
|
|
2969
|
+
class="pf-c-menu__item-external-icon"
|
|
2970
|
+
>
|
|
2971
|
+
<i
|
|
2972
|
+
class="fas fa-external-link-alt"
|
|
2973
|
+
aria-hidden="true"
|
|
2974
|
+
></i>
|
|
2975
|
+
</span>
|
|
2976
|
+
<span
|
|
2977
|
+
class="pf-screen-reader"
|
|
2978
|
+
>(opens new window)</span>
|
|
2979
|
+
</span>
|
|
2980
|
+
</a>
|
|
2981
|
+
<button
|
|
2982
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2983
|
+
type="button"
|
|
2984
|
+
aria-label="Starred"
|
|
2985
|
+
>
|
|
2986
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2987
|
+
<i
|
|
2988
|
+
class="fas fa-star"
|
|
2989
|
+
aria-hidden="true"
|
|
2990
|
+
></i>
|
|
2991
|
+
</span>
|
|
2992
|
+
</button>
|
|
2993
|
+
</li>
|
|
2994
|
+
</ul>
|
|
2995
|
+
</section>
|
|
2996
|
+
</div>
|
|
2997
|
+
</li>
|
|
2998
|
+
</ul>
|
|
2999
|
+
</section>
|
|
3000
|
+
</div>
|
|
3001
|
+
</div>
|
|
3002
|
+
</div>
|
|
3003
|
+
</div>
|
|
3004
|
+
</div>
|
|
3005
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
3006
|
+
<div
|
|
3007
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
3008
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
3009
|
+
>
|
|
3010
|
+
<button
|
|
3011
|
+
class="pf-c-dropdown__toggle"
|
|
3012
|
+
id="description-list-complex-content-demo-masthead-profile-button"
|
|
3013
|
+
aria-expanded="false"
|
|
3014
|
+
type="button"
|
|
3015
|
+
>
|
|
3016
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
3017
|
+
<img
|
|
3018
|
+
class="pf-c-avatar"
|
|
3019
|
+
src="/assets/images/img_avatar.svg"
|
|
3020
|
+
alt="Avatar image"
|
|
3021
|
+
/>
|
|
3022
|
+
</span>
|
|
3023
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
3024
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
3025
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3026
|
+
</span>
|
|
3027
|
+
</button>
|
|
3028
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
3029
|
+
<section class="pf-c-dropdown__group">
|
|
3030
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
3031
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
3032
|
+
<div>123456789</div>
|
|
3033
|
+
</div>
|
|
3034
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
3035
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
3036
|
+
<div>mshaksho@redhat.com</div>
|
|
3037
|
+
</div>
|
|
3038
|
+
</section>
|
|
3039
|
+
<hr class="pf-c-divider" />
|
|
3040
|
+
<section class="pf-c-dropdown__group">
|
|
3041
|
+
<ul>
|
|
3042
|
+
<li>
|
|
3043
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
3044
|
+
</li>
|
|
3045
|
+
<li>
|
|
3046
|
+
<a
|
|
3047
|
+
class="pf-c-dropdown__menu-item"
|
|
3048
|
+
href="#"
|
|
3049
|
+
>User management</a>
|
|
3050
|
+
</li>
|
|
3051
|
+
<li>
|
|
3052
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
3053
|
+
</li>
|
|
3054
|
+
</ul>
|
|
3055
|
+
</section>
|
|
3056
|
+
</div>
|
|
3057
|
+
</div>
|
|
3058
|
+
</div>
|
|
3059
|
+
</div>
|
|
3060
|
+
</div>
|
|
3061
|
+
</div>
|
|
3062
|
+
</div>
|
|
3063
|
+
</header>
|
|
3064
|
+
<div class="pf-c-page__sidebar">
|
|
3065
|
+
<div class="pf-c-page__sidebar-body">
|
|
3066
|
+
<nav
|
|
3067
|
+
class="pf-c-nav"
|
|
3068
|
+
id="description-list-complex-content-demo-primary-nav"
|
|
3069
|
+
aria-label="Global"
|
|
3070
|
+
>
|
|
3071
|
+
<ul class="pf-c-nav__list">
|
|
3072
|
+
<li class="pf-c-nav__item">
|
|
3073
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
3074
|
+
</li>
|
|
3075
|
+
<li class="pf-c-nav__item">
|
|
3076
|
+
<a
|
|
3077
|
+
href="#"
|
|
3078
|
+
class="pf-c-nav__link pf-m-current"
|
|
3079
|
+
aria-current="page"
|
|
3080
|
+
>Policy</a>
|
|
3081
|
+
</li>
|
|
3082
|
+
<li class="pf-c-nav__item">
|
|
3083
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
3084
|
+
</li>
|
|
3085
|
+
<li class="pf-c-nav__item">
|
|
3086
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
3087
|
+
</li>
|
|
3088
|
+
<li class="pf-c-nav__item">
|
|
3089
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
3090
|
+
</li>
|
|
3091
|
+
</ul>
|
|
3092
|
+
</nav>
|
|
3093
|
+
</div>
|
|
3094
|
+
</div>
|
|
3095
|
+
<main
|
|
3096
|
+
class="pf-c-page__main"
|
|
3097
|
+
tabindex="-1"
|
|
3098
|
+
id="main-content-description-list-complex-content-demo"
|
|
3099
|
+
>
|
|
3100
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
3101
|
+
<div class="pf-c-page__main-body">
|
|
3102
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
3103
|
+
<ol class="pf-c-breadcrumb__list">
|
|
3104
|
+
<li class="pf-c-breadcrumb__item">
|
|
3105
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
3106
|
+
</li>
|
|
3107
|
+
<li class="pf-c-breadcrumb__item">
|
|
3108
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
3109
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3110
|
+
</span>
|
|
3111
|
+
|
|
3112
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
3113
|
+
</li>
|
|
3114
|
+
<li class="pf-c-breadcrumb__item">
|
|
3115
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
3116
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3117
|
+
</span>
|
|
3118
|
+
|
|
3119
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
3120
|
+
</li>
|
|
3121
|
+
<li class="pf-c-breadcrumb__item">
|
|
3122
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
3123
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3124
|
+
</span>
|
|
3125
|
+
|
|
3126
|
+
<a
|
|
3127
|
+
href="#"
|
|
3128
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
3129
|
+
aria-current="page"
|
|
3130
|
+
>Section landing</a>
|
|
3131
|
+
</li>
|
|
3132
|
+
</ol>
|
|
3133
|
+
</nav>
|
|
3134
|
+
</div>
|
|
3135
|
+
</section>
|
|
3136
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
3137
|
+
<div class="pf-c-page__main-body">
|
|
3138
|
+
<div class="pf-c-content">
|
|
3139
|
+
<h1>Main title</h1>
|
|
3140
|
+
<p>This is a full page demo.</p>
|
|
3141
|
+
</div>
|
|
3142
|
+
</div>
|
|
3143
|
+
</section>
|
|
3144
|
+
<hr class="pf-c-divider" />
|
|
3145
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
3146
|
+
<div class="pf-c-page__main-body">
|
|
3147
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
3148
|
+
<div class="pf-l-grid__item pf-m-5-col-on-lg pf-m-4-col-on-xl">
|
|
3149
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
3150
|
+
<div class="pf-l-grid__item">
|
|
3151
|
+
<h2 class="pf-c-title pf-m-lg">Service overview</h2>
|
|
3152
|
+
</div>
|
|
3153
|
+
<div class="pf-l-grid__item">
|
|
3154
|
+
<dl class="pf-c-description-list pf-m-2-col-on-xl">
|
|
3155
|
+
<div class="pf-c-description-list__group">
|
|
3156
|
+
<dt class="pf-c-description-list__term">
|
|
3157
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
3158
|
+
</dt>
|
|
3159
|
+
<dd class="pf-c-description-list__description">
|
|
3160
|
+
<div class="pf-c-description-list__text">mary-test</div>
|
|
3161
|
+
</dd>
|
|
3162
|
+
</div>
|
|
3163
|
+
<div class="pf-c-description-list__group">
|
|
3164
|
+
<dt class="pf-c-description-list__term">
|
|
3165
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
3166
|
+
</dt>
|
|
3167
|
+
<dd class="pf-c-description-list__description">
|
|
3168
|
+
<div class="pf-c-description-list__text">
|
|
3169
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
3170
|
+
<div class="pf-l-flex__item">
|
|
3171
|
+
<span class="pf-c-label pf-m-green">
|
|
3172
|
+
<span class="pf-c-label__content">NS</span>
|
|
3173
|
+
</span>
|
|
3174
|
+
</div>
|
|
3175
|
+
<div class="pf-l-flex__item">
|
|
3176
|
+
<a href="#">mary-test</a>
|
|
3177
|
+
</div>
|
|
3178
|
+
</div>
|
|
3179
|
+
</div>
|
|
3180
|
+
</dd>
|
|
3181
|
+
</div>
|
|
3182
|
+
<div class="pf-c-description-list__group">
|
|
3183
|
+
<dt class="pf-c-description-list__term">
|
|
3184
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
3185
|
+
</dt>
|
|
3186
|
+
<dd class="pf-c-description-list__description">
|
|
3187
|
+
<div class="pf-c-description-list__text">No labels</div>
|
|
3188
|
+
</dd>
|
|
3189
|
+
</div>
|
|
3190
|
+
<div class="pf-c-description-list__group">
|
|
3191
|
+
<dt class="pf-c-description-list__term">
|
|
3192
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
3193
|
+
</dt>
|
|
3194
|
+
<dd class="pf-c-description-list__description">
|
|
3195
|
+
<div class="pf-c-description-list__text">
|
|
3196
|
+
<a href="#">
|
|
3197
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
3198
|
+
<div class="pf-l-flex__item">
|
|
3199
|
+
<i class="fas fa-search" aria-hidden="true"></i>
|
|
3200
|
+
</div>
|
|
3201
|
+
<div class="pf-l-flex__item">
|
|
3202
|
+
<span>app=MyApp</span>
|
|
3203
|
+
</div>
|
|
3204
|
+
</div>
|
|
3205
|
+
</a>
|
|
3206
|
+
</div>
|
|
3207
|
+
</dd>
|
|
3208
|
+
</div>
|
|
3209
|
+
<div class="pf-c-description-list__group">
|
|
3210
|
+
<dt class="pf-c-description-list__term">
|
|
3211
|
+
<span class="pf-c-description-list__text">Annotations</span>
|
|
3212
|
+
</dt>
|
|
3213
|
+
<dd class="pf-c-description-list__description">
|
|
3214
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
3215
|
+
</dd>
|
|
3216
|
+
</div>
|
|
3217
|
+
<div class="pf-c-description-list__group">
|
|
3218
|
+
<dt class="pf-c-description-list__term">
|
|
3219
|
+
<span class="pf-c-description-list__text">Session affinity</span>
|
|
3220
|
+
</dt>
|
|
3221
|
+
<dd class="pf-c-description-list__description">
|
|
3222
|
+
<div class="pf-c-description-list__text">None</div>
|
|
3223
|
+
</dd>
|
|
3224
|
+
</div>
|
|
3225
|
+
<div class="pf-c-description-list__group">
|
|
3226
|
+
<dt class="pf-c-description-list__term">
|
|
3227
|
+
<span class="pf-c-description-list__text">Created at:</span>
|
|
3228
|
+
</dt>
|
|
3229
|
+
<dd class="pf-c-description-list__description">
|
|
3230
|
+
<div class="pf-c-description-list__text">3 minutes ago</div>
|
|
3231
|
+
</dd>
|
|
3232
|
+
</div>
|
|
3233
|
+
</dl>
|
|
3234
|
+
</div>
|
|
3235
|
+
</div>
|
|
3236
|
+
</div>
|
|
3237
|
+
<div class="pf-l-grid__item pf-m-6-col-on-lg pf-m-4-col-on-xl">
|
|
3238
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
3239
|
+
<div class="pf-l-grid__item">
|
|
3240
|
+
<h2 class="pf-c-title pf-m-lg">Service routing</h2>
|
|
3241
|
+
</div>
|
|
3242
|
+
<div class="pf-l-grid__item">
|
|
3243
|
+
<dl class="pf-c-description-list">
|
|
3244
|
+
<div class="pf-c-description-list__group">
|
|
3245
|
+
<dt class="pf-c-description-list__term">
|
|
3246
|
+
<span class="pf-c-description-list__text">Service address</span>
|
|
3247
|
+
</dt>
|
|
3248
|
+
<dd class="pf-c-description-list__description">
|
|
3249
|
+
<div class="pf-c-description-list__text">
|
|
3250
|
+
<table
|
|
3251
|
+
class="pf-c-table pf-m-grid-md pf-m-compact"
|
|
3252
|
+
role="grid"
|
|
3253
|
+
aria-label="Service address"
|
|
3254
|
+
id="service-address"
|
|
3255
|
+
>
|
|
3256
|
+
<thead>
|
|
3257
|
+
<tr role="row">
|
|
3258
|
+
<th role="columnheader" scope="col">Type</th>
|
|
3259
|
+
<th role="columnheader" scope="col">Location</th>
|
|
3260
|
+
</tr>
|
|
3261
|
+
</thead>
|
|
3262
|
+
<tbody role="rowgroup">
|
|
3263
|
+
<tr role="row">
|
|
3264
|
+
<td role="cell" data-label="Type">Cluster IP</td>
|
|
3265
|
+
<td
|
|
3266
|
+
class
|
|
3267
|
+
role="cell"
|
|
3268
|
+
data-label="Location"
|
|
3269
|
+
>172.30.126.106</td>
|
|
3270
|
+
</tr>
|
|
3271
|
+
<tr role="row">
|
|
3272
|
+
<td
|
|
3273
|
+
class
|
|
3274
|
+
role="cell"
|
|
3275
|
+
data-label="Type"
|
|
3276
|
+
>Accessible within the cluster only</td>
|
|
3277
|
+
<td role="cell" data-label="Location">n/a</td>
|
|
3278
|
+
</tr>
|
|
3279
|
+
</tbody>
|
|
3280
|
+
</table>
|
|
3281
|
+
</div>
|
|
3282
|
+
</dd>
|
|
3283
|
+
</div>
|
|
3284
|
+
<div class="pf-c-description-list__group">
|
|
3285
|
+
<dt class="pf-c-description-list__term">
|
|
3286
|
+
<span
|
|
3287
|
+
class="pf-c-description-list__text"
|
|
3288
|
+
>Service port mapping</span>
|
|
3289
|
+
</dt>
|
|
3290
|
+
<dd class="pf-c-description-list__description">
|
|
3291
|
+
<div class="pf-c-description-list__text">
|
|
3292
|
+
<table
|
|
3293
|
+
class="pf-c-table pf-m-grid-md pf-m-compact"
|
|
3294
|
+
role="grid"
|
|
3295
|
+
aria-label="Service address"
|
|
3296
|
+
id="service-port"
|
|
3297
|
+
>
|
|
3298
|
+
<thead>
|
|
3299
|
+
<tr role="row">
|
|
3300
|
+
<th role="columnheader" scope="col">Name</th>
|
|
3301
|
+
<th role="columnheader" scope="col">Port</th>
|
|
3302
|
+
<th role="columnheader" scope="col">Protocol</th>
|
|
3303
|
+
<th
|
|
3304
|
+
class
|
|
3305
|
+
role="columnheader"
|
|
3306
|
+
scope="col"
|
|
3307
|
+
>Pod port or name</th>
|
|
3308
|
+
</tr>
|
|
3309
|
+
</thead>
|
|
3310
|
+
<tbody role="rowgroup">
|
|
3311
|
+
<tr role="row">
|
|
3312
|
+
<td role="cell" data-label="Name">--</td>
|
|
3313
|
+
<td role="cell" data-label="Port">
|
|
3314
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
3315
|
+
<div class="pf-l-flex__item">
|
|
3316
|
+
<span
|
|
3317
|
+
class="pf-c-label pf-m-green pf-m-compact"
|
|
3318
|
+
>
|
|
3319
|
+
<span class="pf-c-label__content">S</span>
|
|
3320
|
+
</span>
|
|
3321
|
+
</div>
|
|
3322
|
+
<div class="pf-l-flex__item">80</div>
|
|
3323
|
+
</div>
|
|
3324
|
+
</td>
|
|
3325
|
+
<td role="cell" data-label="Protocol">TCP</td>
|
|
3326
|
+
<td
|
|
3327
|
+
class
|
|
3328
|
+
role="cell"
|
|
3329
|
+
data-label="Pod port or name"
|
|
3330
|
+
>
|
|
3331
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
3332
|
+
<div class="pf-l-flex__item">
|
|
3333
|
+
<span
|
|
3334
|
+
class="pf-c-label pf-m-cyan pf-m-compact"
|
|
3335
|
+
>
|
|
3336
|
+
<span class="pf-c-label__content">P</span>
|
|
3337
|
+
</span>
|
|
3338
|
+
</div>
|
|
3339
|
+
<div class="pf-l-flex__item">80</div>
|
|
3340
|
+
</div>
|
|
3341
|
+
</td>
|
|
3342
|
+
</tr>
|
|
3343
|
+
</tbody>
|
|
3344
|
+
</table>
|
|
3345
|
+
</div>
|
|
3346
|
+
</dd>
|
|
3347
|
+
</div>
|
|
3348
|
+
</dl>
|
|
3349
|
+
</div>
|
|
3350
|
+
</div>
|
|
3351
|
+
</div>
|
|
3352
|
+
</div>
|
|
3353
|
+
</div>
|
|
3354
|
+
</section>
|
|
3355
|
+
</main>
|
|
3356
|
+
</div>
|
|
3357
|
+
|
|
3358
|
+
```
|