@patternfly/patternfly 4.179.3 → 4.181.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.
Files changed (45) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/Dropdown/dropdown.css +4 -2
  3. package/components/Dropdown/dropdown.scss +4 -2
  4. package/components/FormControl/form-control.css +26 -0
  5. package/components/FormControl/form-control.scss +33 -1
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +10 -7
  9. package/components/MenuToggle/menu-toggle.scss +11 -9
  10. package/components/SearchInput/search-input.css +1 -0
  11. package/components/SearchInput/search-input.scss +1 -0
  12. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  13. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  15. package/docs/components/FormControl/examples/FormControl.md +151 -11
  16. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  17. package/docs/components/Menu/examples/Menu.md +127 -30
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +247 -276
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  30. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  31. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  32. package/docs/demos/Masthead/examples/Masthead.md +426 -449
  33. package/docs/demos/Nav/examples/Nav.md +203 -343
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  35. package/docs/demos/Page/examples/Page.md +834 -1235
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +1189 -652
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +51 -9
  43. package/patternfly.css +51 -9
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/demos/DescriptionList/examples/DescriptionList.md ADDED
@@ -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"
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"
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"
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
+ ```