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