@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92
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/base/patternfly-common.css +10 -10
- package/base/patternfly-globals.css +3 -3
- package/base/patternfly-icons.css +1 -1
- package/base/patternfly-themes.css +53 -53
- package/base/patternfly-variables.css +236 -245
- package/base/tokens/_tokens-font.scss +0 -11
- package/components/AboutModalBox/about-modal-box.css +102 -102
- package/components/Accordion/accordion.css +118 -118
- package/components/ActionList/action-list.css +16 -16
- package/components/Alert/alert-group.css +50 -50
- package/components/Alert/alert.css +161 -161
- package/components/AppLauncher/app-launcher.css +167 -167
- package/components/Avatar/avatar.css +116 -116
- package/components/BackToTop/back-to-top.css +21 -21
- package/components/Backdrop/backdrop.css +9 -9
- package/components/BackgroundImage/background-image.css +15 -15
- package/components/Badge/badge.css +35 -35
- package/components/Banner/banner.css +114 -114
- package/components/Brand/brand.css +28 -28
- package/components/Breadcrumb/breadcrumb.css +62 -62
- package/components/Button/button.css +514 -514
- package/components/CalendarMonth/calendar-month.css +144 -144
- package/components/Card/card.css +230 -230
- package/components/Check/check.css +43 -43
- package/components/Chip/chip-group.css +60 -60
- package/components/Chip/chip.css +83 -83
- package/components/ClipboardCopy/clipboard-copy.css +71 -71
- package/components/CodeBlock/code-block.css +35 -35
- package/components/CodeEditor/code-editor.css +121 -121
- package/components/Content/content.css +216 -216
- package/components/ContextSelector/context-selector.css +251 -251
- package/components/DataList/data-list-grid.css +182 -182
- package/components/DataList/data-list.css +468 -468
- package/components/DatePicker/date-picker.css +35 -35
- package/components/DescriptionList/description-list-order.css +90 -90
- package/components/DescriptionList/description-list.css +193 -193
- package/components/Divider/divider.css +143 -143
- package/components/DragDrop/drag-drop.css +46 -46
- package/components/Drawer/drawer.css +474 -474
- package/components/Dropdown/dropdown.css +457 -457
- package/components/DualListSelector/dual-list-selector.css +199 -199
- package/components/EmptyState/empty-state.css +104 -104
- package/components/ExpandableSection/expandable-section.css +113 -113
- package/components/FileUpload/file-upload.css +32 -32
- package/components/Form/form.css +281 -281
- package/components/FormControl/form-control.css +197 -197
- package/components/HelperText/helper-text.css +51 -51
- package/components/Hint/hint.css +46 -46
- package/components/Icon/icon.css +218 -218
- package/components/InlineEdit/inline-edit.css +43 -43
- package/components/InputGroup/input-group.css +52 -52
- package/components/JumpLinks/jump-links.css +183 -183
- package/components/Label/label-group.css +86 -86
- package/components/Label/label.css +438 -438
- package/components/List/list.css +53 -53
- package/components/LogViewer/log-viewer.css +138 -138
- package/components/Login/login.css +139 -139
- package/components/Masthead/masthead.css +319 -319
- package/components/Menu/menu.css +415 -415
- package/components/MenuToggle/menu-toggle.css +275 -275
- package/components/ModalBox/modal-box.css +121 -121
- package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
- package/components/Nav/nav.css +225 -225
- package/components/NotificationBadge/notification-badge.css +66 -66
- package/components/NotificationDrawer/notification-drawer.css +179 -179
- package/components/NumberInput/number-input.css +20 -20
- package/components/OptionsMenu/options-menu.css +190 -190
- package/components/OverflowMenu/overflow-menu.css +19 -19
- package/components/Page/page.css +598 -598
- package/components/Pagination/pagination.css +220 -220
- package/components/Panel/panel.css +72 -72
- package/components/Popover/popover.css +148 -148
- package/components/Progress/progress.css +80 -80
- package/components/ProgressStepper/progress-stepper.css +514 -514
- package/components/Radio/radio.css +44 -44
- package/components/Select/select.css +423 -423
- package/components/Sidebar/sidebar.css +166 -166
- package/components/SimpleList/simple-list.css +53 -53
- package/components/Skeleton/skeleton.css +112 -112
- package/components/SkipToContent/skip-to-content.css +8 -8
- package/components/Slider/slider.css +144 -144
- package/components/Spinner/spinner.css +36 -36
- package/components/Switch/switch.css +89 -89
- package/components/TabContent/tab-content.css +34 -34
- package/components/Table/table-grid.css +911 -911
- package/components/Table/table-scrollable.css +38 -38
- package/components/Table/table-tree-view.css +497 -497
- package/components/Table/table.css +660 -660
- package/components/Tabs/tabs.css +616 -616
- package/components/TextInputGroup/text-input-group.css +88 -88
- package/components/Tile/tile.css +68 -68
- package/components/Timestamp/timestamp.css +29 -29
- package/components/Title/title.css +87 -87
- package/components/ToggleGroup/toggle-group.css +86 -86
- package/components/Toolbar/toolbar.css +2279 -2279
- package/components/Tooltip/tooltip.css +85 -85
- package/components/TreeView/tree-view.css +363 -363
- package/components/Truncate/truncate.css +15 -15
- package/components/Wizard/wizard.css +272 -272
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
- package/docs/components/Accordion/examples/Accordion.md +188 -188
- package/docs/components/ActionList/examples/ActionList.md +55 -55
- package/docs/components/Alert/examples/Alert.md +222 -222
- package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
- package/docs/components/Avatar/examples/Avatar.md +6 -6
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
- package/docs/components/Badge/examples/Badge.md +17 -17
- package/docs/components/Banner/examples/Banner.md +42 -42
- package/docs/components/Brand/examples/Brand.md +4 -4
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
- package/docs/components/Button/examples/Button.md +364 -364
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
- package/docs/components/Card/examples/Card.md +515 -515
- package/docs/components/Check/examples/Check.md +37 -37
- package/docs/components/Chip/examples/Chip.md +216 -216
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
- package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
- package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
- package/docs/components/DataList/examples/DataList.md +666 -666
- package/docs/components/DatePicker/examples/DatePicker.md +54 -54
- package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
- package/docs/components/Divider/examples/Divider.md +18 -18
- package/docs/components/DragDrop/examples/DragDrop.md +27 -27
- package/docs/components/Drawer/examples/Drawer.md +225 -225
- package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
- package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
- package/docs/components/EmptyState/examples/EmptyState.md +100 -100
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
- package/docs/components/FileUpload/examples/FileUpload.md +94 -94
- package/docs/components/Form/examples/Form.md +226 -226
- package/docs/components/FormControl/examples/FormControl.md +65 -65
- package/docs/components/HelperText/examples/HelperText.md +72 -72
- package/docs/components/Hint/examples/Hint.md +44 -44
- package/docs/components/Icon/examples/Icon.md +85 -85
- package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
- package/docs/components/InputGroup/examples/InputGroup.md +73 -73
- package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
- package/docs/components/Label/examples/Label.md +1717 -1717
- package/docs/components/List/examples/List.md +30 -30
- package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
- package/docs/components/Login/examples/Login.md +287 -287
- package/docs/components/Masthead/examples/masthead.md +39 -39
- package/docs/components/Menu/examples/Menu.md +2377 -2377
- package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
- package/docs/components/ModalBox/examples/ModalBox.md +119 -119
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
- package/docs/components/Nav/examples/Navigation.md +856 -856
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
- package/docs/components/NumberInput/examples/NumberInput.md +127 -127
- package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
- package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
- package/docs/components/Page/deprecated/PageHeader.md +85 -85
- package/docs/components/Page/examples/Page.md +90 -90
- package/docs/components/Pagination/examples/Pagination.md +285 -285
- package/docs/components/Panel/examples/Panel.md +38 -38
- package/docs/components/Popover/examples/Popover.md +169 -169
- package/docs/components/Progress/examples/Progress.md +145 -145
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
- package/docs/components/Radio/examples/Radio.md +33 -33
- package/docs/components/Select/deprecated/Select.md +736 -736
- package/docs/components/Sidebar/examples/Sidebar.md +65 -65
- package/docs/components/SimpleList/examples/SimpleList.md +39 -39
- package/docs/components/Skeleton/examples/Skeleton.md +29 -29
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
- package/docs/components/Slider/examples/Slider.md +213 -213
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +58 -58
- package/docs/components/TabContent/examples/TabContent.md +24 -24
- package/docs/components/Table/examples/Table.md +6982 -6982
- package/docs/components/Tabs/examples/Tabs.md +2114 -2114
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
- package/docs/components/Tile/examples/Tile.md +131 -131
- package/docs/components/Timestamp/examples/Timestamp.md +10 -10
- package/docs/components/Title/examples/Title.md +12 -12
- package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
- package/docs/components/Toolbar/examples/Toolbar.md +611 -611
- package/docs/components/Tooltip/examples/Tooltip.md +27 -27
- package/docs/components/TreeView/examples/TreeView.md +1166 -1166
- package/docs/components/Truncate/examples/Truncate.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +522 -522
- package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
- package/docs/demos/Alert/examples/Alert.md +391 -391
- package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
- package/docs/demos/Banner/examples/Banner.md +364 -364
- package/docs/demos/Button/examples/Button.md +50 -50
- package/docs/demos/Card/examples/Card.md +1054 -1054
- package/docs/demos/CardView/examples/CardView.md +378 -378
- package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
- package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
- package/docs/demos/DataList/examples/DataList.md +1148 -1148
- package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
- package/docs/demos/Drawer/examples/Drawer.md +531 -531
- package/docs/demos/Form/examples/BasicForms.md +444 -444
- package/docs/demos/HelperText/examples/HelperText.md +51 -51
- package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
- package/docs/demos/Masthead/examples/Masthead.md +763 -763
- package/docs/demos/Modal/examples/Modal.md +645 -645
- package/docs/demos/Nav/examples/Nav.md +649 -649
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
- package/docs/demos/Page/examples/Page.md +1330 -1330
- package/docs/demos/Page/examples/Penta.md +217 -217
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
- package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
- package/docs/demos/Table/examples/Table.md +4580 -4580
- package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
- package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
- package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +290 -290
- package/docs/layouts/Gallery/examples/Gallery.md +48 -48
- package/docs/layouts/Grid/examples/Grid.md +121 -121
- package/docs/layouts/Level/examples/Level.md +11 -11
- package/docs/layouts/Split/examples/Split.md +23 -23
- package/docs/layouts/Stack/examples/Stack.md +8 -8
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/Display/examples/Display.md +16 -16
- package/docs/utilities/Flex/examples/Flex.md +53 -53
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +16 -16
- package/layouts/Bullseye/bullseye.css +3 -3
- package/layouts/Flex/flex.css +1276 -1276
- package/layouts/Gallery/gallery.css +34 -34
- package/layouts/Grid/grid.css +531 -531
- package/layouts/Level/level.css +4 -4
- package/layouts/Split/split.css +6 -6
- package/layouts/Stack/stack.css +5 -5
- package/package.json +5 -5
- package/patternfly-addons.css +2989 -2989
- package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
- package/patternfly-base-no-globals.css +284 -293
- package/patternfly-base-theme-dark-unversioned.css +271 -280
- package/patternfly-base.css +286 -295
- package/patternfly-charts-theme-dark-unversioned.css +66 -66
- package/patternfly-charts-theme-dark.css +66 -66
- package/patternfly-charts.css +320 -320
- package/patternfly-no-globals.css +20217 -20226
- package/patternfly-theme-dark-unversioned.css +20209 -20218
- package/patternfly.css +20219 -20228
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +1 -1
- package/utilities/Accessibility/accessibility.css +18 -18
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/utilities/BoxShadow/box-shadow.css +42 -42
- package/utilities/Display/display.css +54 -54
- package/utilities/Flex/flex.css +228 -228
- package/utilities/Float/float.css +12 -12
- package/utilities/Sizing/sizing.css +216 -216
- package/utilities/Spacing/spacing.css +1512 -1512
- package/utilities/Text/text.css +631 -631
|
@@ -8,25 +8,25 @@ deprecated: true
|
|
|
8
8
|
### Context selector in masthead
|
|
9
9
|
|
|
10
10
|
```html isFullscreen
|
|
11
|
-
<div class="pf-
|
|
12
|
-
<div class="pf-
|
|
11
|
+
<div class="pf-v6-c-page" id="context-selector-in-masthead">
|
|
12
|
+
<div class="pf-v6-c-skip-to-content">
|
|
13
13
|
<a
|
|
14
|
-
class="pf-
|
|
14
|
+
class="pf-v6-c-button pf-m-primary"
|
|
15
15
|
href="#main-content-context-selector-in-masthead"
|
|
16
16
|
>Skip to content</a>
|
|
17
17
|
</div>
|
|
18
|
-
<header class="pf-
|
|
19
|
-
<span class="pf-
|
|
18
|
+
<header class="pf-v6-c-masthead" id="context-selector-in-masthead-masthead">
|
|
19
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
20
20
|
<button
|
|
21
|
-
class="pf-
|
|
21
|
+
class="pf-v6-c-button pf-m-plain"
|
|
22
22
|
type="button"
|
|
23
23
|
aria-label="Global navigation"
|
|
24
24
|
>
|
|
25
25
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
26
26
|
</button>
|
|
27
27
|
</span>
|
|
28
|
-
<div class="pf-
|
|
29
|
-
<a class="pf-
|
|
28
|
+
<div class="pf-v6-c-masthead__main">
|
|
29
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
30
30
|
<svg height="40px" viewBox="0 0 679 158">
|
|
31
31
|
<title>PF-HorizontalLogo-Color</title>
|
|
32
32
|
<defs>
|
|
@@ -99,22 +99,22 @@ deprecated: true
|
|
|
99
99
|
</svg>
|
|
100
100
|
</a>
|
|
101
101
|
</div>
|
|
102
|
-
<div class="pf-
|
|
102
|
+
<div class="pf-v6-c-masthead__content">
|
|
103
103
|
<div
|
|
104
|
-
class="pf-
|
|
104
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
105
105
|
id="context-selector-in-masthead-masthead-toolbar"
|
|
106
106
|
>
|
|
107
|
-
<div class="pf-
|
|
108
|
-
<div class="pf-
|
|
109
|
-
<div class="pf-
|
|
107
|
+
<div class="pf-v6-c-toolbar__content">
|
|
108
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
109
|
+
<div class="pf-v6-c-toolbar__item">
|
|
110
110
|
<button
|
|
111
|
-
class="pf-
|
|
111
|
+
class="pf-v6-c-menu-toggle pf-m-full-height"
|
|
112
112
|
type="button"
|
|
113
113
|
aria-expanded="false"
|
|
114
114
|
>
|
|
115
|
-
<span class="pf-
|
|
116
|
-
<span class="pf-
|
|
117
|
-
<span class="pf-
|
|
115
|
+
<span class="pf-v6-c-menu-toggle__text">Context selector</span>
|
|
116
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
117
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
118
118
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
119
119
|
</span>
|
|
120
120
|
</span>
|
|
@@ -125,71 +125,71 @@ deprecated: true
|
|
|
125
125
|
</div>
|
|
126
126
|
</div>
|
|
127
127
|
</header>
|
|
128
|
-
<div class="pf-
|
|
129
|
-
<div class="pf-
|
|
128
|
+
<div class="pf-v6-c-page__sidebar">
|
|
129
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
130
130
|
<nav
|
|
131
|
-
class="pf-
|
|
131
|
+
class="pf-v6-c-nav"
|
|
132
132
|
id="context-selector-in-masthead-primary-nav"
|
|
133
133
|
aria-label="Global"
|
|
134
134
|
>
|
|
135
|
-
<ul class="pf-
|
|
136
|
-
<li class="pf-
|
|
137
|
-
<a href="#" class="pf-
|
|
135
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
136
|
+
<li class="pf-v6-c-nav__item">
|
|
137
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
138
138
|
</li>
|
|
139
|
-
<li class="pf-
|
|
139
|
+
<li class="pf-v6-c-nav__item">
|
|
140
140
|
<a
|
|
141
141
|
href="#"
|
|
142
|
-
class="pf-
|
|
142
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
143
143
|
aria-current="page"
|
|
144
144
|
>Policy</a>
|
|
145
145
|
</li>
|
|
146
|
-
<li class="pf-
|
|
147
|
-
<a href="#" class="pf-
|
|
146
|
+
<li class="pf-v6-c-nav__item">
|
|
147
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
148
148
|
</li>
|
|
149
|
-
<li class="pf-
|
|
150
|
-
<a href="#" class="pf-
|
|
149
|
+
<li class="pf-v6-c-nav__item">
|
|
150
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
151
151
|
</li>
|
|
152
|
-
<li class="pf-
|
|
153
|
-
<a href="#" class="pf-
|
|
152
|
+
<li class="pf-v6-c-nav__item">
|
|
153
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
154
154
|
</li>
|
|
155
155
|
</ul>
|
|
156
156
|
</nav>
|
|
157
157
|
</div>
|
|
158
158
|
</div>
|
|
159
159
|
<main
|
|
160
|
-
class="pf-
|
|
160
|
+
class="pf-v6-c-page__main"
|
|
161
161
|
tabindex="-1"
|
|
162
162
|
id="main-content-context-selector-in-masthead"
|
|
163
163
|
>
|
|
164
|
-
<section class="pf-
|
|
165
|
-
<div class="pf-
|
|
166
|
-
<nav class="pf-
|
|
167
|
-
<ol class="pf-
|
|
168
|
-
<li class="pf-
|
|
169
|
-
<a href="#" class="pf-
|
|
164
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
165
|
+
<div class="pf-v6-c-page__main-body">
|
|
166
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
167
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
168
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
169
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
170
170
|
</li>
|
|
171
|
-
<li class="pf-
|
|
172
|
-
<span class="pf-
|
|
171
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
172
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
173
173
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
174
174
|
</span>
|
|
175
175
|
|
|
176
|
-
<a href="#" class="pf-
|
|
176
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
177
177
|
</li>
|
|
178
|
-
<li class="pf-
|
|
179
|
-
<span class="pf-
|
|
178
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
179
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
180
180
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
181
181
|
</span>
|
|
182
182
|
|
|
183
|
-
<a href="#" class="pf-
|
|
183
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
184
184
|
</li>
|
|
185
|
-
<li class="pf-
|
|
186
|
-
<span class="pf-
|
|
185
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
186
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
187
187
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
188
188
|
</span>
|
|
189
189
|
|
|
190
190
|
<a
|
|
191
191
|
href="#"
|
|
192
|
-
class="pf-
|
|
192
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
193
193
|
aria-current="page"
|
|
194
194
|
>Section landing</a>
|
|
195
195
|
</li>
|
|
@@ -197,46 +197,46 @@ deprecated: true
|
|
|
197
197
|
</nav>
|
|
198
198
|
</div>
|
|
199
199
|
</section>
|
|
200
|
-
<section class="pf-
|
|
201
|
-
<div class="pf-
|
|
202
|
-
<div class="pf-
|
|
200
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
201
|
+
<div class="pf-v6-c-page__main-body">
|
|
202
|
+
<div class="pf-v6-c-content">
|
|
203
203
|
<h1>Main title</h1>
|
|
204
204
|
<p>This is a full page demo.</p>
|
|
205
205
|
</div>
|
|
206
206
|
</div>
|
|
207
207
|
</section>
|
|
208
|
-
<section class="pf-
|
|
209
|
-
<div class="pf-
|
|
210
|
-
<div class="pf-
|
|
211
|
-
<div class="pf-
|
|
212
|
-
<div class="pf-
|
|
208
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
209
|
+
<div class="pf-v6-c-page__main-body">
|
|
210
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
211
|
+
<div class="pf-v6-c-card">
|
|
212
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
213
213
|
</div>
|
|
214
|
-
<div class="pf-
|
|
215
|
-
<div class="pf-
|
|
214
|
+
<div class="pf-v6-c-card">
|
|
215
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
216
216
|
</div>
|
|
217
|
-
<div class="pf-
|
|
218
|
-
<div class="pf-
|
|
217
|
+
<div class="pf-v6-c-card">
|
|
218
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
219
219
|
</div>
|
|
220
|
-
<div class="pf-
|
|
221
|
-
<div class="pf-
|
|
220
|
+
<div class="pf-v6-c-card">
|
|
221
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
222
222
|
</div>
|
|
223
|
-
<div class="pf-
|
|
224
|
-
<div class="pf-
|
|
223
|
+
<div class="pf-v6-c-card">
|
|
224
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
225
225
|
</div>
|
|
226
|
-
<div class="pf-
|
|
227
|
-
<div class="pf-
|
|
226
|
+
<div class="pf-v6-c-card">
|
|
227
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
228
228
|
</div>
|
|
229
|
-
<div class="pf-
|
|
230
|
-
<div class="pf-
|
|
229
|
+
<div class="pf-v6-c-card">
|
|
230
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
231
231
|
</div>
|
|
232
|
-
<div class="pf-
|
|
233
|
-
<div class="pf-
|
|
232
|
+
<div class="pf-v6-c-card">
|
|
233
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
234
234
|
</div>
|
|
235
|
-
<div class="pf-
|
|
236
|
-
<div class="pf-
|
|
235
|
+
<div class="pf-v6-c-card">
|
|
236
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
237
237
|
</div>
|
|
238
|
-
<div class="pf-
|
|
239
|
-
<div class="pf-
|
|
238
|
+
<div class="pf-v6-c-card">
|
|
239
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
240
240
|
</div>
|
|
241
241
|
</div>
|
|
242
242
|
</div>
|
|
@@ -249,28 +249,28 @@ deprecated: true
|
|
|
249
249
|
### Context selector in sidebar
|
|
250
250
|
|
|
251
251
|
```html isFullscreen
|
|
252
|
-
<div class="pf-
|
|
253
|
-
<div class="pf-
|
|
252
|
+
<div class="pf-v6-c-page" id="context-selector-in-sidebar-example">
|
|
253
|
+
<div class="pf-v6-c-skip-to-content">
|
|
254
254
|
<a
|
|
255
|
-
class="pf-
|
|
255
|
+
class="pf-v6-c-button pf-m-primary"
|
|
256
256
|
href="#main-content-context-selector-in-sidebar-example"
|
|
257
257
|
>Skip to content</a>
|
|
258
258
|
</div>
|
|
259
259
|
<header
|
|
260
|
-
class="pf-
|
|
260
|
+
class="pf-v6-c-masthead"
|
|
261
261
|
id="context-selector-in-sidebar-example-masthead"
|
|
262
262
|
>
|
|
263
|
-
<span class="pf-
|
|
263
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
264
264
|
<button
|
|
265
|
-
class="pf-
|
|
265
|
+
class="pf-v6-c-button pf-m-plain"
|
|
266
266
|
type="button"
|
|
267
267
|
aria-label="Global navigation"
|
|
268
268
|
>
|
|
269
269
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
270
270
|
</button>
|
|
271
271
|
</span>
|
|
272
|
-
<div class="pf-
|
|
273
|
-
<a class="pf-
|
|
272
|
+
<div class="pf-v6-c-masthead__main">
|
|
273
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
274
274
|
<svg height="40px" viewBox="0 0 679 158">
|
|
275
275
|
<title>PF-HorizontalLogo-Color</title>
|
|
276
276
|
<defs>
|
|
@@ -343,37 +343,37 @@ deprecated: true
|
|
|
343
343
|
</svg>
|
|
344
344
|
</a>
|
|
345
345
|
</div>
|
|
346
|
-
<div class="pf-
|
|
346
|
+
<div class="pf-v6-c-masthead__content">
|
|
347
347
|
<div
|
|
348
|
-
class="pf-
|
|
348
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
349
349
|
id="context-selector-in-sidebar-example-masthead-toolbar"
|
|
350
350
|
>
|
|
351
|
-
<div class="pf-
|
|
352
|
-
<div class="pf-
|
|
353
|
-
<div class="pf-
|
|
351
|
+
<div class="pf-v6-c-toolbar__content">
|
|
352
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
353
|
+
<div class="pf-v6-c-toolbar__item">
|
|
354
354
|
<button
|
|
355
|
-
class="pf-
|
|
355
|
+
class="pf-v6-c-menu-toggle"
|
|
356
356
|
type="button"
|
|
357
357
|
aria-expanded="false"
|
|
358
358
|
>
|
|
359
|
-
<span class="pf-
|
|
360
|
-
<span class="pf-
|
|
361
|
-
<span class="pf-
|
|
359
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
360
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
361
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
362
362
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
363
363
|
</span>
|
|
364
364
|
</span>
|
|
365
365
|
</button>
|
|
366
366
|
</div>
|
|
367
367
|
|
|
368
|
-
<div class="pf-
|
|
368
|
+
<div class="pf-v6-c-toolbar__item">
|
|
369
369
|
<button
|
|
370
|
-
class="pf-
|
|
370
|
+
class="pf-v6-c-menu-toggle"
|
|
371
371
|
type="button"
|
|
372
372
|
aria-expanded="false"
|
|
373
373
|
>
|
|
374
|
-
<span class="pf-
|
|
375
|
-
<span class="pf-
|
|
376
|
-
<span class="pf-
|
|
374
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
375
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
376
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
377
377
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
378
378
|
</span>
|
|
379
379
|
</span>
|
|
@@ -381,56 +381,56 @@ deprecated: true
|
|
|
381
381
|
</div>
|
|
382
382
|
|
|
383
383
|
<div
|
|
384
|
-
class="pf-
|
|
384
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
385
385
|
>
|
|
386
386
|
<div
|
|
387
|
-
class="pf-
|
|
387
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
388
388
|
>
|
|
389
|
-
<div class="pf-
|
|
389
|
+
<div class="pf-v6-c-toolbar__item">
|
|
390
390
|
<button
|
|
391
|
-
class="pf-
|
|
391
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
392
392
|
type="button"
|
|
393
393
|
aria-expanded="false"
|
|
394
394
|
aria-label="Application launcher"
|
|
395
395
|
>
|
|
396
|
-
<span class="pf-
|
|
396
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
397
397
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
398
398
|
</span>
|
|
399
399
|
</button>
|
|
400
400
|
</div>
|
|
401
|
-
<div class="pf-
|
|
401
|
+
<div class="pf-v6-c-toolbar__item">
|
|
402
402
|
<button
|
|
403
|
-
class="pf-
|
|
403
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
404
404
|
type="button"
|
|
405
405
|
aria-expanded="false"
|
|
406
406
|
aria-label="Settings"
|
|
407
407
|
>
|
|
408
|
-
<span class="pf-
|
|
408
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
409
409
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
410
410
|
</span>
|
|
411
411
|
</button>
|
|
412
412
|
</div>
|
|
413
|
-
<div class="pf-
|
|
413
|
+
<div class="pf-v6-c-toolbar__item">
|
|
414
414
|
<button
|
|
415
|
-
class="pf-
|
|
415
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
416
416
|
type="button"
|
|
417
417
|
aria-expanded="false"
|
|
418
418
|
aria-label="Help"
|
|
419
419
|
>
|
|
420
|
-
<span class="pf-
|
|
420
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
421
421
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
422
422
|
</span>
|
|
423
423
|
</button>
|
|
424
424
|
</div>
|
|
425
425
|
</div>
|
|
426
|
-
<div class="pf-
|
|
426
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
427
427
|
<button
|
|
428
|
-
class="pf-
|
|
428
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
429
429
|
type="button"
|
|
430
430
|
aria-expanded="false"
|
|
431
431
|
aria-label="Actions"
|
|
432
432
|
>
|
|
433
|
-
<span class="pf-
|
|
433
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
434
434
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
435
435
|
</span>
|
|
436
436
|
</button>
|
|
@@ -441,34 +441,34 @@ deprecated: true
|
|
|
441
441
|
</div>
|
|
442
442
|
</div>
|
|
443
443
|
</header>
|
|
444
|
-
<div class="pf-
|
|
445
|
-
<div class="pf-
|
|
446
|
-
<div class="pf-
|
|
444
|
+
<div class="pf-v6-c-page__sidebar">
|
|
445
|
+
<div class="pf-v6-c-page__sidebar-body pf-m-menu">
|
|
446
|
+
<div class="pf-v6-c-context-selector pf-m-page-insets pf-m-large">
|
|
447
447
|
<span
|
|
448
448
|
id="context-selector-collapsed-example-label"
|
|
449
449
|
hidden
|
|
450
450
|
>Selected project:</span>
|
|
451
451
|
<button
|
|
452
|
-
class="pf-
|
|
452
|
+
class="pf-v6-c-context-selector__toggle"
|
|
453
453
|
aria-expanded="false"
|
|
454
454
|
id="context-selector-collapsed-example-toggle"
|
|
455
455
|
aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
|
|
456
456
|
>
|
|
457
|
-
<span class="pf-
|
|
458
|
-
<span class="pf-
|
|
457
|
+
<span class="pf-v6-c-context-selector__toggle-text">My project</span>
|
|
458
|
+
<span class="pf-v6-c-context-selector__toggle-icon">
|
|
459
459
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
460
460
|
</span>
|
|
461
461
|
</button>
|
|
462
|
-
<div class="pf-
|
|
463
|
-
<div class="pf-
|
|
464
|
-
<div class="pf-
|
|
465
|
-
<div class="pf-
|
|
466
|
-
<span class="pf-
|
|
467
|
-
<span class="pf-
|
|
462
|
+
<div class="pf-v6-c-context-selector__menu" hidden>
|
|
463
|
+
<div class="pf-v6-c-context-selector__menu-search">
|
|
464
|
+
<div class="pf-v6-c-text-input-group">
|
|
465
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
466
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
467
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
468
468
|
<i class="fas fa-fw fa-search"></i>
|
|
469
469
|
</span>
|
|
470
470
|
<input
|
|
471
|
-
class="pf-
|
|
471
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
472
472
|
type="text"
|
|
473
473
|
placeholder="Search"
|
|
474
474
|
value
|
|
@@ -478,24 +478,24 @@ deprecated: true
|
|
|
478
478
|
</div>
|
|
479
479
|
</div>
|
|
480
480
|
</div>
|
|
481
|
-
<ul class="pf-
|
|
481
|
+
<ul class="pf-v6-c-context-selector__menu-list" role="menu">
|
|
482
482
|
<li role="none">
|
|
483
483
|
<a
|
|
484
|
-
class="pf-
|
|
484
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
485
485
|
href="#"
|
|
486
486
|
role="menuitem"
|
|
487
487
|
>Link</a>
|
|
488
488
|
</li>
|
|
489
489
|
<li role="none">
|
|
490
490
|
<button
|
|
491
|
-
class="pf-
|
|
491
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
492
492
|
type="button"
|
|
493
493
|
role="menuitem"
|
|
494
494
|
>Action</button>
|
|
495
495
|
</li>
|
|
496
496
|
<li role="none">
|
|
497
497
|
<a
|
|
498
|
-
class="pf-
|
|
498
|
+
class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
|
|
499
499
|
href="#"
|
|
500
500
|
aria-disabled="true"
|
|
501
501
|
tabindex="-1"
|
|
@@ -504,7 +504,7 @@ deprecated: true
|
|
|
504
504
|
</li>
|
|
505
505
|
<li role="none">
|
|
506
506
|
<button
|
|
507
|
-
class="pf-
|
|
507
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
508
508
|
type="button"
|
|
509
509
|
disabled
|
|
510
510
|
role="menuitem"
|
|
@@ -512,70 +512,70 @@ deprecated: true
|
|
|
512
512
|
</li>
|
|
513
513
|
<li role="none">
|
|
514
514
|
<button
|
|
515
|
-
class="pf-
|
|
515
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
516
516
|
type="button"
|
|
517
517
|
role="menuitem"
|
|
518
518
|
>My project</button>
|
|
519
519
|
</li>
|
|
520
520
|
<li role="none">
|
|
521
521
|
<button
|
|
522
|
-
class="pf-
|
|
522
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
523
523
|
type="button"
|
|
524
524
|
role="menuitem"
|
|
525
525
|
>OpenShift cluster</button>
|
|
526
526
|
</li>
|
|
527
527
|
<li role="none">
|
|
528
528
|
<button
|
|
529
|
-
class="pf-
|
|
529
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
530
530
|
type="button"
|
|
531
531
|
role="menuitem"
|
|
532
532
|
>Production Ansible</button>
|
|
533
533
|
</li>
|
|
534
534
|
<li role="none">
|
|
535
535
|
<button
|
|
536
|
-
class="pf-
|
|
536
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
537
537
|
type="button"
|
|
538
538
|
role="menuitem"
|
|
539
539
|
>AWS</button>
|
|
540
540
|
</li>
|
|
541
541
|
<li role="none">
|
|
542
542
|
<button
|
|
543
|
-
class="pf-
|
|
543
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
544
544
|
type="button"
|
|
545
545
|
role="menuitem"
|
|
546
546
|
>Azure</button>
|
|
547
547
|
</li>
|
|
548
548
|
<li role="none">
|
|
549
549
|
<button
|
|
550
|
-
class="pf-
|
|
550
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
551
551
|
type="button"
|
|
552
552
|
role="menuitem"
|
|
553
553
|
>My project</button>
|
|
554
554
|
</li>
|
|
555
555
|
<li role="none">
|
|
556
556
|
<button
|
|
557
|
-
class="pf-
|
|
557
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
558
558
|
type="button"
|
|
559
559
|
role="menuitem"
|
|
560
560
|
>OpenShift cluster</button>
|
|
561
561
|
</li>
|
|
562
562
|
<li role="none">
|
|
563
563
|
<button
|
|
564
|
-
class="pf-
|
|
564
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
565
565
|
type="button"
|
|
566
566
|
role="menuitem"
|
|
567
567
|
>Production Ansible</button>
|
|
568
568
|
</li>
|
|
569
569
|
<li role="none">
|
|
570
570
|
<button
|
|
571
|
-
class="pf-
|
|
571
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
572
572
|
type="button"
|
|
573
573
|
role="menuitem"
|
|
574
574
|
>AWS</button>
|
|
575
575
|
</li>
|
|
576
576
|
<li role="none">
|
|
577
577
|
<button
|
|
578
|
-
class="pf-
|
|
578
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
579
579
|
type="button"
|
|
580
580
|
role="menuitem"
|
|
581
581
|
>Azure</button>
|
|
@@ -584,70 +584,70 @@ deprecated: true
|
|
|
584
584
|
</div>
|
|
585
585
|
</div>
|
|
586
586
|
</div>
|
|
587
|
-
<div class="pf-
|
|
587
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
588
588
|
<nav
|
|
589
|
-
class="pf-
|
|
589
|
+
class="pf-v6-c-nav"
|
|
590
590
|
id="context-selector-in-sidebar-example-primary-nav"
|
|
591
591
|
aria-label="Global"
|
|
592
592
|
>
|
|
593
|
-
<ul class="pf-
|
|
594
|
-
<li class="pf-
|
|
595
|
-
<a href="#" class="pf-
|
|
593
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
594
|
+
<li class="pf-v6-c-nav__item">
|
|
595
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
596
596
|
</li>
|
|
597
|
-
<li class="pf-
|
|
597
|
+
<li class="pf-v6-c-nav__item">
|
|
598
598
|
<a
|
|
599
599
|
href="#"
|
|
600
|
-
class="pf-
|
|
600
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
601
601
|
aria-current="page"
|
|
602
602
|
>Policy</a>
|
|
603
603
|
</li>
|
|
604
|
-
<li class="pf-
|
|
605
|
-
<a href="#" class="pf-
|
|
604
|
+
<li class="pf-v6-c-nav__item">
|
|
605
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
606
606
|
</li>
|
|
607
|
-
<li class="pf-
|
|
608
|
-
<a href="#" class="pf-
|
|
607
|
+
<li class="pf-v6-c-nav__item">
|
|
608
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
609
609
|
</li>
|
|
610
|
-
<li class="pf-
|
|
611
|
-
<a href="#" class="pf-
|
|
610
|
+
<li class="pf-v6-c-nav__item">
|
|
611
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
612
612
|
</li>
|
|
613
613
|
</ul>
|
|
614
614
|
</nav>
|
|
615
615
|
</div>
|
|
616
616
|
</div>
|
|
617
617
|
<main
|
|
618
|
-
class="pf-
|
|
618
|
+
class="pf-v6-c-page__main"
|
|
619
619
|
tabindex="-1"
|
|
620
620
|
id="main-content-context-selector-in-sidebar-example"
|
|
621
621
|
>
|
|
622
|
-
<section class="pf-
|
|
623
|
-
<div class="pf-
|
|
624
|
-
<nav class="pf-
|
|
625
|
-
<ol class="pf-
|
|
626
|
-
<li class="pf-
|
|
627
|
-
<a href="#" class="pf-
|
|
622
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
623
|
+
<div class="pf-v6-c-page__main-body">
|
|
624
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
625
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
626
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
627
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
628
628
|
</li>
|
|
629
|
-
<li class="pf-
|
|
630
|
-
<span class="pf-
|
|
629
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
630
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
631
631
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
632
632
|
</span>
|
|
633
633
|
|
|
634
|
-
<a href="#" class="pf-
|
|
634
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
635
635
|
</li>
|
|
636
|
-
<li class="pf-
|
|
637
|
-
<span class="pf-
|
|
636
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
637
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
638
638
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
639
639
|
</span>
|
|
640
640
|
|
|
641
|
-
<a href="#" class="pf-
|
|
641
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
642
642
|
</li>
|
|
643
|
-
<li class="pf-
|
|
644
|
-
<span class="pf-
|
|
643
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
644
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
645
645
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
646
646
|
</span>
|
|
647
647
|
|
|
648
648
|
<a
|
|
649
649
|
href="#"
|
|
650
|
-
class="pf-
|
|
650
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
651
651
|
aria-current="page"
|
|
652
652
|
>Section landing</a>
|
|
653
653
|
</li>
|
|
@@ -655,46 +655,46 @@ deprecated: true
|
|
|
655
655
|
</nav>
|
|
656
656
|
</div>
|
|
657
657
|
</section>
|
|
658
|
-
<section class="pf-
|
|
659
|
-
<div class="pf-
|
|
660
|
-
<div class="pf-
|
|
658
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
659
|
+
<div class="pf-v6-c-page__main-body">
|
|
660
|
+
<div class="pf-v6-c-content">
|
|
661
661
|
<h1>Main title</h1>
|
|
662
662
|
<p>This is a full page demo.</p>
|
|
663
663
|
</div>
|
|
664
664
|
</div>
|
|
665
665
|
</section>
|
|
666
|
-
<section class="pf-
|
|
667
|
-
<div class="pf-
|
|
668
|
-
<div class="pf-
|
|
669
|
-
<div class="pf-
|
|
670
|
-
<div class="pf-
|
|
666
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
667
|
+
<div class="pf-v6-c-page__main-body">
|
|
668
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
669
|
+
<div class="pf-v6-c-card">
|
|
670
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
671
671
|
</div>
|
|
672
|
-
<div class="pf-
|
|
673
|
-
<div class="pf-
|
|
672
|
+
<div class="pf-v6-c-card">
|
|
673
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
674
674
|
</div>
|
|
675
|
-
<div class="pf-
|
|
676
|
-
<div class="pf-
|
|
675
|
+
<div class="pf-v6-c-card">
|
|
676
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
677
677
|
</div>
|
|
678
|
-
<div class="pf-
|
|
679
|
-
<div class="pf-
|
|
678
|
+
<div class="pf-v6-c-card">
|
|
679
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
680
680
|
</div>
|
|
681
|
-
<div class="pf-
|
|
682
|
-
<div class="pf-
|
|
681
|
+
<div class="pf-v6-c-card">
|
|
682
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
683
683
|
</div>
|
|
684
|
-
<div class="pf-
|
|
685
|
-
<div class="pf-
|
|
684
|
+
<div class="pf-v6-c-card">
|
|
685
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
686
686
|
</div>
|
|
687
|
-
<div class="pf-
|
|
688
|
-
<div class="pf-
|
|
687
|
+
<div class="pf-v6-c-card">
|
|
688
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
689
689
|
</div>
|
|
690
|
-
<div class="pf-
|
|
691
|
-
<div class="pf-
|
|
690
|
+
<div class="pf-v6-c-card">
|
|
691
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
692
692
|
</div>
|
|
693
|
-
<div class="pf-
|
|
694
|
-
<div class="pf-
|
|
693
|
+
<div class="pf-v6-c-card">
|
|
694
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
695
695
|
</div>
|
|
696
|
-
<div class="pf-
|
|
697
|
-
<div class="pf-
|
|
696
|
+
<div class="pf-v6-c-card">
|
|
697
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
698
698
|
</div>
|
|
699
699
|
</div>
|
|
700
700
|
</div>
|
|
@@ -707,28 +707,28 @@ deprecated: true
|
|
|
707
707
|
### Context selector in sidebar expanded
|
|
708
708
|
|
|
709
709
|
```html isFullscreen
|
|
710
|
-
<div class="pf-
|
|
711
|
-
<div class="pf-
|
|
710
|
+
<div class="pf-v6-c-page" id="context-selector-in-sidebar-expanded-example">
|
|
711
|
+
<div class="pf-v6-c-skip-to-content">
|
|
712
712
|
<a
|
|
713
|
-
class="pf-
|
|
713
|
+
class="pf-v6-c-button pf-m-primary"
|
|
714
714
|
href="#main-content-context-selector-in-sidebar-expanded-example"
|
|
715
715
|
>Skip to content</a>
|
|
716
716
|
</div>
|
|
717
717
|
<header
|
|
718
|
-
class="pf-
|
|
718
|
+
class="pf-v6-c-masthead"
|
|
719
719
|
id="context-selector-in-sidebar-expanded-example-masthead"
|
|
720
720
|
>
|
|
721
|
-
<span class="pf-
|
|
721
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
722
722
|
<button
|
|
723
|
-
class="pf-
|
|
723
|
+
class="pf-v6-c-button pf-m-plain"
|
|
724
724
|
type="button"
|
|
725
725
|
aria-label="Global navigation"
|
|
726
726
|
>
|
|
727
727
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
728
728
|
</button>
|
|
729
729
|
</span>
|
|
730
|
-
<div class="pf-
|
|
731
|
-
<a class="pf-
|
|
730
|
+
<div class="pf-v6-c-masthead__main">
|
|
731
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
732
732
|
<svg height="40px" viewBox="0 0 679 158">
|
|
733
733
|
<title>PF-HorizontalLogo-Color</title>
|
|
734
734
|
<defs>
|
|
@@ -801,37 +801,37 @@ deprecated: true
|
|
|
801
801
|
</svg>
|
|
802
802
|
</a>
|
|
803
803
|
</div>
|
|
804
|
-
<div class="pf-
|
|
804
|
+
<div class="pf-v6-c-masthead__content">
|
|
805
805
|
<div
|
|
806
|
-
class="pf-
|
|
806
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
807
807
|
id="context-selector-in-sidebar-expanded-example-masthead-toolbar"
|
|
808
808
|
>
|
|
809
|
-
<div class="pf-
|
|
810
|
-
<div class="pf-
|
|
811
|
-
<div class="pf-
|
|
809
|
+
<div class="pf-v6-c-toolbar__content">
|
|
810
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
811
|
+
<div class="pf-v6-c-toolbar__item">
|
|
812
812
|
<button
|
|
813
|
-
class="pf-
|
|
813
|
+
class="pf-v6-c-menu-toggle"
|
|
814
814
|
type="button"
|
|
815
815
|
aria-expanded="false"
|
|
816
816
|
>
|
|
817
|
-
<span class="pf-
|
|
818
|
-
<span class="pf-
|
|
819
|
-
<span class="pf-
|
|
817
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
818
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
819
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
820
820
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
821
821
|
</span>
|
|
822
822
|
</span>
|
|
823
823
|
</button>
|
|
824
824
|
</div>
|
|
825
825
|
|
|
826
|
-
<div class="pf-
|
|
826
|
+
<div class="pf-v6-c-toolbar__item">
|
|
827
827
|
<button
|
|
828
|
-
class="pf-
|
|
828
|
+
class="pf-v6-c-menu-toggle"
|
|
829
829
|
type="button"
|
|
830
830
|
aria-expanded="false"
|
|
831
831
|
>
|
|
832
|
-
<span class="pf-
|
|
833
|
-
<span class="pf-
|
|
834
|
-
<span class="pf-
|
|
832
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
833
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
834
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
835
835
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
836
836
|
</span>
|
|
837
837
|
</span>
|
|
@@ -839,56 +839,56 @@ deprecated: true
|
|
|
839
839
|
</div>
|
|
840
840
|
|
|
841
841
|
<div
|
|
842
|
-
class="pf-
|
|
842
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
843
843
|
>
|
|
844
844
|
<div
|
|
845
|
-
class="pf-
|
|
845
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
846
846
|
>
|
|
847
|
-
<div class="pf-
|
|
847
|
+
<div class="pf-v6-c-toolbar__item">
|
|
848
848
|
<button
|
|
849
|
-
class="pf-
|
|
849
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
850
850
|
type="button"
|
|
851
851
|
aria-expanded="false"
|
|
852
852
|
aria-label="Application launcher"
|
|
853
853
|
>
|
|
854
|
-
<span class="pf-
|
|
854
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
855
855
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
856
856
|
</span>
|
|
857
857
|
</button>
|
|
858
858
|
</div>
|
|
859
|
-
<div class="pf-
|
|
859
|
+
<div class="pf-v6-c-toolbar__item">
|
|
860
860
|
<button
|
|
861
|
-
class="pf-
|
|
861
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
862
862
|
type="button"
|
|
863
863
|
aria-expanded="false"
|
|
864
864
|
aria-label="Settings"
|
|
865
865
|
>
|
|
866
|
-
<span class="pf-
|
|
866
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
867
867
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
868
868
|
</span>
|
|
869
869
|
</button>
|
|
870
870
|
</div>
|
|
871
|
-
<div class="pf-
|
|
871
|
+
<div class="pf-v6-c-toolbar__item">
|
|
872
872
|
<button
|
|
873
|
-
class="pf-
|
|
873
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
874
874
|
type="button"
|
|
875
875
|
aria-expanded="false"
|
|
876
876
|
aria-label="Help"
|
|
877
877
|
>
|
|
878
|
-
<span class="pf-
|
|
878
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
879
879
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
880
880
|
</span>
|
|
881
881
|
</button>
|
|
882
882
|
</div>
|
|
883
883
|
</div>
|
|
884
|
-
<div class="pf-
|
|
884
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
885
885
|
<button
|
|
886
|
-
class="pf-
|
|
886
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
887
887
|
type="button"
|
|
888
888
|
aria-expanded="false"
|
|
889
889
|
aria-label="Actions"
|
|
890
890
|
>
|
|
891
|
-
<span class="pf-
|
|
891
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
892
892
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
893
893
|
</span>
|
|
894
894
|
</button>
|
|
@@ -899,36 +899,36 @@ deprecated: true
|
|
|
899
899
|
</div>
|
|
900
900
|
</div>
|
|
901
901
|
</header>
|
|
902
|
-
<div class="pf-
|
|
903
|
-
<div class="pf-
|
|
902
|
+
<div class="pf-v6-c-page__sidebar">
|
|
903
|
+
<div class="pf-v6-c-page__sidebar-body pf-m-menu">
|
|
904
904
|
<div
|
|
905
|
-
class="pf-
|
|
905
|
+
class="pf-v6-c-context-selector pf-m-expanded pf-m-page-insets pf-m-large"
|
|
906
906
|
>
|
|
907
907
|
<span
|
|
908
908
|
id="context-selector-collapsed-example-label"
|
|
909
909
|
hidden
|
|
910
910
|
>Selected project:</span>
|
|
911
911
|
<button
|
|
912
|
-
class="pf-
|
|
912
|
+
class="pf-v6-c-context-selector__toggle"
|
|
913
913
|
aria-expanded="true"
|
|
914
914
|
id="context-selector-collapsed-example-toggle"
|
|
915
915
|
aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
|
|
916
916
|
>
|
|
917
|
-
<span class="pf-
|
|
918
|
-
<span class="pf-
|
|
917
|
+
<span class="pf-v6-c-context-selector__toggle-text">My project</span>
|
|
918
|
+
<span class="pf-v6-c-context-selector__toggle-icon">
|
|
919
919
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
920
920
|
</span>
|
|
921
921
|
</button>
|
|
922
|
-
<div class="pf-
|
|
923
|
-
<div class="pf-
|
|
924
|
-
<div class="pf-
|
|
925
|
-
<div class="pf-
|
|
926
|
-
<span class="pf-
|
|
927
|
-
<span class="pf-
|
|
922
|
+
<div class="pf-v6-c-context-selector__menu">
|
|
923
|
+
<div class="pf-v6-c-context-selector__menu-search">
|
|
924
|
+
<div class="pf-v6-c-text-input-group">
|
|
925
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
926
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
927
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
928
928
|
<i class="fas fa-fw fa-search"></i>
|
|
929
929
|
</span>
|
|
930
930
|
<input
|
|
931
|
-
class="pf-
|
|
931
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
932
932
|
type="text"
|
|
933
933
|
placeholder="Search"
|
|
934
934
|
value
|
|
@@ -938,24 +938,24 @@ deprecated: true
|
|
|
938
938
|
</div>
|
|
939
939
|
</div>
|
|
940
940
|
</div>
|
|
941
|
-
<ul class="pf-
|
|
941
|
+
<ul class="pf-v6-c-context-selector__menu-list" role="menu">
|
|
942
942
|
<li role="none">
|
|
943
943
|
<a
|
|
944
|
-
class="pf-
|
|
944
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
945
945
|
href="#"
|
|
946
946
|
role="menuitem"
|
|
947
947
|
>Link</a>
|
|
948
948
|
</li>
|
|
949
949
|
<li role="none">
|
|
950
950
|
<button
|
|
951
|
-
class="pf-
|
|
951
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
952
952
|
type="button"
|
|
953
953
|
role="menuitem"
|
|
954
954
|
>Action</button>
|
|
955
955
|
</li>
|
|
956
956
|
<li role="none">
|
|
957
957
|
<a
|
|
958
|
-
class="pf-
|
|
958
|
+
class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
|
|
959
959
|
href="#"
|
|
960
960
|
aria-disabled="true"
|
|
961
961
|
tabindex="-1"
|
|
@@ -964,7 +964,7 @@ deprecated: true
|
|
|
964
964
|
</li>
|
|
965
965
|
<li role="none">
|
|
966
966
|
<button
|
|
967
|
-
class="pf-
|
|
967
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
968
968
|
type="button"
|
|
969
969
|
disabled
|
|
970
970
|
role="menuitem"
|
|
@@ -972,70 +972,70 @@ deprecated: true
|
|
|
972
972
|
</li>
|
|
973
973
|
<li role="none">
|
|
974
974
|
<button
|
|
975
|
-
class="pf-
|
|
975
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
976
976
|
type="button"
|
|
977
977
|
role="menuitem"
|
|
978
978
|
>My project</button>
|
|
979
979
|
</li>
|
|
980
980
|
<li role="none">
|
|
981
981
|
<button
|
|
982
|
-
class="pf-
|
|
982
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
983
983
|
type="button"
|
|
984
984
|
role="menuitem"
|
|
985
985
|
>OpenShift cluster</button>
|
|
986
986
|
</li>
|
|
987
987
|
<li role="none">
|
|
988
988
|
<button
|
|
989
|
-
class="pf-
|
|
989
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
990
990
|
type="button"
|
|
991
991
|
role="menuitem"
|
|
992
992
|
>Production Ansible</button>
|
|
993
993
|
</li>
|
|
994
994
|
<li role="none">
|
|
995
995
|
<button
|
|
996
|
-
class="pf-
|
|
996
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
997
997
|
type="button"
|
|
998
998
|
role="menuitem"
|
|
999
999
|
>AWS</button>
|
|
1000
1000
|
</li>
|
|
1001
1001
|
<li role="none">
|
|
1002
1002
|
<button
|
|
1003
|
-
class="pf-
|
|
1003
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1004
1004
|
type="button"
|
|
1005
1005
|
role="menuitem"
|
|
1006
1006
|
>Azure</button>
|
|
1007
1007
|
</li>
|
|
1008
1008
|
<li role="none">
|
|
1009
1009
|
<button
|
|
1010
|
-
class="pf-
|
|
1010
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1011
1011
|
type="button"
|
|
1012
1012
|
role="menuitem"
|
|
1013
1013
|
>My project</button>
|
|
1014
1014
|
</li>
|
|
1015
1015
|
<li role="none">
|
|
1016
1016
|
<button
|
|
1017
|
-
class="pf-
|
|
1017
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1018
1018
|
type="button"
|
|
1019
1019
|
role="menuitem"
|
|
1020
1020
|
>OpenShift cluster</button>
|
|
1021
1021
|
</li>
|
|
1022
1022
|
<li role="none">
|
|
1023
1023
|
<button
|
|
1024
|
-
class="pf-
|
|
1024
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1025
1025
|
type="button"
|
|
1026
1026
|
role="menuitem"
|
|
1027
1027
|
>Production Ansible</button>
|
|
1028
1028
|
</li>
|
|
1029
1029
|
<li role="none">
|
|
1030
1030
|
<button
|
|
1031
|
-
class="pf-
|
|
1031
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1032
1032
|
type="button"
|
|
1033
1033
|
role="menuitem"
|
|
1034
1034
|
>AWS</button>
|
|
1035
1035
|
</li>
|
|
1036
1036
|
<li role="none">
|
|
1037
1037
|
<button
|
|
1038
|
-
class="pf-
|
|
1038
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1039
1039
|
type="button"
|
|
1040
1040
|
role="menuitem"
|
|
1041
1041
|
>Azure</button>
|
|
@@ -1044,70 +1044,70 @@ deprecated: true
|
|
|
1044
1044
|
</div>
|
|
1045
1045
|
</div>
|
|
1046
1046
|
</div>
|
|
1047
|
-
<div class="pf-
|
|
1047
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
1048
1048
|
<nav
|
|
1049
|
-
class="pf-
|
|
1049
|
+
class="pf-v6-c-nav"
|
|
1050
1050
|
id="context-selector-in-sidebar-expanded-example-primary-nav"
|
|
1051
1051
|
aria-label="Global"
|
|
1052
1052
|
>
|
|
1053
|
-
<ul class="pf-
|
|
1054
|
-
<li class="pf-
|
|
1055
|
-
<a href="#" class="pf-
|
|
1053
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
1054
|
+
<li class="pf-v6-c-nav__item">
|
|
1055
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
1056
1056
|
</li>
|
|
1057
|
-
<li class="pf-
|
|
1057
|
+
<li class="pf-v6-c-nav__item">
|
|
1058
1058
|
<a
|
|
1059
1059
|
href="#"
|
|
1060
|
-
class="pf-
|
|
1060
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
1061
1061
|
aria-current="page"
|
|
1062
1062
|
>Policy</a>
|
|
1063
1063
|
</li>
|
|
1064
|
-
<li class="pf-
|
|
1065
|
-
<a href="#" class="pf-
|
|
1064
|
+
<li class="pf-v6-c-nav__item">
|
|
1065
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
1066
1066
|
</li>
|
|
1067
|
-
<li class="pf-
|
|
1068
|
-
<a href="#" class="pf-
|
|
1067
|
+
<li class="pf-v6-c-nav__item">
|
|
1068
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
1069
1069
|
</li>
|
|
1070
|
-
<li class="pf-
|
|
1071
|
-
<a href="#" class="pf-
|
|
1070
|
+
<li class="pf-v6-c-nav__item">
|
|
1071
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
1072
1072
|
</li>
|
|
1073
1073
|
</ul>
|
|
1074
1074
|
</nav>
|
|
1075
1075
|
</div>
|
|
1076
1076
|
</div>
|
|
1077
1077
|
<main
|
|
1078
|
-
class="pf-
|
|
1078
|
+
class="pf-v6-c-page__main"
|
|
1079
1079
|
tabindex="-1"
|
|
1080
1080
|
id="main-content-context-selector-in-sidebar-expanded-example"
|
|
1081
1081
|
>
|
|
1082
|
-
<section class="pf-
|
|
1083
|
-
<div class="pf-
|
|
1084
|
-
<nav class="pf-
|
|
1085
|
-
<ol class="pf-
|
|
1086
|
-
<li class="pf-
|
|
1087
|
-
<a href="#" class="pf-
|
|
1082
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
1083
|
+
<div class="pf-v6-c-page__main-body">
|
|
1084
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
1085
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
1086
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1087
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
1088
1088
|
</li>
|
|
1089
|
-
<li class="pf-
|
|
1090
|
-
<span class="pf-
|
|
1089
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1090
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1091
1091
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1092
1092
|
</span>
|
|
1093
1093
|
|
|
1094
|
-
<a href="#" class="pf-
|
|
1094
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
1095
1095
|
</li>
|
|
1096
|
-
<li class="pf-
|
|
1097
|
-
<span class="pf-
|
|
1096
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1097
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1098
1098
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1099
1099
|
</span>
|
|
1100
1100
|
|
|
1101
|
-
<a href="#" class="pf-
|
|
1101
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
1102
1102
|
</li>
|
|
1103
|
-
<li class="pf-
|
|
1104
|
-
<span class="pf-
|
|
1103
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1104
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1105
1105
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1106
1106
|
</span>
|
|
1107
1107
|
|
|
1108
1108
|
<a
|
|
1109
1109
|
href="#"
|
|
1110
|
-
class="pf-
|
|
1110
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
1111
1111
|
aria-current="page"
|
|
1112
1112
|
>Section landing</a>
|
|
1113
1113
|
</li>
|
|
@@ -1115,46 +1115,46 @@ deprecated: true
|
|
|
1115
1115
|
</nav>
|
|
1116
1116
|
</div>
|
|
1117
1117
|
</section>
|
|
1118
|
-
<section class="pf-
|
|
1119
|
-
<div class="pf-
|
|
1120
|
-
<div class="pf-
|
|
1118
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1119
|
+
<div class="pf-v6-c-page__main-body">
|
|
1120
|
+
<div class="pf-v6-c-content">
|
|
1121
1121
|
<h1>Main title</h1>
|
|
1122
1122
|
<p>This is a full page demo.</p>
|
|
1123
1123
|
</div>
|
|
1124
1124
|
</div>
|
|
1125
1125
|
</section>
|
|
1126
|
-
<section class="pf-
|
|
1127
|
-
<div class="pf-
|
|
1128
|
-
<div class="pf-
|
|
1129
|
-
<div class="pf-
|
|
1130
|
-
<div class="pf-
|
|
1126
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
1127
|
+
<div class="pf-v6-c-page__main-body">
|
|
1128
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
1129
|
+
<div class="pf-v6-c-card">
|
|
1130
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1131
1131
|
</div>
|
|
1132
|
-
<div class="pf-
|
|
1133
|
-
<div class="pf-
|
|
1132
|
+
<div class="pf-v6-c-card">
|
|
1133
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1134
1134
|
</div>
|
|
1135
|
-
<div class="pf-
|
|
1136
|
-
<div class="pf-
|
|
1135
|
+
<div class="pf-v6-c-card">
|
|
1136
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1137
1137
|
</div>
|
|
1138
|
-
<div class="pf-
|
|
1139
|
-
<div class="pf-
|
|
1138
|
+
<div class="pf-v6-c-card">
|
|
1139
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1140
1140
|
</div>
|
|
1141
|
-
<div class="pf-
|
|
1142
|
-
<div class="pf-
|
|
1141
|
+
<div class="pf-v6-c-card">
|
|
1142
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1143
1143
|
</div>
|
|
1144
|
-
<div class="pf-
|
|
1145
|
-
<div class="pf-
|
|
1144
|
+
<div class="pf-v6-c-card">
|
|
1145
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1146
1146
|
</div>
|
|
1147
|
-
<div class="pf-
|
|
1148
|
-
<div class="pf-
|
|
1147
|
+
<div class="pf-v6-c-card">
|
|
1148
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1149
1149
|
</div>
|
|
1150
|
-
<div class="pf-
|
|
1151
|
-
<div class="pf-
|
|
1150
|
+
<div class="pf-v6-c-card">
|
|
1151
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1152
1152
|
</div>
|
|
1153
|
-
<div class="pf-
|
|
1154
|
-
<div class="pf-
|
|
1153
|
+
<div class="pf-v6-c-card">
|
|
1154
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1155
1155
|
</div>
|
|
1156
|
-
<div class="pf-
|
|
1157
|
-
<div class="pf-
|
|
1156
|
+
<div class="pf-v6-c-card">
|
|
1157
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1158
1158
|
</div>
|
|
1159
1159
|
</div>
|
|
1160
1160
|
</div>
|
|
@@ -1167,28 +1167,28 @@ deprecated: true
|
|
|
1167
1167
|
### Context selector in page content
|
|
1168
1168
|
|
|
1169
1169
|
```html isFullscreen
|
|
1170
|
-
<div class="pf-
|
|
1171
|
-
<div class="pf-
|
|
1170
|
+
<div class="pf-v6-c-page" id="context-selector-in-page-content-example">
|
|
1171
|
+
<div class="pf-v6-c-skip-to-content">
|
|
1172
1172
|
<a
|
|
1173
|
-
class="pf-
|
|
1173
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1174
1174
|
href="#main-content-context-selector-in-page-content-example"
|
|
1175
1175
|
>Skip to content</a>
|
|
1176
1176
|
</div>
|
|
1177
1177
|
<header
|
|
1178
|
-
class="pf-
|
|
1178
|
+
class="pf-v6-c-masthead"
|
|
1179
1179
|
id="context-selector-in-page-content-example-masthead"
|
|
1180
1180
|
>
|
|
1181
|
-
<span class="pf-
|
|
1181
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
1182
1182
|
<button
|
|
1183
|
-
class="pf-
|
|
1183
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1184
1184
|
type="button"
|
|
1185
1185
|
aria-label="Global navigation"
|
|
1186
1186
|
>
|
|
1187
1187
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1188
1188
|
</button>
|
|
1189
1189
|
</span>
|
|
1190
|
-
<div class="pf-
|
|
1191
|
-
<a class="pf-
|
|
1190
|
+
<div class="pf-v6-c-masthead__main">
|
|
1191
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
1192
1192
|
<svg height="40px" viewBox="0 0 679 158">
|
|
1193
1193
|
<title>PF-HorizontalLogo-Color</title>
|
|
1194
1194
|
<defs>
|
|
@@ -1261,37 +1261,37 @@ deprecated: true
|
|
|
1261
1261
|
</svg>
|
|
1262
1262
|
</a>
|
|
1263
1263
|
</div>
|
|
1264
|
-
<div class="pf-
|
|
1264
|
+
<div class="pf-v6-c-masthead__content">
|
|
1265
1265
|
<div
|
|
1266
|
-
class="pf-
|
|
1266
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
1267
1267
|
id="context-selector-in-page-content-example-masthead-toolbar"
|
|
1268
1268
|
>
|
|
1269
|
-
<div class="pf-
|
|
1270
|
-
<div class="pf-
|
|
1271
|
-
<div class="pf-
|
|
1269
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1270
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1271
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1272
1272
|
<button
|
|
1273
|
-
class="pf-
|
|
1273
|
+
class="pf-v6-c-menu-toggle"
|
|
1274
1274
|
type="button"
|
|
1275
1275
|
aria-expanded="false"
|
|
1276
1276
|
>
|
|
1277
|
-
<span class="pf-
|
|
1278
|
-
<span class="pf-
|
|
1279
|
-
<span class="pf-
|
|
1277
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
1278
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1279
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1280
1280
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1281
1281
|
</span>
|
|
1282
1282
|
</span>
|
|
1283
1283
|
</button>
|
|
1284
1284
|
</div>
|
|
1285
1285
|
|
|
1286
|
-
<div class="pf-
|
|
1286
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1287
1287
|
<button
|
|
1288
|
-
class="pf-
|
|
1288
|
+
class="pf-v6-c-menu-toggle"
|
|
1289
1289
|
type="button"
|
|
1290
1290
|
aria-expanded="false"
|
|
1291
1291
|
>
|
|
1292
|
-
<span class="pf-
|
|
1293
|
-
<span class="pf-
|
|
1294
|
-
<span class="pf-
|
|
1292
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
1293
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1294
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1295
1295
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1296
1296
|
</span>
|
|
1297
1297
|
</span>
|
|
@@ -1299,56 +1299,56 @@ deprecated: true
|
|
|
1299
1299
|
</div>
|
|
1300
1300
|
|
|
1301
1301
|
<div
|
|
1302
|
-
class="pf-
|
|
1302
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1303
1303
|
>
|
|
1304
1304
|
<div
|
|
1305
|
-
class="pf-
|
|
1305
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1306
1306
|
>
|
|
1307
|
-
<div class="pf-
|
|
1307
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1308
1308
|
<button
|
|
1309
|
-
class="pf-
|
|
1309
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1310
1310
|
type="button"
|
|
1311
1311
|
aria-expanded="false"
|
|
1312
1312
|
aria-label="Application launcher"
|
|
1313
1313
|
>
|
|
1314
|
-
<span class="pf-
|
|
1314
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1315
1315
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1316
1316
|
</span>
|
|
1317
1317
|
</button>
|
|
1318
1318
|
</div>
|
|
1319
|
-
<div class="pf-
|
|
1319
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1320
1320
|
<button
|
|
1321
|
-
class="pf-
|
|
1321
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1322
1322
|
type="button"
|
|
1323
1323
|
aria-expanded="false"
|
|
1324
1324
|
aria-label="Settings"
|
|
1325
1325
|
>
|
|
1326
|
-
<span class="pf-
|
|
1326
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1327
1327
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1328
1328
|
</span>
|
|
1329
1329
|
</button>
|
|
1330
1330
|
</div>
|
|
1331
|
-
<div class="pf-
|
|
1331
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1332
1332
|
<button
|
|
1333
|
-
class="pf-
|
|
1333
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1334
1334
|
type="button"
|
|
1335
1335
|
aria-expanded="false"
|
|
1336
1336
|
aria-label="Help"
|
|
1337
1337
|
>
|
|
1338
|
-
<span class="pf-
|
|
1338
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1339
1339
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1340
1340
|
</span>
|
|
1341
1341
|
</button>
|
|
1342
1342
|
</div>
|
|
1343
1343
|
</div>
|
|
1344
|
-
<div class="pf-
|
|
1344
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
1345
1345
|
<button
|
|
1346
|
-
class="pf-
|
|
1346
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1347
1347
|
type="button"
|
|
1348
1348
|
aria-expanded="false"
|
|
1349
1349
|
aria-label="Actions"
|
|
1350
1350
|
>
|
|
1351
|
-
<span class="pf-
|
|
1351
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1352
1352
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1353
1353
|
</span>
|
|
1354
1354
|
</button>
|
|
@@ -1359,55 +1359,55 @@ deprecated: true
|
|
|
1359
1359
|
</div>
|
|
1360
1360
|
</div>
|
|
1361
1361
|
</header>
|
|
1362
|
-
<div class="pf-
|
|
1363
|
-
<div class="pf-
|
|
1362
|
+
<div class="pf-v6-c-page__sidebar">
|
|
1363
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
1364
1364
|
<nav
|
|
1365
|
-
class="pf-
|
|
1365
|
+
class="pf-v6-c-nav"
|
|
1366
1366
|
id="context-selector-in-page-content-example-primary-nav"
|
|
1367
1367
|
aria-label="Global"
|
|
1368
1368
|
>
|
|
1369
|
-
<ul class="pf-
|
|
1370
|
-
<li class="pf-
|
|
1371
|
-
<a href="#" class="pf-
|
|
1369
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
1370
|
+
<li class="pf-v6-c-nav__item">
|
|
1371
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
1372
1372
|
</li>
|
|
1373
|
-
<li class="pf-
|
|
1373
|
+
<li class="pf-v6-c-nav__item">
|
|
1374
1374
|
<a
|
|
1375
1375
|
href="#"
|
|
1376
|
-
class="pf-
|
|
1376
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
1377
1377
|
aria-current="page"
|
|
1378
1378
|
>Policy</a>
|
|
1379
1379
|
</li>
|
|
1380
|
-
<li class="pf-
|
|
1381
|
-
<a href="#" class="pf-
|
|
1380
|
+
<li class="pf-v6-c-nav__item">
|
|
1381
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
1382
1382
|
</li>
|
|
1383
|
-
<li class="pf-
|
|
1384
|
-
<a href="#" class="pf-
|
|
1383
|
+
<li class="pf-v6-c-nav__item">
|
|
1384
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
1385
1385
|
</li>
|
|
1386
|
-
<li class="pf-
|
|
1387
|
-
<a href="#" class="pf-
|
|
1386
|
+
<li class="pf-v6-c-nav__item">
|
|
1387
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
1388
1388
|
</li>
|
|
1389
1389
|
</ul>
|
|
1390
1390
|
</nav>
|
|
1391
1391
|
</div>
|
|
1392
1392
|
</div>
|
|
1393
1393
|
<main
|
|
1394
|
-
class="pf-
|
|
1394
|
+
class="pf-v6-c-page__main"
|
|
1395
1395
|
tabindex="-1"
|
|
1396
1396
|
id="main-content-context-selector-in-page-content-example"
|
|
1397
1397
|
>
|
|
1398
1398
|
<section
|
|
1399
|
-
class="pf-
|
|
1399
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
|
|
1400
1400
|
>
|
|
1401
|
-
<div class="pf-
|
|
1401
|
+
<div class="pf-v6-c-page__main-body">
|
|
1402
1402
|
<div
|
|
1403
|
-
class="pf-
|
|
1403
|
+
class="pf-v6-c-toolbar pf-m-inset-none"
|
|
1404
1404
|
id="toolbar-simple-example"
|
|
1405
1405
|
>
|
|
1406
|
-
<div class="pf-
|
|
1407
|
-
<div class="pf-
|
|
1408
|
-
<div class="pf-
|
|
1406
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1407
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1408
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1409
1409
|
<div
|
|
1410
|
-
class="pf-
|
|
1410
|
+
class="pf-v6-c-context-selector pf-m-page-insets pf-m-width-auto"
|
|
1411
1411
|
style="--pf-v5-c-context-selector--Width: 270px;"
|
|
1412
1412
|
>
|
|
1413
1413
|
<span
|
|
@@ -1415,28 +1415,28 @@ deprecated: true
|
|
|
1415
1415
|
hidden
|
|
1416
1416
|
>Selected project:</span>
|
|
1417
1417
|
<button
|
|
1418
|
-
class="pf-
|
|
1418
|
+
class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
|
|
1419
1419
|
aria-expanded="false"
|
|
1420
1420
|
id="context-selector-in-page-content-example-context-selector-toggle"
|
|
1421
1421
|
aria-labelledby="context-selector-in-page-content-example-context-selector-label context-selector-in-page-content-example-context-selector-toggle"
|
|
1422
1422
|
>
|
|
1423
1423
|
<span
|
|
1424
|
-
class="pf-
|
|
1424
|
+
class="pf-v6-c-context-selector__toggle-text"
|
|
1425
1425
|
>Project: openshift-apple1</span>
|
|
1426
|
-
<span class="pf-
|
|
1426
|
+
<span class="pf-v6-c-context-selector__toggle-icon">
|
|
1427
1427
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1428
1428
|
</span>
|
|
1429
1429
|
</button>
|
|
1430
|
-
<div class="pf-
|
|
1431
|
-
<div class="pf-
|
|
1432
|
-
<div class="pf-
|
|
1433
|
-
<div class="pf-
|
|
1434
|
-
<span class="pf-
|
|
1435
|
-
<span class="pf-
|
|
1430
|
+
<div class="pf-v6-c-context-selector__menu" hidden>
|
|
1431
|
+
<div class="pf-v6-c-context-selector__menu-search">
|
|
1432
|
+
<div class="pf-v6-c-text-input-group">
|
|
1433
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
1434
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
1435
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
1436
1436
|
<i class="fas fa-fw fa-search"></i>
|
|
1437
1437
|
</span>
|
|
1438
1438
|
<input
|
|
1439
|
-
class="pf-
|
|
1439
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
1440
1440
|
type="text"
|
|
1441
1441
|
placeholder="Search"
|
|
1442
1442
|
value
|
|
@@ -1446,24 +1446,24 @@ deprecated: true
|
|
|
1446
1446
|
</div>
|
|
1447
1447
|
</div>
|
|
1448
1448
|
</div>
|
|
1449
|
-
<ul class="pf-
|
|
1449
|
+
<ul class="pf-v6-c-context-selector__menu-list" role="menu">
|
|
1450
1450
|
<li role="none">
|
|
1451
1451
|
<a
|
|
1452
|
-
class="pf-
|
|
1452
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1453
1453
|
href="#"
|
|
1454
1454
|
role="menuitem"
|
|
1455
1455
|
>Link</a>
|
|
1456
1456
|
</li>
|
|
1457
1457
|
<li role="none">
|
|
1458
1458
|
<button
|
|
1459
|
-
class="pf-
|
|
1459
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1460
1460
|
type="button"
|
|
1461
1461
|
role="menuitem"
|
|
1462
1462
|
>Action</button>
|
|
1463
1463
|
</li>
|
|
1464
1464
|
<li role="none">
|
|
1465
1465
|
<a
|
|
1466
|
-
class="pf-
|
|
1466
|
+
class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
|
|
1467
1467
|
href="#"
|
|
1468
1468
|
aria-disabled="true"
|
|
1469
1469
|
tabindex="-1"
|
|
@@ -1472,7 +1472,7 @@ deprecated: true
|
|
|
1472
1472
|
</li>
|
|
1473
1473
|
<li role="none">
|
|
1474
1474
|
<button
|
|
1475
|
-
class="pf-
|
|
1475
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1476
1476
|
type="button"
|
|
1477
1477
|
disabled
|
|
1478
1478
|
role="menuitem"
|
|
@@ -1480,70 +1480,70 @@ deprecated: true
|
|
|
1480
1480
|
</li>
|
|
1481
1481
|
<li role="none">
|
|
1482
1482
|
<button
|
|
1483
|
-
class="pf-
|
|
1483
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1484
1484
|
type="button"
|
|
1485
1485
|
role="menuitem"
|
|
1486
1486
|
>My project</button>
|
|
1487
1487
|
</li>
|
|
1488
1488
|
<li role="none">
|
|
1489
1489
|
<button
|
|
1490
|
-
class="pf-
|
|
1490
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1491
1491
|
type="button"
|
|
1492
1492
|
role="menuitem"
|
|
1493
1493
|
>OpenShift cluster</button>
|
|
1494
1494
|
</li>
|
|
1495
1495
|
<li role="none">
|
|
1496
1496
|
<button
|
|
1497
|
-
class="pf-
|
|
1497
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1498
1498
|
type="button"
|
|
1499
1499
|
role="menuitem"
|
|
1500
1500
|
>Production Ansible</button>
|
|
1501
1501
|
</li>
|
|
1502
1502
|
<li role="none">
|
|
1503
1503
|
<button
|
|
1504
|
-
class="pf-
|
|
1504
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1505
1505
|
type="button"
|
|
1506
1506
|
role="menuitem"
|
|
1507
1507
|
>AWS</button>
|
|
1508
1508
|
</li>
|
|
1509
1509
|
<li role="none">
|
|
1510
1510
|
<button
|
|
1511
|
-
class="pf-
|
|
1511
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1512
1512
|
type="button"
|
|
1513
1513
|
role="menuitem"
|
|
1514
1514
|
>Azure</button>
|
|
1515
1515
|
</li>
|
|
1516
1516
|
<li role="none">
|
|
1517
1517
|
<button
|
|
1518
|
-
class="pf-
|
|
1518
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1519
1519
|
type="button"
|
|
1520
1520
|
role="menuitem"
|
|
1521
1521
|
>My project</button>
|
|
1522
1522
|
</li>
|
|
1523
1523
|
<li role="none">
|
|
1524
1524
|
<button
|
|
1525
|
-
class="pf-
|
|
1525
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1526
1526
|
type="button"
|
|
1527
1527
|
role="menuitem"
|
|
1528
1528
|
>OpenShift cluster</button>
|
|
1529
1529
|
</li>
|
|
1530
1530
|
<li role="none">
|
|
1531
1531
|
<button
|
|
1532
|
-
class="pf-
|
|
1532
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1533
1533
|
type="button"
|
|
1534
1534
|
role="menuitem"
|
|
1535
1535
|
>Production Ansible</button>
|
|
1536
1536
|
</li>
|
|
1537
1537
|
<li role="none">
|
|
1538
1538
|
<button
|
|
1539
|
-
class="pf-
|
|
1539
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1540
1540
|
type="button"
|
|
1541
1541
|
role="menuitem"
|
|
1542
1542
|
>AWS</button>
|
|
1543
1543
|
</li>
|
|
1544
1544
|
<li role="none">
|
|
1545
1545
|
<button
|
|
1546
|
-
class="pf-
|
|
1546
|
+
class="pf-v6-c-context-selector__menu-list-item"
|
|
1547
1547
|
type="button"
|
|
1548
1548
|
role="menuitem"
|
|
1549
1549
|
>Azure</button>
|
|
@@ -1552,68 +1552,68 @@ deprecated: true
|
|
|
1552
1552
|
</div>
|
|
1553
1553
|
</div>
|
|
1554
1554
|
</div>
|
|
1555
|
-
<div class="pf-
|
|
1556
|
-
<div class="pf-
|
|
1555
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1556
|
+
<div class="pf-v6-c-select">
|
|
1557
1557
|
<span
|
|
1558
1558
|
id="context-selector-in-page-content-example-select-label"
|
|
1559
1559
|
hidden
|
|
1560
1560
|
>Choose one</span>
|
|
1561
1561
|
|
|
1562
1562
|
<button
|
|
1563
|
-
class="pf-
|
|
1563
|
+
class="pf-v6-c-select__toggle pf-m-plain"
|
|
1564
1564
|
type="button"
|
|
1565
1565
|
id="context-selector-in-page-content-example-select-toggle"
|
|
1566
1566
|
aria-haspopup="true"
|
|
1567
1567
|
aria-expanded="false"
|
|
1568
1568
|
aria-labelledby="context-selector-in-page-content-example-select-label context-selector-in-page-content-example-select-toggle"
|
|
1569
1569
|
>
|
|
1570
|
-
<div class="pf-
|
|
1571
|
-
<span class="pf-
|
|
1570
|
+
<div class="pf-v6-c-select__toggle-wrapper">
|
|
1571
|
+
<span class="pf-v6-c-select__toggle-text">All applications</span>
|
|
1572
1572
|
</div>
|
|
1573
|
-
<span class="pf-
|
|
1573
|
+
<span class="pf-v6-c-select__toggle-arrow">
|
|
1574
1574
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1575
1575
|
</span>
|
|
1576
1576
|
</button>
|
|
1577
1577
|
|
|
1578
1578
|
<ul
|
|
1579
|
-
class="pf-
|
|
1579
|
+
class="pf-v6-c-select__menu"
|
|
1580
1580
|
role="listbox"
|
|
1581
1581
|
aria-labelledby="context-selector-in-page-content-example-select-label"
|
|
1582
1582
|
hidden
|
|
1583
1583
|
>
|
|
1584
1584
|
<li role="presentation">
|
|
1585
1585
|
<button
|
|
1586
|
-
class="pf-
|
|
1586
|
+
class="pf-v6-c-select__menu-item"
|
|
1587
1587
|
role="option"
|
|
1588
1588
|
>Running</button>
|
|
1589
1589
|
</li>
|
|
1590
1590
|
<li role="presentation">
|
|
1591
1591
|
<button
|
|
1592
|
-
class="pf-
|
|
1592
|
+
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
1593
1593
|
role="option"
|
|
1594
1594
|
aria-selected="true"
|
|
1595
1595
|
>
|
|
1596
1596
|
Stopped
|
|
1597
|
-
<span class="pf-
|
|
1597
|
+
<span class="pf-v6-c-select__menu-item-icon">
|
|
1598
1598
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1599
1599
|
</span>
|
|
1600
1600
|
</button>
|
|
1601
1601
|
</li>
|
|
1602
1602
|
<li role="presentation">
|
|
1603
1603
|
<button
|
|
1604
|
-
class="pf-
|
|
1604
|
+
class="pf-v6-c-select__menu-item"
|
|
1605
1605
|
role="option"
|
|
1606
1606
|
>Down</button>
|
|
1607
1607
|
</li>
|
|
1608
1608
|
<li role="presentation">
|
|
1609
1609
|
<button
|
|
1610
|
-
class="pf-
|
|
1610
|
+
class="pf-v6-c-select__menu-item"
|
|
1611
1611
|
role="option"
|
|
1612
1612
|
>Degraded</button>
|
|
1613
1613
|
</li>
|
|
1614
1614
|
<li role="presentation">
|
|
1615
1615
|
<button
|
|
1616
|
-
class="pf-
|
|
1616
|
+
class="pf-v6-c-select__menu-item"
|
|
1617
1617
|
role="option"
|
|
1618
1618
|
>Needs maintenance</button>
|
|
1619
1619
|
</li>
|
|
@@ -1625,36 +1625,36 @@ deprecated: true
|
|
|
1625
1625
|
</div>
|
|
1626
1626
|
</div>
|
|
1627
1627
|
</section>
|
|
1628
|
-
<hr class="pf-
|
|
1629
|
-
<section class="pf-
|
|
1630
|
-
<div class="pf-
|
|
1631
|
-
<nav class="pf-
|
|
1632
|
-
<ol class="pf-
|
|
1633
|
-
<li class="pf-
|
|
1634
|
-
<a href="#" class="pf-
|
|
1628
|
+
<hr class="pf-v6-c-divider" />
|
|
1629
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
1630
|
+
<div class="pf-v6-c-page__main-body">
|
|
1631
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
1632
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
1633
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1634
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
1635
1635
|
</li>
|
|
1636
|
-
<li class="pf-
|
|
1637
|
-
<span class="pf-
|
|
1636
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1637
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1638
1638
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1639
1639
|
</span>
|
|
1640
1640
|
|
|
1641
|
-
<a href="#" class="pf-
|
|
1641
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
1642
1642
|
</li>
|
|
1643
|
-
<li class="pf-
|
|
1644
|
-
<span class="pf-
|
|
1643
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1644
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1645
1645
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1646
1646
|
</span>
|
|
1647
1647
|
|
|
1648
|
-
<a href="#" class="pf-
|
|
1648
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
1649
1649
|
</li>
|
|
1650
|
-
<li class="pf-
|
|
1651
|
-
<span class="pf-
|
|
1650
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1651
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1652
1652
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1653
1653
|
</span>
|
|
1654
1654
|
|
|
1655
1655
|
<a
|
|
1656
1656
|
href="#"
|
|
1657
|
-
class="pf-
|
|
1657
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
1658
1658
|
aria-current="page"
|
|
1659
1659
|
>Section landing</a>
|
|
1660
1660
|
</li>
|
|
@@ -1662,46 +1662,46 @@ deprecated: true
|
|
|
1662
1662
|
</nav>
|
|
1663
1663
|
</div>
|
|
1664
1664
|
</section>
|
|
1665
|
-
<section class="pf-
|
|
1666
|
-
<div class="pf-
|
|
1667
|
-
<div class="pf-
|
|
1665
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1666
|
+
<div class="pf-v6-c-page__main-body">
|
|
1667
|
+
<div class="pf-v6-c-content">
|
|
1668
1668
|
<h1>Main title</h1>
|
|
1669
1669
|
<p>This is a full page demo.</p>
|
|
1670
1670
|
</div>
|
|
1671
1671
|
</div>
|
|
1672
1672
|
</section>
|
|
1673
|
-
<section class="pf-
|
|
1674
|
-
<div class="pf-
|
|
1675
|
-
<div class="pf-
|
|
1676
|
-
<div class="pf-
|
|
1677
|
-
<div class="pf-
|
|
1673
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
1674
|
+
<div class="pf-v6-c-page__main-body">
|
|
1675
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
1676
|
+
<div class="pf-v6-c-card">
|
|
1677
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1678
1678
|
</div>
|
|
1679
|
-
<div class="pf-
|
|
1680
|
-
<div class="pf-
|
|
1679
|
+
<div class="pf-v6-c-card">
|
|
1680
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1681
1681
|
</div>
|
|
1682
|
-
<div class="pf-
|
|
1683
|
-
<div class="pf-
|
|
1682
|
+
<div class="pf-v6-c-card">
|
|
1683
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1684
1684
|
</div>
|
|
1685
|
-
<div class="pf-
|
|
1686
|
-
<div class="pf-
|
|
1685
|
+
<div class="pf-v6-c-card">
|
|
1686
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1687
1687
|
</div>
|
|
1688
|
-
<div class="pf-
|
|
1689
|
-
<div class="pf-
|
|
1688
|
+
<div class="pf-v6-c-card">
|
|
1689
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1690
1690
|
</div>
|
|
1691
|
-
<div class="pf-
|
|
1692
|
-
<div class="pf-
|
|
1691
|
+
<div class="pf-v6-c-card">
|
|
1692
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1693
1693
|
</div>
|
|
1694
|
-
<div class="pf-
|
|
1695
|
-
<div class="pf-
|
|
1694
|
+
<div class="pf-v6-c-card">
|
|
1695
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1696
1696
|
</div>
|
|
1697
|
-
<div class="pf-
|
|
1698
|
-
<div class="pf-
|
|
1697
|
+
<div class="pf-v6-c-card">
|
|
1698
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1699
1699
|
</div>
|
|
1700
|
-
<div class="pf-
|
|
1701
|
-
<div class="pf-
|
|
1700
|
+
<div class="pf-v6-c-card">
|
|
1701
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1702
1702
|
</div>
|
|
1703
|
-
<div class="pf-
|
|
1704
|
-
<div class="pf-
|
|
1703
|
+
<div class="pf-v6-c-card">
|
|
1704
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1705
1705
|
</div>
|
|
1706
1706
|
</div>
|
|
1707
1707
|
</div>
|