@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.91
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 +1 -1
- 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
|
@@ -7,25 +7,25 @@ wrapperTag: div
|
|
|
7
7
|
### Collapsed
|
|
8
8
|
|
|
9
9
|
```html isFullscreen
|
|
10
|
-
<div class="pf-
|
|
11
|
-
<div class="pf-
|
|
10
|
+
<div class="pf-v6-c-page" id="drawer-collapsed-example">
|
|
11
|
+
<div class="pf-v6-c-skip-to-content">
|
|
12
12
|
<a
|
|
13
|
-
class="pf-
|
|
13
|
+
class="pf-v6-c-button pf-m-primary"
|
|
14
14
|
href="#main-content-drawer-collapsed-example"
|
|
15
15
|
>Skip to content</a>
|
|
16
16
|
</div>
|
|
17
|
-
<header class="pf-
|
|
18
|
-
<span class="pf-
|
|
17
|
+
<header class="pf-v6-c-masthead" id="drawer-collapsed-example-masthead">
|
|
18
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
19
19
|
<button
|
|
20
|
-
class="pf-
|
|
20
|
+
class="pf-v6-c-button pf-m-plain"
|
|
21
21
|
type="button"
|
|
22
22
|
aria-label="Global navigation"
|
|
23
23
|
>
|
|
24
24
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
25
25
|
</button>
|
|
26
26
|
</span>
|
|
27
|
-
<div class="pf-
|
|
28
|
-
<a class="pf-
|
|
27
|
+
<div class="pf-v6-c-masthead__main">
|
|
28
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
29
29
|
<svg height="40px" viewBox="0 0 679 158">
|
|
30
30
|
<title>PF-HorizontalLogo-Color</title>
|
|
31
31
|
<defs>
|
|
@@ -98,37 +98,37 @@ wrapperTag: div
|
|
|
98
98
|
</svg>
|
|
99
99
|
</a>
|
|
100
100
|
</div>
|
|
101
|
-
<div class="pf-
|
|
101
|
+
<div class="pf-v6-c-masthead__content">
|
|
102
102
|
<div
|
|
103
|
-
class="pf-
|
|
103
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
104
104
|
id="drawer-collapsed-example-masthead-toolbar"
|
|
105
105
|
>
|
|
106
|
-
<div class="pf-
|
|
107
|
-
<div class="pf-
|
|
108
|
-
<div class="pf-
|
|
106
|
+
<div class="pf-v6-c-toolbar__content">
|
|
107
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
108
|
+
<div class="pf-v6-c-toolbar__item">
|
|
109
109
|
<button
|
|
110
|
-
class="pf-
|
|
110
|
+
class="pf-v6-c-menu-toggle"
|
|
111
111
|
type="button"
|
|
112
112
|
aria-expanded="false"
|
|
113
113
|
>
|
|
114
|
-
<span class="pf-
|
|
115
|
-
<span class="pf-
|
|
116
|
-
<span class="pf-
|
|
114
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
115
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
116
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
117
117
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
118
118
|
</span>
|
|
119
119
|
</span>
|
|
120
120
|
</button>
|
|
121
121
|
</div>
|
|
122
122
|
|
|
123
|
-
<div class="pf-
|
|
123
|
+
<div class="pf-v6-c-toolbar__item">
|
|
124
124
|
<button
|
|
125
|
-
class="pf-
|
|
125
|
+
class="pf-v6-c-menu-toggle"
|
|
126
126
|
type="button"
|
|
127
127
|
aria-expanded="false"
|
|
128
128
|
>
|
|
129
|
-
<span class="pf-
|
|
130
|
-
<span class="pf-
|
|
131
|
-
<span class="pf-
|
|
129
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
130
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
131
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
132
132
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
133
133
|
</span>
|
|
134
134
|
</span>
|
|
@@ -136,56 +136,56 @@ wrapperTag: div
|
|
|
136
136
|
</div>
|
|
137
137
|
|
|
138
138
|
<div
|
|
139
|
-
class="pf-
|
|
139
|
+
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"
|
|
140
140
|
>
|
|
141
141
|
<div
|
|
142
|
-
class="pf-
|
|
142
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
143
143
|
>
|
|
144
|
-
<div class="pf-
|
|
144
|
+
<div class="pf-v6-c-toolbar__item">
|
|
145
145
|
<button
|
|
146
|
-
class="pf-
|
|
146
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
147
147
|
type="button"
|
|
148
148
|
aria-expanded="false"
|
|
149
149
|
aria-label="Application launcher"
|
|
150
150
|
>
|
|
151
|
-
<span class="pf-
|
|
151
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
152
152
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
153
153
|
</span>
|
|
154
154
|
</button>
|
|
155
155
|
</div>
|
|
156
|
-
<div class="pf-
|
|
156
|
+
<div class="pf-v6-c-toolbar__item">
|
|
157
157
|
<button
|
|
158
|
-
class="pf-
|
|
158
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
159
159
|
type="button"
|
|
160
160
|
aria-expanded="false"
|
|
161
161
|
aria-label="Settings"
|
|
162
162
|
>
|
|
163
|
-
<span class="pf-
|
|
163
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
164
164
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
165
165
|
</span>
|
|
166
166
|
</button>
|
|
167
167
|
</div>
|
|
168
|
-
<div class="pf-
|
|
168
|
+
<div class="pf-v6-c-toolbar__item">
|
|
169
169
|
<button
|
|
170
|
-
class="pf-
|
|
170
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
171
171
|
type="button"
|
|
172
172
|
aria-expanded="false"
|
|
173
173
|
aria-label="Help"
|
|
174
174
|
>
|
|
175
|
-
<span class="pf-
|
|
175
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
176
176
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
177
177
|
</span>
|
|
178
178
|
</button>
|
|
179
179
|
</div>
|
|
180
180
|
</div>
|
|
181
|
-
<div class="pf-
|
|
181
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
182
182
|
<button
|
|
183
|
-
class="pf-
|
|
183
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
184
184
|
type="button"
|
|
185
185
|
aria-expanded="false"
|
|
186
186
|
aria-label="Actions"
|
|
187
187
|
>
|
|
188
|
-
<span class="pf-
|
|
188
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
189
189
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
190
190
|
</span>
|
|
191
191
|
</button>
|
|
@@ -196,85 +196,85 @@ wrapperTag: div
|
|
|
196
196
|
</div>
|
|
197
197
|
</div>
|
|
198
198
|
</header>
|
|
199
|
-
<div class="pf-
|
|
200
|
-
<div class="pf-
|
|
199
|
+
<div class="pf-v6-c-page__sidebar">
|
|
200
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
201
201
|
<nav
|
|
202
|
-
class="pf-
|
|
202
|
+
class="pf-v6-c-nav"
|
|
203
203
|
id="drawer-collapsed-example-primary-nav"
|
|
204
204
|
aria-label="Global"
|
|
205
205
|
>
|
|
206
|
-
<ul class="pf-
|
|
207
|
-
<li class="pf-
|
|
208
|
-
<a href="#" class="pf-
|
|
206
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
207
|
+
<li class="pf-v6-c-nav__item">
|
|
208
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
209
209
|
</li>
|
|
210
|
-
<li class="pf-
|
|
210
|
+
<li class="pf-v6-c-nav__item">
|
|
211
211
|
<a
|
|
212
212
|
href="#"
|
|
213
|
-
class="pf-
|
|
213
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
214
214
|
aria-current="page"
|
|
215
215
|
>Policy</a>
|
|
216
216
|
</li>
|
|
217
|
-
<li class="pf-
|
|
218
|
-
<a href="#" class="pf-
|
|
217
|
+
<li class="pf-v6-c-nav__item">
|
|
218
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
219
219
|
</li>
|
|
220
|
-
<li class="pf-
|
|
221
|
-
<a href="#" class="pf-
|
|
220
|
+
<li class="pf-v6-c-nav__item">
|
|
221
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
222
222
|
</li>
|
|
223
|
-
<li class="pf-
|
|
224
|
-
<a href="#" class="pf-
|
|
223
|
+
<li class="pf-v6-c-nav__item">
|
|
224
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
225
225
|
</li>
|
|
226
226
|
</ul>
|
|
227
227
|
</nav>
|
|
228
228
|
</div>
|
|
229
229
|
</div>
|
|
230
|
-
<div class="pf-
|
|
231
|
-
<div class="pf-
|
|
232
|
-
<div class="pf-
|
|
233
|
-
<div class="pf-
|
|
234
|
-
<div class="pf-
|
|
230
|
+
<div class="pf-v6-c-page__drawer">
|
|
231
|
+
<div class="pf-v6-c-drawer">
|
|
232
|
+
<div class="pf-v6-c-drawer__main">
|
|
233
|
+
<div class="pf-v6-c-drawer__content">
|
|
234
|
+
<div class="pf-v6-c-drawer__body">
|
|
235
235
|
<main
|
|
236
|
-
class="pf-
|
|
236
|
+
class="pf-v6-c-page__main"
|
|
237
237
|
tabindex="-1"
|
|
238
238
|
id="main-content-drawer-collapsed-example"
|
|
239
239
|
>
|
|
240
|
-
<section class="pf-
|
|
241
|
-
<div class="pf-
|
|
242
|
-
<nav class="pf-
|
|
243
|
-
<ol class="pf-
|
|
244
|
-
<li class="pf-
|
|
240
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
241
|
+
<div class="pf-v6-c-page__main-body">
|
|
242
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
243
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
244
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
245
245
|
<a
|
|
246
246
|
href="#"
|
|
247
|
-
class="pf-
|
|
247
|
+
class="pf-v6-c-breadcrumb__link"
|
|
248
248
|
>Section home</a>
|
|
249
249
|
</li>
|
|
250
|
-
<li class="pf-
|
|
251
|
-
<span class="pf-
|
|
250
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
251
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
252
252
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
253
253
|
</span>
|
|
254
254
|
|
|
255
255
|
<a
|
|
256
256
|
href="#"
|
|
257
|
-
class="pf-
|
|
257
|
+
class="pf-v6-c-breadcrumb__link"
|
|
258
258
|
>Section title</a>
|
|
259
259
|
</li>
|
|
260
|
-
<li class="pf-
|
|
261
|
-
<span class="pf-
|
|
260
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
261
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
262
262
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
263
263
|
</span>
|
|
264
264
|
|
|
265
265
|
<a
|
|
266
266
|
href="#"
|
|
267
|
-
class="pf-
|
|
267
|
+
class="pf-v6-c-breadcrumb__link"
|
|
268
268
|
>Section title</a>
|
|
269
269
|
</li>
|
|
270
|
-
<li class="pf-
|
|
271
|
-
<span class="pf-
|
|
270
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
271
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
272
272
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
273
273
|
</span>
|
|
274
274
|
|
|
275
275
|
<a
|
|
276
276
|
href="#"
|
|
277
|
-
class="pf-
|
|
277
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
278
278
|
aria-current="page"
|
|
279
279
|
>Section landing</a>
|
|
280
280
|
</li>
|
|
@@ -283,47 +283,47 @@ wrapperTag: div
|
|
|
283
283
|
</div>
|
|
284
284
|
</section>
|
|
285
285
|
<section
|
|
286
|
-
class="pf-
|
|
286
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
287
287
|
>
|
|
288
|
-
<div class="pf-
|
|
289
|
-
<div class="pf-
|
|
288
|
+
<div class="pf-v6-c-page__main-body">
|
|
289
|
+
<div class="pf-v6-c-content">
|
|
290
290
|
<h1>Main title</h1>
|
|
291
291
|
<p>This is a full page demo.</p>
|
|
292
292
|
</div>
|
|
293
293
|
</div>
|
|
294
294
|
</section>
|
|
295
|
-
<section class="pf-
|
|
296
|
-
<div class="pf-
|
|
297
|
-
<div class="pf-
|
|
298
|
-
<div class="pf-
|
|
299
|
-
<div class="pf-
|
|
295
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
296
|
+
<div class="pf-v6-c-page__main-body">
|
|
297
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
298
|
+
<div class="pf-v6-c-card">
|
|
299
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
300
300
|
</div>
|
|
301
|
-
<div class="pf-
|
|
302
|
-
<div class="pf-
|
|
301
|
+
<div class="pf-v6-c-card">
|
|
302
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
303
303
|
</div>
|
|
304
|
-
<div class="pf-
|
|
305
|
-
<div class="pf-
|
|
304
|
+
<div class="pf-v6-c-card">
|
|
305
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
306
306
|
</div>
|
|
307
|
-
<div class="pf-
|
|
308
|
-
<div class="pf-
|
|
307
|
+
<div class="pf-v6-c-card">
|
|
308
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
309
309
|
</div>
|
|
310
|
-
<div class="pf-
|
|
311
|
-
<div class="pf-
|
|
310
|
+
<div class="pf-v6-c-card">
|
|
311
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
312
312
|
</div>
|
|
313
|
-
<div class="pf-
|
|
314
|
-
<div class="pf-
|
|
313
|
+
<div class="pf-v6-c-card">
|
|
314
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
315
315
|
</div>
|
|
316
|
-
<div class="pf-
|
|
317
|
-
<div class="pf-
|
|
316
|
+
<div class="pf-v6-c-card">
|
|
317
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
318
318
|
</div>
|
|
319
|
-
<div class="pf-
|
|
320
|
-
<div class="pf-
|
|
319
|
+
<div class="pf-v6-c-card">
|
|
320
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
321
321
|
</div>
|
|
322
|
-
<div class="pf-
|
|
323
|
-
<div class="pf-
|
|
322
|
+
<div class="pf-v6-c-card">
|
|
323
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
324
324
|
</div>
|
|
325
|
-
<div class="pf-
|
|
326
|
-
<div class="pf-
|
|
325
|
+
<div class="pf-v6-c-card">
|
|
326
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
327
327
|
</div>
|
|
328
328
|
</div>
|
|
329
329
|
</div>
|
|
@@ -331,13 +331,13 @@ wrapperTag: div
|
|
|
331
331
|
</main>
|
|
332
332
|
</div>
|
|
333
333
|
</div>
|
|
334
|
-
<div class="pf-
|
|
335
|
-
<div class="pf-
|
|
336
|
-
<div class="pf-
|
|
337
|
-
<div class="pf-
|
|
338
|
-
<div class="pf-
|
|
334
|
+
<div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg" hidden>
|
|
335
|
+
<div class="pf-v6-c-drawer__body">
|
|
336
|
+
<div class="pf-v6-c-drawer__head">
|
|
337
|
+
<div class="pf-v6-c-drawer__actions">
|
|
338
|
+
<div class="pf-v6-c-dropdown">
|
|
339
339
|
<button
|
|
340
|
-
class="pf-
|
|
340
|
+
class="pf-v6-c-dropdown__toggle pf-m-plain"
|
|
341
341
|
id="-button"
|
|
342
342
|
aria-expanded="false"
|
|
343
343
|
type="button"
|
|
@@ -346,28 +346,28 @@ wrapperTag: div
|
|
|
346
346
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
347
347
|
</button>
|
|
348
348
|
<ul
|
|
349
|
-
class="pf-
|
|
349
|
+
class="pf-v6-c-dropdown__menu"
|
|
350
350
|
aria-labelledby="-button"
|
|
351
351
|
hidden
|
|
352
352
|
role="menu"
|
|
353
353
|
>
|
|
354
354
|
<li role="none">
|
|
355
355
|
<a
|
|
356
|
-
class="pf-
|
|
356
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
357
357
|
role="menuitem"
|
|
358
358
|
href="#"
|
|
359
359
|
>Link</a>
|
|
360
360
|
</li>
|
|
361
361
|
<li role="none">
|
|
362
362
|
<button
|
|
363
|
-
class="pf-
|
|
363
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
364
364
|
role="menuitem"
|
|
365
365
|
type="button"
|
|
366
366
|
>Action</button>
|
|
367
367
|
</li>
|
|
368
368
|
<li role="none">
|
|
369
369
|
<a
|
|
370
|
-
class="pf-
|
|
370
|
+
class="pf-v6-c-dropdown__menu-item pf-m-disabled"
|
|
371
371
|
role="menuitem"
|
|
372
372
|
href="#"
|
|
373
373
|
aria-disabled="true"
|
|
@@ -376,25 +376,25 @@ wrapperTag: div
|
|
|
376
376
|
</li>
|
|
377
377
|
<li role="none">
|
|
378
378
|
<button
|
|
379
|
-
class="pf-
|
|
379
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
380
380
|
role="menuitem"
|
|
381
381
|
type="button"
|
|
382
382
|
disabled
|
|
383
383
|
>Disabled action</button>
|
|
384
384
|
</li>
|
|
385
|
-
<li class="pf-
|
|
385
|
+
<li class="pf-v6-c-divider" role="separator"></li>
|
|
386
386
|
<li role="none">
|
|
387
387
|
<a
|
|
388
|
-
class="pf-
|
|
388
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
389
389
|
role="menuitem"
|
|
390
390
|
href="#"
|
|
391
391
|
>Separated link</a>
|
|
392
392
|
</li>
|
|
393
393
|
</ul>
|
|
394
394
|
</div>
|
|
395
|
-
<div class="pf-
|
|
395
|
+
<div class="pf-v6-c-drawer__close">
|
|
396
396
|
<button
|
|
397
|
-
class="pf-
|
|
397
|
+
class="pf-v6-c-button pf-m-plain"
|
|
398
398
|
type="button"
|
|
399
399
|
aria-label="Close drawer panel"
|
|
400
400
|
>
|
|
@@ -402,73 +402,73 @@ wrapperTag: div
|
|
|
402
402
|
</button>
|
|
403
403
|
</div>
|
|
404
404
|
</div>
|
|
405
|
-
<div class="pf-
|
|
406
|
-
<div class="pf-
|
|
407
|
-
<span class="pf-
|
|
408
|
-
<span class="pf-
|
|
409
|
-
<span class="pf-
|
|
405
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
406
|
+
<div class="pf-v6-l-flex__item">
|
|
407
|
+
<span class="pf-v6-c-label pf-m-compact pf-m-blue">
|
|
408
|
+
<span class="pf-v6-c-label__content">
|
|
409
|
+
<span class="pf-v6-c-label__text">DC</span>
|
|
410
410
|
</span>
|
|
411
411
|
</span>
|
|
412
412
|
</div>
|
|
413
|
-
<div class="pf-
|
|
413
|
+
<div class="pf-v6-l-flex__item">
|
|
414
414
|
<h2
|
|
415
|
-
class="pf-
|
|
415
|
+
class="pf-v6-c-title pf-m-xl"
|
|
416
416
|
id="drawer-collapsed-example-drawer-label"
|
|
417
417
|
>mary-test</h2>
|
|
418
418
|
</div>
|
|
419
419
|
</div>
|
|
420
420
|
</div>
|
|
421
421
|
</div>
|
|
422
|
-
<div class="pf-
|
|
423
|
-
<div class="pf-
|
|
424
|
-
<ul class="pf-
|
|
425
|
-
<li class="pf-
|
|
422
|
+
<div class="pf-v6-c-drawer__body pf-m-no-padding">
|
|
423
|
+
<div class="pf-v6-c-tabs pf-m-box pf-m-fill">
|
|
424
|
+
<ul class="pf-v6-c-tabs__list" role="tablist">
|
|
425
|
+
<li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
|
|
426
426
|
<button
|
|
427
427
|
type="button"
|
|
428
|
-
class="pf-
|
|
428
|
+
class="pf-v6-c-tabs__link"
|
|
429
429
|
role="tab"
|
|
430
430
|
id="drawer-collapsed-example-panel-tabs-tab1-link"
|
|
431
431
|
>
|
|
432
|
-
<span class="pf-
|
|
432
|
+
<span class="pf-v6-c-tabs__item-text">Overview</span>
|
|
433
433
|
</button>
|
|
434
434
|
</li>
|
|
435
|
-
<li class="pf-
|
|
435
|
+
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
436
436
|
<button
|
|
437
437
|
type="button"
|
|
438
|
-
class="pf-
|
|
438
|
+
class="pf-v6-c-tabs__link"
|
|
439
439
|
role="tab"
|
|
440
440
|
id="drawer-collapsed-example-panel-tabs-tab2-link"
|
|
441
441
|
>
|
|
442
|
-
<span class="pf-
|
|
442
|
+
<span class="pf-v6-c-tabs__item-text">Activity</span>
|
|
443
443
|
</button>
|
|
444
444
|
</li>
|
|
445
445
|
</ul>
|
|
446
446
|
</div>
|
|
447
447
|
</div>
|
|
448
|
-
<div class="pf-
|
|
448
|
+
<div class="pf-v6-c-drawer__body">
|
|
449
449
|
<section
|
|
450
|
-
class="pf-
|
|
450
|
+
class="pf-v6-c-tab-content"
|
|
451
451
|
id="drawer-collapsed-example-panel-tabs-tab1-panel"
|
|
452
452
|
aria-labelledby="drawer-collapsed-example-panel-tabs-tab1-link"
|
|
453
453
|
role="tabpanel"
|
|
454
454
|
tabindex="0"
|
|
455
455
|
>
|
|
456
|
-
<div class="pf-
|
|
457
|
-
<div class="pf-
|
|
458
|
-
<div class="pf-
|
|
456
|
+
<div class="pf-v6-c-tab-content__body">
|
|
457
|
+
<div class="pf-v6-l-flex pf-m-column pf-m-space-items-lg">
|
|
458
|
+
<div class="pf-v6-l-flex__item">
|
|
459
459
|
<p>The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.</p>
|
|
460
460
|
</div>
|
|
461
|
-
<div class="pf-
|
|
462
|
-
<div class="pf-
|
|
461
|
+
<div class="pf-v6-l-flex__item">
|
|
462
|
+
<div class="pf-v6-c-progress" id="-progress-example1">
|
|
463
463
|
<div
|
|
464
|
-
class="pf-
|
|
464
|
+
class="pf-v6-c-progress__description"
|
|
465
465
|
id="-progress-example1-description"
|
|
466
466
|
>Capacity</div>
|
|
467
|
-
<div class="pf-
|
|
468
|
-
<span class="pf-
|
|
467
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
468
|
+
<span class="pf-v6-c-progress__measure">33%</span>
|
|
469
469
|
</div>
|
|
470
470
|
<div
|
|
471
|
-
class="pf-
|
|
471
|
+
class="pf-v6-c-progress__bar"
|
|
472
472
|
role="progressbar"
|
|
473
473
|
aria-valuemin="0"
|
|
474
474
|
aria-valuemax="100"
|
|
@@ -477,23 +477,23 @@ wrapperTag: div
|
|
|
477
477
|
aria-label="Progress 1"
|
|
478
478
|
>
|
|
479
479
|
<div
|
|
480
|
-
class="pf-
|
|
480
|
+
class="pf-v6-c-progress__indicator"
|
|
481
481
|
style="width:33%;"
|
|
482
482
|
></div>
|
|
483
483
|
</div>
|
|
484
484
|
</div>
|
|
485
485
|
</div>
|
|
486
|
-
<div class="pf-
|
|
487
|
-
<div class="pf-
|
|
486
|
+
<div class="pf-v6-l-flex__item">
|
|
487
|
+
<div class="pf-v6-c-progress" id="-progress-example2">
|
|
488
488
|
<div
|
|
489
|
-
class="pf-
|
|
489
|
+
class="pf-v6-c-progress__description"
|
|
490
490
|
id="-progress-example2-description"
|
|
491
491
|
>Modules</div>
|
|
492
|
-
<div class="pf-
|
|
493
|
-
<span class="pf-
|
|
492
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
493
|
+
<span class="pf-v6-c-progress__measure">66%</span>
|
|
494
494
|
</div>
|
|
495
495
|
<div
|
|
496
|
-
class="pf-
|
|
496
|
+
class="pf-v6-c-progress__bar"
|
|
497
497
|
role="progressbar"
|
|
498
498
|
aria-valuemin="0"
|
|
499
499
|
aria-valuemax="100"
|
|
@@ -502,7 +502,7 @@ wrapperTag: div
|
|
|
502
502
|
aria-label="Progress 2"
|
|
503
503
|
>
|
|
504
504
|
<div
|
|
505
|
-
class="pf-
|
|
505
|
+
class="pf-v6-c-progress__indicator"
|
|
506
506
|
style="width:66%;"
|
|
507
507
|
></div>
|
|
508
508
|
</div>
|
|
@@ -512,14 +512,14 @@ wrapperTag: div
|
|
|
512
512
|
</div>
|
|
513
513
|
</section>
|
|
514
514
|
<section
|
|
515
|
-
class="pf-
|
|
515
|
+
class="pf-v6-c-tab-content"
|
|
516
516
|
id="drawer-collapsed-example-panel-tabs-tab2-panel"
|
|
517
517
|
aria-labelledby="drawer-collapsed-example-panel-tabs-tab2-link"
|
|
518
518
|
role="tabpanel"
|
|
519
519
|
tabindex="0"
|
|
520
520
|
hidden
|
|
521
521
|
>
|
|
522
|
-
<div class="pf-
|
|
522
|
+
<div class="pf-v6-c-tab-content__body">Panel 2</div>
|
|
523
523
|
</section>
|
|
524
524
|
</div>
|
|
525
525
|
</div>
|
|
@@ -533,25 +533,25 @@ wrapperTag: div
|
|
|
533
533
|
### Expanded
|
|
534
534
|
|
|
535
535
|
```html isFullscreen
|
|
536
|
-
<div class="pf-
|
|
537
|
-
<div class="pf-
|
|
536
|
+
<div class="pf-v6-c-page" id="drawer-expanded-example">
|
|
537
|
+
<div class="pf-v6-c-skip-to-content">
|
|
538
538
|
<a
|
|
539
|
-
class="pf-
|
|
539
|
+
class="pf-v6-c-button pf-m-primary"
|
|
540
540
|
href="#main-content-drawer-expanded-example"
|
|
541
541
|
>Skip to content</a>
|
|
542
542
|
</div>
|
|
543
|
-
<header class="pf-
|
|
544
|
-
<span class="pf-
|
|
543
|
+
<header class="pf-v6-c-masthead" id="drawer-expanded-example-masthead">
|
|
544
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
545
545
|
<button
|
|
546
|
-
class="pf-
|
|
546
|
+
class="pf-v6-c-button pf-m-plain"
|
|
547
547
|
type="button"
|
|
548
548
|
aria-label="Global navigation"
|
|
549
549
|
>
|
|
550
550
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
551
551
|
</button>
|
|
552
552
|
</span>
|
|
553
|
-
<div class="pf-
|
|
554
|
-
<a class="pf-
|
|
553
|
+
<div class="pf-v6-c-masthead__main">
|
|
554
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
555
555
|
<svg height="40px" viewBox="0 0 679 158">
|
|
556
556
|
<title>PF-HorizontalLogo-Color</title>
|
|
557
557
|
<defs>
|
|
@@ -624,37 +624,37 @@ wrapperTag: div
|
|
|
624
624
|
</svg>
|
|
625
625
|
</a>
|
|
626
626
|
</div>
|
|
627
|
-
<div class="pf-
|
|
627
|
+
<div class="pf-v6-c-masthead__content">
|
|
628
628
|
<div
|
|
629
|
-
class="pf-
|
|
629
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
630
630
|
id="drawer-expanded-example-masthead-toolbar"
|
|
631
631
|
>
|
|
632
|
-
<div class="pf-
|
|
633
|
-
<div class="pf-
|
|
634
|
-
<div class="pf-
|
|
632
|
+
<div class="pf-v6-c-toolbar__content">
|
|
633
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
634
|
+
<div class="pf-v6-c-toolbar__item">
|
|
635
635
|
<button
|
|
636
|
-
class="pf-
|
|
636
|
+
class="pf-v6-c-menu-toggle"
|
|
637
637
|
type="button"
|
|
638
638
|
aria-expanded="false"
|
|
639
639
|
>
|
|
640
|
-
<span class="pf-
|
|
641
|
-
<span class="pf-
|
|
642
|
-
<span class="pf-
|
|
640
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
641
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
642
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
643
643
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
644
644
|
</span>
|
|
645
645
|
</span>
|
|
646
646
|
</button>
|
|
647
647
|
</div>
|
|
648
648
|
|
|
649
|
-
<div class="pf-
|
|
649
|
+
<div class="pf-v6-c-toolbar__item">
|
|
650
650
|
<button
|
|
651
|
-
class="pf-
|
|
651
|
+
class="pf-v6-c-menu-toggle"
|
|
652
652
|
type="button"
|
|
653
653
|
aria-expanded="false"
|
|
654
654
|
>
|
|
655
|
-
<span class="pf-
|
|
656
|
-
<span class="pf-
|
|
657
|
-
<span class="pf-
|
|
655
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
656
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
657
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
658
658
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
659
659
|
</span>
|
|
660
660
|
</span>
|
|
@@ -662,56 +662,56 @@ wrapperTag: div
|
|
|
662
662
|
</div>
|
|
663
663
|
|
|
664
664
|
<div
|
|
665
|
-
class="pf-
|
|
665
|
+
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"
|
|
666
666
|
>
|
|
667
667
|
<div
|
|
668
|
-
class="pf-
|
|
668
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
669
669
|
>
|
|
670
|
-
<div class="pf-
|
|
670
|
+
<div class="pf-v6-c-toolbar__item">
|
|
671
671
|
<button
|
|
672
|
-
class="pf-
|
|
672
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
673
673
|
type="button"
|
|
674
674
|
aria-expanded="false"
|
|
675
675
|
aria-label="Application launcher"
|
|
676
676
|
>
|
|
677
|
-
<span class="pf-
|
|
677
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
678
678
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
679
679
|
</span>
|
|
680
680
|
</button>
|
|
681
681
|
</div>
|
|
682
|
-
<div class="pf-
|
|
682
|
+
<div class="pf-v6-c-toolbar__item">
|
|
683
683
|
<button
|
|
684
|
-
class="pf-
|
|
684
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
685
685
|
type="button"
|
|
686
686
|
aria-expanded="false"
|
|
687
687
|
aria-label="Settings"
|
|
688
688
|
>
|
|
689
|
-
<span class="pf-
|
|
689
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
690
690
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
691
691
|
</span>
|
|
692
692
|
</button>
|
|
693
693
|
</div>
|
|
694
|
-
<div class="pf-
|
|
694
|
+
<div class="pf-v6-c-toolbar__item">
|
|
695
695
|
<button
|
|
696
|
-
class="pf-
|
|
696
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
697
697
|
type="button"
|
|
698
698
|
aria-expanded="false"
|
|
699
699
|
aria-label="Help"
|
|
700
700
|
>
|
|
701
|
-
<span class="pf-
|
|
701
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
702
702
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
703
703
|
</span>
|
|
704
704
|
</button>
|
|
705
705
|
</div>
|
|
706
706
|
</div>
|
|
707
|
-
<div class="pf-
|
|
707
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
708
708
|
<button
|
|
709
|
-
class="pf-
|
|
709
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
710
710
|
type="button"
|
|
711
711
|
aria-expanded="false"
|
|
712
712
|
aria-label="Actions"
|
|
713
713
|
>
|
|
714
|
-
<span class="pf-
|
|
714
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
715
715
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
716
716
|
</span>
|
|
717
717
|
</button>
|
|
@@ -722,85 +722,85 @@ wrapperTag: div
|
|
|
722
722
|
</div>
|
|
723
723
|
</div>
|
|
724
724
|
</header>
|
|
725
|
-
<div class="pf-
|
|
726
|
-
<div class="pf-
|
|
725
|
+
<div class="pf-v6-c-page__sidebar">
|
|
726
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
727
727
|
<nav
|
|
728
|
-
class="pf-
|
|
728
|
+
class="pf-v6-c-nav"
|
|
729
729
|
id="drawer-expanded-example-primary-nav"
|
|
730
730
|
aria-label="Global"
|
|
731
731
|
>
|
|
732
|
-
<ul class="pf-
|
|
733
|
-
<li class="pf-
|
|
734
|
-
<a href="#" class="pf-
|
|
732
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
733
|
+
<li class="pf-v6-c-nav__item">
|
|
734
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
735
735
|
</li>
|
|
736
|
-
<li class="pf-
|
|
736
|
+
<li class="pf-v6-c-nav__item">
|
|
737
737
|
<a
|
|
738
738
|
href="#"
|
|
739
|
-
class="pf-
|
|
739
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
740
740
|
aria-current="page"
|
|
741
741
|
>Policy</a>
|
|
742
742
|
</li>
|
|
743
|
-
<li class="pf-
|
|
744
|
-
<a href="#" class="pf-
|
|
743
|
+
<li class="pf-v6-c-nav__item">
|
|
744
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
745
745
|
</li>
|
|
746
|
-
<li class="pf-
|
|
747
|
-
<a href="#" class="pf-
|
|
746
|
+
<li class="pf-v6-c-nav__item">
|
|
747
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
748
748
|
</li>
|
|
749
|
-
<li class="pf-
|
|
750
|
-
<a href="#" class="pf-
|
|
749
|
+
<li class="pf-v6-c-nav__item">
|
|
750
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
751
751
|
</li>
|
|
752
752
|
</ul>
|
|
753
753
|
</nav>
|
|
754
754
|
</div>
|
|
755
755
|
</div>
|
|
756
|
-
<div class="pf-
|
|
757
|
-
<div class="pf-
|
|
758
|
-
<div class="pf-
|
|
759
|
-
<div class="pf-
|
|
760
|
-
<div class="pf-
|
|
756
|
+
<div class="pf-v6-c-page__drawer">
|
|
757
|
+
<div class="pf-v6-c-drawer pf-m-expanded">
|
|
758
|
+
<div class="pf-v6-c-drawer__main">
|
|
759
|
+
<div class="pf-v6-c-drawer__content">
|
|
760
|
+
<div class="pf-v6-c-drawer__body">
|
|
761
761
|
<main
|
|
762
|
-
class="pf-
|
|
762
|
+
class="pf-v6-c-page__main"
|
|
763
763
|
tabindex="-1"
|
|
764
764
|
id="main-content-drawer-expanded-example"
|
|
765
765
|
>
|
|
766
|
-
<section class="pf-
|
|
767
|
-
<div class="pf-
|
|
768
|
-
<nav class="pf-
|
|
769
|
-
<ol class="pf-
|
|
770
|
-
<li class="pf-
|
|
766
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
767
|
+
<div class="pf-v6-c-page__main-body">
|
|
768
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
769
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
770
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
771
771
|
<a
|
|
772
772
|
href="#"
|
|
773
|
-
class="pf-
|
|
773
|
+
class="pf-v6-c-breadcrumb__link"
|
|
774
774
|
>Section home</a>
|
|
775
775
|
</li>
|
|
776
|
-
<li class="pf-
|
|
777
|
-
<span class="pf-
|
|
776
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
777
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
778
778
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
779
779
|
</span>
|
|
780
780
|
|
|
781
781
|
<a
|
|
782
782
|
href="#"
|
|
783
|
-
class="pf-
|
|
783
|
+
class="pf-v6-c-breadcrumb__link"
|
|
784
784
|
>Section title</a>
|
|
785
785
|
</li>
|
|
786
|
-
<li class="pf-
|
|
787
|
-
<span class="pf-
|
|
786
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
787
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
788
788
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
789
789
|
</span>
|
|
790
790
|
|
|
791
791
|
<a
|
|
792
792
|
href="#"
|
|
793
|
-
class="pf-
|
|
793
|
+
class="pf-v6-c-breadcrumb__link"
|
|
794
794
|
>Section title</a>
|
|
795
795
|
</li>
|
|
796
|
-
<li class="pf-
|
|
797
|
-
<span class="pf-
|
|
796
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
797
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
798
798
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
799
799
|
</span>
|
|
800
800
|
|
|
801
801
|
<a
|
|
802
802
|
href="#"
|
|
803
|
-
class="pf-
|
|
803
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
804
804
|
aria-current="page"
|
|
805
805
|
>Section landing</a>
|
|
806
806
|
</li>
|
|
@@ -809,47 +809,47 @@ wrapperTag: div
|
|
|
809
809
|
</div>
|
|
810
810
|
</section>
|
|
811
811
|
<section
|
|
812
|
-
class="pf-
|
|
812
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
813
813
|
>
|
|
814
|
-
<div class="pf-
|
|
815
|
-
<div class="pf-
|
|
814
|
+
<div class="pf-v6-c-page__main-body">
|
|
815
|
+
<div class="pf-v6-c-content">
|
|
816
816
|
<h1>Main title</h1>
|
|
817
817
|
<p>This is a full page demo.</p>
|
|
818
818
|
</div>
|
|
819
819
|
</div>
|
|
820
820
|
</section>
|
|
821
|
-
<section class="pf-
|
|
822
|
-
<div class="pf-
|
|
823
|
-
<div class="pf-
|
|
824
|
-
<div class="pf-
|
|
825
|
-
<div class="pf-
|
|
821
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
822
|
+
<div class="pf-v6-c-page__main-body">
|
|
823
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
824
|
+
<div class="pf-v6-c-card">
|
|
825
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
826
826
|
</div>
|
|
827
|
-
<div class="pf-
|
|
828
|
-
<div class="pf-
|
|
827
|
+
<div class="pf-v6-c-card">
|
|
828
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
829
829
|
</div>
|
|
830
|
-
<div class="pf-
|
|
831
|
-
<div class="pf-
|
|
830
|
+
<div class="pf-v6-c-card">
|
|
831
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
832
832
|
</div>
|
|
833
|
-
<div class="pf-
|
|
834
|
-
<div class="pf-
|
|
833
|
+
<div class="pf-v6-c-card">
|
|
834
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
835
835
|
</div>
|
|
836
|
-
<div class="pf-
|
|
837
|
-
<div class="pf-
|
|
836
|
+
<div class="pf-v6-c-card">
|
|
837
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
838
838
|
</div>
|
|
839
|
-
<div class="pf-
|
|
840
|
-
<div class="pf-
|
|
839
|
+
<div class="pf-v6-c-card">
|
|
840
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
841
841
|
</div>
|
|
842
|
-
<div class="pf-
|
|
843
|
-
<div class="pf-
|
|
842
|
+
<div class="pf-v6-c-card">
|
|
843
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
844
844
|
</div>
|
|
845
|
-
<div class="pf-
|
|
846
|
-
<div class="pf-
|
|
845
|
+
<div class="pf-v6-c-card">
|
|
846
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
847
847
|
</div>
|
|
848
|
-
<div class="pf-
|
|
849
|
-
<div class="pf-
|
|
848
|
+
<div class="pf-v6-c-card">
|
|
849
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
850
850
|
</div>
|
|
851
|
-
<div class="pf-
|
|
852
|
-
<div class="pf-
|
|
851
|
+
<div class="pf-v6-c-card">
|
|
852
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
853
853
|
</div>
|
|
854
854
|
</div>
|
|
855
855
|
</div>
|
|
@@ -857,8 +857,8 @@ wrapperTag: div
|
|
|
857
857
|
</main>
|
|
858
858
|
</div>
|
|
859
859
|
</div>
|
|
860
|
-
<div class="pf-
|
|
861
|
-
<div class="pf-
|
|
860
|
+
<div class="pf-v6-c-drawer__panel">
|
|
861
|
+
<div class="pf-v6-c-drawer__body">drawer panel</div>
|
|
862
862
|
</div>
|
|
863
863
|
</div>
|
|
864
864
|
</div>
|
|
@@ -870,25 +870,25 @@ wrapperTag: div
|
|
|
870
870
|
### Expanded bottom
|
|
871
871
|
|
|
872
872
|
```html isFullscreen
|
|
873
|
-
<div class="pf-
|
|
874
|
-
<div class="pf-
|
|
873
|
+
<div class="pf-v6-c-page" id="drawer-expanded-bottom-example">
|
|
874
|
+
<div class="pf-v6-c-skip-to-content">
|
|
875
875
|
<a
|
|
876
|
-
class="pf-
|
|
876
|
+
class="pf-v6-c-button pf-m-primary"
|
|
877
877
|
href="#main-content-drawer-expanded-bottom-example"
|
|
878
878
|
>Skip to content</a>
|
|
879
879
|
</div>
|
|
880
|
-
<header class="pf-
|
|
881
|
-
<span class="pf-
|
|
880
|
+
<header class="pf-v6-c-masthead" id="drawer-expanded-bottom-example-masthead">
|
|
881
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
882
882
|
<button
|
|
883
|
-
class="pf-
|
|
883
|
+
class="pf-v6-c-button pf-m-plain"
|
|
884
884
|
type="button"
|
|
885
885
|
aria-label="Global navigation"
|
|
886
886
|
>
|
|
887
887
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
888
888
|
</button>
|
|
889
889
|
</span>
|
|
890
|
-
<div class="pf-
|
|
891
|
-
<a class="pf-
|
|
890
|
+
<div class="pf-v6-c-masthead__main">
|
|
891
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
892
892
|
<svg height="40px" viewBox="0 0 679 158">
|
|
893
893
|
<title>PF-HorizontalLogo-Color</title>
|
|
894
894
|
<defs>
|
|
@@ -961,37 +961,37 @@ wrapperTag: div
|
|
|
961
961
|
</svg>
|
|
962
962
|
</a>
|
|
963
963
|
</div>
|
|
964
|
-
<div class="pf-
|
|
964
|
+
<div class="pf-v6-c-masthead__content">
|
|
965
965
|
<div
|
|
966
|
-
class="pf-
|
|
966
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
967
967
|
id="drawer-expanded-bottom-example-masthead-toolbar"
|
|
968
968
|
>
|
|
969
|
-
<div class="pf-
|
|
970
|
-
<div class="pf-
|
|
971
|
-
<div class="pf-
|
|
969
|
+
<div class="pf-v6-c-toolbar__content">
|
|
970
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
971
|
+
<div class="pf-v6-c-toolbar__item">
|
|
972
972
|
<button
|
|
973
|
-
class="pf-
|
|
973
|
+
class="pf-v6-c-menu-toggle"
|
|
974
974
|
type="button"
|
|
975
975
|
aria-expanded="false"
|
|
976
976
|
>
|
|
977
|
-
<span class="pf-
|
|
978
|
-
<span class="pf-
|
|
979
|
-
<span class="pf-
|
|
977
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
978
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
979
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
980
980
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
981
981
|
</span>
|
|
982
982
|
</span>
|
|
983
983
|
</button>
|
|
984
984
|
</div>
|
|
985
985
|
|
|
986
|
-
<div class="pf-
|
|
986
|
+
<div class="pf-v6-c-toolbar__item">
|
|
987
987
|
<button
|
|
988
|
-
class="pf-
|
|
988
|
+
class="pf-v6-c-menu-toggle"
|
|
989
989
|
type="button"
|
|
990
990
|
aria-expanded="false"
|
|
991
991
|
>
|
|
992
|
-
<span class="pf-
|
|
993
|
-
<span class="pf-
|
|
994
|
-
<span class="pf-
|
|
992
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
993
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
994
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
995
995
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
996
996
|
</span>
|
|
997
997
|
</span>
|
|
@@ -999,56 +999,56 @@ wrapperTag: div
|
|
|
999
999
|
</div>
|
|
1000
1000
|
|
|
1001
1001
|
<div
|
|
1002
|
-
class="pf-
|
|
1002
|
+
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"
|
|
1003
1003
|
>
|
|
1004
1004
|
<div
|
|
1005
|
-
class="pf-
|
|
1005
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1006
1006
|
>
|
|
1007
|
-
<div class="pf-
|
|
1007
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1008
1008
|
<button
|
|
1009
|
-
class="pf-
|
|
1009
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1010
1010
|
type="button"
|
|
1011
1011
|
aria-expanded="false"
|
|
1012
1012
|
aria-label="Application launcher"
|
|
1013
1013
|
>
|
|
1014
|
-
<span class="pf-
|
|
1014
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1015
1015
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1016
1016
|
</span>
|
|
1017
1017
|
</button>
|
|
1018
1018
|
</div>
|
|
1019
|
-
<div class="pf-
|
|
1019
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1020
1020
|
<button
|
|
1021
|
-
class="pf-
|
|
1021
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1022
1022
|
type="button"
|
|
1023
1023
|
aria-expanded="false"
|
|
1024
1024
|
aria-label="Settings"
|
|
1025
1025
|
>
|
|
1026
|
-
<span class="pf-
|
|
1026
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1027
1027
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1028
1028
|
</span>
|
|
1029
1029
|
</button>
|
|
1030
1030
|
</div>
|
|
1031
|
-
<div class="pf-
|
|
1031
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1032
1032
|
<button
|
|
1033
|
-
class="pf-
|
|
1033
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1034
1034
|
type="button"
|
|
1035
1035
|
aria-expanded="false"
|
|
1036
1036
|
aria-label="Help"
|
|
1037
1037
|
>
|
|
1038
|
-
<span class="pf-
|
|
1038
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1039
1039
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1040
1040
|
</span>
|
|
1041
1041
|
</button>
|
|
1042
1042
|
</div>
|
|
1043
1043
|
</div>
|
|
1044
|
-
<div class="pf-
|
|
1044
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
1045
1045
|
<button
|
|
1046
|
-
class="pf-
|
|
1046
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1047
1047
|
type="button"
|
|
1048
1048
|
aria-expanded="false"
|
|
1049
1049
|
aria-label="Actions"
|
|
1050
1050
|
>
|
|
1051
|
-
<span class="pf-
|
|
1051
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1052
1052
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1053
1053
|
</span>
|
|
1054
1054
|
</button>
|
|
@@ -1059,85 +1059,85 @@ wrapperTag: div
|
|
|
1059
1059
|
</div>
|
|
1060
1060
|
</div>
|
|
1061
1061
|
</header>
|
|
1062
|
-
<div class="pf-
|
|
1063
|
-
<div class="pf-
|
|
1062
|
+
<div class="pf-v6-c-page__sidebar">
|
|
1063
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
1064
1064
|
<nav
|
|
1065
|
-
class="pf-
|
|
1065
|
+
class="pf-v6-c-nav"
|
|
1066
1066
|
id="drawer-expanded-bottom-example-primary-nav"
|
|
1067
1067
|
aria-label="Global"
|
|
1068
1068
|
>
|
|
1069
|
-
<ul class="pf-
|
|
1070
|
-
<li class="pf-
|
|
1071
|
-
<a href="#" class="pf-
|
|
1069
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
1070
|
+
<li class="pf-v6-c-nav__item">
|
|
1071
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
1072
1072
|
</li>
|
|
1073
|
-
<li class="pf-
|
|
1073
|
+
<li class="pf-v6-c-nav__item">
|
|
1074
1074
|
<a
|
|
1075
1075
|
href="#"
|
|
1076
|
-
class="pf-
|
|
1076
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
1077
1077
|
aria-current="page"
|
|
1078
1078
|
>Policy</a>
|
|
1079
1079
|
</li>
|
|
1080
|
-
<li class="pf-
|
|
1081
|
-
<a href="#" class="pf-
|
|
1080
|
+
<li class="pf-v6-c-nav__item">
|
|
1081
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
1082
1082
|
</li>
|
|
1083
|
-
<li class="pf-
|
|
1084
|
-
<a href="#" class="pf-
|
|
1083
|
+
<li class="pf-v6-c-nav__item">
|
|
1084
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
1085
1085
|
</li>
|
|
1086
|
-
<li class="pf-
|
|
1087
|
-
<a href="#" class="pf-
|
|
1086
|
+
<li class="pf-v6-c-nav__item">
|
|
1087
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
1088
1088
|
</li>
|
|
1089
1089
|
</ul>
|
|
1090
1090
|
</nav>
|
|
1091
1091
|
</div>
|
|
1092
1092
|
</div>
|
|
1093
|
-
<div class="pf-
|
|
1094
|
-
<div class="pf-
|
|
1095
|
-
<div class="pf-
|
|
1096
|
-
<div class="pf-
|
|
1097
|
-
<div class="pf-
|
|
1093
|
+
<div class="pf-v6-c-page__drawer">
|
|
1094
|
+
<div class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom">
|
|
1095
|
+
<div class="pf-v6-c-drawer__main">
|
|
1096
|
+
<div class="pf-v6-c-drawer__content">
|
|
1097
|
+
<div class="pf-v6-c-drawer__body">
|
|
1098
1098
|
<main
|
|
1099
|
-
class="pf-
|
|
1099
|
+
class="pf-v6-c-page__main"
|
|
1100
1100
|
tabindex="-1"
|
|
1101
1101
|
id="main-content-drawer-expanded-bottom-example"
|
|
1102
1102
|
>
|
|
1103
|
-
<section class="pf-
|
|
1104
|
-
<div class="pf-
|
|
1105
|
-
<nav class="pf-
|
|
1106
|
-
<ol class="pf-
|
|
1107
|
-
<li class="pf-
|
|
1103
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
1104
|
+
<div class="pf-v6-c-page__main-body">
|
|
1105
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
1106
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
1107
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1108
1108
|
<a
|
|
1109
1109
|
href="#"
|
|
1110
|
-
class="pf-
|
|
1110
|
+
class="pf-v6-c-breadcrumb__link"
|
|
1111
1111
|
>Section home</a>
|
|
1112
1112
|
</li>
|
|
1113
|
-
<li class="pf-
|
|
1114
|
-
<span class="pf-
|
|
1113
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1114
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1115
1115
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1116
1116
|
</span>
|
|
1117
1117
|
|
|
1118
1118
|
<a
|
|
1119
1119
|
href="#"
|
|
1120
|
-
class="pf-
|
|
1120
|
+
class="pf-v6-c-breadcrumb__link"
|
|
1121
1121
|
>Section title</a>
|
|
1122
1122
|
</li>
|
|
1123
|
-
<li class="pf-
|
|
1124
|
-
<span class="pf-
|
|
1123
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1124
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1125
1125
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1126
1126
|
</span>
|
|
1127
1127
|
|
|
1128
1128
|
<a
|
|
1129
1129
|
href="#"
|
|
1130
|
-
class="pf-
|
|
1130
|
+
class="pf-v6-c-breadcrumb__link"
|
|
1131
1131
|
>Section title</a>
|
|
1132
1132
|
</li>
|
|
1133
|
-
<li class="pf-
|
|
1134
|
-
<span class="pf-
|
|
1133
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1134
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1135
1135
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1136
1136
|
</span>
|
|
1137
1137
|
|
|
1138
1138
|
<a
|
|
1139
1139
|
href="#"
|
|
1140
|
-
class="pf-
|
|
1140
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
1141
1141
|
aria-current="page"
|
|
1142
1142
|
>Section landing</a>
|
|
1143
1143
|
</li>
|
|
@@ -1146,47 +1146,47 @@ wrapperTag: div
|
|
|
1146
1146
|
</div>
|
|
1147
1147
|
</section>
|
|
1148
1148
|
<section
|
|
1149
|
-
class="pf-
|
|
1149
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
1150
1150
|
>
|
|
1151
|
-
<div class="pf-
|
|
1152
|
-
<div class="pf-
|
|
1151
|
+
<div class="pf-v6-c-page__main-body">
|
|
1152
|
+
<div class="pf-v6-c-content">
|
|
1153
1153
|
<h1>Main title</h1>
|
|
1154
1154
|
<p>This is a full page demo.</p>
|
|
1155
1155
|
</div>
|
|
1156
1156
|
</div>
|
|
1157
1157
|
</section>
|
|
1158
|
-
<section class="pf-
|
|
1159
|
-
<div class="pf-
|
|
1160
|
-
<div class="pf-
|
|
1161
|
-
<div class="pf-
|
|
1162
|
-
<div class="pf-
|
|
1158
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
1159
|
+
<div class="pf-v6-c-page__main-body">
|
|
1160
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
1161
|
+
<div class="pf-v6-c-card">
|
|
1162
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1163
1163
|
</div>
|
|
1164
|
-
<div class="pf-
|
|
1165
|
-
<div class="pf-
|
|
1164
|
+
<div class="pf-v6-c-card">
|
|
1165
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1166
1166
|
</div>
|
|
1167
|
-
<div class="pf-
|
|
1168
|
-
<div class="pf-
|
|
1167
|
+
<div class="pf-v6-c-card">
|
|
1168
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1169
1169
|
</div>
|
|
1170
|
-
<div class="pf-
|
|
1171
|
-
<div class="pf-
|
|
1170
|
+
<div class="pf-v6-c-card">
|
|
1171
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1172
1172
|
</div>
|
|
1173
|
-
<div class="pf-
|
|
1174
|
-
<div class="pf-
|
|
1173
|
+
<div class="pf-v6-c-card">
|
|
1174
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1175
1175
|
</div>
|
|
1176
|
-
<div class="pf-
|
|
1177
|
-
<div class="pf-
|
|
1176
|
+
<div class="pf-v6-c-card">
|
|
1177
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1178
1178
|
</div>
|
|
1179
|
-
<div class="pf-
|
|
1180
|
-
<div class="pf-
|
|
1179
|
+
<div class="pf-v6-c-card">
|
|
1180
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1181
1181
|
</div>
|
|
1182
|
-
<div class="pf-
|
|
1183
|
-
<div class="pf-
|
|
1182
|
+
<div class="pf-v6-c-card">
|
|
1183
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1184
1184
|
</div>
|
|
1185
|
-
<div class="pf-
|
|
1186
|
-
<div class="pf-
|
|
1185
|
+
<div class="pf-v6-c-card">
|
|
1186
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1187
1187
|
</div>
|
|
1188
|
-
<div class="pf-
|
|
1189
|
-
<div class="pf-
|
|
1188
|
+
<div class="pf-v6-c-card">
|
|
1189
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1190
1190
|
</div>
|
|
1191
1191
|
</div>
|
|
1192
1192
|
</div>
|
|
@@ -1194,8 +1194,8 @@ wrapperTag: div
|
|
|
1194
1194
|
</main>
|
|
1195
1195
|
</div>
|
|
1196
1196
|
</div>
|
|
1197
|
-
<div class="pf-
|
|
1198
|
-
<div class="pf-
|
|
1197
|
+
<div class="pf-v6-c-drawer__panel">
|
|
1198
|
+
<div class="pf-v6-c-drawer__body">drawer panel</div>
|
|
1199
1199
|
</div>
|
|
1200
1200
|
</div>
|
|
1201
1201
|
</div>
|
|
@@ -1207,25 +1207,25 @@ wrapperTag: div
|
|
|
1207
1207
|
### Drawer with jump links
|
|
1208
1208
|
|
|
1209
1209
|
```html isFullscreen
|
|
1210
|
-
<div class="pf-
|
|
1211
|
-
<div class="pf-
|
|
1210
|
+
<div class="pf-v6-c-page" id="drawer-jump-links">
|
|
1211
|
+
<div class="pf-v6-c-skip-to-content">
|
|
1212
1212
|
<a
|
|
1213
|
-
class="pf-
|
|
1213
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1214
1214
|
href="#main-content-drawer-jump-links"
|
|
1215
1215
|
>Skip to content</a>
|
|
1216
1216
|
</div>
|
|
1217
|
-
<header class="pf-
|
|
1218
|
-
<span class="pf-
|
|
1217
|
+
<header class="pf-v6-c-masthead" id="drawer-jump-links-masthead">
|
|
1218
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
1219
1219
|
<button
|
|
1220
|
-
class="pf-
|
|
1220
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1221
1221
|
type="button"
|
|
1222
1222
|
aria-label="Global navigation"
|
|
1223
1223
|
>
|
|
1224
1224
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1225
1225
|
</button>
|
|
1226
1226
|
</span>
|
|
1227
|
-
<div class="pf-
|
|
1228
|
-
<a class="pf-
|
|
1227
|
+
<div class="pf-v6-c-masthead__main">
|
|
1228
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
1229
1229
|
<svg height="40px" viewBox="0 0 679 158">
|
|
1230
1230
|
<title>PF-HorizontalLogo-Color</title>
|
|
1231
1231
|
<defs>
|
|
@@ -1298,37 +1298,37 @@ wrapperTag: div
|
|
|
1298
1298
|
</svg>
|
|
1299
1299
|
</a>
|
|
1300
1300
|
</div>
|
|
1301
|
-
<div class="pf-
|
|
1301
|
+
<div class="pf-v6-c-masthead__content">
|
|
1302
1302
|
<div
|
|
1303
|
-
class="pf-
|
|
1303
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
1304
1304
|
id="drawer-jump-links-masthead-toolbar"
|
|
1305
1305
|
>
|
|
1306
|
-
<div class="pf-
|
|
1307
|
-
<div class="pf-
|
|
1308
|
-
<div class="pf-
|
|
1306
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1307
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1308
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1309
1309
|
<button
|
|
1310
|
-
class="pf-
|
|
1310
|
+
class="pf-v6-c-menu-toggle"
|
|
1311
1311
|
type="button"
|
|
1312
1312
|
aria-expanded="false"
|
|
1313
1313
|
>
|
|
1314
|
-
<span class="pf-
|
|
1315
|
-
<span class="pf-
|
|
1316
|
-
<span class="pf-
|
|
1314
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
1315
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1316
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1317
1317
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1318
1318
|
</span>
|
|
1319
1319
|
</span>
|
|
1320
1320
|
</button>
|
|
1321
1321
|
</div>
|
|
1322
1322
|
|
|
1323
|
-
<div class="pf-
|
|
1323
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1324
1324
|
<button
|
|
1325
|
-
class="pf-
|
|
1325
|
+
class="pf-v6-c-menu-toggle"
|
|
1326
1326
|
type="button"
|
|
1327
1327
|
aria-expanded="false"
|
|
1328
1328
|
>
|
|
1329
|
-
<span class="pf-
|
|
1330
|
-
<span class="pf-
|
|
1331
|
-
<span class="pf-
|
|
1329
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
1330
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1331
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1332
1332
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1333
1333
|
</span>
|
|
1334
1334
|
</span>
|
|
@@ -1336,56 +1336,56 @@ wrapperTag: div
|
|
|
1336
1336
|
</div>
|
|
1337
1337
|
|
|
1338
1338
|
<div
|
|
1339
|
-
class="pf-
|
|
1339
|
+
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"
|
|
1340
1340
|
>
|
|
1341
1341
|
<div
|
|
1342
|
-
class="pf-
|
|
1342
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1343
1343
|
>
|
|
1344
|
-
<div class="pf-
|
|
1344
|
+
<div class="pf-v6-c-toolbar__item">
|
|
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="Application launcher"
|
|
1350
1350
|
>
|
|
1351
|
-
<span class="pf-
|
|
1351
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1352
1352
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1353
1353
|
</span>
|
|
1354
1354
|
</button>
|
|
1355
1355
|
</div>
|
|
1356
|
-
<div class="pf-
|
|
1356
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1357
1357
|
<button
|
|
1358
|
-
class="pf-
|
|
1358
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1359
1359
|
type="button"
|
|
1360
1360
|
aria-expanded="false"
|
|
1361
1361
|
aria-label="Settings"
|
|
1362
1362
|
>
|
|
1363
|
-
<span class="pf-
|
|
1363
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1364
1364
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1365
1365
|
</span>
|
|
1366
1366
|
</button>
|
|
1367
1367
|
</div>
|
|
1368
|
-
<div class="pf-
|
|
1368
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1369
1369
|
<button
|
|
1370
|
-
class="pf-
|
|
1370
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1371
1371
|
type="button"
|
|
1372
1372
|
aria-expanded="false"
|
|
1373
1373
|
aria-label="Help"
|
|
1374
1374
|
>
|
|
1375
|
-
<span class="pf-
|
|
1375
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1376
1376
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1377
1377
|
</span>
|
|
1378
1378
|
</button>
|
|
1379
1379
|
</div>
|
|
1380
1380
|
</div>
|
|
1381
|
-
<div class="pf-
|
|
1381
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
1382
1382
|
<button
|
|
1383
|
-
class="pf-
|
|
1383
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1384
1384
|
type="button"
|
|
1385
1385
|
aria-expanded="false"
|
|
1386
1386
|
aria-label="Actions"
|
|
1387
1387
|
>
|
|
1388
|
-
<span class="pf-
|
|
1388
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1389
1389
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1390
1390
|
</span>
|
|
1391
1391
|
</button>
|
|
@@ -1396,114 +1396,114 @@ wrapperTag: div
|
|
|
1396
1396
|
</div>
|
|
1397
1397
|
</div>
|
|
1398
1398
|
</header>
|
|
1399
|
-
<div class="pf-
|
|
1400
|
-
<div class="pf-
|
|
1399
|
+
<div class="pf-v6-c-page__sidebar">
|
|
1400
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
1401
1401
|
<nav
|
|
1402
|
-
class="pf-
|
|
1402
|
+
class="pf-v6-c-nav"
|
|
1403
1403
|
id="drawer-jump-links-primary-nav"
|
|
1404
1404
|
aria-label="Global"
|
|
1405
1405
|
>
|
|
1406
|
-
<ul class="pf-
|
|
1407
|
-
<li class="pf-
|
|
1408
|
-
<a href="#" class="pf-
|
|
1406
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
1407
|
+
<li class="pf-v6-c-nav__item">
|
|
1408
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
1409
1409
|
</li>
|
|
1410
|
-
<li class="pf-
|
|
1410
|
+
<li class="pf-v6-c-nav__item">
|
|
1411
1411
|
<a
|
|
1412
1412
|
href="#"
|
|
1413
|
-
class="pf-
|
|
1413
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
1414
1414
|
aria-current="page"
|
|
1415
1415
|
>Policy</a>
|
|
1416
1416
|
</li>
|
|
1417
|
-
<li class="pf-
|
|
1418
|
-
<a href="#" class="pf-
|
|
1417
|
+
<li class="pf-v6-c-nav__item">
|
|
1418
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
1419
1419
|
</li>
|
|
1420
|
-
<li class="pf-
|
|
1421
|
-
<a href="#" class="pf-
|
|
1420
|
+
<li class="pf-v6-c-nav__item">
|
|
1421
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
1422
1422
|
</li>
|
|
1423
|
-
<li class="pf-
|
|
1424
|
-
<a href="#" class="pf-
|
|
1423
|
+
<li class="pf-v6-c-nav__item">
|
|
1424
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
1425
1425
|
</li>
|
|
1426
1426
|
</ul>
|
|
1427
1427
|
</nav>
|
|
1428
1428
|
</div>
|
|
1429
1429
|
</div>
|
|
1430
1430
|
<main
|
|
1431
|
-
class="pf-
|
|
1431
|
+
class="pf-v6-c-page__main"
|
|
1432
1432
|
tabindex="-1"
|
|
1433
1433
|
id="main-content-drawer-jump-links"
|
|
1434
1434
|
>
|
|
1435
|
-
<div class="pf-
|
|
1436
|
-
<div class="pf-
|
|
1435
|
+
<div class="pf-v6-c-drawer">
|
|
1436
|
+
<div class="pf-v6-c-drawer__main">
|
|
1437
1437
|
<div
|
|
1438
|
-
class="pf-
|
|
1438
|
+
class="pf-v6-c-drawer__content"
|
|
1439
1439
|
id="drawer-jump-links-drawer-scrollable-container"
|
|
1440
1440
|
>
|
|
1441
|
-
<div class="pf-
|
|
1442
|
-
<div class="pf-
|
|
1443
|
-
<div class="pf-
|
|
1444
|
-
<div class="pf-
|
|
1445
|
-
<section class="pf-
|
|
1441
|
+
<div class="pf-v6-c-drawer__body">
|
|
1442
|
+
<div class="pf-v6-c-sidebar">
|
|
1443
|
+
<div class="pf-v6-c-sidebar__main">
|
|
1444
|
+
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
1445
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1446
1446
|
<nav
|
|
1447
|
-
class="pf-
|
|
1447
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
1448
1448
|
>
|
|
1449
|
-
<div class="pf-
|
|
1450
|
-
<ul class="pf-
|
|
1451
|
-
<li class="pf-
|
|
1452
|
-
<span class="pf-
|
|
1449
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
1450
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
1451
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
1452
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1453
1453
|
<a
|
|
1454
|
-
class="pf-
|
|
1454
|
+
class="pf-v6-c-button pf-m-link"
|
|
1455
1455
|
href="#drawer-jump-links-jump-links-first"
|
|
1456
1456
|
>
|
|
1457
1457
|
<span
|
|
1458
|
-
class="pf-
|
|
1458
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1459
1459
|
>First section</span>
|
|
1460
1460
|
</a>
|
|
1461
1461
|
</span>
|
|
1462
1462
|
</li>
|
|
1463
|
-
<li class="pf-
|
|
1464
|
-
<span class="pf-
|
|
1463
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1464
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1465
1465
|
<a
|
|
1466
|
-
class="pf-
|
|
1466
|
+
class="pf-v6-c-button pf-m-link"
|
|
1467
1467
|
href="#drawer-jump-links-jump-links-second"
|
|
1468
1468
|
>
|
|
1469
1469
|
<span
|
|
1470
|
-
class="pf-
|
|
1470
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1471
1471
|
>Second section</span>
|
|
1472
1472
|
</a>
|
|
1473
1473
|
</span>
|
|
1474
1474
|
</li>
|
|
1475
|
-
<li class="pf-
|
|
1476
|
-
<span class="pf-
|
|
1475
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1476
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1477
1477
|
<a
|
|
1478
|
-
class="pf-
|
|
1478
|
+
class="pf-v6-c-button pf-m-link"
|
|
1479
1479
|
href="#drawer-jump-links-jump-links-third"
|
|
1480
1480
|
>
|
|
1481
1481
|
<span
|
|
1482
|
-
class="pf-
|
|
1482
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1483
1483
|
>Third section</span>
|
|
1484
1484
|
</a>
|
|
1485
1485
|
</span>
|
|
1486
1486
|
</li>
|
|
1487
|
-
<li class="pf-
|
|
1488
|
-
<span class="pf-
|
|
1487
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1488
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1489
1489
|
<a
|
|
1490
|
-
class="pf-
|
|
1490
|
+
class="pf-v6-c-button pf-m-link"
|
|
1491
1491
|
href="#drawer-jump-links-jump-links-fourth"
|
|
1492
1492
|
>
|
|
1493
1493
|
<span
|
|
1494
|
-
class="pf-
|
|
1494
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1495
1495
|
>Fourth section</span>
|
|
1496
1496
|
</a>
|
|
1497
1497
|
</span>
|
|
1498
1498
|
</li>
|
|
1499
|
-
<li class="pf-
|
|
1500
|
-
<span class="pf-
|
|
1499
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1500
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1501
1501
|
<a
|
|
1502
|
-
class="pf-
|
|
1502
|
+
class="pf-v6-c-button pf-m-link"
|
|
1503
1503
|
href="#drawer-jump-links-jump-links-fifth"
|
|
1504
1504
|
>
|
|
1505
1505
|
<span
|
|
1506
|
-
class="pf-
|
|
1506
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1507
1507
|
>Fifth section</span>
|
|
1508
1508
|
</a>
|
|
1509
1509
|
</span>
|
|
@@ -1512,9 +1512,9 @@ wrapperTag: div
|
|
|
1512
1512
|
</nav>
|
|
1513
1513
|
</section>
|
|
1514
1514
|
</div>
|
|
1515
|
-
<div class="pf-
|
|
1516
|
-
<section class="pf-
|
|
1517
|
-
<div class="pf-
|
|
1515
|
+
<div class="pf-v6-c-sidebar__content">
|
|
1516
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1517
|
+
<div class="pf-v6-c-content">
|
|
1518
1518
|
<p>
|
|
1519
1519
|
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
1520
1520
|
</p>
|
|
@@ -1544,13 +1544,13 @@ wrapperTag: div
|
|
|
1544
1544
|
</div>
|
|
1545
1545
|
</div>
|
|
1546
1546
|
</div>
|
|
1547
|
-
<div class="pf-
|
|
1548
|
-
<div class="pf-
|
|
1547
|
+
<div class="pf-v6-c-drawer__panel" hidden>
|
|
1548
|
+
<div class="pf-v6-c-drawer__head">
|
|
1549
1549
|
<span>Drawer panel header content</span>
|
|
1550
|
-
<div class="pf-
|
|
1551
|
-
<div class="pf-
|
|
1550
|
+
<div class="pf-v6-c-drawer__actions">
|
|
1551
|
+
<div class="pf-v6-c-drawer__close">
|
|
1552
1552
|
<button
|
|
1553
|
-
class="pf-
|
|
1553
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1554
1554
|
type="button"
|
|
1555
1555
|
aria-label="Close drawer panel"
|
|
1556
1556
|
>
|
|
@@ -1560,9 +1560,9 @@ wrapperTag: div
|
|
|
1560
1560
|
</div>
|
|
1561
1561
|
</div>
|
|
1562
1562
|
<div
|
|
1563
|
-
class="pf-
|
|
1563
|
+
class="pf-v6-c-drawer__description"
|
|
1564
1564
|
>This is a helpful description of the drawer panel.</div>
|
|
1565
|
-
<div class="pf-
|
|
1565
|
+
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
1566
1566
|
</div>
|
|
1567
1567
|
</div>
|
|
1568
1568
|
</div>
|
|
@@ -1574,25 +1574,25 @@ wrapperTag: div
|
|
|
1574
1574
|
### Expanded drawer with jump links
|
|
1575
1575
|
|
|
1576
1576
|
```html isFullscreen
|
|
1577
|
-
<div class="pf-
|
|
1578
|
-
<div class="pf-
|
|
1577
|
+
<div class="pf-v6-c-page" id="drawer-expanded-jump-links">
|
|
1578
|
+
<div class="pf-v6-c-skip-to-content">
|
|
1579
1579
|
<a
|
|
1580
|
-
class="pf-
|
|
1580
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1581
1581
|
href="#main-content-drawer-expanded-jump-links"
|
|
1582
1582
|
>Skip to content</a>
|
|
1583
1583
|
</div>
|
|
1584
|
-
<header class="pf-
|
|
1585
|
-
<span class="pf-
|
|
1584
|
+
<header class="pf-v6-c-masthead" id="drawer-expanded-jump-links-masthead">
|
|
1585
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
1586
1586
|
<button
|
|
1587
|
-
class="pf-
|
|
1587
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1588
1588
|
type="button"
|
|
1589
1589
|
aria-label="Global navigation"
|
|
1590
1590
|
>
|
|
1591
1591
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1592
1592
|
</button>
|
|
1593
1593
|
</span>
|
|
1594
|
-
<div class="pf-
|
|
1595
|
-
<a class="pf-
|
|
1594
|
+
<div class="pf-v6-c-masthead__main">
|
|
1595
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
1596
1596
|
<svg height="40px" viewBox="0 0 679 158">
|
|
1597
1597
|
<title>PF-HorizontalLogo-Color</title>
|
|
1598
1598
|
<defs>
|
|
@@ -1665,37 +1665,37 @@ wrapperTag: div
|
|
|
1665
1665
|
</svg>
|
|
1666
1666
|
</a>
|
|
1667
1667
|
</div>
|
|
1668
|
-
<div class="pf-
|
|
1668
|
+
<div class="pf-v6-c-masthead__content">
|
|
1669
1669
|
<div
|
|
1670
|
-
class="pf-
|
|
1670
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
1671
1671
|
id="drawer-expanded-jump-links-masthead-toolbar"
|
|
1672
1672
|
>
|
|
1673
|
-
<div class="pf-
|
|
1674
|
-
<div class="pf-
|
|
1675
|
-
<div class="pf-
|
|
1673
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1674
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1675
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1676
1676
|
<button
|
|
1677
|
-
class="pf-
|
|
1677
|
+
class="pf-v6-c-menu-toggle"
|
|
1678
1678
|
type="button"
|
|
1679
1679
|
aria-expanded="false"
|
|
1680
1680
|
>
|
|
1681
|
-
<span class="pf-
|
|
1682
|
-
<span class="pf-
|
|
1683
|
-
<span class="pf-
|
|
1681
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
1682
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1683
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1684
1684
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1685
1685
|
</span>
|
|
1686
1686
|
</span>
|
|
1687
1687
|
</button>
|
|
1688
1688
|
</div>
|
|
1689
1689
|
|
|
1690
|
-
<div class="pf-
|
|
1690
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1691
1691
|
<button
|
|
1692
|
-
class="pf-
|
|
1692
|
+
class="pf-v6-c-menu-toggle"
|
|
1693
1693
|
type="button"
|
|
1694
1694
|
aria-expanded="false"
|
|
1695
1695
|
>
|
|
1696
|
-
<span class="pf-
|
|
1697
|
-
<span class="pf-
|
|
1698
|
-
<span class="pf-
|
|
1696
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
1697
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1698
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1699
1699
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1700
1700
|
</span>
|
|
1701
1701
|
</span>
|
|
@@ -1703,56 +1703,56 @@ wrapperTag: div
|
|
|
1703
1703
|
</div>
|
|
1704
1704
|
|
|
1705
1705
|
<div
|
|
1706
|
-
class="pf-
|
|
1706
|
+
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"
|
|
1707
1707
|
>
|
|
1708
1708
|
<div
|
|
1709
|
-
class="pf-
|
|
1709
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1710
1710
|
>
|
|
1711
|
-
<div class="pf-
|
|
1711
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1712
1712
|
<button
|
|
1713
|
-
class="pf-
|
|
1713
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1714
1714
|
type="button"
|
|
1715
1715
|
aria-expanded="false"
|
|
1716
1716
|
aria-label="Application launcher"
|
|
1717
1717
|
>
|
|
1718
|
-
<span class="pf-
|
|
1718
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1719
1719
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1720
1720
|
</span>
|
|
1721
1721
|
</button>
|
|
1722
1722
|
</div>
|
|
1723
|
-
<div class="pf-
|
|
1723
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1724
1724
|
<button
|
|
1725
|
-
class="pf-
|
|
1725
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1726
1726
|
type="button"
|
|
1727
1727
|
aria-expanded="false"
|
|
1728
1728
|
aria-label="Settings"
|
|
1729
1729
|
>
|
|
1730
|
-
<span class="pf-
|
|
1730
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1731
1731
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1732
1732
|
</span>
|
|
1733
1733
|
</button>
|
|
1734
1734
|
</div>
|
|
1735
|
-
<div class="pf-
|
|
1735
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1736
1736
|
<button
|
|
1737
|
-
class="pf-
|
|
1737
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1738
1738
|
type="button"
|
|
1739
1739
|
aria-expanded="false"
|
|
1740
1740
|
aria-label="Help"
|
|
1741
1741
|
>
|
|
1742
|
-
<span class="pf-
|
|
1742
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1743
1743
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1744
1744
|
</span>
|
|
1745
1745
|
</button>
|
|
1746
1746
|
</div>
|
|
1747
1747
|
</div>
|
|
1748
|
-
<div class="pf-
|
|
1748
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
1749
1749
|
<button
|
|
1750
|
-
class="pf-
|
|
1750
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1751
1751
|
type="button"
|
|
1752
1752
|
aria-expanded="false"
|
|
1753
1753
|
aria-label="Actions"
|
|
1754
1754
|
>
|
|
1755
|
-
<span class="pf-
|
|
1755
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1756
1756
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1757
1757
|
</span>
|
|
1758
1758
|
</button>
|
|
@@ -1763,114 +1763,114 @@ wrapperTag: div
|
|
|
1763
1763
|
</div>
|
|
1764
1764
|
</div>
|
|
1765
1765
|
</header>
|
|
1766
|
-
<div class="pf-
|
|
1767
|
-
<div class="pf-
|
|
1766
|
+
<div class="pf-v6-c-page__sidebar">
|
|
1767
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
1768
1768
|
<nav
|
|
1769
|
-
class="pf-
|
|
1769
|
+
class="pf-v6-c-nav"
|
|
1770
1770
|
id="drawer-expanded-jump-links-primary-nav"
|
|
1771
1771
|
aria-label="Global"
|
|
1772
1772
|
>
|
|
1773
|
-
<ul class="pf-
|
|
1774
|
-
<li class="pf-
|
|
1775
|
-
<a href="#" class="pf-
|
|
1773
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
1774
|
+
<li class="pf-v6-c-nav__item">
|
|
1775
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
1776
1776
|
</li>
|
|
1777
|
-
<li class="pf-
|
|
1777
|
+
<li class="pf-v6-c-nav__item">
|
|
1778
1778
|
<a
|
|
1779
1779
|
href="#"
|
|
1780
|
-
class="pf-
|
|
1780
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
1781
1781
|
aria-current="page"
|
|
1782
1782
|
>Policy</a>
|
|
1783
1783
|
</li>
|
|
1784
|
-
<li class="pf-
|
|
1785
|
-
<a href="#" class="pf-
|
|
1784
|
+
<li class="pf-v6-c-nav__item">
|
|
1785
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
1786
1786
|
</li>
|
|
1787
|
-
<li class="pf-
|
|
1788
|
-
<a href="#" class="pf-
|
|
1787
|
+
<li class="pf-v6-c-nav__item">
|
|
1788
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
1789
1789
|
</li>
|
|
1790
|
-
<li class="pf-
|
|
1791
|
-
<a href="#" class="pf-
|
|
1790
|
+
<li class="pf-v6-c-nav__item">
|
|
1791
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
1792
1792
|
</li>
|
|
1793
1793
|
</ul>
|
|
1794
1794
|
</nav>
|
|
1795
1795
|
</div>
|
|
1796
1796
|
</div>
|
|
1797
1797
|
<main
|
|
1798
|
-
class="pf-
|
|
1798
|
+
class="pf-v6-c-page__main"
|
|
1799
1799
|
tabindex="-1"
|
|
1800
1800
|
id="main-content-drawer-expanded-jump-links"
|
|
1801
1801
|
>
|
|
1802
|
-
<div class="pf-
|
|
1803
|
-
<div class="pf-
|
|
1802
|
+
<div class="pf-v6-c-drawer pf-m-expanded">
|
|
1803
|
+
<div class="pf-v6-c-drawer__main">
|
|
1804
1804
|
<div
|
|
1805
|
-
class="pf-
|
|
1805
|
+
class="pf-v6-c-drawer__content"
|
|
1806
1806
|
id="drawer-expanded-jump-links-drawer-scrollable-container"
|
|
1807
1807
|
>
|
|
1808
|
-
<div class="pf-
|
|
1809
|
-
<div class="pf-
|
|
1810
|
-
<div class="pf-
|
|
1811
|
-
<div class="pf-
|
|
1812
|
-
<section class="pf-
|
|
1808
|
+
<div class="pf-v6-c-drawer__body">
|
|
1809
|
+
<div class="pf-v6-c-sidebar">
|
|
1810
|
+
<div class="pf-v6-c-sidebar__main">
|
|
1811
|
+
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
1812
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1813
1813
|
<nav
|
|
1814
|
-
class="pf-
|
|
1814
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
1815
1815
|
>
|
|
1816
|
-
<div class="pf-
|
|
1817
|
-
<ul class="pf-
|
|
1818
|
-
<li class="pf-
|
|
1819
|
-
<span class="pf-
|
|
1816
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
1817
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
1818
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
1819
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1820
1820
|
<a
|
|
1821
|
-
class="pf-
|
|
1821
|
+
class="pf-v6-c-button pf-m-link"
|
|
1822
1822
|
href="#drawer-expanded-jump-links-jump-links-first"
|
|
1823
1823
|
>
|
|
1824
1824
|
<span
|
|
1825
|
-
class="pf-
|
|
1825
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1826
1826
|
>First section</span>
|
|
1827
1827
|
</a>
|
|
1828
1828
|
</span>
|
|
1829
1829
|
</li>
|
|
1830
|
-
<li class="pf-
|
|
1831
|
-
<span class="pf-
|
|
1830
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1831
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1832
1832
|
<a
|
|
1833
|
-
class="pf-
|
|
1833
|
+
class="pf-v6-c-button pf-m-link"
|
|
1834
1834
|
href="#drawer-expanded-jump-links-jump-links-second"
|
|
1835
1835
|
>
|
|
1836
1836
|
<span
|
|
1837
|
-
class="pf-
|
|
1837
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1838
1838
|
>Second section</span>
|
|
1839
1839
|
</a>
|
|
1840
1840
|
</span>
|
|
1841
1841
|
</li>
|
|
1842
|
-
<li class="pf-
|
|
1843
|
-
<span class="pf-
|
|
1842
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1843
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1844
1844
|
<a
|
|
1845
|
-
class="pf-
|
|
1845
|
+
class="pf-v6-c-button pf-m-link"
|
|
1846
1846
|
href="#drawer-expanded-jump-links-jump-links-third"
|
|
1847
1847
|
>
|
|
1848
1848
|
<span
|
|
1849
|
-
class="pf-
|
|
1849
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1850
1850
|
>Third section</span>
|
|
1851
1851
|
</a>
|
|
1852
1852
|
</span>
|
|
1853
1853
|
</li>
|
|
1854
|
-
<li class="pf-
|
|
1855
|
-
<span class="pf-
|
|
1854
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1855
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1856
1856
|
<a
|
|
1857
|
-
class="pf-
|
|
1857
|
+
class="pf-v6-c-button pf-m-link"
|
|
1858
1858
|
href="#drawer-expanded-jump-links-jump-links-fourth"
|
|
1859
1859
|
>
|
|
1860
1860
|
<span
|
|
1861
|
-
class="pf-
|
|
1861
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1862
1862
|
>Fourth section</span>
|
|
1863
1863
|
</a>
|
|
1864
1864
|
</span>
|
|
1865
1865
|
</li>
|
|
1866
|
-
<li class="pf-
|
|
1867
|
-
<span class="pf-
|
|
1866
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1867
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1868
1868
|
<a
|
|
1869
|
-
class="pf-
|
|
1869
|
+
class="pf-v6-c-button pf-m-link"
|
|
1870
1870
|
href="#drawer-expanded-jump-links-jump-links-fifth"
|
|
1871
1871
|
>
|
|
1872
1872
|
<span
|
|
1873
|
-
class="pf-
|
|
1873
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1874
1874
|
>Fifth section</span>
|
|
1875
1875
|
</a>
|
|
1876
1876
|
</span>
|
|
@@ -1879,9 +1879,9 @@ wrapperTag: div
|
|
|
1879
1879
|
</nav>
|
|
1880
1880
|
</section>
|
|
1881
1881
|
</div>
|
|
1882
|
-
<div class="pf-
|
|
1883
|
-
<section class="pf-
|
|
1884
|
-
<div class="pf-
|
|
1882
|
+
<div class="pf-v6-c-sidebar__content">
|
|
1883
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1884
|
+
<div class="pf-v6-c-content">
|
|
1885
1885
|
<p>
|
|
1886
1886
|
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
1887
1887
|
</p>
|
|
@@ -1917,13 +1917,13 @@ wrapperTag: div
|
|
|
1917
1917
|
</div>
|
|
1918
1918
|
</div>
|
|
1919
1919
|
</div>
|
|
1920
|
-
<div class="pf-
|
|
1921
|
-
<div class="pf-
|
|
1920
|
+
<div class="pf-v6-c-drawer__panel">
|
|
1921
|
+
<div class="pf-v6-c-drawer__head">
|
|
1922
1922
|
<span>Drawer panel header content</span>
|
|
1923
|
-
<div class="pf-
|
|
1924
|
-
<div class="pf-
|
|
1923
|
+
<div class="pf-v6-c-drawer__actions">
|
|
1924
|
+
<div class="pf-v6-c-drawer__close">
|
|
1925
1925
|
<button
|
|
1926
|
-
class="pf-
|
|
1926
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1927
1927
|
type="button"
|
|
1928
1928
|
aria-label="Close drawer panel"
|
|
1929
1929
|
>
|
|
@@ -1933,9 +1933,9 @@ wrapperTag: div
|
|
|
1933
1933
|
</div>
|
|
1934
1934
|
</div>
|
|
1935
1935
|
<div
|
|
1936
|
-
class="pf-
|
|
1936
|
+
class="pf-v6-c-drawer__description"
|
|
1937
1937
|
>This is a helpful description of the drawer panel.</div>
|
|
1938
|
-
<div class="pf-
|
|
1938
|
+
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
1939
1939
|
</div>
|
|
1940
1940
|
</div>
|
|
1941
1941
|
</div>
|