@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
|
@@ -9,16 +9,16 @@ cssPrefix: pf-v5-l-gallery
|
|
|
9
9
|
### Basic
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<div class="pf-
|
|
13
|
-
<div class="pf-
|
|
12
|
+
<div class="pf-v6-l-gallery">
|
|
13
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
14
14
|
|
|
15
|
-
<div class="pf-
|
|
15
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
16
16
|
|
|
17
|
-
<div class="pf-
|
|
17
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
18
18
|
|
|
19
|
-
<div class="pf-
|
|
19
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
20
20
|
|
|
21
|
-
<div class="pf-
|
|
21
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
24
|
```
|
|
@@ -26,16 +26,16 @@ cssPrefix: pf-v5-l-gallery
|
|
|
26
26
|
### With gutter
|
|
27
27
|
|
|
28
28
|
```html
|
|
29
|
-
<div class="pf-
|
|
30
|
-
<div class="pf-
|
|
29
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
30
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
31
31
|
|
|
32
|
-
<div class="pf-
|
|
32
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
33
33
|
|
|
34
|
-
<div class="pf-
|
|
34
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
35
35
|
|
|
36
|
-
<div class="pf-
|
|
36
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
37
37
|
|
|
38
|
-
<div class="pf-
|
|
38
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
39
39
|
</div>
|
|
40
40
|
|
|
41
41
|
```
|
|
@@ -48,18 +48,18 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
|
|
|
48
48
|
|
|
49
49
|
```html
|
|
50
50
|
<div
|
|
51
|
-
class="pf-
|
|
51
|
+
class="pf-v6-l-gallery pf-m-gutter"
|
|
52
52
|
style="--pf-v5-l-gallery--GridTemplateColumns--min: 150px;"
|
|
53
53
|
>
|
|
54
|
-
<div class="pf-
|
|
54
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
55
55
|
|
|
56
|
-
<div class="pf-
|
|
56
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
57
57
|
|
|
58
|
-
<div class="pf-
|
|
58
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
59
59
|
|
|
60
|
-
<div class="pf-
|
|
60
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
61
61
|
|
|
62
|
-
<div class="pf-
|
|
62
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
63
63
|
</div>
|
|
64
64
|
|
|
65
65
|
```
|
|
@@ -68,18 +68,18 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
|
|
|
68
68
|
|
|
69
69
|
```html
|
|
70
70
|
<div
|
|
71
|
-
class="pf-
|
|
71
|
+
class="pf-v6-l-gallery pf-m-gutter"
|
|
72
72
|
style="--pf-v5-l-gallery--GridTemplateColumns--max: 300px;"
|
|
73
73
|
>
|
|
74
|
-
<div class="pf-
|
|
74
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
75
75
|
|
|
76
|
-
<div class="pf-
|
|
76
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
77
77
|
|
|
78
|
-
<div class="pf-
|
|
78
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
79
79
|
|
|
80
|
-
<div class="pf-
|
|
80
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
81
81
|
|
|
82
|
-
<div class="pf-
|
|
82
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
83
83
|
</div>
|
|
84
84
|
|
|
85
85
|
```
|
|
@@ -88,18 +88,18 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
|
|
|
88
88
|
|
|
89
89
|
```html
|
|
90
90
|
<div
|
|
91
|
-
class="pf-
|
|
91
|
+
class="pf-v6-l-gallery pf-m-gutter"
|
|
92
92
|
style="--pf-v5-l-gallery--GridTemplateColumns--min-on-md: 100px; --pf-v5-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v5-l-gallery--GridTemplateColumns--min-on-xl: 200px; --pf-v5-l-gallery--GridTemplateColumns--min-on-2xl: 300px;"
|
|
93
93
|
>
|
|
94
|
-
<div class="pf-
|
|
94
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
95
95
|
|
|
96
|
-
<div class="pf-
|
|
96
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
97
97
|
|
|
98
|
-
<div class="pf-
|
|
98
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
99
99
|
|
|
100
|
-
<div class="pf-
|
|
100
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
101
101
|
|
|
102
|
-
<div class="pf-
|
|
102
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
103
103
|
</div>
|
|
104
104
|
|
|
105
105
|
```
|
|
@@ -108,18 +108,18 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
|
|
|
108
108
|
|
|
109
109
|
```html
|
|
110
110
|
<div
|
|
111
|
-
class="pf-
|
|
111
|
+
class="pf-v6-l-gallery pf-m-gutter"
|
|
112
112
|
style="--pf-v5-l-gallery--GridTemplateColumns--max-on-md: 280px; --pf-v5-l-gallery--GridTemplateColumns--max-on-lg: 320px; --pf-v5-l-gallery--GridTemplateColumns--max-on-2xl: 400px;"
|
|
113
113
|
>
|
|
114
|
-
<div class="pf-
|
|
114
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
115
115
|
|
|
116
|
-
<div class="pf-
|
|
116
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
117
117
|
|
|
118
|
-
<div class="pf-
|
|
118
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
119
119
|
|
|
120
|
-
<div class="pf-
|
|
120
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
121
121
|
|
|
122
|
-
<div class="pf-
|
|
122
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
123
123
|
</div>
|
|
124
124
|
|
|
125
125
|
```
|
|
@@ -128,18 +128,18 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
|
|
|
128
128
|
|
|
129
129
|
```html
|
|
130
130
|
<div
|
|
131
|
-
class="pf-
|
|
131
|
+
class="pf-v6-l-gallery pf-m-gutter"
|
|
132
132
|
style="--pf-v5-l-gallery--GridTemplateColumns--min: 100%; --pf-v5-l-gallery--GridTemplateColumns--min-on-md: 100px; --pf-v5-l-gallery--GridTemplateColumns--max-on-md: 200px; --pf-v5-l-gallery--GridTemplateColumns--min-on-xl: 300px; --pf-v5-l-gallery--GridTemplateColumns--max-on-xl: 1fr;"
|
|
133
133
|
>
|
|
134
|
-
<div class="pf-
|
|
134
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
135
135
|
|
|
136
|
-
<div class="pf-
|
|
136
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
137
137
|
|
|
138
|
-
<div class="pf-
|
|
138
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
139
139
|
|
|
140
|
-
<div class="pf-
|
|
140
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
141
141
|
|
|
142
|
-
<div class="pf-
|
|
142
|
+
<div class="pf-v6-l-gallery__item">content</div>
|
|
143
143
|
</div>
|
|
144
144
|
|
|
145
145
|
```
|
|
@@ -147,16 +147,16 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
|
|
|
147
147
|
### List type
|
|
148
148
|
|
|
149
149
|
```html
|
|
150
|
-
<ul class="pf-
|
|
151
|
-
<li class="pf-
|
|
150
|
+
<ul class="pf-v6-l-gallery pf-m-gutter">
|
|
151
|
+
<li class="pf-v6-l-gallery__item">content</li>
|
|
152
152
|
|
|
153
|
-
<li class="pf-
|
|
153
|
+
<li class="pf-v6-l-gallery__item">content</li>
|
|
154
154
|
|
|
155
|
-
<li class="pf-
|
|
155
|
+
<li class="pf-v6-l-gallery__item">content</li>
|
|
156
156
|
|
|
157
|
-
<li class="pf-
|
|
157
|
+
<li class="pf-v6-l-gallery__item">content</li>
|
|
158
158
|
|
|
159
|
-
<li class="pf-
|
|
159
|
+
<li class="pf-v6-l-gallery__item">content</li>
|
|
160
160
|
</ul>
|
|
161
161
|
|
|
162
162
|
```
|
|
@@ -10,20 +10,20 @@ cssPrefix: pf-v5-l-grid
|
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
12
|
<div
|
|
13
|
-
class="pf-
|
|
13
|
+
class="pf-v6-l-grid pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-2-col-on-lg pf-m-all-1-col-on-xl"
|
|
14
14
|
>
|
|
15
|
-
<div class="pf-
|
|
16
|
-
<div class="pf-
|
|
17
|
-
<div class="pf-
|
|
18
|
-
<div class="pf-
|
|
19
|
-
<div class="pf-
|
|
20
|
-
<div class="pf-
|
|
21
|
-
<div class="pf-
|
|
22
|
-
<div class="pf-
|
|
23
|
-
<div class="pf-
|
|
24
|
-
<div class="pf-
|
|
25
|
-
<div class="pf-
|
|
26
|
-
<div class="pf-
|
|
15
|
+
<div class="pf-v6-l-grid__item">item 1</div>
|
|
16
|
+
<div class="pf-v6-l-grid__item">item 2</div>
|
|
17
|
+
<div class="pf-v6-l-grid__item">item 3</div>
|
|
18
|
+
<div class="pf-v6-l-grid__item">item 4</div>
|
|
19
|
+
<div class="pf-v6-l-grid__item">item 5</div>
|
|
20
|
+
<div class="pf-v6-l-grid__item">item 6</div>
|
|
21
|
+
<div class="pf-v6-l-grid__item">item 7</div>
|
|
22
|
+
<div class="pf-v6-l-grid__item">item 8</div>
|
|
23
|
+
<div class="pf-v6-l-grid__item">item 9</div>
|
|
24
|
+
<div class="pf-v6-l-grid__item">item 10</div>
|
|
25
|
+
<div class="pf-v6-l-grid__item">item 11</div>
|
|
26
|
+
<div class="pf-v6-l-grid__item">item 12</div>
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
```
|
|
@@ -32,26 +32,26 @@ cssPrefix: pf-v5-l-grid
|
|
|
32
32
|
|
|
33
33
|
```html
|
|
34
34
|
<div
|
|
35
|
-
class="pf-
|
|
35
|
+
class="pf-v6-l-grid pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-2-col-on-lg pf-m-all-1-col-on-xl"
|
|
36
36
|
>
|
|
37
37
|
<div
|
|
38
|
-
class="pf-
|
|
38
|
+
class="pf-v6-l-grid__item pf-m-8-col-on-sm pf-m-4-col-on-lg pf-m-6-col-on-xl"
|
|
39
39
|
>item 1</div>
|
|
40
40
|
<div
|
|
41
|
-
class="pf-
|
|
41
|
+
class="pf-v6-l-grid__item pf-m-4-col-on-sm pf-m-8-col-on-lg pf-m-6-col-on-xl"
|
|
42
42
|
>item 2</div>
|
|
43
|
-
<div class="pf-
|
|
44
|
-
<div class="pf-
|
|
45
|
-
<div class="pf-
|
|
46
|
-
<div class="pf-
|
|
47
|
-
<div class="pf-
|
|
48
|
-
<div class="pf-
|
|
49
|
-
<div class="pf-
|
|
50
|
-
<div class="pf-
|
|
51
|
-
<div class="pf-
|
|
52
|
-
<div class="pf-
|
|
53
|
-
<div class="pf-
|
|
54
|
-
<div class="pf-
|
|
43
|
+
<div class="pf-v6-l-grid__item">item 3</div>
|
|
44
|
+
<div class="pf-v6-l-grid__item">item 4</div>
|
|
45
|
+
<div class="pf-v6-l-grid__item">item 5</div>
|
|
46
|
+
<div class="pf-v6-l-grid__item">item 6</div>
|
|
47
|
+
<div class="pf-v6-l-grid__item">item 7</div>
|
|
48
|
+
<div class="pf-v6-l-grid__item">item 8</div>
|
|
49
|
+
<div class="pf-v6-l-grid__item">item 9</div>
|
|
50
|
+
<div class="pf-v6-l-grid__item">item 10</div>
|
|
51
|
+
<div class="pf-v6-l-grid__item">item 11</div>
|
|
52
|
+
<div class="pf-v6-l-grid__item">item 12</div>
|
|
53
|
+
<div class="pf-v6-l-grid__item">item 13</div>
|
|
54
|
+
<div class="pf-v6-l-grid__item">item 14</div>
|
|
55
55
|
</div>
|
|
56
56
|
|
|
57
57
|
```
|
|
@@ -59,18 +59,18 @@ cssPrefix: pf-v5-l-grid
|
|
|
59
59
|
### Base
|
|
60
60
|
|
|
61
61
|
```html
|
|
62
|
-
<div class="pf-
|
|
63
|
-
<div class="pf-
|
|
64
|
-
<div class="pf-
|
|
65
|
-
<div class="pf-
|
|
66
|
-
<div class="pf-
|
|
67
|
-
<div class="pf-
|
|
68
|
-
<div class="pf-
|
|
69
|
-
<div class="pf-
|
|
70
|
-
<div class="pf-
|
|
71
|
-
<div class="pf-
|
|
72
|
-
<div class="pf-
|
|
73
|
-
<div class="pf-
|
|
62
|
+
<div class="pf-v6-l-grid">
|
|
63
|
+
<div class="pf-v6-l-grid__item pf-m-12-col">12 col</div>
|
|
64
|
+
<div class="pf-v6-l-grid__item pf-m-11-col">11 col</div>
|
|
65
|
+
<div class="pf-v6-l-grid__item pf-m-1-col">1 col</div>
|
|
66
|
+
<div class="pf-v6-l-grid__item pf-m-10-col">10 col</div>
|
|
67
|
+
<div class="pf-v6-l-grid__item pf-m-2-col">2 col</div>
|
|
68
|
+
<div class="pf-v6-l-grid__item pf-m-9-col">9 col</div>
|
|
69
|
+
<div class="pf-v6-l-grid__item pf-m-3-col">3 col</div>
|
|
70
|
+
<div class="pf-v6-l-grid__item pf-m-8-col">8 col</div>
|
|
71
|
+
<div class="pf-v6-l-grid__item pf-m-4-col">4 col</div>
|
|
72
|
+
<div class="pf-v6-l-grid__item pf-m-7-col">7 col</div>
|
|
73
|
+
<div class="pf-v6-l-grid__item pf-m-5-col">5 col</div>
|
|
74
74
|
</div>
|
|
75
75
|
|
|
76
76
|
```
|
|
@@ -78,14 +78,14 @@ cssPrefix: pf-v5-l-grid
|
|
|
78
78
|
### Gutter
|
|
79
79
|
|
|
80
80
|
```html
|
|
81
|
-
<div class="pf-
|
|
82
|
-
<div class="pf-
|
|
83
|
-
<div class="pf-
|
|
84
|
-
<div class="pf-
|
|
85
|
-
<div class="pf-
|
|
86
|
-
<div class="pf-
|
|
87
|
-
<div class="pf-
|
|
88
|
-
<div class="pf-
|
|
81
|
+
<div class="pf-v6-l-grid pf-m-gutter">
|
|
82
|
+
<div class="pf-v6-l-grid__item pf-m-12-col">12 col</div>
|
|
83
|
+
<div class="pf-v6-l-grid__item pf-m-11-col">11 col</div>
|
|
84
|
+
<div class="pf-v6-l-grid__item pf-m-1-col">1 col</div>
|
|
85
|
+
<div class="pf-v6-l-grid__item pf-m-10-col">10 col</div>
|
|
86
|
+
<div class="pf-v6-l-grid__item pf-m-2-col">2 col</div>
|
|
87
|
+
<div class="pf-v6-l-grid__item pf-m-9-col">9 col</div>
|
|
88
|
+
<div class="pf-v6-l-grid__item pf-m-3-col">3 col</div>
|
|
89
89
|
</div>
|
|
90
90
|
|
|
91
91
|
```
|
|
@@ -93,36 +93,36 @@ cssPrefix: pf-v5-l-grid
|
|
|
93
93
|
### Responsive
|
|
94
94
|
|
|
95
95
|
```html
|
|
96
|
-
<div class="pf-
|
|
96
|
+
<div class="pf-v6-l-grid">
|
|
97
97
|
<div
|
|
98
|
-
class="pf-
|
|
98
|
+
class="pf-v6-l-grid__item pf-m-1-col pf-m-6-col-on-md pf-m-11-col-on-xl"
|
|
99
99
|
>1 / 6 / 11 col</div>
|
|
100
100
|
<div
|
|
101
|
-
class="pf-
|
|
101
|
+
class="pf-v6-l-grid__item pf-m-11-col pf-m-6-col-on-md pf-m-1-col-on-xl"
|
|
102
102
|
>11 / 6 / 1 col</div>
|
|
103
103
|
<div
|
|
104
|
-
class="pf-
|
|
104
|
+
class="pf-v6-l-grid__item pf-m-2-col pf-m-6-col-on-md pf-m-10-col-on-xl"
|
|
105
105
|
>2 / 6 / 10 col</div>
|
|
106
106
|
<div
|
|
107
|
-
class="pf-
|
|
107
|
+
class="pf-v6-l-grid__item pf-m-10-col pf-m-6-col-on-md pf-m-2-col-on-xl"
|
|
108
108
|
>10 / 6 / 2 col</div>
|
|
109
109
|
<div
|
|
110
|
-
class="pf-
|
|
110
|
+
class="pf-v6-l-grid__item pf-m-3-col pf-m-6-col-on-md pf-m-9-col-on-xl"
|
|
111
111
|
>3 / 6 / 9 col</div>
|
|
112
112
|
<div
|
|
113
|
-
class="pf-
|
|
113
|
+
class="pf-v6-l-grid__item pf-m-9-col pf-m-6-col-on-md pf-m-3-col-on-xl"
|
|
114
114
|
>9 / 6 / 3 col</div>
|
|
115
115
|
<div
|
|
116
|
-
class="pf-
|
|
116
|
+
class="pf-v6-l-grid__item pf-m-4-col pf-m-6-col-on-md pf-m-8-col-on-xl"
|
|
117
117
|
>4 / 6 / 8 col</div>
|
|
118
118
|
<div
|
|
119
|
-
class="pf-
|
|
119
|
+
class="pf-v6-l-grid__item pf-m-8-col pf-m-6-col-on-md pf-m-4-col-on-xl"
|
|
120
120
|
>8 / 6 / 4 col</div>
|
|
121
121
|
<div
|
|
122
|
-
class="pf-
|
|
122
|
+
class="pf-v6-l-grid__item pf-m-5-col pf-m-6-col-on-md pf-m-7-col-on-xl"
|
|
123
123
|
>5 / 6 / 7 col</div>
|
|
124
124
|
<div
|
|
125
|
-
class="pf-
|
|
125
|
+
class="pf-v6-l-grid__item pf-m-7-col pf-m-6-col-on-md pf-m-5-col-on-xl"
|
|
126
126
|
>7 / 6 / 5 col</div>
|
|
127
127
|
</div>
|
|
128
128
|
|
|
@@ -131,18 +131,18 @@ cssPrefix: pf-v5-l-grid
|
|
|
131
131
|
### Nested
|
|
132
132
|
|
|
133
133
|
```html
|
|
134
|
-
<div class="pf-
|
|
135
|
-
<div class="pf-
|
|
136
|
-
<div class="pf-
|
|
134
|
+
<div class="pf-v6-l-grid">
|
|
135
|
+
<div class="pf-v6-l-grid__item pf-m-12-col">12 col</div>
|
|
136
|
+
<div class="pf-v6-l-grid__item pf-m-10-col">
|
|
137
137
|
10 col
|
|
138
|
-
<div class="pf-
|
|
139
|
-
<div class="pf-
|
|
140
|
-
<div class="pf-
|
|
141
|
-
<div class="pf-
|
|
142
|
-
<div class="pf-
|
|
138
|
+
<div class="pf-v6-l-grid pf-m-gutter">
|
|
139
|
+
<div class="pf-v6-l-grid__item pf-m-6-col">6 col</div>
|
|
140
|
+
<div class="pf-v6-l-grid__item pf-m-6-col">6 col</div>
|
|
141
|
+
<div class="pf-v6-l-grid__item pf-m-4-col">4 col</div>
|
|
142
|
+
<div class="pf-v6-l-grid__item pf-m-8-col">8 col</div>
|
|
143
143
|
</div>
|
|
144
144
|
</div>
|
|
145
|
-
<div class="pf-
|
|
145
|
+
<div class="pf-v6-l-grid__item pf-m-2-col">2 col</div>
|
|
146
146
|
</div>
|
|
147
147
|
|
|
148
148
|
```
|
|
@@ -150,11 +150,11 @@ cssPrefix: pf-v5-l-grid
|
|
|
150
150
|
### Offsets
|
|
151
151
|
|
|
152
152
|
```html
|
|
153
|
-
<div class="pf-
|
|
154
|
-
<div class="pf-
|
|
155
|
-
<div class="pf-
|
|
156
|
-
<div class="pf-
|
|
157
|
-
<div class="pf-
|
|
153
|
+
<div class="pf-v6-l-grid pf-m-gutter">
|
|
154
|
+
<div class="pf-v6-l-grid__item pf-m-11-col pf-m-offset-1-col">11 col, offset 1</div>
|
|
155
|
+
<div class="pf-v6-l-grid__item pf-m-10-col pf-m-offset-2-col">10 col, offset 2</div>
|
|
156
|
+
<div class="pf-v6-l-grid__item pf-m-9-col pf-m-offset-3-col">9 col, offset 3</div>
|
|
157
|
+
<div class="pf-v6-l-grid__item pf-m-8-col pf-m-offset-4-col">8 col, offset 4</div>
|
|
158
158
|
</div>
|
|
159
159
|
|
|
160
160
|
```
|
|
@@ -162,19 +162,19 @@ cssPrefix: pf-v5-l-grid
|
|
|
162
162
|
### Row spans
|
|
163
163
|
|
|
164
164
|
```html
|
|
165
|
-
<div class="pf-
|
|
166
|
-
<div class="pf-
|
|
167
|
-
<div class="pf-
|
|
168
|
-
<div class="pf-
|
|
169
|
-
<div class="pf-
|
|
170
|
-
<div class="pf-
|
|
171
|
-
<div class="pf-
|
|
172
|
-
<div class="pf-
|
|
173
|
-
<div class="pf-
|
|
174
|
-
<div class="pf-
|
|
175
|
-
<div class="pf-
|
|
176
|
-
<div class="pf-
|
|
177
|
-
<div class="pf-
|
|
165
|
+
<div class="pf-v6-l-grid pf-m-gutter">
|
|
166
|
+
<div class="pf-v6-l-grid__item pf-m-8-col">8 col</div>
|
|
167
|
+
<div class="pf-v6-l-grid__item pf-m-4-col pf-m-2-row">4 col, 2 row</div>
|
|
168
|
+
<div class="pf-v6-l-grid__item pf-m-2-col pf-m-3-row">2 col, 3 row</div>
|
|
169
|
+
<div class="pf-v6-l-grid__item pf-m-2-col">2 col</div>
|
|
170
|
+
<div class="pf-v6-l-grid__item pf-m-4-col">4 col</div>
|
|
171
|
+
<div class="pf-v6-l-grid__item pf-m-2-col">2 col</div>
|
|
172
|
+
<div class="pf-v6-l-grid__item pf-m-2-col">2 col</div>
|
|
173
|
+
<div class="pf-v6-l-grid__item pf-m-2-col">2 col</div>
|
|
174
|
+
<div class="pf-v6-l-grid__item pf-m-4-col">4 col</div>
|
|
175
|
+
<div class="pf-v6-l-grid__item pf-m-2-col">2 col</div>
|
|
176
|
+
<div class="pf-v6-l-grid__item pf-m-4-col">4 col</div>
|
|
177
|
+
<div class="pf-v6-l-grid__item pf-m-4-col">4 col</div>
|
|
178
178
|
</div>
|
|
179
179
|
|
|
180
180
|
```
|
|
@@ -186,11 +186,11 @@ Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <cod
|
|
|
186
186
|
### Ordering example
|
|
187
187
|
|
|
188
188
|
```html
|
|
189
|
-
<div class="pf-
|
|
190
|
-
<div class="pf-
|
|
191
|
-
<div class="pf-
|
|
189
|
+
<div class="pf-v6-l-grid pf-m-all-4-col pf-m-gutter">
|
|
190
|
+
<div class="pf-v6-l-grid__item" style="--pf-v5-l-grid--item--Order: 2;">Item A</div>
|
|
191
|
+
<div class="pf-v6-l-grid__item">Item B</div>
|
|
192
192
|
<div
|
|
193
|
-
class="pf-
|
|
193
|
+
class="pf-v6-l-grid__item"
|
|
194
194
|
style="--pf-v5-l-grid--item--Order: -1;"
|
|
195
195
|
>Item C</div>
|
|
196
196
|
</div>
|
|
@@ -200,14 +200,14 @@ Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <cod
|
|
|
200
200
|
### Responsive ordering
|
|
201
201
|
|
|
202
202
|
```html
|
|
203
|
-
<div class="pf-
|
|
203
|
+
<div class="pf-v6-l-grid pf-m-all-4-col pf-m-gutter">
|
|
204
204
|
<div
|
|
205
|
-
class="pf-
|
|
205
|
+
class="pf-v6-l-grid__item"
|
|
206
206
|
style="--pf-v5-l-grid--item--Order-on-lg: 2;"
|
|
207
207
|
>Item A</div>
|
|
208
|
-
<div class="pf-
|
|
208
|
+
<div class="pf-v6-l-grid__item">Item B</div>
|
|
209
209
|
<div
|
|
210
|
-
class="pf-
|
|
210
|
+
class="pf-v6-l-grid__item"
|
|
211
211
|
style="--pf-v5-l-grid--item--Order: -1; --pf-v5-l-grid--item--Order-on-md: 1;"
|
|
212
212
|
>Item C</div>
|
|
213
213
|
</div>
|
|
@@ -217,34 +217,34 @@ Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <cod
|
|
|
217
217
|
### Grouped ordering
|
|
218
218
|
|
|
219
219
|
```html
|
|
220
|
-
<div class="pf-
|
|
221
|
-
<div class="pf-
|
|
220
|
+
<div class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-gutter">
|
|
221
|
+
<div class="pf-v6-l-grid pf-m-gutter" style="--pf-v5-l-grid--item--Order: 2;">
|
|
222
222
|
<div
|
|
223
|
-
class="pf-
|
|
223
|
+
class="pf-v6-l-grid__item"
|
|
224
224
|
style="--pf-v5-l-grid--item--Order: 3;"
|
|
225
225
|
>Set 1, Item A</div>
|
|
226
226
|
<div
|
|
227
|
-
class="pf-
|
|
227
|
+
class="pf-v6-l-grid__item"
|
|
228
228
|
style="--pf-v5-l-grid--item--Order: 1;"
|
|
229
229
|
>Set 1, Item B</div>
|
|
230
|
-
<div class="pf-
|
|
230
|
+
<div class="pf-v6-l-grid__item">Set 1, Item C</div>
|
|
231
231
|
<div
|
|
232
|
-
class="pf-
|
|
232
|
+
class="pf-v6-l-grid__item"
|
|
233
233
|
style="--pf-v5-l-grid--item--Order: 2;"
|
|
234
234
|
>Set 1, Item D</div>
|
|
235
235
|
</div>
|
|
236
|
-
<div class="pf-
|
|
236
|
+
<div class="pf-v6-l-grid pf-m-gutter">
|
|
237
237
|
<div
|
|
238
|
-
class="pf-
|
|
238
|
+
class="pf-v6-l-grid__item"
|
|
239
239
|
style="--pf-v5-l-grid--item--Order: 3;"
|
|
240
240
|
>Set 2, Item A</div>
|
|
241
241
|
<div
|
|
242
|
-
class="pf-
|
|
242
|
+
class="pf-v6-l-grid__item"
|
|
243
243
|
style="--pf-v5-l-grid--item--Order: 1;"
|
|
244
244
|
>Set 2, Item B</div>
|
|
245
|
-
<div class="pf-
|
|
245
|
+
<div class="pf-v6-l-grid__item">Set 2, Item C</div>
|
|
246
246
|
<div
|
|
247
|
-
class="pf-
|
|
247
|
+
class="pf-v6-l-grid__item"
|
|
248
248
|
style="--pf-v5-l-grid--item--Order: 2;"
|
|
249
249
|
>Set 2, Item D</div>
|
|
250
250
|
</div>
|
|
@@ -255,37 +255,37 @@ Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <cod
|
|
|
255
255
|
### Grouped, responsive ordering
|
|
256
256
|
|
|
257
257
|
```html
|
|
258
|
-
<div class="pf-
|
|
258
|
+
<div class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-gutter">
|
|
259
259
|
<div
|
|
260
|
-
class="pf-
|
|
260
|
+
class="pf-v6-l-grid pf-m-gutter"
|
|
261
261
|
style="--pf-v5-l-grid--item--Order-on-lg: 2;"
|
|
262
262
|
>
|
|
263
263
|
<div
|
|
264
|
-
class="pf-
|
|
264
|
+
class="pf-v6-l-grid__item"
|
|
265
265
|
style="--pf-v5-l-grid--item--Order-on-md: 3;"
|
|
266
266
|
>Set 1, Item A</div>
|
|
267
267
|
<div
|
|
268
|
-
class="pf-
|
|
268
|
+
class="pf-v6-l-grid__item"
|
|
269
269
|
style="--pf-v5-l-grid--item--Order-on-md: 1;"
|
|
270
270
|
>Set 1, Item B</div>
|
|
271
|
-
<div class="pf-
|
|
271
|
+
<div class="pf-v6-l-grid__item">Set 1, Item C</div>
|
|
272
272
|
<div
|
|
273
|
-
class="pf-
|
|
273
|
+
class="pf-v6-l-grid__item"
|
|
274
274
|
style="--pf-v5-l-grid--item--Order-on-xl: 2;"
|
|
275
275
|
>Set 1, Item D</div>
|
|
276
276
|
</div>
|
|
277
|
-
<div class="pf-
|
|
277
|
+
<div class="pf-v6-l-grid pf-m-gutter">
|
|
278
278
|
<div
|
|
279
|
-
class="pf-
|
|
279
|
+
class="pf-v6-l-grid__item"
|
|
280
280
|
style="--pf-v5-l-grid--item--Order: 3;"
|
|
281
281
|
>Set 2, Item A</div>
|
|
282
282
|
<div
|
|
283
|
-
class="pf-
|
|
283
|
+
class="pf-v6-l-grid__item"
|
|
284
284
|
style="--pf-v5-l-grid--item--Order: 1;"
|
|
285
285
|
>Set 2, Item B</div>
|
|
286
|
-
<div class="pf-
|
|
286
|
+
<div class="pf-v6-l-grid__item">Set 2, Item C</div>
|
|
287
287
|
<div
|
|
288
|
-
class="pf-
|
|
288
|
+
class="pf-v6-l-grid__item"
|
|
289
289
|
style="--pf-v5-l-grid--item--Order: 2;"
|
|
290
290
|
>Set 2, Item D</div>
|
|
291
291
|
</div>
|
|
@@ -296,11 +296,11 @@ Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <cod
|
|
|
296
296
|
### List type
|
|
297
297
|
|
|
298
298
|
```html
|
|
299
|
-
<ul class="pf-
|
|
300
|
-
<li class="pf-
|
|
301
|
-
<li class="pf-
|
|
302
|
-
<li class="pf-
|
|
303
|
-
<li class="pf-
|
|
299
|
+
<ul class="pf-v6-l-grid pf-m-all-6-col-on-sm">
|
|
300
|
+
<li class="pf-v6-l-grid__item">item 1</li>
|
|
301
|
+
<li class="pf-v6-l-grid__item">item 2</li>
|
|
302
|
+
<li class="pf-v6-l-grid__item">item 3</li>
|
|
303
|
+
<li class="pf-v6-l-grid__item">item 4</li>
|
|
304
304
|
</ul>
|
|
305
305
|
|
|
306
306
|
```
|
|
@@ -9,9 +9,9 @@ cssPrefix: pf-v5-l-level
|
|
|
9
9
|
### Two items
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<div class="pf-
|
|
13
|
-
<div class="pf-
|
|
14
|
-
<div class="pf-
|
|
12
|
+
<div class="pf-v6-l-level">
|
|
13
|
+
<div class="pf-v6-l-level__item">content</div>
|
|
14
|
+
<div class="pf-v6-l-level__item">content</div>
|
|
15
15
|
</div>
|
|
16
16
|
|
|
17
17
|
```
|
|
@@ -19,10 +19,10 @@ cssPrefix: pf-v5-l-level
|
|
|
19
19
|
### Three items
|
|
20
20
|
|
|
21
21
|
```html
|
|
22
|
-
<div class="pf-
|
|
23
|
-
<div class="pf-
|
|
24
|
-
<div class="pf-
|
|
25
|
-
<div class="pf-
|
|
22
|
+
<div class="pf-v6-l-level">
|
|
23
|
+
<div class="pf-v6-l-level__item">content</div>
|
|
24
|
+
<div class="pf-v6-l-level__item">content</div>
|
|
25
|
+
<div class="pf-v6-l-level__item">content</div>
|
|
26
26
|
</div>
|
|
27
27
|
|
|
28
28
|
```
|
|
@@ -30,10 +30,10 @@ cssPrefix: pf-v5-l-level
|
|
|
30
30
|
### With gutters
|
|
31
31
|
|
|
32
32
|
```html
|
|
33
|
-
<div class="pf-
|
|
34
|
-
<div class="pf-
|
|
35
|
-
<div class="pf-
|
|
36
|
-
<div class="pf-
|
|
33
|
+
<div class="pf-v6-l-level pf-m-gutter">
|
|
34
|
+
<div class="pf-v6-l-level__item">content with gutter</div>
|
|
35
|
+
<div class="pf-v6-l-level__item">content with gutter</div>
|
|
36
|
+
<div class="pf-v6-l-level__item">content with gutter</div>
|
|
37
37
|
</div>
|
|
38
38
|
|
|
39
39
|
```
|