@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
|
@@ -7,25 +7,25 @@ wrapperTag: div
|
|
|
7
7
|
### Basic
|
|
8
8
|
|
|
9
9
|
```html isFullscreen
|
|
10
|
-
<div class="pf-
|
|
11
|
-
<div class="pf-
|
|
10
|
+
<div class="pf-v6-c-page" id="page-demo-basic">
|
|
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-page-demo-basic"
|
|
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="page-demo-basic-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="page-demo-basic-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,71 +196,71 @@ 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="page-demo-basic-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
230
|
<main
|
|
231
|
-
class="pf-
|
|
231
|
+
class="pf-v6-c-page__main"
|
|
232
232
|
tabindex="-1"
|
|
233
233
|
id="main-content-page-demo-basic"
|
|
234
234
|
>
|
|
235
|
-
<section class="pf-
|
|
236
|
-
<div class="pf-
|
|
237
|
-
<nav class="pf-
|
|
238
|
-
<ol class="pf-
|
|
239
|
-
<li class="pf-
|
|
240
|
-
<a href="#" class="pf-
|
|
235
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
236
|
+
<div class="pf-v6-c-page__main-body">
|
|
237
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
238
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
239
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
240
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
241
241
|
</li>
|
|
242
|
-
<li class="pf-
|
|
243
|
-
<span class="pf-
|
|
242
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
243
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
244
244
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
245
245
|
</span>
|
|
246
246
|
|
|
247
|
-
<a href="#" class="pf-
|
|
247
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
248
248
|
</li>
|
|
249
|
-
<li class="pf-
|
|
250
|
-
<span class="pf-
|
|
249
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
250
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
251
251
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
252
252
|
</span>
|
|
253
253
|
|
|
254
|
-
<a href="#" class="pf-
|
|
254
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
255
255
|
</li>
|
|
256
|
-
<li class="pf-
|
|
257
|
-
<span class="pf-
|
|
256
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
257
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
258
258
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
259
259
|
</span>
|
|
260
260
|
|
|
261
261
|
<a
|
|
262
262
|
href="#"
|
|
263
|
-
class="pf-
|
|
263
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
264
264
|
aria-current="page"
|
|
265
265
|
>Section landing</a>
|
|
266
266
|
</li>
|
|
@@ -268,46 +268,46 @@ wrapperTag: div
|
|
|
268
268
|
</nav>
|
|
269
269
|
</div>
|
|
270
270
|
</section>
|
|
271
|
-
<section class="pf-
|
|
272
|
-
<div class="pf-
|
|
273
|
-
<div class="pf-
|
|
271
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
272
|
+
<div class="pf-v6-c-page__main-body">
|
|
273
|
+
<div class="pf-v6-c-content">
|
|
274
274
|
<h1>Main title</h1>
|
|
275
275
|
<p>This is a full page demo.</p>
|
|
276
276
|
</div>
|
|
277
277
|
</div>
|
|
278
278
|
</section>
|
|
279
|
-
<section class="pf-
|
|
280
|
-
<div class="pf-
|
|
281
|
-
<div class="pf-
|
|
282
|
-
<div class="pf-
|
|
283
|
-
<div class="pf-
|
|
279
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
280
|
+
<div class="pf-v6-c-page__main-body">
|
|
281
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
282
|
+
<div class="pf-v6-c-card">
|
|
283
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
284
284
|
</div>
|
|
285
|
-
<div class="pf-
|
|
286
|
-
<div class="pf-
|
|
285
|
+
<div class="pf-v6-c-card">
|
|
286
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
287
287
|
</div>
|
|
288
|
-
<div class="pf-
|
|
289
|
-
<div class="pf-
|
|
288
|
+
<div class="pf-v6-c-card">
|
|
289
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
290
290
|
</div>
|
|
291
|
-
<div class="pf-
|
|
292
|
-
<div class="pf-
|
|
291
|
+
<div class="pf-v6-c-card">
|
|
292
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
293
293
|
</div>
|
|
294
|
-
<div class="pf-
|
|
295
|
-
<div class="pf-
|
|
294
|
+
<div class="pf-v6-c-card">
|
|
295
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
296
296
|
</div>
|
|
297
|
-
<div class="pf-
|
|
298
|
-
<div class="pf-
|
|
297
|
+
<div class="pf-v6-c-card">
|
|
298
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
299
299
|
</div>
|
|
300
|
-
<div class="pf-
|
|
301
|
-
<div class="pf-
|
|
300
|
+
<div class="pf-v6-c-card">
|
|
301
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
302
302
|
</div>
|
|
303
|
-
<div class="pf-
|
|
304
|
-
<div class="pf-
|
|
303
|
+
<div class="pf-v6-c-card">
|
|
304
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
305
305
|
</div>
|
|
306
|
-
<div class="pf-
|
|
307
|
-
<div class="pf-
|
|
306
|
+
<div class="pf-v6-c-card">
|
|
307
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
308
308
|
</div>
|
|
309
|
-
<div class="pf-
|
|
310
|
-
<div class="pf-
|
|
309
|
+
<div class="pf-v6-c-card">
|
|
310
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
311
311
|
</div>
|
|
312
312
|
</div>
|
|
313
313
|
</div>
|
|
@@ -320,28 +320,28 @@ wrapperTag: div
|
|
|
320
320
|
### Multiple sidebar body elements
|
|
321
321
|
|
|
322
322
|
```html isFullscreen
|
|
323
|
-
<div class="pf-
|
|
324
|
-
<div class="pf-
|
|
323
|
+
<div class="pf-v6-c-page" id="multiple-sidebar-body-elements-demo">
|
|
324
|
+
<div class="pf-v6-c-skip-to-content">
|
|
325
325
|
<a
|
|
326
|
-
class="pf-
|
|
326
|
+
class="pf-v6-c-button pf-m-primary"
|
|
327
327
|
href="#main-content-multiple-sidebar-body-elements-demo"
|
|
328
328
|
>Skip to content</a>
|
|
329
329
|
</div>
|
|
330
330
|
<header
|
|
331
|
-
class="pf-
|
|
331
|
+
class="pf-v6-c-masthead"
|
|
332
332
|
id="multiple-sidebar-body-elements-demo-masthead"
|
|
333
333
|
>
|
|
334
|
-
<span class="pf-
|
|
334
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
335
335
|
<button
|
|
336
|
-
class="pf-
|
|
336
|
+
class="pf-v6-c-button pf-m-plain"
|
|
337
337
|
type="button"
|
|
338
338
|
aria-label="Global navigation"
|
|
339
339
|
>
|
|
340
340
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
341
341
|
</button>
|
|
342
342
|
</span>
|
|
343
|
-
<div class="pf-
|
|
344
|
-
<a class="pf-
|
|
343
|
+
<div class="pf-v6-c-masthead__main">
|
|
344
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
345
345
|
<svg height="40px" viewBox="0 0 679 158">
|
|
346
346
|
<title>PF-HorizontalLogo-Color</title>
|
|
347
347
|
<defs>
|
|
@@ -414,37 +414,37 @@ wrapperTag: div
|
|
|
414
414
|
</svg>
|
|
415
415
|
</a>
|
|
416
416
|
</div>
|
|
417
|
-
<div class="pf-
|
|
417
|
+
<div class="pf-v6-c-masthead__content">
|
|
418
418
|
<div
|
|
419
|
-
class="pf-
|
|
419
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
420
420
|
id="multiple-sidebar-body-elements-demo-masthead-toolbar"
|
|
421
421
|
>
|
|
422
|
-
<div class="pf-
|
|
423
|
-
<div class="pf-
|
|
424
|
-
<div class="pf-
|
|
422
|
+
<div class="pf-v6-c-toolbar__content">
|
|
423
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
424
|
+
<div class="pf-v6-c-toolbar__item">
|
|
425
425
|
<button
|
|
426
|
-
class="pf-
|
|
426
|
+
class="pf-v6-c-menu-toggle"
|
|
427
427
|
type="button"
|
|
428
428
|
aria-expanded="false"
|
|
429
429
|
>
|
|
430
|
-
<span class="pf-
|
|
431
|
-
<span class="pf-
|
|
432
|
-
<span class="pf-
|
|
430
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
431
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
432
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
433
433
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
434
434
|
</span>
|
|
435
435
|
</span>
|
|
436
436
|
</button>
|
|
437
437
|
</div>
|
|
438
438
|
|
|
439
|
-
<div class="pf-
|
|
439
|
+
<div class="pf-v6-c-toolbar__item">
|
|
440
440
|
<button
|
|
441
|
-
class="pf-
|
|
441
|
+
class="pf-v6-c-menu-toggle"
|
|
442
442
|
type="button"
|
|
443
443
|
aria-expanded="false"
|
|
444
444
|
>
|
|
445
|
-
<span class="pf-
|
|
446
|
-
<span class="pf-
|
|
447
|
-
<span class="pf-
|
|
445
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
446
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
447
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
448
448
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
449
449
|
</span>
|
|
450
450
|
</span>
|
|
@@ -452,56 +452,56 @@ wrapperTag: div
|
|
|
452
452
|
</div>
|
|
453
453
|
|
|
454
454
|
<div
|
|
455
|
-
class="pf-
|
|
455
|
+
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"
|
|
456
456
|
>
|
|
457
457
|
<div
|
|
458
|
-
class="pf-
|
|
458
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
459
459
|
>
|
|
460
|
-
<div class="pf-
|
|
460
|
+
<div class="pf-v6-c-toolbar__item">
|
|
461
461
|
<button
|
|
462
|
-
class="pf-
|
|
462
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
463
463
|
type="button"
|
|
464
464
|
aria-expanded="false"
|
|
465
465
|
aria-label="Application launcher"
|
|
466
466
|
>
|
|
467
|
-
<span class="pf-
|
|
467
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
468
468
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
469
469
|
</span>
|
|
470
470
|
</button>
|
|
471
471
|
</div>
|
|
472
|
-
<div class="pf-
|
|
472
|
+
<div class="pf-v6-c-toolbar__item">
|
|
473
473
|
<button
|
|
474
|
-
class="pf-
|
|
474
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
475
475
|
type="button"
|
|
476
476
|
aria-expanded="false"
|
|
477
477
|
aria-label="Settings"
|
|
478
478
|
>
|
|
479
|
-
<span class="pf-
|
|
479
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
480
480
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
481
481
|
</span>
|
|
482
482
|
</button>
|
|
483
483
|
</div>
|
|
484
|
-
<div class="pf-
|
|
484
|
+
<div class="pf-v6-c-toolbar__item">
|
|
485
485
|
<button
|
|
486
|
-
class="pf-
|
|
486
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
487
487
|
type="button"
|
|
488
488
|
aria-expanded="false"
|
|
489
489
|
aria-label="Help"
|
|
490
490
|
>
|
|
491
|
-
<span class="pf-
|
|
491
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
492
492
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
493
493
|
</span>
|
|
494
494
|
</button>
|
|
495
495
|
</div>
|
|
496
496
|
</div>
|
|
497
|
-
<div class="pf-
|
|
497
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
498
498
|
<button
|
|
499
|
-
class="pf-
|
|
499
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
500
500
|
type="button"
|
|
501
501
|
aria-expanded="false"
|
|
502
502
|
aria-label="Actions"
|
|
503
503
|
>
|
|
504
|
-
<span class="pf-
|
|
504
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
505
505
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
506
506
|
</span>
|
|
507
507
|
</button>
|
|
@@ -512,86 +512,86 @@ wrapperTag: div
|
|
|
512
512
|
</div>
|
|
513
513
|
</div>
|
|
514
514
|
</header>
|
|
515
|
-
<div class="pf-
|
|
516
|
-
<div class="pf-
|
|
517
|
-
<div class="pf-
|
|
515
|
+
<div class="pf-v6-c-page__sidebar pf-m-expanded">
|
|
516
|
+
<div class="pf-v6-c-page__sidebar-body pf-m-page-insets">
|
|
517
|
+
<div class="pf-v6-c-content">
|
|
518
518
|
<p>Custom sidebar content</p>
|
|
519
519
|
</div>
|
|
520
520
|
</div>
|
|
521
|
-
<div class="pf-
|
|
521
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
522
522
|
<nav
|
|
523
|
-
class="pf-
|
|
523
|
+
class="pf-v6-c-nav"
|
|
524
524
|
id="multiple-sidebar-body-elements-demo-primary-nav"
|
|
525
525
|
aria-label="Global"
|
|
526
526
|
>
|
|
527
|
-
<ul class="pf-
|
|
528
|
-
<li class="pf-
|
|
529
|
-
<a href="#" class="pf-
|
|
527
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
528
|
+
<li class="pf-v6-c-nav__item">
|
|
529
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
530
530
|
</li>
|
|
531
|
-
<li class="pf-
|
|
531
|
+
<li class="pf-v6-c-nav__item">
|
|
532
532
|
<a
|
|
533
533
|
href="#"
|
|
534
|
-
class="pf-
|
|
534
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
535
535
|
aria-current="page"
|
|
536
536
|
>Policy</a>
|
|
537
537
|
</li>
|
|
538
|
-
<li class="pf-
|
|
539
|
-
<a href="#" class="pf-
|
|
538
|
+
<li class="pf-v6-c-nav__item">
|
|
539
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
540
540
|
</li>
|
|
541
|
-
<li class="pf-
|
|
542
|
-
<a href="#" class="pf-
|
|
541
|
+
<li class="pf-v6-c-nav__item">
|
|
542
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
543
543
|
</li>
|
|
544
|
-
<li class="pf-
|
|
545
|
-
<a href="#" class="pf-
|
|
544
|
+
<li class="pf-v6-c-nav__item">
|
|
545
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
546
546
|
</li>
|
|
547
547
|
</ul>
|
|
548
548
|
</nav>
|
|
549
549
|
</div>
|
|
550
|
-
<div class="pf-
|
|
551
|
-
<div class="pf-
|
|
550
|
+
<div class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets">
|
|
551
|
+
<div class="pf-v6-c-content">
|
|
552
552
|
<p>Custom sidebar content</p>
|
|
553
553
|
</div>
|
|
554
554
|
</div>
|
|
555
|
-
<div class="pf-
|
|
556
|
-
<div class="pf-
|
|
555
|
+
<div class="pf-v6-c-page__sidebar-body pf-m-no-fill pf-m-page-insets">
|
|
556
|
+
<div class="pf-v6-c-content">
|
|
557
557
|
<p>© Copyright</p>
|
|
558
558
|
</div>
|
|
559
559
|
</div>
|
|
560
560
|
</div>
|
|
561
561
|
<main
|
|
562
|
-
class="pf-
|
|
562
|
+
class="pf-v6-c-page__main"
|
|
563
563
|
tabindex="-1"
|
|
564
564
|
id="main-content-multiple-sidebar-body-elements-demo"
|
|
565
565
|
>
|
|
566
|
-
<section class="pf-
|
|
567
|
-
<div class="pf-
|
|
568
|
-
<nav class="pf-
|
|
569
|
-
<ol class="pf-
|
|
570
|
-
<li class="pf-
|
|
571
|
-
<a href="#" class="pf-
|
|
566
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
567
|
+
<div class="pf-v6-c-page__main-body">
|
|
568
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
569
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
570
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
571
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
572
572
|
</li>
|
|
573
|
-
<li class="pf-
|
|
574
|
-
<span class="pf-
|
|
573
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
574
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
575
575
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
576
576
|
</span>
|
|
577
577
|
|
|
578
|
-
<a href="#" class="pf-
|
|
578
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
579
579
|
</li>
|
|
580
|
-
<li class="pf-
|
|
581
|
-
<span class="pf-
|
|
580
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
581
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
582
582
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
583
583
|
</span>
|
|
584
584
|
|
|
585
|
-
<a href="#" class="pf-
|
|
585
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
586
586
|
</li>
|
|
587
|
-
<li class="pf-
|
|
588
|
-
<span class="pf-
|
|
587
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
588
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
589
589
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
590
590
|
</span>
|
|
591
591
|
|
|
592
592
|
<a
|
|
593
593
|
href="#"
|
|
594
|
-
class="pf-
|
|
594
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
595
595
|
aria-current="page"
|
|
596
596
|
>Section landing</a>
|
|
597
597
|
</li>
|
|
@@ -599,46 +599,46 @@ wrapperTag: div
|
|
|
599
599
|
</nav>
|
|
600
600
|
</div>
|
|
601
601
|
</section>
|
|
602
|
-
<section class="pf-
|
|
603
|
-
<div class="pf-
|
|
604
|
-
<div class="pf-
|
|
602
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
603
|
+
<div class="pf-v6-c-page__main-body">
|
|
604
|
+
<div class="pf-v6-c-content">
|
|
605
605
|
<h1>Main title</h1>
|
|
606
606
|
<p>This is a full page demo.</p>
|
|
607
607
|
</div>
|
|
608
608
|
</div>
|
|
609
609
|
</section>
|
|
610
|
-
<section class="pf-
|
|
611
|
-
<div class="pf-
|
|
612
|
-
<div class="pf-
|
|
613
|
-
<div class="pf-
|
|
614
|
-
<div class="pf-
|
|
610
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
611
|
+
<div class="pf-v6-c-page__main-body">
|
|
612
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
613
|
+
<div class="pf-v6-c-card">
|
|
614
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
615
615
|
</div>
|
|
616
|
-
<div class="pf-
|
|
617
|
-
<div class="pf-
|
|
616
|
+
<div class="pf-v6-c-card">
|
|
617
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
618
618
|
</div>
|
|
619
|
-
<div class="pf-
|
|
620
|
-
<div class="pf-
|
|
619
|
+
<div class="pf-v6-c-card">
|
|
620
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
621
621
|
</div>
|
|
622
|
-
<div class="pf-
|
|
623
|
-
<div class="pf-
|
|
622
|
+
<div class="pf-v6-c-card">
|
|
623
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
624
624
|
</div>
|
|
625
|
-
<div class="pf-
|
|
626
|
-
<div class="pf-
|
|
625
|
+
<div class="pf-v6-c-card">
|
|
626
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
627
627
|
</div>
|
|
628
|
-
<div class="pf-
|
|
629
|
-
<div class="pf-
|
|
628
|
+
<div class="pf-v6-c-card">
|
|
629
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
630
630
|
</div>
|
|
631
|
-
<div class="pf-
|
|
632
|
-
<div class="pf-
|
|
631
|
+
<div class="pf-v6-c-card">
|
|
632
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
633
633
|
</div>
|
|
634
|
-
<div class="pf-
|
|
635
|
-
<div class="pf-
|
|
634
|
+
<div class="pf-v6-c-card">
|
|
635
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
636
636
|
</div>
|
|
637
|
-
<div class="pf-
|
|
638
|
-
<div class="pf-
|
|
637
|
+
<div class="pf-v6-c-card">
|
|
638
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
639
639
|
</div>
|
|
640
|
-
<div class="pf-
|
|
641
|
-
<div class="pf-
|
|
640
|
+
<div class="pf-v6-c-card">
|
|
641
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
642
642
|
</div>
|
|
643
643
|
</div>
|
|
644
644
|
</div>
|
|
@@ -651,28 +651,28 @@ wrapperTag: div
|
|
|
651
651
|
### Sticky horizontal subnav
|
|
652
652
|
|
|
653
653
|
```html isFullscreen
|
|
654
|
-
<div class="pf-
|
|
655
|
-
<div class="pf-
|
|
654
|
+
<div class="pf-v6-c-page" id="page-demo-sticky-top-horizontal-subnav">
|
|
655
|
+
<div class="pf-v6-c-skip-to-content">
|
|
656
656
|
<a
|
|
657
|
-
class="pf-
|
|
657
|
+
class="pf-v6-c-button pf-m-primary"
|
|
658
658
|
href="#main-content-page-demo-sticky-top-horizontal-subnav"
|
|
659
659
|
>Skip to content</a>
|
|
660
660
|
</div>
|
|
661
661
|
<header
|
|
662
|
-
class="pf-
|
|
662
|
+
class="pf-v6-c-masthead"
|
|
663
663
|
id="page-demo-sticky-top-horizontal-subnav-masthead"
|
|
664
664
|
>
|
|
665
|
-
<span class="pf-
|
|
665
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
666
666
|
<button
|
|
667
|
-
class="pf-
|
|
667
|
+
class="pf-v6-c-button pf-m-plain"
|
|
668
668
|
type="button"
|
|
669
669
|
aria-label="Global navigation"
|
|
670
670
|
>
|
|
671
671
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
672
672
|
</button>
|
|
673
673
|
</span>
|
|
674
|
-
<div class="pf-
|
|
675
|
-
<a class="pf-
|
|
674
|
+
<div class="pf-v6-c-masthead__main">
|
|
675
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
676
676
|
<svg height="40px" viewBox="0 0 679 158">
|
|
677
677
|
<title>PF-HorizontalLogo-Color</title>
|
|
678
678
|
<defs>
|
|
@@ -745,37 +745,37 @@ wrapperTag: div
|
|
|
745
745
|
</svg>
|
|
746
746
|
</a>
|
|
747
747
|
</div>
|
|
748
|
-
<div class="pf-
|
|
748
|
+
<div class="pf-v6-c-masthead__content">
|
|
749
749
|
<div
|
|
750
|
-
class="pf-
|
|
750
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
751
751
|
id="page-demo-sticky-top-horizontal-subnav-masthead-toolbar"
|
|
752
752
|
>
|
|
753
|
-
<div class="pf-
|
|
754
|
-
<div class="pf-
|
|
755
|
-
<div class="pf-
|
|
753
|
+
<div class="pf-v6-c-toolbar__content">
|
|
754
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
755
|
+
<div class="pf-v6-c-toolbar__item">
|
|
756
756
|
<button
|
|
757
|
-
class="pf-
|
|
757
|
+
class="pf-v6-c-menu-toggle"
|
|
758
758
|
type="button"
|
|
759
759
|
aria-expanded="false"
|
|
760
760
|
>
|
|
761
|
-
<span class="pf-
|
|
762
|
-
<span class="pf-
|
|
763
|
-
<span class="pf-
|
|
761
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
762
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
763
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
764
764
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
765
765
|
</span>
|
|
766
766
|
</span>
|
|
767
767
|
</button>
|
|
768
768
|
</div>
|
|
769
769
|
|
|
770
|
-
<div class="pf-
|
|
770
|
+
<div class="pf-v6-c-toolbar__item">
|
|
771
771
|
<button
|
|
772
|
-
class="pf-
|
|
772
|
+
class="pf-v6-c-menu-toggle"
|
|
773
773
|
type="button"
|
|
774
774
|
aria-expanded="false"
|
|
775
775
|
>
|
|
776
|
-
<span class="pf-
|
|
777
|
-
<span class="pf-
|
|
778
|
-
<span class="pf-
|
|
776
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
777
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
778
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
779
779
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
780
780
|
</span>
|
|
781
781
|
</span>
|
|
@@ -783,56 +783,56 @@ wrapperTag: div
|
|
|
783
783
|
</div>
|
|
784
784
|
|
|
785
785
|
<div
|
|
786
|
-
class="pf-
|
|
786
|
+
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"
|
|
787
787
|
>
|
|
788
788
|
<div
|
|
789
|
-
class="pf-
|
|
789
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
790
790
|
>
|
|
791
|
-
<div class="pf-
|
|
791
|
+
<div class="pf-v6-c-toolbar__item">
|
|
792
792
|
<button
|
|
793
|
-
class="pf-
|
|
793
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
794
794
|
type="button"
|
|
795
795
|
aria-expanded="false"
|
|
796
796
|
aria-label="Application launcher"
|
|
797
797
|
>
|
|
798
|
-
<span class="pf-
|
|
798
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
799
799
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
800
800
|
</span>
|
|
801
801
|
</button>
|
|
802
802
|
</div>
|
|
803
|
-
<div class="pf-
|
|
803
|
+
<div class="pf-v6-c-toolbar__item">
|
|
804
804
|
<button
|
|
805
|
-
class="pf-
|
|
805
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
806
806
|
type="button"
|
|
807
807
|
aria-expanded="false"
|
|
808
808
|
aria-label="Settings"
|
|
809
809
|
>
|
|
810
|
-
<span class="pf-
|
|
810
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
811
811
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
812
812
|
</span>
|
|
813
813
|
</button>
|
|
814
814
|
</div>
|
|
815
|
-
<div class="pf-
|
|
815
|
+
<div class="pf-v6-c-toolbar__item">
|
|
816
816
|
<button
|
|
817
|
-
class="pf-
|
|
817
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
818
818
|
type="button"
|
|
819
819
|
aria-expanded="false"
|
|
820
820
|
aria-label="Help"
|
|
821
821
|
>
|
|
822
|
-
<span class="pf-
|
|
822
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
823
823
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
824
824
|
</span>
|
|
825
825
|
</button>
|
|
826
826
|
</div>
|
|
827
827
|
</div>
|
|
828
|
-
<div class="pf-
|
|
828
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
829
829
|
<button
|
|
830
|
-
class="pf-
|
|
830
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
831
831
|
type="button"
|
|
832
832
|
aria-expanded="false"
|
|
833
833
|
aria-label="Actions"
|
|
834
834
|
>
|
|
835
|
-
<span class="pf-
|
|
835
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
836
836
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
837
837
|
</span>
|
|
838
838
|
</button>
|
|
@@ -843,87 +843,87 @@ wrapperTag: div
|
|
|
843
843
|
</div>
|
|
844
844
|
</div>
|
|
845
845
|
</header>
|
|
846
|
-
<div class="pf-
|
|
847
|
-
<div class="pf-
|
|
846
|
+
<div class="pf-v6-c-page__sidebar">
|
|
847
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
848
848
|
<nav
|
|
849
|
-
class="pf-
|
|
849
|
+
class="pf-v6-c-nav"
|
|
850
850
|
id="page-demo-sticky-top-horizontal-subnav-primary-nav"
|
|
851
851
|
aria-label="Global"
|
|
852
852
|
>
|
|
853
|
-
<ul class="pf-
|
|
854
|
-
<li class="pf-
|
|
855
|
-
<a href="#" class="pf-
|
|
853
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
854
|
+
<li class="pf-v6-c-nav__item">
|
|
855
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
856
856
|
</li>
|
|
857
|
-
<li class="pf-
|
|
857
|
+
<li class="pf-v6-c-nav__item">
|
|
858
858
|
<a
|
|
859
859
|
href="#"
|
|
860
|
-
class="pf-
|
|
860
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
861
861
|
aria-current="page"
|
|
862
862
|
>Policy</a>
|
|
863
863
|
</li>
|
|
864
|
-
<li class="pf-
|
|
865
|
-
<a href="#" class="pf-
|
|
864
|
+
<li class="pf-v6-c-nav__item">
|
|
865
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
866
866
|
</li>
|
|
867
|
-
<li class="pf-
|
|
868
|
-
<a href="#" class="pf-
|
|
867
|
+
<li class="pf-v6-c-nav__item">
|
|
868
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
869
869
|
</li>
|
|
870
|
-
<li class="pf-
|
|
871
|
-
<a href="#" class="pf-
|
|
870
|
+
<li class="pf-v6-c-nav__item">
|
|
871
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
872
872
|
</li>
|
|
873
873
|
</ul>
|
|
874
874
|
</nav>
|
|
875
875
|
</div>
|
|
876
876
|
</div>
|
|
877
877
|
<main
|
|
878
|
-
class="pf-
|
|
878
|
+
class="pf-v6-c-page__main"
|
|
879
879
|
tabindex="-1"
|
|
880
880
|
id="main-content-page-demo-sticky-top-horizontal-subnav"
|
|
881
881
|
>
|
|
882
|
-
<section class="pf-
|
|
883
|
-
<div class="pf-
|
|
882
|
+
<section class="pf-v6-c-page__main-nav pf-m-limit-width pf-m-sticky-top">
|
|
883
|
+
<div class="pf-v6-c-page__main-body">
|
|
884
884
|
<nav
|
|
885
|
-
class="pf-
|
|
885
|
+
class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
|
|
886
886
|
aria-label="Local"
|
|
887
887
|
>
|
|
888
|
-
<div class="pf-
|
|
888
|
+
<div class="pf-v6-c-nav__scroll-button">
|
|
889
889
|
<button
|
|
890
|
-
class="pf-
|
|
890
|
+
class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
|
|
891
891
|
type="button"
|
|
892
892
|
aria-label="Scroll start"
|
|
893
893
|
>
|
|
894
|
-
<span class="pf-
|
|
894
|
+
<span class="pf-v6-c-button__icon">
|
|
895
895
|
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
896
896
|
</span>
|
|
897
897
|
</button>
|
|
898
898
|
</div>
|
|
899
|
-
<ul class="pf-
|
|
900
|
-
<li class="pf-
|
|
899
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
900
|
+
<li class="pf-v6-c-nav__item">
|
|
901
901
|
<a
|
|
902
902
|
href="#"
|
|
903
|
-
class="pf-
|
|
903
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
904
904
|
aria-current="page"
|
|
905
905
|
>Horizontal subnav item 1</a>
|
|
906
906
|
</li>
|
|
907
|
-
<li class="pf-
|
|
908
|
-
<a href="#" class="pf-
|
|
907
|
+
<li class="pf-v6-c-nav__item">
|
|
908
|
+
<a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
|
|
909
909
|
</li>
|
|
910
|
-
<li class="pf-
|
|
911
|
-
<a href="#" class="pf-
|
|
910
|
+
<li class="pf-v6-c-nav__item">
|
|
911
|
+
<a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 3</a>
|
|
912
912
|
</li>
|
|
913
|
-
<li class="pf-
|
|
914
|
-
<a href="#" class="pf-
|
|
913
|
+
<li class="pf-v6-c-nav__item">
|
|
914
|
+
<a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 4</a>
|
|
915
915
|
</li>
|
|
916
|
-
<li class="pf-
|
|
917
|
-
<a href="#" class="pf-
|
|
916
|
+
<li class="pf-v6-c-nav__item">
|
|
917
|
+
<a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 5</a>
|
|
918
918
|
</li>
|
|
919
919
|
</ul>
|
|
920
|
-
<div class="pf-
|
|
920
|
+
<div class="pf-v6-c-nav__scroll-button">
|
|
921
921
|
<button
|
|
922
|
-
class="pf-
|
|
922
|
+
class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
|
|
923
923
|
type="button"
|
|
924
924
|
aria-label="Scroll end"
|
|
925
925
|
>
|
|
926
|
-
<span class="pf-
|
|
926
|
+
<span class="pf-v6-c-button__icon">
|
|
927
927
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
928
928
|
</span>
|
|
929
929
|
</button>
|
|
@@ -931,35 +931,35 @@ wrapperTag: div
|
|
|
931
931
|
</nav>
|
|
932
932
|
</div>
|
|
933
933
|
</section>
|
|
934
|
-
<section class="pf-
|
|
935
|
-
<div class="pf-
|
|
936
|
-
<nav class="pf-
|
|
937
|
-
<ol class="pf-
|
|
938
|
-
<li class="pf-
|
|
939
|
-
<a href="#" class="pf-
|
|
934
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
935
|
+
<div class="pf-v6-c-page__main-body">
|
|
936
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
937
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
938
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
939
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
940
940
|
</li>
|
|
941
|
-
<li class="pf-
|
|
942
|
-
<span class="pf-
|
|
941
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
942
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
943
943
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
944
944
|
</span>
|
|
945
945
|
|
|
946
|
-
<a href="#" class="pf-
|
|
946
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
947
947
|
</li>
|
|
948
|
-
<li class="pf-
|
|
949
|
-
<span class="pf-
|
|
948
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
949
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
950
950
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
951
951
|
</span>
|
|
952
952
|
|
|
953
|
-
<a href="#" class="pf-
|
|
953
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
954
954
|
</li>
|
|
955
|
-
<li class="pf-
|
|
956
|
-
<span class="pf-
|
|
955
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
956
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
957
957
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
958
958
|
</span>
|
|
959
959
|
|
|
960
960
|
<a
|
|
961
961
|
href="#"
|
|
962
|
-
class="pf-
|
|
962
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
963
963
|
aria-current="page"
|
|
964
964
|
>Section landing</a>
|
|
965
965
|
</li>
|
|
@@ -967,166 +967,166 @@ wrapperTag: div
|
|
|
967
967
|
</nav>
|
|
968
968
|
</div>
|
|
969
969
|
</section>
|
|
970
|
-
<section class="pf-
|
|
971
|
-
<div class="pf-
|
|
972
|
-
<div class="pf-
|
|
970
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
971
|
+
<div class="pf-v6-c-page__main-body">
|
|
972
|
+
<div class="pf-v6-c-content">
|
|
973
973
|
<h1>Main title</h1>
|
|
974
974
|
<p>This is a full page demo.</p>
|
|
975
975
|
</div>
|
|
976
976
|
</div>
|
|
977
977
|
</section>
|
|
978
|
-
<section class="pf-
|
|
979
|
-
<div class="pf-
|
|
980
|
-
<div class="pf-
|
|
981
|
-
<div class="pf-
|
|
982
|
-
<div class="pf-
|
|
978
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
979
|
+
<div class="pf-v6-c-page__main-body">
|
|
980
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
981
|
+
<div class="pf-v6-c-card">
|
|
982
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
983
983
|
</div>
|
|
984
|
-
<div class="pf-
|
|
985
|
-
<div class="pf-
|
|
984
|
+
<div class="pf-v6-c-card">
|
|
985
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
986
986
|
</div>
|
|
987
|
-
<div class="pf-
|
|
988
|
-
<div class="pf-
|
|
987
|
+
<div class="pf-v6-c-card">
|
|
988
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
989
989
|
</div>
|
|
990
|
-
<div class="pf-
|
|
991
|
-
<div class="pf-
|
|
990
|
+
<div class="pf-v6-c-card">
|
|
991
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
992
992
|
</div>
|
|
993
|
-
<div class="pf-
|
|
994
|
-
<div class="pf-
|
|
993
|
+
<div class="pf-v6-c-card">
|
|
994
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
995
995
|
</div>
|
|
996
|
-
<div class="pf-
|
|
997
|
-
<div class="pf-
|
|
996
|
+
<div class="pf-v6-c-card">
|
|
997
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
998
998
|
</div>
|
|
999
|
-
<div class="pf-
|
|
1000
|
-
<div class="pf-
|
|
999
|
+
<div class="pf-v6-c-card">
|
|
1000
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1001
1001
|
</div>
|
|
1002
|
-
<div class="pf-
|
|
1003
|
-
<div class="pf-
|
|
1002
|
+
<div class="pf-v6-c-card">
|
|
1003
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1004
1004
|
</div>
|
|
1005
|
-
<div class="pf-
|
|
1006
|
-
<div class="pf-
|
|
1005
|
+
<div class="pf-v6-c-card">
|
|
1006
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1007
1007
|
</div>
|
|
1008
|
-
<div class="pf-
|
|
1009
|
-
<div class="pf-
|
|
1008
|
+
<div class="pf-v6-c-card">
|
|
1009
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1010
1010
|
</div>
|
|
1011
|
-
<div class="pf-
|
|
1012
|
-
<div class="pf-
|
|
1011
|
+
<div class="pf-v6-c-card">
|
|
1012
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1013
1013
|
</div>
|
|
1014
|
-
<div class="pf-
|
|
1015
|
-
<div class="pf-
|
|
1014
|
+
<div class="pf-v6-c-card">
|
|
1015
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1016
1016
|
</div>
|
|
1017
|
-
<div class="pf-
|
|
1018
|
-
<div class="pf-
|
|
1017
|
+
<div class="pf-v6-c-card">
|
|
1018
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1019
1019
|
</div>
|
|
1020
|
-
<div class="pf-
|
|
1021
|
-
<div class="pf-
|
|
1020
|
+
<div class="pf-v6-c-card">
|
|
1021
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1022
1022
|
</div>
|
|
1023
|
-
<div class="pf-
|
|
1024
|
-
<div class="pf-
|
|
1023
|
+
<div class="pf-v6-c-card">
|
|
1024
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1025
1025
|
</div>
|
|
1026
|
-
<div class="pf-
|
|
1027
|
-
<div class="pf-
|
|
1026
|
+
<div class="pf-v6-c-card">
|
|
1027
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1028
1028
|
</div>
|
|
1029
|
-
<div class="pf-
|
|
1030
|
-
<div class="pf-
|
|
1029
|
+
<div class="pf-v6-c-card">
|
|
1030
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1031
1031
|
</div>
|
|
1032
|
-
<div class="pf-
|
|
1033
|
-
<div class="pf-
|
|
1032
|
+
<div class="pf-v6-c-card">
|
|
1033
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1034
1034
|
</div>
|
|
1035
|
-
<div class="pf-
|
|
1036
|
-
<div class="pf-
|
|
1035
|
+
<div class="pf-v6-c-card">
|
|
1036
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1037
1037
|
</div>
|
|
1038
|
-
<div class="pf-
|
|
1039
|
-
<div class="pf-
|
|
1038
|
+
<div class="pf-v6-c-card">
|
|
1039
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1040
1040
|
</div>
|
|
1041
|
-
<div class="pf-
|
|
1042
|
-
<div class="pf-
|
|
1041
|
+
<div class="pf-v6-c-card">
|
|
1042
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1043
1043
|
</div>
|
|
1044
|
-
<div class="pf-
|
|
1045
|
-
<div class="pf-
|
|
1044
|
+
<div class="pf-v6-c-card">
|
|
1045
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1046
1046
|
</div>
|
|
1047
|
-
<div class="pf-
|
|
1048
|
-
<div class="pf-
|
|
1047
|
+
<div class="pf-v6-c-card">
|
|
1048
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1049
1049
|
</div>
|
|
1050
|
-
<div class="pf-
|
|
1051
|
-
<div class="pf-
|
|
1050
|
+
<div class="pf-v6-c-card">
|
|
1051
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1052
1052
|
</div>
|
|
1053
|
-
<div class="pf-
|
|
1054
|
-
<div class="pf-
|
|
1053
|
+
<div class="pf-v6-c-card">
|
|
1054
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1055
1055
|
</div>
|
|
1056
|
-
<div class="pf-
|
|
1057
|
-
<div class="pf-
|
|
1056
|
+
<div class="pf-v6-c-card">
|
|
1057
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1058
1058
|
</div>
|
|
1059
|
-
<div class="pf-
|
|
1060
|
-
<div class="pf-
|
|
1059
|
+
<div class="pf-v6-c-card">
|
|
1060
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1061
1061
|
</div>
|
|
1062
|
-
<div class="pf-
|
|
1063
|
-
<div class="pf-
|
|
1062
|
+
<div class="pf-v6-c-card">
|
|
1063
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1064
1064
|
</div>
|
|
1065
|
-
<div class="pf-
|
|
1066
|
-
<div class="pf-
|
|
1065
|
+
<div class="pf-v6-c-card">
|
|
1066
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1067
1067
|
</div>
|
|
1068
|
-
<div class="pf-
|
|
1069
|
-
<div class="pf-
|
|
1068
|
+
<div class="pf-v6-c-card">
|
|
1069
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1070
1070
|
</div>
|
|
1071
|
-
<div class="pf-
|
|
1072
|
-
<div class="pf-
|
|
1071
|
+
<div class="pf-v6-c-card">
|
|
1072
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1073
1073
|
</div>
|
|
1074
|
-
<div class="pf-
|
|
1075
|
-
<div class="pf-
|
|
1074
|
+
<div class="pf-v6-c-card">
|
|
1075
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1076
1076
|
</div>
|
|
1077
|
-
<div class="pf-
|
|
1078
|
-
<div class="pf-
|
|
1077
|
+
<div class="pf-v6-c-card">
|
|
1078
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1079
1079
|
</div>
|
|
1080
|
-
<div class="pf-
|
|
1081
|
-
<div class="pf-
|
|
1080
|
+
<div class="pf-v6-c-card">
|
|
1081
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1082
1082
|
</div>
|
|
1083
|
-
<div class="pf-
|
|
1084
|
-
<div class="pf-
|
|
1083
|
+
<div class="pf-v6-c-card">
|
|
1084
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1085
1085
|
</div>
|
|
1086
|
-
<div class="pf-
|
|
1087
|
-
<div class="pf-
|
|
1086
|
+
<div class="pf-v6-c-card">
|
|
1087
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1088
1088
|
</div>
|
|
1089
|
-
<div class="pf-
|
|
1090
|
-
<div class="pf-
|
|
1089
|
+
<div class="pf-v6-c-card">
|
|
1090
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1091
1091
|
</div>
|
|
1092
|
-
<div class="pf-
|
|
1093
|
-
<div class="pf-
|
|
1092
|
+
<div class="pf-v6-c-card">
|
|
1093
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1094
1094
|
</div>
|
|
1095
|
-
<div class="pf-
|
|
1096
|
-
<div class="pf-
|
|
1095
|
+
<div class="pf-v6-c-card">
|
|
1096
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1097
1097
|
</div>
|
|
1098
|
-
<div class="pf-
|
|
1099
|
-
<div class="pf-
|
|
1098
|
+
<div class="pf-v6-c-card">
|
|
1099
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1100
1100
|
</div>
|
|
1101
|
-
<div class="pf-
|
|
1102
|
-
<div class="pf-
|
|
1101
|
+
<div class="pf-v6-c-card">
|
|
1102
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1103
1103
|
</div>
|
|
1104
|
-
<div class="pf-
|
|
1105
|
-
<div class="pf-
|
|
1104
|
+
<div class="pf-v6-c-card">
|
|
1105
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1106
1106
|
</div>
|
|
1107
|
-
<div class="pf-
|
|
1108
|
-
<div class="pf-
|
|
1107
|
+
<div class="pf-v6-c-card">
|
|
1108
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1109
1109
|
</div>
|
|
1110
|
-
<div class="pf-
|
|
1111
|
-
<div class="pf-
|
|
1110
|
+
<div class="pf-v6-c-card">
|
|
1111
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1112
1112
|
</div>
|
|
1113
|
-
<div class="pf-
|
|
1114
|
-
<div class="pf-
|
|
1113
|
+
<div class="pf-v6-c-card">
|
|
1114
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1115
1115
|
</div>
|
|
1116
|
-
<div class="pf-
|
|
1117
|
-
<div class="pf-
|
|
1116
|
+
<div class="pf-v6-c-card">
|
|
1117
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1118
1118
|
</div>
|
|
1119
|
-
<div class="pf-
|
|
1120
|
-
<div class="pf-
|
|
1119
|
+
<div class="pf-v6-c-card">
|
|
1120
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1121
1121
|
</div>
|
|
1122
|
-
<div class="pf-
|
|
1123
|
-
<div class="pf-
|
|
1122
|
+
<div class="pf-v6-c-card">
|
|
1123
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1124
1124
|
</div>
|
|
1125
|
-
<div class="pf-
|
|
1126
|
-
<div class="pf-
|
|
1125
|
+
<div class="pf-v6-c-card">
|
|
1126
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1127
1127
|
</div>
|
|
1128
|
-
<div class="pf-
|
|
1129
|
-
<div class="pf-
|
|
1128
|
+
<div class="pf-v6-c-card">
|
|
1129
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1130
1130
|
</div>
|
|
1131
1131
|
</div>
|
|
1132
1132
|
</div>
|
|
@@ -1139,28 +1139,28 @@ wrapperTag: div
|
|
|
1139
1139
|
### Sticky breadcrumb
|
|
1140
1140
|
|
|
1141
1141
|
```html isFullscreen
|
|
1142
|
-
<div class="pf-
|
|
1143
|
-
<div class="pf-
|
|
1142
|
+
<div class="pf-v6-c-page" id="page-demo-sticky-top-breadcrumb">
|
|
1143
|
+
<div class="pf-v6-c-skip-to-content">
|
|
1144
1144
|
<a
|
|
1145
|
-
class="pf-
|
|
1145
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1146
1146
|
href="#main-content-page-demo-sticky-top-breadcrumb"
|
|
1147
1147
|
>Skip to content</a>
|
|
1148
1148
|
</div>
|
|
1149
1149
|
<header
|
|
1150
|
-
class="pf-
|
|
1150
|
+
class="pf-v6-c-masthead"
|
|
1151
1151
|
id="page-demo-sticky-top-breadcrumb-masthead"
|
|
1152
1152
|
>
|
|
1153
|
-
<span class="pf-
|
|
1153
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
1154
1154
|
<button
|
|
1155
|
-
class="pf-
|
|
1155
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1156
1156
|
type="button"
|
|
1157
1157
|
aria-label="Global navigation"
|
|
1158
1158
|
>
|
|
1159
1159
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1160
1160
|
</button>
|
|
1161
1161
|
</span>
|
|
1162
|
-
<div class="pf-
|
|
1163
|
-
<a class="pf-
|
|
1162
|
+
<div class="pf-v6-c-masthead__main">
|
|
1163
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
1164
1164
|
<svg height="40px" viewBox="0 0 679 158">
|
|
1165
1165
|
<title>PF-HorizontalLogo-Color</title>
|
|
1166
1166
|
<defs>
|
|
@@ -1233,37 +1233,37 @@ wrapperTag: div
|
|
|
1233
1233
|
</svg>
|
|
1234
1234
|
</a>
|
|
1235
1235
|
</div>
|
|
1236
|
-
<div class="pf-
|
|
1236
|
+
<div class="pf-v6-c-masthead__content">
|
|
1237
1237
|
<div
|
|
1238
|
-
class="pf-
|
|
1238
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
1239
1239
|
id="page-demo-sticky-top-breadcrumb-masthead-toolbar"
|
|
1240
1240
|
>
|
|
1241
|
-
<div class="pf-
|
|
1242
|
-
<div class="pf-
|
|
1243
|
-
<div class="pf-
|
|
1241
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1242
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1243
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1244
1244
|
<button
|
|
1245
|
-
class="pf-
|
|
1245
|
+
class="pf-v6-c-menu-toggle"
|
|
1246
1246
|
type="button"
|
|
1247
1247
|
aria-expanded="false"
|
|
1248
1248
|
>
|
|
1249
|
-
<span class="pf-
|
|
1250
|
-
<span class="pf-
|
|
1251
|
-
<span class="pf-
|
|
1249
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
1250
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1251
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1252
1252
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1253
1253
|
</span>
|
|
1254
1254
|
</span>
|
|
1255
1255
|
</button>
|
|
1256
1256
|
</div>
|
|
1257
1257
|
|
|
1258
|
-
<div class="pf-
|
|
1258
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1259
1259
|
<button
|
|
1260
|
-
class="pf-
|
|
1260
|
+
class="pf-v6-c-menu-toggle"
|
|
1261
1261
|
type="button"
|
|
1262
1262
|
aria-expanded="false"
|
|
1263
1263
|
>
|
|
1264
|
-
<span class="pf-
|
|
1265
|
-
<span class="pf-
|
|
1266
|
-
<span class="pf-
|
|
1264
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
1265
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1266
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1267
1267
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1268
1268
|
</span>
|
|
1269
1269
|
</span>
|
|
@@ -1271,56 +1271,56 @@ wrapperTag: div
|
|
|
1271
1271
|
</div>
|
|
1272
1272
|
|
|
1273
1273
|
<div
|
|
1274
|
-
class="pf-
|
|
1274
|
+
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"
|
|
1275
1275
|
>
|
|
1276
1276
|
<div
|
|
1277
|
-
class="pf-
|
|
1277
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1278
1278
|
>
|
|
1279
|
-
<div class="pf-
|
|
1279
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1280
1280
|
<button
|
|
1281
|
-
class="pf-
|
|
1281
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1282
1282
|
type="button"
|
|
1283
1283
|
aria-expanded="false"
|
|
1284
1284
|
aria-label="Application launcher"
|
|
1285
1285
|
>
|
|
1286
|
-
<span class="pf-
|
|
1286
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1287
1287
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1288
1288
|
</span>
|
|
1289
1289
|
</button>
|
|
1290
1290
|
</div>
|
|
1291
|
-
<div class="pf-
|
|
1291
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1292
1292
|
<button
|
|
1293
|
-
class="pf-
|
|
1293
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1294
1294
|
type="button"
|
|
1295
1295
|
aria-expanded="false"
|
|
1296
1296
|
aria-label="Settings"
|
|
1297
1297
|
>
|
|
1298
|
-
<span class="pf-
|
|
1298
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1299
1299
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1300
1300
|
</span>
|
|
1301
1301
|
</button>
|
|
1302
1302
|
</div>
|
|
1303
|
-
<div class="pf-
|
|
1303
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1304
1304
|
<button
|
|
1305
|
-
class="pf-
|
|
1305
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1306
1306
|
type="button"
|
|
1307
1307
|
aria-expanded="false"
|
|
1308
1308
|
aria-label="Help"
|
|
1309
1309
|
>
|
|
1310
|
-
<span class="pf-
|
|
1310
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1311
1311
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1312
1312
|
</span>
|
|
1313
1313
|
</button>
|
|
1314
1314
|
</div>
|
|
1315
1315
|
</div>
|
|
1316
|
-
<div class="pf-
|
|
1316
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
1317
1317
|
<button
|
|
1318
|
-
class="pf-
|
|
1318
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1319
1319
|
type="button"
|
|
1320
1320
|
aria-expanded="false"
|
|
1321
1321
|
aria-label="Actions"
|
|
1322
1322
|
>
|
|
1323
|
-
<span class="pf-
|
|
1323
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1324
1324
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1325
1325
|
</span>
|
|
1326
1326
|
</button>
|
|
@@ -1331,73 +1331,73 @@ wrapperTag: div
|
|
|
1331
1331
|
</div>
|
|
1332
1332
|
</div>
|
|
1333
1333
|
</header>
|
|
1334
|
-
<div class="pf-
|
|
1335
|
-
<div class="pf-
|
|
1334
|
+
<div class="pf-v6-c-page__sidebar">
|
|
1335
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
1336
1336
|
<nav
|
|
1337
|
-
class="pf-
|
|
1337
|
+
class="pf-v6-c-nav"
|
|
1338
1338
|
id="page-demo-sticky-top-breadcrumb-primary-nav"
|
|
1339
1339
|
aria-label="Global"
|
|
1340
1340
|
>
|
|
1341
|
-
<ul class="pf-
|
|
1342
|
-
<li class="pf-
|
|
1343
|
-
<a href="#" class="pf-
|
|
1341
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
1342
|
+
<li class="pf-v6-c-nav__item">
|
|
1343
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
1344
1344
|
</li>
|
|
1345
|
-
<li class="pf-
|
|
1345
|
+
<li class="pf-v6-c-nav__item">
|
|
1346
1346
|
<a
|
|
1347
1347
|
href="#"
|
|
1348
|
-
class="pf-
|
|
1348
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
1349
1349
|
aria-current="page"
|
|
1350
1350
|
>Policy</a>
|
|
1351
1351
|
</li>
|
|
1352
|
-
<li class="pf-
|
|
1353
|
-
<a href="#" class="pf-
|
|
1352
|
+
<li class="pf-v6-c-nav__item">
|
|
1353
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
1354
1354
|
</li>
|
|
1355
|
-
<li class="pf-
|
|
1356
|
-
<a href="#" class="pf-
|
|
1355
|
+
<li class="pf-v6-c-nav__item">
|
|
1356
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
1357
1357
|
</li>
|
|
1358
|
-
<li class="pf-
|
|
1359
|
-
<a href="#" class="pf-
|
|
1358
|
+
<li class="pf-v6-c-nav__item">
|
|
1359
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
1360
1360
|
</li>
|
|
1361
1361
|
</ul>
|
|
1362
1362
|
</nav>
|
|
1363
1363
|
</div>
|
|
1364
1364
|
</div>
|
|
1365
1365
|
<main
|
|
1366
|
-
class="pf-
|
|
1366
|
+
class="pf-v6-c-page__main"
|
|
1367
1367
|
tabindex="-1"
|
|
1368
1368
|
id="main-content-page-demo-sticky-top-breadcrumb"
|
|
1369
1369
|
>
|
|
1370
1370
|
<section
|
|
1371
|
-
class="pf-
|
|
1371
|
+
class="pf-v6-c-page__main-breadcrumb pf-m-limit-width pf-m-sticky-top"
|
|
1372
1372
|
>
|
|
1373
|
-
<div class="pf-
|
|
1374
|
-
<nav class="pf-
|
|
1375
|
-
<ol class="pf-
|
|
1376
|
-
<li class="pf-
|
|
1377
|
-
<a href="#" class="pf-
|
|
1373
|
+
<div class="pf-v6-c-page__main-body">
|
|
1374
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
1375
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
1376
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1377
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
1378
1378
|
</li>
|
|
1379
|
-
<li class="pf-
|
|
1380
|
-
<span class="pf-
|
|
1379
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1380
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1381
1381
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1382
1382
|
</span>
|
|
1383
1383
|
|
|
1384
|
-
<a href="#" class="pf-
|
|
1384
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
1385
1385
|
</li>
|
|
1386
|
-
<li class="pf-
|
|
1387
|
-
<span class="pf-
|
|
1386
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1387
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1388
1388
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1389
1389
|
</span>
|
|
1390
1390
|
|
|
1391
|
-
<a href="#" class="pf-
|
|
1391
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
1392
1392
|
</li>
|
|
1393
|
-
<li class="pf-
|
|
1394
|
-
<span class="pf-
|
|
1393
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1394
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1395
1395
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1396
1396
|
</span>
|
|
1397
1397
|
|
|
1398
1398
|
<a
|
|
1399
1399
|
href="#"
|
|
1400
|
-
class="pf-
|
|
1400
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
1401
1401
|
aria-current="page"
|
|
1402
1402
|
>Section landing</a>
|
|
1403
1403
|
</li>
|
|
@@ -1405,166 +1405,166 @@ wrapperTag: div
|
|
|
1405
1405
|
</nav>
|
|
1406
1406
|
</div>
|
|
1407
1407
|
</section>
|
|
1408
|
-
<section class="pf-
|
|
1409
|
-
<div class="pf-
|
|
1410
|
-
<div class="pf-
|
|
1408
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1409
|
+
<div class="pf-v6-c-page__main-body">
|
|
1410
|
+
<div class="pf-v6-c-content">
|
|
1411
1411
|
<h1>Main title</h1>
|
|
1412
1412
|
<p>This is a full page demo.</p>
|
|
1413
1413
|
</div>
|
|
1414
1414
|
</div>
|
|
1415
1415
|
</section>
|
|
1416
|
-
<section class="pf-
|
|
1417
|
-
<div class="pf-
|
|
1418
|
-
<div class="pf-
|
|
1419
|
-
<div class="pf-
|
|
1420
|
-
<div class="pf-
|
|
1416
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
1417
|
+
<div class="pf-v6-c-page__main-body">
|
|
1418
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
1419
|
+
<div class="pf-v6-c-card">
|
|
1420
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1421
1421
|
</div>
|
|
1422
|
-
<div class="pf-
|
|
1423
|
-
<div class="pf-
|
|
1422
|
+
<div class="pf-v6-c-card">
|
|
1423
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1424
1424
|
</div>
|
|
1425
|
-
<div class="pf-
|
|
1426
|
-
<div class="pf-
|
|
1425
|
+
<div class="pf-v6-c-card">
|
|
1426
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1427
1427
|
</div>
|
|
1428
|
-
<div class="pf-
|
|
1429
|
-
<div class="pf-
|
|
1428
|
+
<div class="pf-v6-c-card">
|
|
1429
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1430
1430
|
</div>
|
|
1431
|
-
<div class="pf-
|
|
1432
|
-
<div class="pf-
|
|
1431
|
+
<div class="pf-v6-c-card">
|
|
1432
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1433
1433
|
</div>
|
|
1434
|
-
<div class="pf-
|
|
1435
|
-
<div class="pf-
|
|
1434
|
+
<div class="pf-v6-c-card">
|
|
1435
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1436
1436
|
</div>
|
|
1437
|
-
<div class="pf-
|
|
1438
|
-
<div class="pf-
|
|
1437
|
+
<div class="pf-v6-c-card">
|
|
1438
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1439
1439
|
</div>
|
|
1440
|
-
<div class="pf-
|
|
1441
|
-
<div class="pf-
|
|
1440
|
+
<div class="pf-v6-c-card">
|
|
1441
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1442
1442
|
</div>
|
|
1443
|
-
<div class="pf-
|
|
1444
|
-
<div class="pf-
|
|
1443
|
+
<div class="pf-v6-c-card">
|
|
1444
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1445
1445
|
</div>
|
|
1446
|
-
<div class="pf-
|
|
1447
|
-
<div class="pf-
|
|
1446
|
+
<div class="pf-v6-c-card">
|
|
1447
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1448
1448
|
</div>
|
|
1449
|
-
<div class="pf-
|
|
1450
|
-
<div class="pf-
|
|
1449
|
+
<div class="pf-v6-c-card">
|
|
1450
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1451
1451
|
</div>
|
|
1452
|
-
<div class="pf-
|
|
1453
|
-
<div class="pf-
|
|
1452
|
+
<div class="pf-v6-c-card">
|
|
1453
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1454
1454
|
</div>
|
|
1455
|
-
<div class="pf-
|
|
1456
|
-
<div class="pf-
|
|
1455
|
+
<div class="pf-v6-c-card">
|
|
1456
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1457
1457
|
</div>
|
|
1458
|
-
<div class="pf-
|
|
1459
|
-
<div class="pf-
|
|
1458
|
+
<div class="pf-v6-c-card">
|
|
1459
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1460
1460
|
</div>
|
|
1461
|
-
<div class="pf-
|
|
1462
|
-
<div class="pf-
|
|
1461
|
+
<div class="pf-v6-c-card">
|
|
1462
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1463
1463
|
</div>
|
|
1464
|
-
<div class="pf-
|
|
1465
|
-
<div class="pf-
|
|
1464
|
+
<div class="pf-v6-c-card">
|
|
1465
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1466
1466
|
</div>
|
|
1467
|
-
<div class="pf-
|
|
1468
|
-
<div class="pf-
|
|
1467
|
+
<div class="pf-v6-c-card">
|
|
1468
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1469
1469
|
</div>
|
|
1470
|
-
<div class="pf-
|
|
1471
|
-
<div class="pf-
|
|
1470
|
+
<div class="pf-v6-c-card">
|
|
1471
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1472
1472
|
</div>
|
|
1473
|
-
<div class="pf-
|
|
1474
|
-
<div class="pf-
|
|
1473
|
+
<div class="pf-v6-c-card">
|
|
1474
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1475
1475
|
</div>
|
|
1476
|
-
<div class="pf-
|
|
1477
|
-
<div class="pf-
|
|
1476
|
+
<div class="pf-v6-c-card">
|
|
1477
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1478
1478
|
</div>
|
|
1479
|
-
<div class="pf-
|
|
1480
|
-
<div class="pf-
|
|
1479
|
+
<div class="pf-v6-c-card">
|
|
1480
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1481
1481
|
</div>
|
|
1482
|
-
<div class="pf-
|
|
1483
|
-
<div class="pf-
|
|
1482
|
+
<div class="pf-v6-c-card">
|
|
1483
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1484
1484
|
</div>
|
|
1485
|
-
<div class="pf-
|
|
1486
|
-
<div class="pf-
|
|
1485
|
+
<div class="pf-v6-c-card">
|
|
1486
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1487
1487
|
</div>
|
|
1488
|
-
<div class="pf-
|
|
1489
|
-
<div class="pf-
|
|
1488
|
+
<div class="pf-v6-c-card">
|
|
1489
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1490
1490
|
</div>
|
|
1491
|
-
<div class="pf-
|
|
1492
|
-
<div class="pf-
|
|
1491
|
+
<div class="pf-v6-c-card">
|
|
1492
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1493
1493
|
</div>
|
|
1494
|
-
<div class="pf-
|
|
1495
|
-
<div class="pf-
|
|
1494
|
+
<div class="pf-v6-c-card">
|
|
1495
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1496
1496
|
</div>
|
|
1497
|
-
<div class="pf-
|
|
1498
|
-
<div class="pf-
|
|
1497
|
+
<div class="pf-v6-c-card">
|
|
1498
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1499
1499
|
</div>
|
|
1500
|
-
<div class="pf-
|
|
1501
|
-
<div class="pf-
|
|
1500
|
+
<div class="pf-v6-c-card">
|
|
1501
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1502
1502
|
</div>
|
|
1503
|
-
<div class="pf-
|
|
1504
|
-
<div class="pf-
|
|
1503
|
+
<div class="pf-v6-c-card">
|
|
1504
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1505
1505
|
</div>
|
|
1506
|
-
<div class="pf-
|
|
1507
|
-
<div class="pf-
|
|
1506
|
+
<div class="pf-v6-c-card">
|
|
1507
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1508
1508
|
</div>
|
|
1509
|
-
<div class="pf-
|
|
1510
|
-
<div class="pf-
|
|
1509
|
+
<div class="pf-v6-c-card">
|
|
1510
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1511
1511
|
</div>
|
|
1512
|
-
<div class="pf-
|
|
1513
|
-
<div class="pf-
|
|
1512
|
+
<div class="pf-v6-c-card">
|
|
1513
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1514
1514
|
</div>
|
|
1515
|
-
<div class="pf-
|
|
1516
|
-
<div class="pf-
|
|
1515
|
+
<div class="pf-v6-c-card">
|
|
1516
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1517
1517
|
</div>
|
|
1518
|
-
<div class="pf-
|
|
1519
|
-
<div class="pf-
|
|
1518
|
+
<div class="pf-v6-c-card">
|
|
1519
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1520
1520
|
</div>
|
|
1521
|
-
<div class="pf-
|
|
1522
|
-
<div class="pf-
|
|
1521
|
+
<div class="pf-v6-c-card">
|
|
1522
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1523
1523
|
</div>
|
|
1524
|
-
<div class="pf-
|
|
1525
|
-
<div class="pf-
|
|
1524
|
+
<div class="pf-v6-c-card">
|
|
1525
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1526
1526
|
</div>
|
|
1527
|
-
<div class="pf-
|
|
1528
|
-
<div class="pf-
|
|
1527
|
+
<div class="pf-v6-c-card">
|
|
1528
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1529
1529
|
</div>
|
|
1530
|
-
<div class="pf-
|
|
1531
|
-
<div class="pf-
|
|
1530
|
+
<div class="pf-v6-c-card">
|
|
1531
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1532
1532
|
</div>
|
|
1533
|
-
<div class="pf-
|
|
1534
|
-
<div class="pf-
|
|
1533
|
+
<div class="pf-v6-c-card">
|
|
1534
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1535
1535
|
</div>
|
|
1536
|
-
<div class="pf-
|
|
1537
|
-
<div class="pf-
|
|
1536
|
+
<div class="pf-v6-c-card">
|
|
1537
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1538
1538
|
</div>
|
|
1539
|
-
<div class="pf-
|
|
1540
|
-
<div class="pf-
|
|
1539
|
+
<div class="pf-v6-c-card">
|
|
1540
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1541
1541
|
</div>
|
|
1542
|
-
<div class="pf-
|
|
1543
|
-
<div class="pf-
|
|
1542
|
+
<div class="pf-v6-c-card">
|
|
1543
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1544
1544
|
</div>
|
|
1545
|
-
<div class="pf-
|
|
1546
|
-
<div class="pf-
|
|
1545
|
+
<div class="pf-v6-c-card">
|
|
1546
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1547
1547
|
</div>
|
|
1548
|
-
<div class="pf-
|
|
1549
|
-
<div class="pf-
|
|
1548
|
+
<div class="pf-v6-c-card">
|
|
1549
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1550
1550
|
</div>
|
|
1551
|
-
<div class="pf-
|
|
1552
|
-
<div class="pf-
|
|
1551
|
+
<div class="pf-v6-c-card">
|
|
1552
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1553
1553
|
</div>
|
|
1554
|
-
<div class="pf-
|
|
1555
|
-
<div class="pf-
|
|
1554
|
+
<div class="pf-v6-c-card">
|
|
1555
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1556
1556
|
</div>
|
|
1557
|
-
<div class="pf-
|
|
1558
|
-
<div class="pf-
|
|
1557
|
+
<div class="pf-v6-c-card">
|
|
1558
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1559
1559
|
</div>
|
|
1560
|
-
<div class="pf-
|
|
1561
|
-
<div class="pf-
|
|
1560
|
+
<div class="pf-v6-c-card">
|
|
1561
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1562
1562
|
</div>
|
|
1563
|
-
<div class="pf-
|
|
1564
|
-
<div class="pf-
|
|
1563
|
+
<div class="pf-v6-c-card">
|
|
1564
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1565
1565
|
</div>
|
|
1566
|
-
<div class="pf-
|
|
1567
|
-
<div class="pf-
|
|
1566
|
+
<div class="pf-v6-c-card">
|
|
1567
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1568
1568
|
</div>
|
|
1569
1569
|
</div>
|
|
1570
1570
|
</div>
|
|
@@ -1577,28 +1577,28 @@ wrapperTag: div
|
|
|
1577
1577
|
### Sticky breadcrumb on medium
|
|
1578
1578
|
|
|
1579
1579
|
```html isFullscreen
|
|
1580
|
-
<div class="pf-
|
|
1581
|
-
<div class="pf-
|
|
1580
|
+
<div class="pf-v6-c-page" id="page-demo-sticky-top-breadcrumb">
|
|
1581
|
+
<div class="pf-v6-c-skip-to-content">
|
|
1582
1582
|
<a
|
|
1583
|
-
class="pf-
|
|
1583
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1584
1584
|
href="#main-content-page-demo-sticky-top-breadcrumb"
|
|
1585
1585
|
>Skip to content</a>
|
|
1586
1586
|
</div>
|
|
1587
1587
|
<header
|
|
1588
|
-
class="pf-
|
|
1588
|
+
class="pf-v6-c-masthead"
|
|
1589
1589
|
id="page-demo-sticky-top-breadcrumb-masthead"
|
|
1590
1590
|
>
|
|
1591
|
-
<span class="pf-
|
|
1591
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
1592
1592
|
<button
|
|
1593
|
-
class="pf-
|
|
1593
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1594
1594
|
type="button"
|
|
1595
1595
|
aria-label="Global navigation"
|
|
1596
1596
|
>
|
|
1597
1597
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1598
1598
|
</button>
|
|
1599
1599
|
</span>
|
|
1600
|
-
<div class="pf-
|
|
1601
|
-
<a class="pf-
|
|
1600
|
+
<div class="pf-v6-c-masthead__main">
|
|
1601
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
1602
1602
|
<svg height="40px" viewBox="0 0 679 158">
|
|
1603
1603
|
<title>PF-HorizontalLogo-Color</title>
|
|
1604
1604
|
<defs>
|
|
@@ -1671,37 +1671,37 @@ wrapperTag: div
|
|
|
1671
1671
|
</svg>
|
|
1672
1672
|
</a>
|
|
1673
1673
|
</div>
|
|
1674
|
-
<div class="pf-
|
|
1674
|
+
<div class="pf-v6-c-masthead__content">
|
|
1675
1675
|
<div
|
|
1676
|
-
class="pf-
|
|
1676
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
1677
1677
|
id="page-demo-sticky-top-breadcrumb-masthead-toolbar"
|
|
1678
1678
|
>
|
|
1679
|
-
<div class="pf-
|
|
1680
|
-
<div class="pf-
|
|
1681
|
-
<div class="pf-
|
|
1679
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1680
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1681
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1682
1682
|
<button
|
|
1683
|
-
class="pf-
|
|
1683
|
+
class="pf-v6-c-menu-toggle"
|
|
1684
1684
|
type="button"
|
|
1685
1685
|
aria-expanded="false"
|
|
1686
1686
|
>
|
|
1687
|
-
<span class="pf-
|
|
1688
|
-
<span class="pf-
|
|
1689
|
-
<span class="pf-
|
|
1687
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
1688
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1689
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1690
1690
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1691
1691
|
</span>
|
|
1692
1692
|
</span>
|
|
1693
1693
|
</button>
|
|
1694
1694
|
</div>
|
|
1695
1695
|
|
|
1696
|
-
<div class="pf-
|
|
1696
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1697
1697
|
<button
|
|
1698
|
-
class="pf-
|
|
1698
|
+
class="pf-v6-c-menu-toggle"
|
|
1699
1699
|
type="button"
|
|
1700
1700
|
aria-expanded="false"
|
|
1701
1701
|
>
|
|
1702
|
-
<span class="pf-
|
|
1703
|
-
<span class="pf-
|
|
1704
|
-
<span class="pf-
|
|
1702
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
1703
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1704
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1705
1705
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1706
1706
|
</span>
|
|
1707
1707
|
</span>
|
|
@@ -1709,56 +1709,56 @@ wrapperTag: div
|
|
|
1709
1709
|
</div>
|
|
1710
1710
|
|
|
1711
1711
|
<div
|
|
1712
|
-
class="pf-
|
|
1712
|
+
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"
|
|
1713
1713
|
>
|
|
1714
1714
|
<div
|
|
1715
|
-
class="pf-
|
|
1715
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1716
1716
|
>
|
|
1717
|
-
<div class="pf-
|
|
1717
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1718
1718
|
<button
|
|
1719
|
-
class="pf-
|
|
1719
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1720
1720
|
type="button"
|
|
1721
1721
|
aria-expanded="false"
|
|
1722
1722
|
aria-label="Application launcher"
|
|
1723
1723
|
>
|
|
1724
|
-
<span class="pf-
|
|
1724
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1725
1725
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1726
1726
|
</span>
|
|
1727
1727
|
</button>
|
|
1728
1728
|
</div>
|
|
1729
|
-
<div class="pf-
|
|
1729
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1730
1730
|
<button
|
|
1731
|
-
class="pf-
|
|
1731
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1732
1732
|
type="button"
|
|
1733
1733
|
aria-expanded="false"
|
|
1734
1734
|
aria-label="Settings"
|
|
1735
1735
|
>
|
|
1736
|
-
<span class="pf-
|
|
1736
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1737
1737
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1738
1738
|
</span>
|
|
1739
1739
|
</button>
|
|
1740
1740
|
</div>
|
|
1741
|
-
<div class="pf-
|
|
1741
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1742
1742
|
<button
|
|
1743
|
-
class="pf-
|
|
1743
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1744
1744
|
type="button"
|
|
1745
1745
|
aria-expanded="false"
|
|
1746
1746
|
aria-label="Help"
|
|
1747
1747
|
>
|
|
1748
|
-
<span class="pf-
|
|
1748
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1749
1749
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1750
1750
|
</span>
|
|
1751
1751
|
</button>
|
|
1752
1752
|
</div>
|
|
1753
1753
|
</div>
|
|
1754
|
-
<div class="pf-
|
|
1754
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
1755
1755
|
<button
|
|
1756
|
-
class="pf-
|
|
1756
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1757
1757
|
type="button"
|
|
1758
1758
|
aria-expanded="false"
|
|
1759
1759
|
aria-label="Actions"
|
|
1760
1760
|
>
|
|
1761
|
-
<span class="pf-
|
|
1761
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1762
1762
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1763
1763
|
</span>
|
|
1764
1764
|
</button>
|
|
@@ -1769,73 +1769,73 @@ wrapperTag: div
|
|
|
1769
1769
|
</div>
|
|
1770
1770
|
</div>
|
|
1771
1771
|
</header>
|
|
1772
|
-
<div class="pf-
|
|
1773
|
-
<div class="pf-
|
|
1772
|
+
<div class="pf-v6-c-page__sidebar">
|
|
1773
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
1774
1774
|
<nav
|
|
1775
|
-
class="pf-
|
|
1775
|
+
class="pf-v6-c-nav"
|
|
1776
1776
|
id="page-demo-sticky-top-breadcrumb-primary-nav"
|
|
1777
1777
|
aria-label="Global"
|
|
1778
1778
|
>
|
|
1779
|
-
<ul class="pf-
|
|
1780
|
-
<li class="pf-
|
|
1781
|
-
<a href="#" class="pf-
|
|
1779
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
1780
|
+
<li class="pf-v6-c-nav__item">
|
|
1781
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
1782
1782
|
</li>
|
|
1783
|
-
<li class="pf-
|
|
1783
|
+
<li class="pf-v6-c-nav__item">
|
|
1784
1784
|
<a
|
|
1785
1785
|
href="#"
|
|
1786
|
-
class="pf-
|
|
1786
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
1787
1787
|
aria-current="page"
|
|
1788
1788
|
>Policy</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">Authentication</a>
|
|
1792
1792
|
</li>
|
|
1793
|
-
<li class="pf-
|
|
1794
|
-
<a href="#" class="pf-
|
|
1793
|
+
<li class="pf-v6-c-nav__item">
|
|
1794
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
1795
1795
|
</li>
|
|
1796
|
-
<li class="pf-
|
|
1797
|
-
<a href="#" class="pf-
|
|
1796
|
+
<li class="pf-v6-c-nav__item">
|
|
1797
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
1798
1798
|
</li>
|
|
1799
1799
|
</ul>
|
|
1800
1800
|
</nav>
|
|
1801
1801
|
</div>
|
|
1802
1802
|
</div>
|
|
1803
1803
|
<main
|
|
1804
|
-
class="pf-
|
|
1804
|
+
class="pf-v6-c-page__main"
|
|
1805
1805
|
tabindex="-1"
|
|
1806
1806
|
id="main-content-page-demo-sticky-top-breadcrumb"
|
|
1807
1807
|
>
|
|
1808
1808
|
<section
|
|
1809
|
-
class="pf-
|
|
1809
|
+
class="pf-v6-c-page__main-breadcrumb pf-m-limit-width pf-m-sticky-top-on-md-height"
|
|
1810
1810
|
>
|
|
1811
|
-
<div class="pf-
|
|
1812
|
-
<nav class="pf-
|
|
1813
|
-
<ol class="pf-
|
|
1814
|
-
<li class="pf-
|
|
1815
|
-
<a href="#" class="pf-
|
|
1811
|
+
<div class="pf-v6-c-page__main-body">
|
|
1812
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
1813
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
1814
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1815
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
1816
1816
|
</li>
|
|
1817
|
-
<li class="pf-
|
|
1818
|
-
<span class="pf-
|
|
1817
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1818
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1819
1819
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1820
1820
|
</span>
|
|
1821
1821
|
|
|
1822
|
-
<a href="#" class="pf-
|
|
1822
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
1823
1823
|
</li>
|
|
1824
|
-
<li class="pf-
|
|
1825
|
-
<span class="pf-
|
|
1824
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1825
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1826
1826
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1827
1827
|
</span>
|
|
1828
1828
|
|
|
1829
|
-
<a href="#" class="pf-
|
|
1829
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
1830
1830
|
</li>
|
|
1831
|
-
<li class="pf-
|
|
1832
|
-
<span class="pf-
|
|
1831
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1832
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1833
1833
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1834
1834
|
</span>
|
|
1835
1835
|
|
|
1836
1836
|
<a
|
|
1837
1837
|
href="#"
|
|
1838
|
-
class="pf-
|
|
1838
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
1839
1839
|
aria-current="page"
|
|
1840
1840
|
>Section landing</a>
|
|
1841
1841
|
</li>
|
|
@@ -1843,166 +1843,166 @@ wrapperTag: div
|
|
|
1843
1843
|
</nav>
|
|
1844
1844
|
</div>
|
|
1845
1845
|
</section>
|
|
1846
|
-
<section class="pf-
|
|
1847
|
-
<div class="pf-
|
|
1848
|
-
<div class="pf-
|
|
1846
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1847
|
+
<div class="pf-v6-c-page__main-body">
|
|
1848
|
+
<div class="pf-v6-c-content">
|
|
1849
1849
|
<h1>Main title</h1>
|
|
1850
1850
|
<p>This is a full page demo.</p>
|
|
1851
1851
|
</div>
|
|
1852
1852
|
</div>
|
|
1853
1853
|
</section>
|
|
1854
|
-
<section class="pf-
|
|
1855
|
-
<div class="pf-
|
|
1856
|
-
<div class="pf-
|
|
1857
|
-
<div class="pf-
|
|
1858
|
-
<div class="pf-
|
|
1854
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
1855
|
+
<div class="pf-v6-c-page__main-body">
|
|
1856
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
1857
|
+
<div class="pf-v6-c-card">
|
|
1858
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1859
1859
|
</div>
|
|
1860
|
-
<div class="pf-
|
|
1861
|
-
<div class="pf-
|
|
1860
|
+
<div class="pf-v6-c-card">
|
|
1861
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1862
1862
|
</div>
|
|
1863
|
-
<div class="pf-
|
|
1864
|
-
<div class="pf-
|
|
1863
|
+
<div class="pf-v6-c-card">
|
|
1864
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1865
1865
|
</div>
|
|
1866
|
-
<div class="pf-
|
|
1867
|
-
<div class="pf-
|
|
1866
|
+
<div class="pf-v6-c-card">
|
|
1867
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1868
1868
|
</div>
|
|
1869
|
-
<div class="pf-
|
|
1870
|
-
<div class="pf-
|
|
1869
|
+
<div class="pf-v6-c-card">
|
|
1870
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1871
1871
|
</div>
|
|
1872
|
-
<div class="pf-
|
|
1873
|
-
<div class="pf-
|
|
1872
|
+
<div class="pf-v6-c-card">
|
|
1873
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1874
1874
|
</div>
|
|
1875
|
-
<div class="pf-
|
|
1876
|
-
<div class="pf-
|
|
1875
|
+
<div class="pf-v6-c-card">
|
|
1876
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1877
1877
|
</div>
|
|
1878
|
-
<div class="pf-
|
|
1879
|
-
<div class="pf-
|
|
1878
|
+
<div class="pf-v6-c-card">
|
|
1879
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1880
1880
|
</div>
|
|
1881
|
-
<div class="pf-
|
|
1882
|
-
<div class="pf-
|
|
1881
|
+
<div class="pf-v6-c-card">
|
|
1882
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1883
1883
|
</div>
|
|
1884
|
-
<div class="pf-
|
|
1885
|
-
<div class="pf-
|
|
1884
|
+
<div class="pf-v6-c-card">
|
|
1885
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1886
1886
|
</div>
|
|
1887
|
-
<div class="pf-
|
|
1888
|
-
<div class="pf-
|
|
1887
|
+
<div class="pf-v6-c-card">
|
|
1888
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1889
1889
|
</div>
|
|
1890
|
-
<div class="pf-
|
|
1891
|
-
<div class="pf-
|
|
1890
|
+
<div class="pf-v6-c-card">
|
|
1891
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1892
1892
|
</div>
|
|
1893
|
-
<div class="pf-
|
|
1894
|
-
<div class="pf-
|
|
1893
|
+
<div class="pf-v6-c-card">
|
|
1894
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1895
1895
|
</div>
|
|
1896
|
-
<div class="pf-
|
|
1897
|
-
<div class="pf-
|
|
1896
|
+
<div class="pf-v6-c-card">
|
|
1897
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1898
1898
|
</div>
|
|
1899
|
-
<div class="pf-
|
|
1900
|
-
<div class="pf-
|
|
1899
|
+
<div class="pf-v6-c-card">
|
|
1900
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1901
1901
|
</div>
|
|
1902
|
-
<div class="pf-
|
|
1903
|
-
<div class="pf-
|
|
1902
|
+
<div class="pf-v6-c-card">
|
|
1903
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1904
1904
|
</div>
|
|
1905
|
-
<div class="pf-
|
|
1906
|
-
<div class="pf-
|
|
1905
|
+
<div class="pf-v6-c-card">
|
|
1906
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1907
1907
|
</div>
|
|
1908
|
-
<div class="pf-
|
|
1909
|
-
<div class="pf-
|
|
1908
|
+
<div class="pf-v6-c-card">
|
|
1909
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1910
1910
|
</div>
|
|
1911
|
-
<div class="pf-
|
|
1912
|
-
<div class="pf-
|
|
1911
|
+
<div class="pf-v6-c-card">
|
|
1912
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1913
1913
|
</div>
|
|
1914
|
-
<div class="pf-
|
|
1915
|
-
<div class="pf-
|
|
1914
|
+
<div class="pf-v6-c-card">
|
|
1915
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1916
1916
|
</div>
|
|
1917
|
-
<div class="pf-
|
|
1918
|
-
<div class="pf-
|
|
1917
|
+
<div class="pf-v6-c-card">
|
|
1918
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1919
1919
|
</div>
|
|
1920
|
-
<div class="pf-
|
|
1921
|
-
<div class="pf-
|
|
1920
|
+
<div class="pf-v6-c-card">
|
|
1921
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1922
1922
|
</div>
|
|
1923
|
-
<div class="pf-
|
|
1924
|
-
<div class="pf-
|
|
1923
|
+
<div class="pf-v6-c-card">
|
|
1924
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1925
1925
|
</div>
|
|
1926
|
-
<div class="pf-
|
|
1927
|
-
<div class="pf-
|
|
1926
|
+
<div class="pf-v6-c-card">
|
|
1927
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1928
1928
|
</div>
|
|
1929
|
-
<div class="pf-
|
|
1930
|
-
<div class="pf-
|
|
1929
|
+
<div class="pf-v6-c-card">
|
|
1930
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1931
1931
|
</div>
|
|
1932
|
-
<div class="pf-
|
|
1933
|
-
<div class="pf-
|
|
1932
|
+
<div class="pf-v6-c-card">
|
|
1933
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1934
1934
|
</div>
|
|
1935
|
-
<div class="pf-
|
|
1936
|
-
<div class="pf-
|
|
1935
|
+
<div class="pf-v6-c-card">
|
|
1936
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1937
1937
|
</div>
|
|
1938
|
-
<div class="pf-
|
|
1939
|
-
<div class="pf-
|
|
1938
|
+
<div class="pf-v6-c-card">
|
|
1939
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1940
1940
|
</div>
|
|
1941
|
-
<div class="pf-
|
|
1942
|
-
<div class="pf-
|
|
1941
|
+
<div class="pf-v6-c-card">
|
|
1942
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1943
1943
|
</div>
|
|
1944
|
-
<div class="pf-
|
|
1945
|
-
<div class="pf-
|
|
1944
|
+
<div class="pf-v6-c-card">
|
|
1945
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1946
1946
|
</div>
|
|
1947
|
-
<div class="pf-
|
|
1948
|
-
<div class="pf-
|
|
1947
|
+
<div class="pf-v6-c-card">
|
|
1948
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1949
1949
|
</div>
|
|
1950
|
-
<div class="pf-
|
|
1951
|
-
<div class="pf-
|
|
1950
|
+
<div class="pf-v6-c-card">
|
|
1951
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1952
1952
|
</div>
|
|
1953
|
-
<div class="pf-
|
|
1954
|
-
<div class="pf-
|
|
1953
|
+
<div class="pf-v6-c-card">
|
|
1954
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1955
1955
|
</div>
|
|
1956
|
-
<div class="pf-
|
|
1957
|
-
<div class="pf-
|
|
1956
|
+
<div class="pf-v6-c-card">
|
|
1957
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1958
1958
|
</div>
|
|
1959
|
-
<div class="pf-
|
|
1960
|
-
<div class="pf-
|
|
1959
|
+
<div class="pf-v6-c-card">
|
|
1960
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1961
1961
|
</div>
|
|
1962
|
-
<div class="pf-
|
|
1963
|
-
<div class="pf-
|
|
1962
|
+
<div class="pf-v6-c-card">
|
|
1963
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1964
1964
|
</div>
|
|
1965
|
-
<div class="pf-
|
|
1966
|
-
<div class="pf-
|
|
1965
|
+
<div class="pf-v6-c-card">
|
|
1966
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1967
1967
|
</div>
|
|
1968
|
-
<div class="pf-
|
|
1969
|
-
<div class="pf-
|
|
1968
|
+
<div class="pf-v6-c-card">
|
|
1969
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1970
1970
|
</div>
|
|
1971
|
-
<div class="pf-
|
|
1972
|
-
<div class="pf-
|
|
1971
|
+
<div class="pf-v6-c-card">
|
|
1972
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1973
1973
|
</div>
|
|
1974
|
-
<div class="pf-
|
|
1975
|
-
<div class="pf-
|
|
1974
|
+
<div class="pf-v6-c-card">
|
|
1975
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1976
1976
|
</div>
|
|
1977
|
-
<div class="pf-
|
|
1978
|
-
<div class="pf-
|
|
1977
|
+
<div class="pf-v6-c-card">
|
|
1978
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1979
1979
|
</div>
|
|
1980
|
-
<div class="pf-
|
|
1981
|
-
<div class="pf-
|
|
1980
|
+
<div class="pf-v6-c-card">
|
|
1981
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1982
1982
|
</div>
|
|
1983
|
-
<div class="pf-
|
|
1984
|
-
<div class="pf-
|
|
1983
|
+
<div class="pf-v6-c-card">
|
|
1984
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1985
1985
|
</div>
|
|
1986
|
-
<div class="pf-
|
|
1987
|
-
<div class="pf-
|
|
1986
|
+
<div class="pf-v6-c-card">
|
|
1987
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1988
1988
|
</div>
|
|
1989
|
-
<div class="pf-
|
|
1990
|
-
<div class="pf-
|
|
1989
|
+
<div class="pf-v6-c-card">
|
|
1990
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1991
1991
|
</div>
|
|
1992
|
-
<div class="pf-
|
|
1993
|
-
<div class="pf-
|
|
1992
|
+
<div class="pf-v6-c-card">
|
|
1993
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1994
1994
|
</div>
|
|
1995
|
-
<div class="pf-
|
|
1996
|
-
<div class="pf-
|
|
1995
|
+
<div class="pf-v6-c-card">
|
|
1996
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1997
1997
|
</div>
|
|
1998
|
-
<div class="pf-
|
|
1999
|
-
<div class="pf-
|
|
1998
|
+
<div class="pf-v6-c-card">
|
|
1999
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2000
2000
|
</div>
|
|
2001
|
-
<div class="pf-
|
|
2002
|
-
<div class="pf-
|
|
2001
|
+
<div class="pf-v6-c-card">
|
|
2002
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2003
2003
|
</div>
|
|
2004
|
-
<div class="pf-
|
|
2005
|
-
<div class="pf-
|
|
2004
|
+
<div class="pf-v6-c-card">
|
|
2005
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2006
2006
|
</div>
|
|
2007
2007
|
</div>
|
|
2008
2008
|
</div>
|
|
@@ -2015,28 +2015,28 @@ wrapperTag: div
|
|
|
2015
2015
|
### Sticky section group
|
|
2016
2016
|
|
|
2017
2017
|
```html isFullscreen
|
|
2018
|
-
<div class="pf-
|
|
2019
|
-
<div class="pf-
|
|
2018
|
+
<div class="pf-v6-c-page" id="page-demo-sticky-top-section-group">
|
|
2019
|
+
<div class="pf-v6-c-skip-to-content">
|
|
2020
2020
|
<a
|
|
2021
|
-
class="pf-
|
|
2021
|
+
class="pf-v6-c-button pf-m-primary"
|
|
2022
2022
|
href="#main-content-page-demo-sticky-top-section-group"
|
|
2023
2023
|
>Skip to content</a>
|
|
2024
2024
|
</div>
|
|
2025
2025
|
<header
|
|
2026
|
-
class="pf-
|
|
2026
|
+
class="pf-v6-c-masthead"
|
|
2027
2027
|
id="page-demo-sticky-top-section-group-masthead"
|
|
2028
2028
|
>
|
|
2029
|
-
<span class="pf-
|
|
2029
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
2030
2030
|
<button
|
|
2031
|
-
class="pf-
|
|
2031
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2032
2032
|
type="button"
|
|
2033
2033
|
aria-label="Global navigation"
|
|
2034
2034
|
>
|
|
2035
2035
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2036
2036
|
</button>
|
|
2037
2037
|
</span>
|
|
2038
|
-
<div class="pf-
|
|
2039
|
-
<a class="pf-
|
|
2038
|
+
<div class="pf-v6-c-masthead__main">
|
|
2039
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
2040
2040
|
<svg height="40px" viewBox="0 0 679 158">
|
|
2041
2041
|
<title>PF-HorizontalLogo-Color</title>
|
|
2042
2042
|
<defs>
|
|
@@ -2109,37 +2109,37 @@ wrapperTag: div
|
|
|
2109
2109
|
</svg>
|
|
2110
2110
|
</a>
|
|
2111
2111
|
</div>
|
|
2112
|
-
<div class="pf-
|
|
2112
|
+
<div class="pf-v6-c-masthead__content">
|
|
2113
2113
|
<div
|
|
2114
|
-
class="pf-
|
|
2114
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
2115
2115
|
id="page-demo-sticky-top-section-group-masthead-toolbar"
|
|
2116
2116
|
>
|
|
2117
|
-
<div class="pf-
|
|
2118
|
-
<div class="pf-
|
|
2119
|
-
<div class="pf-
|
|
2117
|
+
<div class="pf-v6-c-toolbar__content">
|
|
2118
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
2119
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2120
2120
|
<button
|
|
2121
|
-
class="pf-
|
|
2121
|
+
class="pf-v6-c-menu-toggle"
|
|
2122
2122
|
type="button"
|
|
2123
2123
|
aria-expanded="false"
|
|
2124
2124
|
>
|
|
2125
|
-
<span class="pf-
|
|
2126
|
-
<span class="pf-
|
|
2127
|
-
<span class="pf-
|
|
2125
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
2126
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2127
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2128
2128
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2129
2129
|
</span>
|
|
2130
2130
|
</span>
|
|
2131
2131
|
</button>
|
|
2132
2132
|
</div>
|
|
2133
2133
|
|
|
2134
|
-
<div class="pf-
|
|
2134
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2135
2135
|
<button
|
|
2136
|
-
class="pf-
|
|
2136
|
+
class="pf-v6-c-menu-toggle"
|
|
2137
2137
|
type="button"
|
|
2138
2138
|
aria-expanded="false"
|
|
2139
2139
|
>
|
|
2140
|
-
<span class="pf-
|
|
2141
|
-
<span class="pf-
|
|
2142
|
-
<span class="pf-
|
|
2140
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
2141
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2142
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2143
2143
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2144
2144
|
</span>
|
|
2145
2145
|
</span>
|
|
@@ -2147,56 +2147,56 @@ wrapperTag: div
|
|
|
2147
2147
|
</div>
|
|
2148
2148
|
|
|
2149
2149
|
<div
|
|
2150
|
-
class="pf-
|
|
2150
|
+
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"
|
|
2151
2151
|
>
|
|
2152
2152
|
<div
|
|
2153
|
-
class="pf-
|
|
2153
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
2154
2154
|
>
|
|
2155
|
-
<div class="pf-
|
|
2155
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2156
2156
|
<button
|
|
2157
|
-
class="pf-
|
|
2157
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2158
2158
|
type="button"
|
|
2159
2159
|
aria-expanded="false"
|
|
2160
2160
|
aria-label="Application launcher"
|
|
2161
2161
|
>
|
|
2162
|
-
<span class="pf-
|
|
2162
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2163
2163
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
2164
2164
|
</span>
|
|
2165
2165
|
</button>
|
|
2166
2166
|
</div>
|
|
2167
|
-
<div class="pf-
|
|
2167
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2168
2168
|
<button
|
|
2169
|
-
class="pf-
|
|
2169
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2170
2170
|
type="button"
|
|
2171
2171
|
aria-expanded="false"
|
|
2172
2172
|
aria-label="Settings"
|
|
2173
2173
|
>
|
|
2174
|
-
<span class="pf-
|
|
2174
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2175
2175
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2176
2176
|
</span>
|
|
2177
2177
|
</button>
|
|
2178
2178
|
</div>
|
|
2179
|
-
<div class="pf-
|
|
2179
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2180
2180
|
<button
|
|
2181
|
-
class="pf-
|
|
2181
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2182
2182
|
type="button"
|
|
2183
2183
|
aria-expanded="false"
|
|
2184
2184
|
aria-label="Help"
|
|
2185
2185
|
>
|
|
2186
|
-
<span class="pf-
|
|
2186
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2187
2187
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
2188
2188
|
</span>
|
|
2189
2189
|
</button>
|
|
2190
2190
|
</div>
|
|
2191
2191
|
</div>
|
|
2192
|
-
<div class="pf-
|
|
2192
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
2193
2193
|
<button
|
|
2194
|
-
class="pf-
|
|
2194
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2195
2195
|
type="button"
|
|
2196
2196
|
aria-expanded="false"
|
|
2197
2197
|
aria-label="Actions"
|
|
2198
2198
|
>
|
|
2199
|
-
<span class="pf-
|
|
2199
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2200
2200
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2201
2201
|
</span>
|
|
2202
2202
|
</button>
|
|
@@ -2207,72 +2207,72 @@ wrapperTag: div
|
|
|
2207
2207
|
</div>
|
|
2208
2208
|
</div>
|
|
2209
2209
|
</header>
|
|
2210
|
-
<div class="pf-
|
|
2211
|
-
<div class="pf-
|
|
2210
|
+
<div class="pf-v6-c-page__sidebar">
|
|
2211
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
2212
2212
|
<nav
|
|
2213
|
-
class="pf-
|
|
2213
|
+
class="pf-v6-c-nav"
|
|
2214
2214
|
id="page-demo-sticky-top-section-group-primary-nav"
|
|
2215
2215
|
aria-label="Global"
|
|
2216
2216
|
>
|
|
2217
|
-
<ul class="pf-
|
|
2218
|
-
<li class="pf-
|
|
2219
|
-
<a href="#" class="pf-
|
|
2217
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
2218
|
+
<li class="pf-v6-c-nav__item">
|
|
2219
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
2220
2220
|
</li>
|
|
2221
|
-
<li class="pf-
|
|
2221
|
+
<li class="pf-v6-c-nav__item">
|
|
2222
2222
|
<a
|
|
2223
2223
|
href="#"
|
|
2224
|
-
class="pf-
|
|
2224
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
2225
2225
|
aria-current="page"
|
|
2226
2226
|
>Policy</a>
|
|
2227
2227
|
</li>
|
|
2228
|
-
<li class="pf-
|
|
2229
|
-
<a href="#" class="pf-
|
|
2228
|
+
<li class="pf-v6-c-nav__item">
|
|
2229
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
2230
2230
|
</li>
|
|
2231
|
-
<li class="pf-
|
|
2232
|
-
<a href="#" class="pf-
|
|
2231
|
+
<li class="pf-v6-c-nav__item">
|
|
2232
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
2233
2233
|
</li>
|
|
2234
|
-
<li class="pf-
|
|
2235
|
-
<a href="#" class="pf-
|
|
2234
|
+
<li class="pf-v6-c-nav__item">
|
|
2235
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
2236
2236
|
</li>
|
|
2237
2237
|
</ul>
|
|
2238
2238
|
</nav>
|
|
2239
2239
|
</div>
|
|
2240
2240
|
</div>
|
|
2241
2241
|
<main
|
|
2242
|
-
class="pf-
|
|
2242
|
+
class="pf-v6-c-page__main"
|
|
2243
2243
|
tabindex="-1"
|
|
2244
2244
|
id="main-content-page-demo-sticky-top-section-group"
|
|
2245
2245
|
>
|
|
2246
|
-
<div class="pf-
|
|
2247
|
-
<section class="pf-
|
|
2248
|
-
<div class="pf-
|
|
2249
|
-
<nav class="pf-
|
|
2250
|
-
<ol class="pf-
|
|
2251
|
-
<li class="pf-
|
|
2252
|
-
<a href="#" class="pf-
|
|
2246
|
+
<div class="pf-v6-c-page__main-group pf-m-sticky-top">
|
|
2247
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
2248
|
+
<div class="pf-v6-c-page__main-body">
|
|
2249
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
2250
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
2251
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
2252
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
2253
2253
|
</li>
|
|
2254
|
-
<li class="pf-
|
|
2255
|
-
<span class="pf-
|
|
2254
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
2255
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
2256
2256
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2257
2257
|
</span>
|
|
2258
2258
|
|
|
2259
|
-
<a href="#" class="pf-
|
|
2259
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
2260
2260
|
</li>
|
|
2261
|
-
<li class="pf-
|
|
2262
|
-
<span class="pf-
|
|
2261
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
2262
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
2263
2263
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2264
2264
|
</span>
|
|
2265
2265
|
|
|
2266
|
-
<a href="#" class="pf-
|
|
2266
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
2267
2267
|
</li>
|
|
2268
|
-
<li class="pf-
|
|
2269
|
-
<span class="pf-
|
|
2268
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
2269
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
2270
2270
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2271
2271
|
</span>
|
|
2272
2272
|
|
|
2273
2273
|
<a
|
|
2274
2274
|
href="#"
|
|
2275
|
-
class="pf-
|
|
2275
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
2276
2276
|
aria-current="page"
|
|
2277
2277
|
>Section landing</a>
|
|
2278
2278
|
</li>
|
|
@@ -2280,167 +2280,167 @@ wrapperTag: div
|
|
|
2280
2280
|
</nav>
|
|
2281
2281
|
</div>
|
|
2282
2282
|
</section>
|
|
2283
|
-
<section class="pf-
|
|
2284
|
-
<div class="pf-
|
|
2285
|
-
<div class="pf-
|
|
2283
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2284
|
+
<div class="pf-v6-c-page__main-body">
|
|
2285
|
+
<div class="pf-v6-c-content">
|
|
2286
2286
|
<h1>Main title</h1>
|
|
2287
2287
|
<p>This is a full page demo.</p>
|
|
2288
2288
|
</div>
|
|
2289
2289
|
</div>
|
|
2290
2290
|
</section>
|
|
2291
2291
|
</div>
|
|
2292
|
-
<section class="pf-
|
|
2293
|
-
<div class="pf-
|
|
2294
|
-
<div class="pf-
|
|
2295
|
-
<div class="pf-
|
|
2296
|
-
<div class="pf-
|
|
2292
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
2293
|
+
<div class="pf-v6-c-page__main-body">
|
|
2294
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
2295
|
+
<div class="pf-v6-c-card">
|
|
2296
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2297
2297
|
</div>
|
|
2298
|
-
<div class="pf-
|
|
2299
|
-
<div class="pf-
|
|
2298
|
+
<div class="pf-v6-c-card">
|
|
2299
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2300
2300
|
</div>
|
|
2301
|
-
<div class="pf-
|
|
2302
|
-
<div class="pf-
|
|
2301
|
+
<div class="pf-v6-c-card">
|
|
2302
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2303
2303
|
</div>
|
|
2304
|
-
<div class="pf-
|
|
2305
|
-
<div class="pf-
|
|
2304
|
+
<div class="pf-v6-c-card">
|
|
2305
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2306
2306
|
</div>
|
|
2307
|
-
<div class="pf-
|
|
2308
|
-
<div class="pf-
|
|
2307
|
+
<div class="pf-v6-c-card">
|
|
2308
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2309
2309
|
</div>
|
|
2310
|
-
<div class="pf-
|
|
2311
|
-
<div class="pf-
|
|
2310
|
+
<div class="pf-v6-c-card">
|
|
2311
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2312
2312
|
</div>
|
|
2313
|
-
<div class="pf-
|
|
2314
|
-
<div class="pf-
|
|
2313
|
+
<div class="pf-v6-c-card">
|
|
2314
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2315
2315
|
</div>
|
|
2316
|
-
<div class="pf-
|
|
2317
|
-
<div class="pf-
|
|
2316
|
+
<div class="pf-v6-c-card">
|
|
2317
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2318
2318
|
</div>
|
|
2319
|
-
<div class="pf-
|
|
2320
|
-
<div class="pf-
|
|
2319
|
+
<div class="pf-v6-c-card">
|
|
2320
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2321
2321
|
</div>
|
|
2322
|
-
<div class="pf-
|
|
2323
|
-
<div class="pf-
|
|
2322
|
+
<div class="pf-v6-c-card">
|
|
2323
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2324
2324
|
</div>
|
|
2325
|
-
<div class="pf-
|
|
2326
|
-
<div class="pf-
|
|
2325
|
+
<div class="pf-v6-c-card">
|
|
2326
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2327
2327
|
</div>
|
|
2328
|
-
<div class="pf-
|
|
2329
|
-
<div class="pf-
|
|
2328
|
+
<div class="pf-v6-c-card">
|
|
2329
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2330
2330
|
</div>
|
|
2331
|
-
<div class="pf-
|
|
2332
|
-
<div class="pf-
|
|
2331
|
+
<div class="pf-v6-c-card">
|
|
2332
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2333
2333
|
</div>
|
|
2334
|
-
<div class="pf-
|
|
2335
|
-
<div class="pf-
|
|
2334
|
+
<div class="pf-v6-c-card">
|
|
2335
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2336
2336
|
</div>
|
|
2337
|
-
<div class="pf-
|
|
2338
|
-
<div class="pf-
|
|
2337
|
+
<div class="pf-v6-c-card">
|
|
2338
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2339
2339
|
</div>
|
|
2340
|
-
<div class="pf-
|
|
2341
|
-
<div class="pf-
|
|
2340
|
+
<div class="pf-v6-c-card">
|
|
2341
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2342
2342
|
</div>
|
|
2343
|
-
<div class="pf-
|
|
2344
|
-
<div class="pf-
|
|
2343
|
+
<div class="pf-v6-c-card">
|
|
2344
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2345
2345
|
</div>
|
|
2346
|
-
<div class="pf-
|
|
2347
|
-
<div class="pf-
|
|
2346
|
+
<div class="pf-v6-c-card">
|
|
2347
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2348
2348
|
</div>
|
|
2349
|
-
<div class="pf-
|
|
2350
|
-
<div class="pf-
|
|
2349
|
+
<div class="pf-v6-c-card">
|
|
2350
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2351
2351
|
</div>
|
|
2352
|
-
<div class="pf-
|
|
2353
|
-
<div class="pf-
|
|
2352
|
+
<div class="pf-v6-c-card">
|
|
2353
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2354
2354
|
</div>
|
|
2355
|
-
<div class="pf-
|
|
2356
|
-
<div class="pf-
|
|
2355
|
+
<div class="pf-v6-c-card">
|
|
2356
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2357
2357
|
</div>
|
|
2358
|
-
<div class="pf-
|
|
2359
|
-
<div class="pf-
|
|
2358
|
+
<div class="pf-v6-c-card">
|
|
2359
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2360
2360
|
</div>
|
|
2361
|
-
<div class="pf-
|
|
2362
|
-
<div class="pf-
|
|
2361
|
+
<div class="pf-v6-c-card">
|
|
2362
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2363
2363
|
</div>
|
|
2364
|
-
<div class="pf-
|
|
2365
|
-
<div class="pf-
|
|
2364
|
+
<div class="pf-v6-c-card">
|
|
2365
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2366
2366
|
</div>
|
|
2367
|
-
<div class="pf-
|
|
2368
|
-
<div class="pf-
|
|
2367
|
+
<div class="pf-v6-c-card">
|
|
2368
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2369
2369
|
</div>
|
|
2370
|
-
<div class="pf-
|
|
2371
|
-
<div class="pf-
|
|
2370
|
+
<div class="pf-v6-c-card">
|
|
2371
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2372
2372
|
</div>
|
|
2373
|
-
<div class="pf-
|
|
2374
|
-
<div class="pf-
|
|
2373
|
+
<div class="pf-v6-c-card">
|
|
2374
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2375
2375
|
</div>
|
|
2376
|
-
<div class="pf-
|
|
2377
|
-
<div class="pf-
|
|
2376
|
+
<div class="pf-v6-c-card">
|
|
2377
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2378
2378
|
</div>
|
|
2379
|
-
<div class="pf-
|
|
2380
|
-
<div class="pf-
|
|
2379
|
+
<div class="pf-v6-c-card">
|
|
2380
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2381
2381
|
</div>
|
|
2382
|
-
<div class="pf-
|
|
2383
|
-
<div class="pf-
|
|
2382
|
+
<div class="pf-v6-c-card">
|
|
2383
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2384
2384
|
</div>
|
|
2385
|
-
<div class="pf-
|
|
2386
|
-
<div class="pf-
|
|
2385
|
+
<div class="pf-v6-c-card">
|
|
2386
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2387
2387
|
</div>
|
|
2388
|
-
<div class="pf-
|
|
2389
|
-
<div class="pf-
|
|
2388
|
+
<div class="pf-v6-c-card">
|
|
2389
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2390
2390
|
</div>
|
|
2391
|
-
<div class="pf-
|
|
2392
|
-
<div class="pf-
|
|
2391
|
+
<div class="pf-v6-c-card">
|
|
2392
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2393
2393
|
</div>
|
|
2394
|
-
<div class="pf-
|
|
2395
|
-
<div class="pf-
|
|
2394
|
+
<div class="pf-v6-c-card">
|
|
2395
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2396
2396
|
</div>
|
|
2397
|
-
<div class="pf-
|
|
2398
|
-
<div class="pf-
|
|
2397
|
+
<div class="pf-v6-c-card">
|
|
2398
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2399
2399
|
</div>
|
|
2400
|
-
<div class="pf-
|
|
2401
|
-
<div class="pf-
|
|
2400
|
+
<div class="pf-v6-c-card">
|
|
2401
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2402
2402
|
</div>
|
|
2403
|
-
<div class="pf-
|
|
2404
|
-
<div class="pf-
|
|
2403
|
+
<div class="pf-v6-c-card">
|
|
2404
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2405
2405
|
</div>
|
|
2406
|
-
<div class="pf-
|
|
2407
|
-
<div class="pf-
|
|
2406
|
+
<div class="pf-v6-c-card">
|
|
2407
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2408
2408
|
</div>
|
|
2409
|
-
<div class="pf-
|
|
2410
|
-
<div class="pf-
|
|
2409
|
+
<div class="pf-v6-c-card">
|
|
2410
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2411
2411
|
</div>
|
|
2412
|
-
<div class="pf-
|
|
2413
|
-
<div class="pf-
|
|
2412
|
+
<div class="pf-v6-c-card">
|
|
2413
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2414
2414
|
</div>
|
|
2415
|
-
<div class="pf-
|
|
2416
|
-
<div class="pf-
|
|
2415
|
+
<div class="pf-v6-c-card">
|
|
2416
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2417
2417
|
</div>
|
|
2418
|
-
<div class="pf-
|
|
2419
|
-
<div class="pf-
|
|
2418
|
+
<div class="pf-v6-c-card">
|
|
2419
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2420
2420
|
</div>
|
|
2421
|
-
<div class="pf-
|
|
2422
|
-
<div class="pf-
|
|
2421
|
+
<div class="pf-v6-c-card">
|
|
2422
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2423
2423
|
</div>
|
|
2424
|
-
<div class="pf-
|
|
2425
|
-
<div class="pf-
|
|
2424
|
+
<div class="pf-v6-c-card">
|
|
2425
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2426
2426
|
</div>
|
|
2427
|
-
<div class="pf-
|
|
2428
|
-
<div class="pf-
|
|
2427
|
+
<div class="pf-v6-c-card">
|
|
2428
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2429
2429
|
</div>
|
|
2430
|
-
<div class="pf-
|
|
2431
|
-
<div class="pf-
|
|
2430
|
+
<div class="pf-v6-c-card">
|
|
2431
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2432
2432
|
</div>
|
|
2433
|
-
<div class="pf-
|
|
2434
|
-
<div class="pf-
|
|
2433
|
+
<div class="pf-v6-c-card">
|
|
2434
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2435
2435
|
</div>
|
|
2436
|
-
<div class="pf-
|
|
2437
|
-
<div class="pf-
|
|
2436
|
+
<div class="pf-v6-c-card">
|
|
2437
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2438
2438
|
</div>
|
|
2439
|
-
<div class="pf-
|
|
2440
|
-
<div class="pf-
|
|
2439
|
+
<div class="pf-v6-c-card">
|
|
2440
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2441
2441
|
</div>
|
|
2442
|
-
<div class="pf-
|
|
2443
|
-
<div class="pf-
|
|
2442
|
+
<div class="pf-v6-c-card">
|
|
2443
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2444
2444
|
</div>
|
|
2445
2445
|
</div>
|
|
2446
2446
|
</div>
|
|
@@ -2453,28 +2453,28 @@ wrapperTag: div
|
|
|
2453
2453
|
### Sticky section bottom
|
|
2454
2454
|
|
|
2455
2455
|
```html isFullscreen
|
|
2456
|
-
<div class="pf-
|
|
2457
|
-
<div class="pf-
|
|
2456
|
+
<div class="pf-v6-c-page" id="page-demo-sticky-section-bottom">
|
|
2457
|
+
<div class="pf-v6-c-skip-to-content">
|
|
2458
2458
|
<a
|
|
2459
|
-
class="pf-
|
|
2459
|
+
class="pf-v6-c-button pf-m-primary"
|
|
2460
2460
|
href="#main-content-page-demo-sticky-section-bottom"
|
|
2461
2461
|
>Skip to content</a>
|
|
2462
2462
|
</div>
|
|
2463
2463
|
<header
|
|
2464
|
-
class="pf-
|
|
2464
|
+
class="pf-v6-c-masthead"
|
|
2465
2465
|
id="page-demo-sticky-section-bottom-masthead"
|
|
2466
2466
|
>
|
|
2467
|
-
<span class="pf-
|
|
2467
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
2468
2468
|
<button
|
|
2469
|
-
class="pf-
|
|
2469
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2470
2470
|
type="button"
|
|
2471
2471
|
aria-label="Global navigation"
|
|
2472
2472
|
>
|
|
2473
2473
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2474
2474
|
</button>
|
|
2475
2475
|
</span>
|
|
2476
|
-
<div class="pf-
|
|
2477
|
-
<a class="pf-
|
|
2476
|
+
<div class="pf-v6-c-masthead__main">
|
|
2477
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
2478
2478
|
<svg height="40px" viewBox="0 0 679 158">
|
|
2479
2479
|
<title>PF-HorizontalLogo-Color</title>
|
|
2480
2480
|
<defs>
|
|
@@ -2547,37 +2547,37 @@ wrapperTag: div
|
|
|
2547
2547
|
</svg>
|
|
2548
2548
|
</a>
|
|
2549
2549
|
</div>
|
|
2550
|
-
<div class="pf-
|
|
2550
|
+
<div class="pf-v6-c-masthead__content">
|
|
2551
2551
|
<div
|
|
2552
|
-
class="pf-
|
|
2552
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
2553
2553
|
id="page-demo-sticky-section-bottom-masthead-toolbar"
|
|
2554
2554
|
>
|
|
2555
|
-
<div class="pf-
|
|
2556
|
-
<div class="pf-
|
|
2557
|
-
<div class="pf-
|
|
2555
|
+
<div class="pf-v6-c-toolbar__content">
|
|
2556
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
2557
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2558
2558
|
<button
|
|
2559
|
-
class="pf-
|
|
2559
|
+
class="pf-v6-c-menu-toggle"
|
|
2560
2560
|
type="button"
|
|
2561
2561
|
aria-expanded="false"
|
|
2562
2562
|
>
|
|
2563
|
-
<span class="pf-
|
|
2564
|
-
<span class="pf-
|
|
2565
|
-
<span class="pf-
|
|
2563
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
2564
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2565
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2566
2566
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2567
2567
|
</span>
|
|
2568
2568
|
</span>
|
|
2569
2569
|
</button>
|
|
2570
2570
|
</div>
|
|
2571
2571
|
|
|
2572
|
-
<div class="pf-
|
|
2572
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2573
2573
|
<button
|
|
2574
|
-
class="pf-
|
|
2574
|
+
class="pf-v6-c-menu-toggle"
|
|
2575
2575
|
type="button"
|
|
2576
2576
|
aria-expanded="false"
|
|
2577
2577
|
>
|
|
2578
|
-
<span class="pf-
|
|
2579
|
-
<span class="pf-
|
|
2580
|
-
<span class="pf-
|
|
2578
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
2579
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2580
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2581
2581
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2582
2582
|
</span>
|
|
2583
2583
|
</span>
|
|
@@ -2585,56 +2585,56 @@ wrapperTag: div
|
|
|
2585
2585
|
</div>
|
|
2586
2586
|
|
|
2587
2587
|
<div
|
|
2588
|
-
class="pf-
|
|
2588
|
+
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"
|
|
2589
2589
|
>
|
|
2590
2590
|
<div
|
|
2591
|
-
class="pf-
|
|
2591
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
2592
2592
|
>
|
|
2593
|
-
<div class="pf-
|
|
2593
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2594
2594
|
<button
|
|
2595
|
-
class="pf-
|
|
2595
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2596
2596
|
type="button"
|
|
2597
2597
|
aria-expanded="false"
|
|
2598
2598
|
aria-label="Application launcher"
|
|
2599
2599
|
>
|
|
2600
|
-
<span class="pf-
|
|
2600
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2601
2601
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
2602
2602
|
</span>
|
|
2603
2603
|
</button>
|
|
2604
2604
|
</div>
|
|
2605
|
-
<div class="pf-
|
|
2605
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2606
2606
|
<button
|
|
2607
|
-
class="pf-
|
|
2607
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2608
2608
|
type="button"
|
|
2609
2609
|
aria-expanded="false"
|
|
2610
2610
|
aria-label="Settings"
|
|
2611
2611
|
>
|
|
2612
|
-
<span class="pf-
|
|
2612
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2613
2613
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2614
2614
|
</span>
|
|
2615
2615
|
</button>
|
|
2616
2616
|
</div>
|
|
2617
|
-
<div class="pf-
|
|
2617
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2618
2618
|
<button
|
|
2619
|
-
class="pf-
|
|
2619
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2620
2620
|
type="button"
|
|
2621
2621
|
aria-expanded="false"
|
|
2622
2622
|
aria-label="Help"
|
|
2623
2623
|
>
|
|
2624
|
-
<span class="pf-
|
|
2624
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2625
2625
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
2626
2626
|
</span>
|
|
2627
2627
|
</button>
|
|
2628
2628
|
</div>
|
|
2629
2629
|
</div>
|
|
2630
|
-
<div class="pf-
|
|
2630
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
2631
2631
|
<button
|
|
2632
|
-
class="pf-
|
|
2632
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2633
2633
|
type="button"
|
|
2634
2634
|
aria-expanded="false"
|
|
2635
2635
|
aria-label="Actions"
|
|
2636
2636
|
>
|
|
2637
|
-
<span class="pf-
|
|
2637
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2638
2638
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2639
2639
|
</span>
|
|
2640
2640
|
</button>
|
|
@@ -2645,71 +2645,71 @@ wrapperTag: div
|
|
|
2645
2645
|
</div>
|
|
2646
2646
|
</div>
|
|
2647
2647
|
</header>
|
|
2648
|
-
<div class="pf-
|
|
2649
|
-
<div class="pf-
|
|
2648
|
+
<div class="pf-v6-c-page__sidebar">
|
|
2649
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
2650
2650
|
<nav
|
|
2651
|
-
class="pf-
|
|
2651
|
+
class="pf-v6-c-nav"
|
|
2652
2652
|
id="page-demo-sticky-section-bottom-primary-nav"
|
|
2653
2653
|
aria-label="Global"
|
|
2654
2654
|
>
|
|
2655
|
-
<ul class="pf-
|
|
2656
|
-
<li class="pf-
|
|
2657
|
-
<a href="#" class="pf-
|
|
2655
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
2656
|
+
<li class="pf-v6-c-nav__item">
|
|
2657
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
2658
2658
|
</li>
|
|
2659
|
-
<li class="pf-
|
|
2659
|
+
<li class="pf-v6-c-nav__item">
|
|
2660
2660
|
<a
|
|
2661
2661
|
href="#"
|
|
2662
|
-
class="pf-
|
|
2662
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
2663
2663
|
aria-current="page"
|
|
2664
2664
|
>Policy</a>
|
|
2665
2665
|
</li>
|
|
2666
|
-
<li class="pf-
|
|
2667
|
-
<a href="#" class="pf-
|
|
2666
|
+
<li class="pf-v6-c-nav__item">
|
|
2667
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
2668
2668
|
</li>
|
|
2669
|
-
<li class="pf-
|
|
2670
|
-
<a href="#" class="pf-
|
|
2669
|
+
<li class="pf-v6-c-nav__item">
|
|
2670
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
2671
2671
|
</li>
|
|
2672
|
-
<li class="pf-
|
|
2673
|
-
<a href="#" class="pf-
|
|
2672
|
+
<li class="pf-v6-c-nav__item">
|
|
2673
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
2674
2674
|
</li>
|
|
2675
2675
|
</ul>
|
|
2676
2676
|
</nav>
|
|
2677
2677
|
</div>
|
|
2678
2678
|
</div>
|
|
2679
2679
|
<main
|
|
2680
|
-
class="pf-
|
|
2680
|
+
class="pf-v6-c-page__main"
|
|
2681
2681
|
tabindex="-1"
|
|
2682
2682
|
id="main-content-page-demo-sticky-section-bottom"
|
|
2683
2683
|
>
|
|
2684
|
-
<section class="pf-
|
|
2685
|
-
<div class="pf-
|
|
2686
|
-
<nav class="pf-
|
|
2687
|
-
<ol class="pf-
|
|
2688
|
-
<li class="pf-
|
|
2689
|
-
<a href="#" class="pf-
|
|
2684
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
2685
|
+
<div class="pf-v6-c-page__main-body">
|
|
2686
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
2687
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
2688
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
2689
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
2690
2690
|
</li>
|
|
2691
|
-
<li class="pf-
|
|
2692
|
-
<span class="pf-
|
|
2691
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
2692
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
2693
2693
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2694
2694
|
</span>
|
|
2695
2695
|
|
|
2696
|
-
<a href="#" class="pf-
|
|
2696
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
2697
2697
|
</li>
|
|
2698
|
-
<li class="pf-
|
|
2699
|
-
<span class="pf-
|
|
2698
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
2699
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
2700
2700
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2701
2701
|
</span>
|
|
2702
2702
|
|
|
2703
|
-
<a href="#" class="pf-
|
|
2703
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
2704
2704
|
</li>
|
|
2705
|
-
<li class="pf-
|
|
2706
|
-
<span class="pf-
|
|
2705
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
2706
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
2707
2707
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2708
2708
|
</span>
|
|
2709
2709
|
|
|
2710
2710
|
<a
|
|
2711
2711
|
href="#"
|
|
2712
|
-
class="pf-
|
|
2712
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
2713
2713
|
aria-current="page"
|
|
2714
2714
|
>Section landing</a>
|
|
2715
2715
|
</li>
|
|
@@ -2717,174 +2717,174 @@ wrapperTag: div
|
|
|
2717
2717
|
</nav>
|
|
2718
2718
|
</div>
|
|
2719
2719
|
</section>
|
|
2720
|
-
<section class="pf-
|
|
2721
|
-
<div class="pf-
|
|
2722
|
-
<div class="pf-
|
|
2720
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2721
|
+
<div class="pf-v6-c-page__main-body">
|
|
2722
|
+
<div class="pf-v6-c-content">
|
|
2723
2723
|
<h1>Main title</h1>
|
|
2724
2724
|
<p>This is a full page demo.</p>
|
|
2725
2725
|
</div>
|
|
2726
2726
|
</div>
|
|
2727
2727
|
</section>
|
|
2728
|
-
<section class="pf-
|
|
2729
|
-
<div class="pf-
|
|
2730
|
-
<div class="pf-
|
|
2731
|
-
<div class="pf-
|
|
2732
|
-
<div class="pf-
|
|
2728
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
2729
|
+
<div class="pf-v6-c-page__main-body">
|
|
2730
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
2731
|
+
<div class="pf-v6-c-card">
|
|
2732
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2733
2733
|
</div>
|
|
2734
|
-
<div class="pf-
|
|
2735
|
-
<div class="pf-
|
|
2734
|
+
<div class="pf-v6-c-card">
|
|
2735
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2736
2736
|
</div>
|
|
2737
|
-
<div class="pf-
|
|
2738
|
-
<div class="pf-
|
|
2737
|
+
<div class="pf-v6-c-card">
|
|
2738
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2739
2739
|
</div>
|
|
2740
|
-
<div class="pf-
|
|
2741
|
-
<div class="pf-
|
|
2740
|
+
<div class="pf-v6-c-card">
|
|
2741
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2742
2742
|
</div>
|
|
2743
|
-
<div class="pf-
|
|
2744
|
-
<div class="pf-
|
|
2743
|
+
<div class="pf-v6-c-card">
|
|
2744
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2745
2745
|
</div>
|
|
2746
|
-
<div class="pf-
|
|
2747
|
-
<div class="pf-
|
|
2746
|
+
<div class="pf-v6-c-card">
|
|
2747
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2748
2748
|
</div>
|
|
2749
|
-
<div class="pf-
|
|
2750
|
-
<div class="pf-
|
|
2749
|
+
<div class="pf-v6-c-card">
|
|
2750
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2751
2751
|
</div>
|
|
2752
|
-
<div class="pf-
|
|
2753
|
-
<div class="pf-
|
|
2752
|
+
<div class="pf-v6-c-card">
|
|
2753
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2754
2754
|
</div>
|
|
2755
|
-
<div class="pf-
|
|
2756
|
-
<div class="pf-
|
|
2755
|
+
<div class="pf-v6-c-card">
|
|
2756
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2757
2757
|
</div>
|
|
2758
|
-
<div class="pf-
|
|
2759
|
-
<div class="pf-
|
|
2758
|
+
<div class="pf-v6-c-card">
|
|
2759
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2760
2760
|
</div>
|
|
2761
|
-
<div class="pf-
|
|
2762
|
-
<div class="pf-
|
|
2761
|
+
<div class="pf-v6-c-card">
|
|
2762
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2763
2763
|
</div>
|
|
2764
|
-
<div class="pf-
|
|
2765
|
-
<div class="pf-
|
|
2764
|
+
<div class="pf-v6-c-card">
|
|
2765
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2766
2766
|
</div>
|
|
2767
|
-
<div class="pf-
|
|
2768
|
-
<div class="pf-
|
|
2767
|
+
<div class="pf-v6-c-card">
|
|
2768
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2769
2769
|
</div>
|
|
2770
|
-
<div class="pf-
|
|
2771
|
-
<div class="pf-
|
|
2770
|
+
<div class="pf-v6-c-card">
|
|
2771
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2772
2772
|
</div>
|
|
2773
|
-
<div class="pf-
|
|
2774
|
-
<div class="pf-
|
|
2773
|
+
<div class="pf-v6-c-card">
|
|
2774
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2775
2775
|
</div>
|
|
2776
|
-
<div class="pf-
|
|
2777
|
-
<div class="pf-
|
|
2776
|
+
<div class="pf-v6-c-card">
|
|
2777
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2778
2778
|
</div>
|
|
2779
|
-
<div class="pf-
|
|
2780
|
-
<div class="pf-
|
|
2779
|
+
<div class="pf-v6-c-card">
|
|
2780
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2781
2781
|
</div>
|
|
2782
|
-
<div class="pf-
|
|
2783
|
-
<div class="pf-
|
|
2782
|
+
<div class="pf-v6-c-card">
|
|
2783
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2784
2784
|
</div>
|
|
2785
|
-
<div class="pf-
|
|
2786
|
-
<div class="pf-
|
|
2785
|
+
<div class="pf-v6-c-card">
|
|
2786
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2787
2787
|
</div>
|
|
2788
|
-
<div class="pf-
|
|
2789
|
-
<div class="pf-
|
|
2788
|
+
<div class="pf-v6-c-card">
|
|
2789
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2790
2790
|
</div>
|
|
2791
|
-
<div class="pf-
|
|
2792
|
-
<div class="pf-
|
|
2791
|
+
<div class="pf-v6-c-card">
|
|
2792
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2793
2793
|
</div>
|
|
2794
|
-
<div class="pf-
|
|
2795
|
-
<div class="pf-
|
|
2794
|
+
<div class="pf-v6-c-card">
|
|
2795
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2796
2796
|
</div>
|
|
2797
|
-
<div class="pf-
|
|
2798
|
-
<div class="pf-
|
|
2797
|
+
<div class="pf-v6-c-card">
|
|
2798
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2799
2799
|
</div>
|
|
2800
|
-
<div class="pf-
|
|
2801
|
-
<div class="pf-
|
|
2800
|
+
<div class="pf-v6-c-card">
|
|
2801
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2802
2802
|
</div>
|
|
2803
|
-
<div class="pf-
|
|
2804
|
-
<div class="pf-
|
|
2803
|
+
<div class="pf-v6-c-card">
|
|
2804
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2805
2805
|
</div>
|
|
2806
|
-
<div class="pf-
|
|
2807
|
-
<div class="pf-
|
|
2806
|
+
<div class="pf-v6-c-card">
|
|
2807
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2808
2808
|
</div>
|
|
2809
|
-
<div class="pf-
|
|
2810
|
-
<div class="pf-
|
|
2809
|
+
<div class="pf-v6-c-card">
|
|
2810
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2811
2811
|
</div>
|
|
2812
|
-
<div class="pf-
|
|
2813
|
-
<div class="pf-
|
|
2812
|
+
<div class="pf-v6-c-card">
|
|
2813
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2814
2814
|
</div>
|
|
2815
|
-
<div class="pf-
|
|
2816
|
-
<div class="pf-
|
|
2815
|
+
<div class="pf-v6-c-card">
|
|
2816
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2817
2817
|
</div>
|
|
2818
|
-
<div class="pf-
|
|
2819
|
-
<div class="pf-
|
|
2818
|
+
<div class="pf-v6-c-card">
|
|
2819
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2820
2820
|
</div>
|
|
2821
|
-
<div class="pf-
|
|
2822
|
-
<div class="pf-
|
|
2821
|
+
<div class="pf-v6-c-card">
|
|
2822
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2823
2823
|
</div>
|
|
2824
|
-
<div class="pf-
|
|
2825
|
-
<div class="pf-
|
|
2824
|
+
<div class="pf-v6-c-card">
|
|
2825
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2826
2826
|
</div>
|
|
2827
|
-
<div class="pf-
|
|
2828
|
-
<div class="pf-
|
|
2827
|
+
<div class="pf-v6-c-card">
|
|
2828
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2829
2829
|
</div>
|
|
2830
|
-
<div class="pf-
|
|
2831
|
-
<div class="pf-
|
|
2830
|
+
<div class="pf-v6-c-card">
|
|
2831
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2832
2832
|
</div>
|
|
2833
|
-
<div class="pf-
|
|
2834
|
-
<div class="pf-
|
|
2833
|
+
<div class="pf-v6-c-card">
|
|
2834
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2835
2835
|
</div>
|
|
2836
|
-
<div class="pf-
|
|
2837
|
-
<div class="pf-
|
|
2836
|
+
<div class="pf-v6-c-card">
|
|
2837
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2838
2838
|
</div>
|
|
2839
|
-
<div class="pf-
|
|
2840
|
-
<div class="pf-
|
|
2839
|
+
<div class="pf-v6-c-card">
|
|
2840
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2841
2841
|
</div>
|
|
2842
|
-
<div class="pf-
|
|
2843
|
-
<div class="pf-
|
|
2842
|
+
<div class="pf-v6-c-card">
|
|
2843
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2844
2844
|
</div>
|
|
2845
|
-
<div class="pf-
|
|
2846
|
-
<div class="pf-
|
|
2845
|
+
<div class="pf-v6-c-card">
|
|
2846
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2847
2847
|
</div>
|
|
2848
|
-
<div class="pf-
|
|
2849
|
-
<div class="pf-
|
|
2848
|
+
<div class="pf-v6-c-card">
|
|
2849
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2850
2850
|
</div>
|
|
2851
|
-
<div class="pf-
|
|
2852
|
-
<div class="pf-
|
|
2851
|
+
<div class="pf-v6-c-card">
|
|
2852
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2853
2853
|
</div>
|
|
2854
|
-
<div class="pf-
|
|
2855
|
-
<div class="pf-
|
|
2854
|
+
<div class="pf-v6-c-card">
|
|
2855
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2856
2856
|
</div>
|
|
2857
|
-
<div class="pf-
|
|
2858
|
-
<div class="pf-
|
|
2857
|
+
<div class="pf-v6-c-card">
|
|
2858
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2859
2859
|
</div>
|
|
2860
|
-
<div class="pf-
|
|
2861
|
-
<div class="pf-
|
|
2860
|
+
<div class="pf-v6-c-card">
|
|
2861
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2862
2862
|
</div>
|
|
2863
|
-
<div class="pf-
|
|
2864
|
-
<div class="pf-
|
|
2863
|
+
<div class="pf-v6-c-card">
|
|
2864
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2865
2865
|
</div>
|
|
2866
|
-
<div class="pf-
|
|
2867
|
-
<div class="pf-
|
|
2866
|
+
<div class="pf-v6-c-card">
|
|
2867
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2868
2868
|
</div>
|
|
2869
|
-
<div class="pf-
|
|
2870
|
-
<div class="pf-
|
|
2869
|
+
<div class="pf-v6-c-card">
|
|
2870
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2871
2871
|
</div>
|
|
2872
|
-
<div class="pf-
|
|
2873
|
-
<div class="pf-
|
|
2872
|
+
<div class="pf-v6-c-card">
|
|
2873
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2874
2874
|
</div>
|
|
2875
|
-
<div class="pf-
|
|
2876
|
-
<div class="pf-
|
|
2875
|
+
<div class="pf-v6-c-card">
|
|
2876
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2877
2877
|
</div>
|
|
2878
|
-
<div class="pf-
|
|
2879
|
-
<div class="pf-
|
|
2878
|
+
<div class="pf-v6-c-card">
|
|
2879
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
2880
2880
|
</div>
|
|
2881
2881
|
</div>
|
|
2882
2882
|
</div>
|
|
2883
2883
|
</section>
|
|
2884
2884
|
<section
|
|
2885
|
-
class="pf-
|
|
2885
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-sticky-bottom"
|
|
2886
2886
|
>
|
|
2887
|
-
<div class="pf-
|
|
2887
|
+
<div class="pf-v6-c-page__main-body">
|
|
2888
2888
|
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
2889
2889
|
</div>
|
|
2890
2890
|
</section>
|
|
@@ -2896,25 +2896,25 @@ wrapperTag: div
|
|
|
2896
2896
|
### Overflow scroll
|
|
2897
2897
|
|
|
2898
2898
|
```html isFullscreen
|
|
2899
|
-
<div class="pf-
|
|
2900
|
-
<div class="pf-
|
|
2899
|
+
<div class="pf-v6-c-page" id="page-demo-overflow-scroll">
|
|
2900
|
+
<div class="pf-v6-c-skip-to-content">
|
|
2901
2901
|
<a
|
|
2902
|
-
class="pf-
|
|
2902
|
+
class="pf-v6-c-button pf-m-primary"
|
|
2903
2903
|
href="#main-content-page-demo-overflow-scroll"
|
|
2904
2904
|
>Skip to content</a>
|
|
2905
2905
|
</div>
|
|
2906
|
-
<header class="pf-
|
|
2907
|
-
<span class="pf-
|
|
2906
|
+
<header class="pf-v6-c-masthead" id="page-demo-overflow-scroll-masthead">
|
|
2907
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
2908
2908
|
<button
|
|
2909
|
-
class="pf-
|
|
2909
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2910
2910
|
type="button"
|
|
2911
2911
|
aria-label="Global navigation"
|
|
2912
2912
|
>
|
|
2913
2913
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2914
2914
|
</button>
|
|
2915
2915
|
</span>
|
|
2916
|
-
<div class="pf-
|
|
2917
|
-
<a class="pf-
|
|
2916
|
+
<div class="pf-v6-c-masthead__main">
|
|
2917
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
2918
2918
|
<svg height="40px" viewBox="0 0 679 158">
|
|
2919
2919
|
<title>PF-HorizontalLogo-Color</title>
|
|
2920
2920
|
<defs>
|
|
@@ -2987,37 +2987,37 @@ wrapperTag: div
|
|
|
2987
2987
|
</svg>
|
|
2988
2988
|
</a>
|
|
2989
2989
|
</div>
|
|
2990
|
-
<div class="pf-
|
|
2990
|
+
<div class="pf-v6-c-masthead__content">
|
|
2991
2991
|
<div
|
|
2992
|
-
class="pf-
|
|
2992
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
2993
2993
|
id="page-demo-overflow-scroll-masthead-toolbar"
|
|
2994
2994
|
>
|
|
2995
|
-
<div class="pf-
|
|
2996
|
-
<div class="pf-
|
|
2997
|
-
<div class="pf-
|
|
2995
|
+
<div class="pf-v6-c-toolbar__content">
|
|
2996
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
2997
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2998
2998
|
<button
|
|
2999
|
-
class="pf-
|
|
2999
|
+
class="pf-v6-c-menu-toggle"
|
|
3000
3000
|
type="button"
|
|
3001
3001
|
aria-expanded="false"
|
|
3002
3002
|
>
|
|
3003
|
-
<span class="pf-
|
|
3004
|
-
<span class="pf-
|
|
3005
|
-
<span class="pf-
|
|
3003
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
3004
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
3005
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
3006
3006
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3007
3007
|
</span>
|
|
3008
3008
|
</span>
|
|
3009
3009
|
</button>
|
|
3010
3010
|
</div>
|
|
3011
3011
|
|
|
3012
|
-
<div class="pf-
|
|
3012
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3013
3013
|
<button
|
|
3014
|
-
class="pf-
|
|
3014
|
+
class="pf-v6-c-menu-toggle"
|
|
3015
3015
|
type="button"
|
|
3016
3016
|
aria-expanded="false"
|
|
3017
3017
|
>
|
|
3018
|
-
<span class="pf-
|
|
3019
|
-
<span class="pf-
|
|
3020
|
-
<span class="pf-
|
|
3018
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
3019
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
3020
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
3021
3021
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3022
3022
|
</span>
|
|
3023
3023
|
</span>
|
|
@@ -3025,56 +3025,56 @@ wrapperTag: div
|
|
|
3025
3025
|
</div>
|
|
3026
3026
|
|
|
3027
3027
|
<div
|
|
3028
|
-
class="pf-
|
|
3028
|
+
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"
|
|
3029
3029
|
>
|
|
3030
3030
|
<div
|
|
3031
|
-
class="pf-
|
|
3031
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
3032
3032
|
>
|
|
3033
|
-
<div class="pf-
|
|
3033
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3034
3034
|
<button
|
|
3035
|
-
class="pf-
|
|
3035
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3036
3036
|
type="button"
|
|
3037
3037
|
aria-expanded="false"
|
|
3038
3038
|
aria-label="Application launcher"
|
|
3039
3039
|
>
|
|
3040
|
-
<span class="pf-
|
|
3040
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
3041
3041
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
3042
3042
|
</span>
|
|
3043
3043
|
</button>
|
|
3044
3044
|
</div>
|
|
3045
|
-
<div class="pf-
|
|
3045
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3046
3046
|
<button
|
|
3047
|
-
class="pf-
|
|
3047
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3048
3048
|
type="button"
|
|
3049
3049
|
aria-expanded="false"
|
|
3050
3050
|
aria-label="Settings"
|
|
3051
3051
|
>
|
|
3052
|
-
<span class="pf-
|
|
3052
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
3053
3053
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
3054
3054
|
</span>
|
|
3055
3055
|
</button>
|
|
3056
3056
|
</div>
|
|
3057
|
-
<div class="pf-
|
|
3057
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3058
3058
|
<button
|
|
3059
|
-
class="pf-
|
|
3059
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3060
3060
|
type="button"
|
|
3061
3061
|
aria-expanded="false"
|
|
3062
3062
|
aria-label="Help"
|
|
3063
3063
|
>
|
|
3064
|
-
<span class="pf-
|
|
3064
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
3065
3065
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
3066
3066
|
</span>
|
|
3067
3067
|
</button>
|
|
3068
3068
|
</div>
|
|
3069
3069
|
</div>
|
|
3070
|
-
<div class="pf-
|
|
3070
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
3071
3071
|
<button
|
|
3072
|
-
class="pf-
|
|
3072
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3073
3073
|
type="button"
|
|
3074
3074
|
aria-expanded="false"
|
|
3075
3075
|
aria-label="Actions"
|
|
3076
3076
|
>
|
|
3077
|
-
<span class="pf-
|
|
3077
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
3078
3078
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
3079
3079
|
</span>
|
|
3080
3080
|
</button>
|
|
@@ -3085,71 +3085,71 @@ wrapperTag: div
|
|
|
3085
3085
|
</div>
|
|
3086
3086
|
</div>
|
|
3087
3087
|
</header>
|
|
3088
|
-
<div class="pf-
|
|
3089
|
-
<div class="pf-
|
|
3088
|
+
<div class="pf-v6-c-page__sidebar">
|
|
3089
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
3090
3090
|
<nav
|
|
3091
|
-
class="pf-
|
|
3091
|
+
class="pf-v6-c-nav"
|
|
3092
3092
|
id="page-demo-overflow-scroll-primary-nav"
|
|
3093
3093
|
aria-label="Global"
|
|
3094
3094
|
>
|
|
3095
|
-
<ul class="pf-
|
|
3096
|
-
<li class="pf-
|
|
3097
|
-
<a href="#" class="pf-
|
|
3095
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
3096
|
+
<li class="pf-v6-c-nav__item">
|
|
3097
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
3098
3098
|
</li>
|
|
3099
|
-
<li class="pf-
|
|
3099
|
+
<li class="pf-v6-c-nav__item">
|
|
3100
3100
|
<a
|
|
3101
3101
|
href="#"
|
|
3102
|
-
class="pf-
|
|
3102
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
3103
3103
|
aria-current="page"
|
|
3104
3104
|
>Policy</a>
|
|
3105
3105
|
</li>
|
|
3106
|
-
<li class="pf-
|
|
3107
|
-
<a href="#" class="pf-
|
|
3106
|
+
<li class="pf-v6-c-nav__item">
|
|
3107
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
3108
3108
|
</li>
|
|
3109
|
-
<li class="pf-
|
|
3110
|
-
<a href="#" class="pf-
|
|
3109
|
+
<li class="pf-v6-c-nav__item">
|
|
3110
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
3111
3111
|
</li>
|
|
3112
|
-
<li class="pf-
|
|
3113
|
-
<a href="#" class="pf-
|
|
3112
|
+
<li class="pf-v6-c-nav__item">
|
|
3113
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
3114
3114
|
</li>
|
|
3115
3115
|
</ul>
|
|
3116
3116
|
</nav>
|
|
3117
3117
|
</div>
|
|
3118
3118
|
</div>
|
|
3119
3119
|
<main
|
|
3120
|
-
class="pf-
|
|
3120
|
+
class="pf-v6-c-page__main"
|
|
3121
3121
|
tabindex="-1"
|
|
3122
3122
|
id="main-content-page-demo-overflow-scroll"
|
|
3123
3123
|
>
|
|
3124
|
-
<section class="pf-
|
|
3125
|
-
<div class="pf-
|
|
3126
|
-
<nav class="pf-
|
|
3127
|
-
<ol class="pf-
|
|
3128
|
-
<li class="pf-
|
|
3129
|
-
<a href="#" class="pf-
|
|
3124
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
3125
|
+
<div class="pf-v6-c-page__main-body">
|
|
3126
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
3127
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
3128
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
3129
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
3130
3130
|
</li>
|
|
3131
|
-
<li class="pf-
|
|
3132
|
-
<span class="pf-
|
|
3131
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
3132
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
3133
3133
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3134
3134
|
</span>
|
|
3135
3135
|
|
|
3136
|
-
<a href="#" class="pf-
|
|
3136
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
3137
3137
|
</li>
|
|
3138
|
-
<li class="pf-
|
|
3139
|
-
<span class="pf-
|
|
3138
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
3139
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
3140
3140
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3141
3141
|
</span>
|
|
3142
3142
|
|
|
3143
|
-
<a href="#" class="pf-
|
|
3143
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
3144
3144
|
</li>
|
|
3145
|
-
<li class="pf-
|
|
3146
|
-
<span class="pf-
|
|
3145
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
3146
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
3147
3147
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3148
3148
|
</span>
|
|
3149
3149
|
|
|
3150
3150
|
<a
|
|
3151
3151
|
href="#"
|
|
3152
|
-
class="pf-
|
|
3152
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
3153
3153
|
aria-current="page"
|
|
3154
3154
|
>Section landing</a>
|
|
3155
3155
|
</li>
|
|
@@ -3158,178 +3158,178 @@ wrapperTag: div
|
|
|
3158
3158
|
</div>
|
|
3159
3159
|
</section>
|
|
3160
3160
|
<section
|
|
3161
|
-
class="pf-
|
|
3161
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
|
|
3162
3162
|
>
|
|
3163
|
-
<div class="pf-
|
|
3164
|
-
<div class="pf-
|
|
3163
|
+
<div class="pf-v6-c-page__main-body">
|
|
3164
|
+
<div class="pf-v6-c-content">
|
|
3165
3165
|
<h1>Main title</h1>
|
|
3166
3166
|
<p>This is a full page demo.</p>
|
|
3167
3167
|
</div>
|
|
3168
3168
|
</div>
|
|
3169
3169
|
</section>
|
|
3170
3170
|
<section
|
|
3171
|
-
class="pf-
|
|
3171
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
|
|
3172
3172
|
tabindex="0"
|
|
3173
3173
|
>
|
|
3174
|
-
<div class="pf-
|
|
3175
|
-
<div class="pf-
|
|
3176
|
-
<div class="pf-
|
|
3177
|
-
<div class="pf-
|
|
3174
|
+
<div class="pf-v6-c-page__main-body">
|
|
3175
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
3176
|
+
<div class="pf-v6-c-card">
|
|
3177
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3178
3178
|
</div>
|
|
3179
|
-
<div class="pf-
|
|
3180
|
-
<div class="pf-
|
|
3179
|
+
<div class="pf-v6-c-card">
|
|
3180
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3181
3181
|
</div>
|
|
3182
|
-
<div class="pf-
|
|
3183
|
-
<div class="pf-
|
|
3182
|
+
<div class="pf-v6-c-card">
|
|
3183
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3184
3184
|
</div>
|
|
3185
|
-
<div class="pf-
|
|
3186
|
-
<div class="pf-
|
|
3185
|
+
<div class="pf-v6-c-card">
|
|
3186
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3187
3187
|
</div>
|
|
3188
|
-
<div class="pf-
|
|
3189
|
-
<div class="pf-
|
|
3188
|
+
<div class="pf-v6-c-card">
|
|
3189
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3190
3190
|
</div>
|
|
3191
|
-
<div class="pf-
|
|
3192
|
-
<div class="pf-
|
|
3191
|
+
<div class="pf-v6-c-card">
|
|
3192
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3193
3193
|
</div>
|
|
3194
|
-
<div class="pf-
|
|
3195
|
-
<div class="pf-
|
|
3194
|
+
<div class="pf-v6-c-card">
|
|
3195
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3196
3196
|
</div>
|
|
3197
|
-
<div class="pf-
|
|
3198
|
-
<div class="pf-
|
|
3197
|
+
<div class="pf-v6-c-card">
|
|
3198
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3199
3199
|
</div>
|
|
3200
|
-
<div class="pf-
|
|
3201
|
-
<div class="pf-
|
|
3200
|
+
<div class="pf-v6-c-card">
|
|
3201
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3202
3202
|
</div>
|
|
3203
|
-
<div class="pf-
|
|
3204
|
-
<div class="pf-
|
|
3203
|
+
<div class="pf-v6-c-card">
|
|
3204
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3205
3205
|
</div>
|
|
3206
|
-
<div class="pf-
|
|
3207
|
-
<div class="pf-
|
|
3206
|
+
<div class="pf-v6-c-card">
|
|
3207
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3208
3208
|
</div>
|
|
3209
|
-
<div class="pf-
|
|
3210
|
-
<div class="pf-
|
|
3209
|
+
<div class="pf-v6-c-card">
|
|
3210
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3211
3211
|
</div>
|
|
3212
|
-
<div class="pf-
|
|
3213
|
-
<div class="pf-
|
|
3212
|
+
<div class="pf-v6-c-card">
|
|
3213
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3214
3214
|
</div>
|
|
3215
|
-
<div class="pf-
|
|
3216
|
-
<div class="pf-
|
|
3215
|
+
<div class="pf-v6-c-card">
|
|
3216
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3217
3217
|
</div>
|
|
3218
|
-
<div class="pf-
|
|
3219
|
-
<div class="pf-
|
|
3218
|
+
<div class="pf-v6-c-card">
|
|
3219
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3220
3220
|
</div>
|
|
3221
|
-
<div class="pf-
|
|
3222
|
-
<div class="pf-
|
|
3221
|
+
<div class="pf-v6-c-card">
|
|
3222
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3223
3223
|
</div>
|
|
3224
|
-
<div class="pf-
|
|
3225
|
-
<div class="pf-
|
|
3224
|
+
<div class="pf-v6-c-card">
|
|
3225
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3226
3226
|
</div>
|
|
3227
|
-
<div class="pf-
|
|
3228
|
-
<div class="pf-
|
|
3227
|
+
<div class="pf-v6-c-card">
|
|
3228
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3229
3229
|
</div>
|
|
3230
|
-
<div class="pf-
|
|
3231
|
-
<div class="pf-
|
|
3230
|
+
<div class="pf-v6-c-card">
|
|
3231
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3232
3232
|
</div>
|
|
3233
|
-
<div class="pf-
|
|
3234
|
-
<div class="pf-
|
|
3233
|
+
<div class="pf-v6-c-card">
|
|
3234
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3235
3235
|
</div>
|
|
3236
|
-
<div class="pf-
|
|
3237
|
-
<div class="pf-
|
|
3236
|
+
<div class="pf-v6-c-card">
|
|
3237
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3238
3238
|
</div>
|
|
3239
|
-
<div class="pf-
|
|
3240
|
-
<div class="pf-
|
|
3239
|
+
<div class="pf-v6-c-card">
|
|
3240
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3241
3241
|
</div>
|
|
3242
|
-
<div class="pf-
|
|
3243
|
-
<div class="pf-
|
|
3242
|
+
<div class="pf-v6-c-card">
|
|
3243
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3244
3244
|
</div>
|
|
3245
|
-
<div class="pf-
|
|
3246
|
-
<div class="pf-
|
|
3245
|
+
<div class="pf-v6-c-card">
|
|
3246
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3247
3247
|
</div>
|
|
3248
|
-
<div class="pf-
|
|
3249
|
-
<div class="pf-
|
|
3248
|
+
<div class="pf-v6-c-card">
|
|
3249
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3250
3250
|
</div>
|
|
3251
|
-
<div class="pf-
|
|
3252
|
-
<div class="pf-
|
|
3251
|
+
<div class="pf-v6-c-card">
|
|
3252
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3253
3253
|
</div>
|
|
3254
|
-
<div class="pf-
|
|
3255
|
-
<div class="pf-
|
|
3254
|
+
<div class="pf-v6-c-card">
|
|
3255
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3256
3256
|
</div>
|
|
3257
|
-
<div class="pf-
|
|
3258
|
-
<div class="pf-
|
|
3257
|
+
<div class="pf-v6-c-card">
|
|
3258
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3259
3259
|
</div>
|
|
3260
|
-
<div class="pf-
|
|
3261
|
-
<div class="pf-
|
|
3260
|
+
<div class="pf-v6-c-card">
|
|
3261
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3262
3262
|
</div>
|
|
3263
|
-
<div class="pf-
|
|
3264
|
-
<div class="pf-
|
|
3263
|
+
<div class="pf-v6-c-card">
|
|
3264
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3265
3265
|
</div>
|
|
3266
|
-
<div class="pf-
|
|
3267
|
-
<div class="pf-
|
|
3266
|
+
<div class="pf-v6-c-card">
|
|
3267
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3268
3268
|
</div>
|
|
3269
|
-
<div class="pf-
|
|
3270
|
-
<div class="pf-
|
|
3269
|
+
<div class="pf-v6-c-card">
|
|
3270
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3271
3271
|
</div>
|
|
3272
|
-
<div class="pf-
|
|
3273
|
-
<div class="pf-
|
|
3272
|
+
<div class="pf-v6-c-card">
|
|
3273
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3274
3274
|
</div>
|
|
3275
|
-
<div class="pf-
|
|
3276
|
-
<div class="pf-
|
|
3275
|
+
<div class="pf-v6-c-card">
|
|
3276
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3277
3277
|
</div>
|
|
3278
|
-
<div class="pf-
|
|
3279
|
-
<div class="pf-
|
|
3278
|
+
<div class="pf-v6-c-card">
|
|
3279
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3280
3280
|
</div>
|
|
3281
|
-
<div class="pf-
|
|
3282
|
-
<div class="pf-
|
|
3281
|
+
<div class="pf-v6-c-card">
|
|
3282
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3283
3283
|
</div>
|
|
3284
|
-
<div class="pf-
|
|
3285
|
-
<div class="pf-
|
|
3284
|
+
<div class="pf-v6-c-card">
|
|
3285
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3286
3286
|
</div>
|
|
3287
|
-
<div class="pf-
|
|
3288
|
-
<div class="pf-
|
|
3287
|
+
<div class="pf-v6-c-card">
|
|
3288
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3289
3289
|
</div>
|
|
3290
|
-
<div class="pf-
|
|
3291
|
-
<div class="pf-
|
|
3290
|
+
<div class="pf-v6-c-card">
|
|
3291
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3292
3292
|
</div>
|
|
3293
|
-
<div class="pf-
|
|
3294
|
-
<div class="pf-
|
|
3293
|
+
<div class="pf-v6-c-card">
|
|
3294
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3295
3295
|
</div>
|
|
3296
|
-
<div class="pf-
|
|
3297
|
-
<div class="pf-
|
|
3296
|
+
<div class="pf-v6-c-card">
|
|
3297
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3298
3298
|
</div>
|
|
3299
|
-
<div class="pf-
|
|
3300
|
-
<div class="pf-
|
|
3299
|
+
<div class="pf-v6-c-card">
|
|
3300
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3301
3301
|
</div>
|
|
3302
|
-
<div class="pf-
|
|
3303
|
-
<div class="pf-
|
|
3302
|
+
<div class="pf-v6-c-card">
|
|
3303
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3304
3304
|
</div>
|
|
3305
|
-
<div class="pf-
|
|
3306
|
-
<div class="pf-
|
|
3305
|
+
<div class="pf-v6-c-card">
|
|
3306
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3307
3307
|
</div>
|
|
3308
|
-
<div class="pf-
|
|
3309
|
-
<div class="pf-
|
|
3308
|
+
<div class="pf-v6-c-card">
|
|
3309
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3310
3310
|
</div>
|
|
3311
|
-
<div class="pf-
|
|
3312
|
-
<div class="pf-
|
|
3311
|
+
<div class="pf-v6-c-card">
|
|
3312
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3313
3313
|
</div>
|
|
3314
|
-
<div class="pf-
|
|
3315
|
-
<div class="pf-
|
|
3314
|
+
<div class="pf-v6-c-card">
|
|
3315
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3316
3316
|
</div>
|
|
3317
|
-
<div class="pf-
|
|
3318
|
-
<div class="pf-
|
|
3317
|
+
<div class="pf-v6-c-card">
|
|
3318
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3319
3319
|
</div>
|
|
3320
|
-
<div class="pf-
|
|
3321
|
-
<div class="pf-
|
|
3320
|
+
<div class="pf-v6-c-card">
|
|
3321
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3322
3322
|
</div>
|
|
3323
|
-
<div class="pf-
|
|
3324
|
-
<div class="pf-
|
|
3323
|
+
<div class="pf-v6-c-card">
|
|
3324
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3325
3325
|
</div>
|
|
3326
3326
|
</div>
|
|
3327
3327
|
</div>
|
|
3328
3328
|
</section>
|
|
3329
3329
|
<section
|
|
3330
|
-
class="pf-
|
|
3330
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
|
|
3331
3331
|
>
|
|
3332
|
-
<div class="pf-
|
|
3332
|
+
<div class="pf-v6-c-page__main-body">
|
|
3333
3333
|
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
3334
3334
|
</div>
|
|
3335
3335
|
</section>
|
|
@@ -3341,25 +3341,25 @@ wrapperTag: div
|
|
|
3341
3341
|
### Centered section
|
|
3342
3342
|
|
|
3343
3343
|
```html isFullscreen
|
|
3344
|
-
<div class="pf-
|
|
3345
|
-
<div class="pf-
|
|
3344
|
+
<div class="pf-v6-c-page" id="page-demo-centered-section">
|
|
3345
|
+
<div class="pf-v6-c-skip-to-content">
|
|
3346
3346
|
<a
|
|
3347
|
-
class="pf-
|
|
3347
|
+
class="pf-v6-c-button pf-m-primary"
|
|
3348
3348
|
href="#main-content-page-demo-centered-section"
|
|
3349
3349
|
>Skip to content</a>
|
|
3350
3350
|
</div>
|
|
3351
|
-
<header class="pf-
|
|
3352
|
-
<span class="pf-
|
|
3351
|
+
<header class="pf-v6-c-masthead" id="page-demo-centered-section-masthead">
|
|
3352
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
3353
3353
|
<button
|
|
3354
|
-
class="pf-
|
|
3354
|
+
class="pf-v6-c-button pf-m-plain"
|
|
3355
3355
|
type="button"
|
|
3356
3356
|
aria-label="Global navigation"
|
|
3357
3357
|
>
|
|
3358
3358
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
3359
3359
|
</button>
|
|
3360
3360
|
</span>
|
|
3361
|
-
<div class="pf-
|
|
3362
|
-
<a class="pf-
|
|
3361
|
+
<div class="pf-v6-c-masthead__main">
|
|
3362
|
+
<a class="pf-v6-c-masthead__brand" href="#">
|
|
3363
3363
|
<svg height="40px" viewBox="0 0 679 158">
|
|
3364
3364
|
<title>PF-HorizontalLogo-Color</title>
|
|
3365
3365
|
<defs>
|
|
@@ -3432,37 +3432,37 @@ wrapperTag: div
|
|
|
3432
3432
|
</svg>
|
|
3433
3433
|
</a>
|
|
3434
3434
|
</div>
|
|
3435
|
-
<div class="pf-
|
|
3435
|
+
<div class="pf-v6-c-masthead__content">
|
|
3436
3436
|
<div
|
|
3437
|
-
class="pf-
|
|
3437
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
3438
3438
|
id="page-demo-centered-section-masthead-toolbar"
|
|
3439
3439
|
>
|
|
3440
|
-
<div class="pf-
|
|
3441
|
-
<div class="pf-
|
|
3442
|
-
<div class="pf-
|
|
3440
|
+
<div class="pf-v6-c-toolbar__content">
|
|
3441
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
3442
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3443
3443
|
<button
|
|
3444
|
-
class="pf-
|
|
3444
|
+
class="pf-v6-c-menu-toggle"
|
|
3445
3445
|
type="button"
|
|
3446
3446
|
aria-expanded="false"
|
|
3447
3447
|
>
|
|
3448
|
-
<span class="pf-
|
|
3449
|
-
<span class="pf-
|
|
3450
|
-
<span class="pf-
|
|
3448
|
+
<span class="pf-v6-c-menu-toggle__text">Overview</span>
|
|
3449
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
3450
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
3451
3451
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3452
3452
|
</span>
|
|
3453
3453
|
</span>
|
|
3454
3454
|
</button>
|
|
3455
3455
|
</div>
|
|
3456
3456
|
|
|
3457
|
-
<div class="pf-
|
|
3457
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3458
3458
|
<button
|
|
3459
|
-
class="pf-
|
|
3459
|
+
class="pf-v6-c-menu-toggle"
|
|
3460
3460
|
type="button"
|
|
3461
3461
|
aria-expanded="false"
|
|
3462
3462
|
>
|
|
3463
|
-
<span class="pf-
|
|
3464
|
-
<span class="pf-
|
|
3465
|
-
<span class="pf-
|
|
3463
|
+
<span class="pf-v6-c-menu-toggle__text">Services</span>
|
|
3464
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
3465
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
3466
3466
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3467
3467
|
</span>
|
|
3468
3468
|
</span>
|
|
@@ -3470,56 +3470,56 @@ wrapperTag: div
|
|
|
3470
3470
|
</div>
|
|
3471
3471
|
|
|
3472
3472
|
<div
|
|
3473
|
-
class="pf-
|
|
3473
|
+
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"
|
|
3474
3474
|
>
|
|
3475
3475
|
<div
|
|
3476
|
-
class="pf-
|
|
3476
|
+
class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
3477
3477
|
>
|
|
3478
|
-
<div class="pf-
|
|
3478
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3479
3479
|
<button
|
|
3480
|
-
class="pf-
|
|
3480
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3481
3481
|
type="button"
|
|
3482
3482
|
aria-expanded="false"
|
|
3483
3483
|
aria-label="Application launcher"
|
|
3484
3484
|
>
|
|
3485
|
-
<span class="pf-
|
|
3485
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
3486
3486
|
<i class="fas fa-th" aria-hidden="true"></i>
|
|
3487
3487
|
</span>
|
|
3488
3488
|
</button>
|
|
3489
3489
|
</div>
|
|
3490
|
-
<div class="pf-
|
|
3490
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3491
3491
|
<button
|
|
3492
|
-
class="pf-
|
|
3492
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3493
3493
|
type="button"
|
|
3494
3494
|
aria-expanded="false"
|
|
3495
3495
|
aria-label="Settings"
|
|
3496
3496
|
>
|
|
3497
|
-
<span class="pf-
|
|
3497
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
3498
3498
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
3499
3499
|
</span>
|
|
3500
3500
|
</button>
|
|
3501
3501
|
</div>
|
|
3502
|
-
<div class="pf-
|
|
3502
|
+
<div class="pf-v6-c-toolbar__item">
|
|
3503
3503
|
<button
|
|
3504
|
-
class="pf-
|
|
3504
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3505
3505
|
type="button"
|
|
3506
3506
|
aria-expanded="false"
|
|
3507
3507
|
aria-label="Help"
|
|
3508
3508
|
>
|
|
3509
|
-
<span class="pf-
|
|
3509
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
3510
3510
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
3511
3511
|
</span>
|
|
3512
3512
|
</button>
|
|
3513
3513
|
</div>
|
|
3514
3514
|
</div>
|
|
3515
|
-
<div class="pf-
|
|
3515
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
3516
3516
|
<button
|
|
3517
|
-
class="pf-
|
|
3517
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3518
3518
|
type="button"
|
|
3519
3519
|
aria-expanded="false"
|
|
3520
3520
|
aria-label="Actions"
|
|
3521
3521
|
>
|
|
3522
|
-
<span class="pf-
|
|
3522
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
3523
3523
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
3524
3524
|
</span>
|
|
3525
3525
|
</button>
|
|
@@ -3530,47 +3530,47 @@ wrapperTag: div
|
|
|
3530
3530
|
</div>
|
|
3531
3531
|
</div>
|
|
3532
3532
|
</header>
|
|
3533
|
-
<div class="pf-
|
|
3534
|
-
<div class="pf-
|
|
3533
|
+
<div class="pf-v6-c-page__sidebar">
|
|
3534
|
+
<div class="pf-v6-c-page__sidebar-body">
|
|
3535
3535
|
<nav
|
|
3536
|
-
class="pf-
|
|
3536
|
+
class="pf-v6-c-nav"
|
|
3537
3537
|
id="page-demo-centered-section-primary-nav"
|
|
3538
3538
|
aria-label="Global"
|
|
3539
3539
|
>
|
|
3540
|
-
<ul class="pf-
|
|
3541
|
-
<li class="pf-
|
|
3542
|
-
<a href="#" class="pf-
|
|
3540
|
+
<ul class="pf-v6-c-nav__list" role="list">
|
|
3541
|
+
<li class="pf-v6-c-nav__item">
|
|
3542
|
+
<a href="#" class="pf-v6-c-nav__link">System panel</a>
|
|
3543
3543
|
</li>
|
|
3544
|
-
<li class="pf-
|
|
3544
|
+
<li class="pf-v6-c-nav__item">
|
|
3545
3545
|
<a
|
|
3546
3546
|
href="#"
|
|
3547
|
-
class="pf-
|
|
3547
|
+
class="pf-v6-c-nav__link pf-m-current"
|
|
3548
3548
|
aria-current="page"
|
|
3549
3549
|
>Policy</a>
|
|
3550
3550
|
</li>
|
|
3551
|
-
<li class="pf-
|
|
3552
|
-
<a href="#" class="pf-
|
|
3551
|
+
<li class="pf-v6-c-nav__item">
|
|
3552
|
+
<a href="#" class="pf-v6-c-nav__link">Authentication</a>
|
|
3553
3553
|
</li>
|
|
3554
|
-
<li class="pf-
|
|
3555
|
-
<a href="#" class="pf-
|
|
3554
|
+
<li class="pf-v6-c-nav__item">
|
|
3555
|
+
<a href="#" class="pf-v6-c-nav__link">Network services</a>
|
|
3556
3556
|
</li>
|
|
3557
|
-
<li class="pf-
|
|
3558
|
-
<a href="#" class="pf-
|
|
3557
|
+
<li class="pf-v6-c-nav__item">
|
|
3558
|
+
<a href="#" class="pf-v6-c-nav__link">Server</a>
|
|
3559
3559
|
</li>
|
|
3560
3560
|
</ul>
|
|
3561
3561
|
</nav>
|
|
3562
3562
|
</div>
|
|
3563
3563
|
</div>
|
|
3564
3564
|
<main
|
|
3565
|
-
class="pf-
|
|
3565
|
+
class="pf-v6-c-page__main"
|
|
3566
3566
|
tabindex="-1"
|
|
3567
3567
|
id="main-content-page-demo-centered-section"
|
|
3568
3568
|
>
|
|
3569
3569
|
<section
|
|
3570
|
-
class="pf-
|
|
3570
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-m-light"
|
|
3571
3571
|
>
|
|
3572
|
-
<div class="pf-
|
|
3573
|
-
<div class="pf-
|
|
3572
|
+
<div class="pf-v6-c-page__main-body">
|
|
3573
|
+
<div class="pf-v6-c-content">
|
|
3574
3574
|
<h1>Centering page sections</h1>
|
|
3575
3575
|
<p>
|
|
3576
3576
|
When a width limited page section is wider than the value of
|
|
@@ -3580,52 +3580,52 @@ wrapperTag: div
|
|
|
3580
3580
|
</div>
|
|
3581
3581
|
</div>
|
|
3582
3582
|
</section>
|
|
3583
|
-
<hr class="pf-
|
|
3583
|
+
<hr class="pf-v6-c-divider" />
|
|
3584
3584
|
<section
|
|
3585
|
-
class="pf-
|
|
3585
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
|
|
3586
3586
|
>
|
|
3587
|
-
<div class="pf-
|
|
3588
|
-
<div class="pf-
|
|
3589
|
-
<div class="pf-
|
|
3590
|
-
<div class="pf-
|
|
3587
|
+
<div class="pf-v6-c-page__main-body">
|
|
3588
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
3589
|
+
<div class="pf-v6-c-card">
|
|
3590
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3591
3591
|
</div>
|
|
3592
|
-
<div class="pf-
|
|
3593
|
-
<div class="pf-
|
|
3592
|
+
<div class="pf-v6-c-card">
|
|
3593
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3594
3594
|
</div>
|
|
3595
|
-
<div class="pf-
|
|
3596
|
-
<div class="pf-
|
|
3595
|
+
<div class="pf-v6-c-card">
|
|
3596
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3597
3597
|
</div>
|
|
3598
|
-
<div class="pf-
|
|
3599
|
-
<div class="pf-
|
|
3598
|
+
<div class="pf-v6-c-card">
|
|
3599
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3600
3600
|
</div>
|
|
3601
|
-
<div class="pf-
|
|
3602
|
-
<div class="pf-
|
|
3601
|
+
<div class="pf-v6-c-card">
|
|
3602
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3603
3603
|
</div>
|
|
3604
|
-
<div class="pf-
|
|
3605
|
-
<div class="pf-
|
|
3604
|
+
<div class="pf-v6-c-card">
|
|
3605
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3606
3606
|
</div>
|
|
3607
|
-
<div class="pf-
|
|
3608
|
-
<div class="pf-
|
|
3607
|
+
<div class="pf-v6-c-card">
|
|
3608
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3609
3609
|
</div>
|
|
3610
|
-
<div class="pf-
|
|
3611
|
-
<div class="pf-
|
|
3610
|
+
<div class="pf-v6-c-card">
|
|
3611
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3612
3612
|
</div>
|
|
3613
|
-
<div class="pf-
|
|
3614
|
-
<div class="pf-
|
|
3613
|
+
<div class="pf-v6-c-card">
|
|
3614
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3615
3615
|
</div>
|
|
3616
|
-
<div class="pf-
|
|
3617
|
-
<div class="pf-
|
|
3616
|
+
<div class="pf-v6-c-card">
|
|
3617
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
3618
3618
|
</div>
|
|
3619
3619
|
</div>
|
|
3620
3620
|
</div>
|
|
3621
3621
|
</section>
|
|
3622
|
-
<hr class="pf-
|
|
3622
|
+
<hr class="pf-v6-c-divider" />
|
|
3623
3623
|
<section
|
|
3624
|
-
class="pf-
|
|
3624
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v5-u-text-align-center"
|
|
3625
3625
|
>
|
|
3626
|
-
<div class="pf-
|
|
3627
|
-
<div class="pf-
|
|
3628
|
-
<div class="pf-
|
|
3626
|
+
<div class="pf-v6-c-page__main-body">
|
|
3627
|
+
<div class="pf-v6-c-card">
|
|
3628
|
+
<div class="pf-v6-c-card__body">
|
|
3629
3629
|
<p>
|
|
3630
3630
|
The content in this section is also centered using the
|
|
3631
3631
|
<code>.pf-v5-u-text-align-center</code> utility class.
|