@patternfly/patternfly 6.0.0-alpha.102 → 6.0.0-alpha.104
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/components/Check/check.css +2 -2
- package/components/Check/check.scss +2 -2
- package/components/Drawer/drawer.css +5 -4
- package/components/Drawer/drawer.scss +7 -6
- package/components/Page/page.css +24 -23
- package/components/Page/page.scss +24 -23
- package/components/Table/table.css +0 -37
- package/components/Table/table.scss +0 -49
- package/docs/components/Drawer/examples/Drawer.md +2 -1
- package/docs/components/Page/deprecated/PageHeader.md +113 -99
- package/docs/components/Page/examples/Page.md +114 -100
- package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
- package/docs/demos/Alert/examples/Alert.md +551 -524
- package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
- package/docs/demos/Banner/examples/Banner.md +420 -412
- package/docs/demos/CardView/examples/CardView.md +1302 -1297
- package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
- package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
- package/docs/demos/DataList/examples/DataList.md +3006 -2958
- package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
- package/docs/demos/Drawer/examples/Drawer.md +544 -528
- package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
- package/docs/demos/Masthead/examples/Masthead.md +729 -711
- package/docs/demos/Modal/examples/Modal.md +486 -474
- package/docs/demos/Nav/examples/Nav.md +528 -510
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
- package/docs/demos/Page/examples/Page.md +1656 -1633
- package/docs/demos/Page/examples/Penta.md +632 -577
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
- package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
- package/docs/demos/Table/examples/Table.md +14137 -13972
- package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
- package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
- package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
- package/package.json +1 -1
- package/patternfly-no-globals.css +31 -66
- package/patternfly-theme-dark-unversioned.css +31 -66
- package/patternfly.css +31 -66
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -21,27 +21,29 @@ deprecated: true
|
|
|
21
21
|
<div class="pf-v6-c-page__sidebar">
|
|
22
22
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
23
23
|
</div>
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
24
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
25
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
26
|
+
<section class="pf-v6-c-page__main-section pf-m-dark-100">
|
|
27
|
+
This
|
|
28
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
29
|
+
<code>.pf-m-dark-100</code>.
|
|
30
|
+
</section>
|
|
31
|
+
<section class="pf-v6-c-page__main-section pf-m-dark-200">
|
|
32
|
+
This
|
|
33
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
34
|
+
<code>.pf-m-dark-200</code>.
|
|
35
|
+
</section>
|
|
36
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
37
|
+
This
|
|
38
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
39
|
+
<code>.pf-m-light</code>.
|
|
40
|
+
</section>
|
|
41
|
+
<section class="pf-v6-c-page__main-section">
|
|
42
|
+
This is a default
|
|
43
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
44
|
+
</section>
|
|
45
|
+
</main>
|
|
46
|
+
</div>
|
|
45
47
|
</div>
|
|
46
48
|
|
|
47
49
|
```
|
|
@@ -57,12 +59,14 @@ deprecated: true
|
|
|
57
59
|
<div class="pf-v6-c-page__header-nav">Navigation</div>
|
|
58
60
|
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
59
61
|
</header>
|
|
60
|
-
<
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
63
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
64
|
+
<section class="pf-v6-c-page__main-section pf-m-dark-100"></section>
|
|
65
|
+
<section class="pf-v6-c-page__main-section pf-m-dark-200"></section>
|
|
66
|
+
<section class="pf-v6-c-page__main-section pf-m-light"></section>
|
|
67
|
+
<section class="pf-v6-c-page__main-section"></section>
|
|
68
|
+
</main>
|
|
69
|
+
</div>
|
|
66
70
|
</div>
|
|
67
71
|
|
|
68
72
|
```
|
|
@@ -85,9 +89,11 @@ deprecated: true
|
|
|
85
89
|
>inset content</div>
|
|
86
90
|
<div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
|
|
87
91
|
</div>
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
|
|
92
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
93
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
94
|
+
<section class="pf-v6-c-page__main-section pf-m-light"></section>
|
|
95
|
+
</main>
|
|
96
|
+
</div>
|
|
91
97
|
</div>
|
|
92
98
|
|
|
93
99
|
```
|
|
@@ -103,19 +109,21 @@ deprecated: true
|
|
|
103
109
|
<div class="pf-v6-c-page__header-nav">Navigation</div>
|
|
104
110
|
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
105
111
|
</header>
|
|
106
|
-
<
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
112
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
113
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
114
|
+
<section
|
|
115
|
+
class="pf-v6-c-page__main-section pf-m-light"
|
|
116
|
+
>A regular page section.</section>
|
|
117
|
+
<section class="pf-v6-c-page__main-section pf-m-fill">
|
|
118
|
+
This section uses
|
|
119
|
+
<code>.pf-m-fill</code> to fill the available space.
|
|
120
|
+
</section>
|
|
121
|
+
<section class="pf-v6-c-page__main-section pf-m-light pf-m-no-fill">
|
|
122
|
+
This section uses
|
|
123
|
+
<code>.pf-m-no-fill</code> to not fill the available space.
|
|
124
|
+
</section>
|
|
125
|
+
</main>
|
|
126
|
+
</div>
|
|
119
127
|
</div>
|
|
120
128
|
|
|
121
129
|
```
|
|
@@ -134,25 +142,27 @@ deprecated: true
|
|
|
134
142
|
<div class="pf-v6-c-page__sidebar">
|
|
135
143
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
136
144
|
</div>
|
|
137
|
-
<
|
|
138
|
-
<
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
145
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
146
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
147
|
+
<section class="pf-v6-c-page__main-section">
|
|
148
|
+
This
|
|
149
|
+
<code>.pf-v6-c-page__main-section</code> has default padding.
|
|
150
|
+
</section>
|
|
151
|
+
<section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
|
|
152
|
+
This
|
|
153
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
154
|
+
<code>.pf-m-no-padding</code> to remove all padding.
|
|
155
|
+
</section>
|
|
156
|
+
<section
|
|
157
|
+
class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
|
|
158
|
+
>
|
|
159
|
+
This
|
|
160
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
161
|
+
<code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
|
|
162
|
+
<code>md</code> breakpoint.
|
|
163
|
+
</section>
|
|
164
|
+
</main>
|
|
165
|
+
</div>
|
|
156
166
|
</div>
|
|
157
167
|
|
|
158
168
|
```
|
|
@@ -171,29 +181,31 @@ deprecated: true
|
|
|
171
181
|
<div class="pf-v6-c-page__sidebar">
|
|
172
182
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
173
183
|
</div>
|
|
174
|
-
<
|
|
175
|
-
<
|
|
176
|
-
<
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
<
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
<
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
<
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
<
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
<
|
|
195
|
-
|
|
196
|
-
|
|
184
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
185
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
186
|
+
<section class="pf-v6-c-page__main-subnav">
|
|
187
|
+
<code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
|
|
188
|
+
</section>
|
|
189
|
+
<section class="pf-v6-c-page__main-nav">
|
|
190
|
+
<code>.pf-v6-c-page__main-nav</code> for tertiary navigation
|
|
191
|
+
</section>
|
|
192
|
+
<section class="pf-v6-c-page__main-tabs">
|
|
193
|
+
<code>.pf-v6-c-page__main-tabs</code> for tabs
|
|
194
|
+
</section>
|
|
195
|
+
<div class="pf-v6-c-page__main-group">
|
|
196
|
+
<code>.pf-v6-c-page__main-group</code> for a group of page sections
|
|
197
|
+
</div>
|
|
198
|
+
<section class="pf-v6-c-page__main-breadcrumb">
|
|
199
|
+
<code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
|
|
200
|
+
</section>
|
|
201
|
+
<section class="pf-v6-c-page__main-section">
|
|
202
|
+
<code>.pf-v6-c-page__main-section</code> for main sections
|
|
203
|
+
</section>
|
|
204
|
+
<section class="pf-v6-c-page__main-wizard">
|
|
205
|
+
<code>.pf-v6-c-page__main-wizard</code> for wizards
|
|
206
|
+
</section>
|
|
207
|
+
</main>
|
|
208
|
+
</div>
|
|
197
209
|
</div>
|
|
198
210
|
|
|
199
211
|
```
|
|
@@ -209,22 +221,24 @@ deprecated: true
|
|
|
209
221
|
</div>
|
|
210
222
|
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
211
223
|
</header>
|
|
212
|
-
<
|
|
213
|
-
<
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
<div class="pf-v6-c-
|
|
218
|
-
<div class="pf-v6-c-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
224
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
225
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
226
|
+
<section
|
|
227
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
|
|
228
|
+
>
|
|
229
|
+
<div class="pf-v6-c-page__main-body">
|
|
230
|
+
<div class="pf-v6-c-card">
|
|
231
|
+
<div class="pf-v6-c-card__body">
|
|
232
|
+
When a width limited page section is wider than the value of
|
|
233
|
+
<code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
|
|
234
|
+
<br />
|
|
235
|
+
<br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
|
|
236
|
+
</div>
|
|
223
237
|
</div>
|
|
224
238
|
</div>
|
|
225
|
-
</
|
|
226
|
-
</
|
|
227
|
-
</
|
|
239
|
+
</section>
|
|
240
|
+
</main>
|
|
241
|
+
</div>
|
|
228
242
|
</div>
|
|
229
243
|
|
|
230
244
|
```
|
|
@@ -31,21 +31,23 @@ wrapperTag: div
|
|
|
31
31
|
<div class="pf-v6-c-page__sidebar">
|
|
32
32
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
33
33
|
</div>
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
34
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
35
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
36
|
+
<section class="pf-v6-c-page__main-section">
|
|
37
|
+
This is a default
|
|
38
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
39
|
+
</section>
|
|
40
|
+
<section class="pf-v6-c-page__main-section pf-m-secondary">
|
|
41
|
+
This
|
|
42
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
43
|
+
<code>.pf-m-secondary</code>.
|
|
44
|
+
</section>
|
|
45
|
+
<section class="pf-v6-c-page__main-section">
|
|
46
|
+
This is a default
|
|
47
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
48
|
+
</section>
|
|
49
|
+
</main>
|
|
50
|
+
</div>
|
|
49
51
|
</div>
|
|
50
52
|
|
|
51
53
|
```
|
|
@@ -71,21 +73,23 @@ wrapperTag: div
|
|
|
71
73
|
<span>Content</span>
|
|
72
74
|
</div>
|
|
73
75
|
</header>
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
76
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
77
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
78
|
+
<section class="pf-v6-c-page__main-section">
|
|
79
|
+
This is a default
|
|
80
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
81
|
+
</section>
|
|
82
|
+
<section class="pf-v6-c-page__main-section pf-m-secondary">
|
|
83
|
+
This
|
|
84
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
85
|
+
<code>.pf-m-secondary</code>.
|
|
86
|
+
</section>
|
|
87
|
+
<section class="pf-v6-c-page__main-section">
|
|
88
|
+
This is a default
|
|
89
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
90
|
+
</section>
|
|
91
|
+
</main>
|
|
92
|
+
</div>
|
|
89
93
|
</div>
|
|
90
94
|
|
|
91
95
|
```
|
|
@@ -118,9 +122,11 @@ wrapperTag: div
|
|
|
118
122
|
>inset content</div>
|
|
119
123
|
<div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
|
|
120
124
|
</div>
|
|
121
|
-
<
|
|
122
|
-
<
|
|
123
|
-
|
|
125
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
126
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
127
|
+
<section class="pf-v6-c-page__main-section"></section>
|
|
128
|
+
</main>
|
|
129
|
+
</div>
|
|
124
130
|
</div>
|
|
125
131
|
|
|
126
132
|
```
|
|
@@ -146,17 +152,19 @@ wrapperTag: div
|
|
|
146
152
|
<span>Content</span>
|
|
147
153
|
</div>
|
|
148
154
|
</header>
|
|
149
|
-
<
|
|
150
|
-
<
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
155
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
156
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
157
|
+
<section class="pf-v6-c-page__main-section">A regular page section.</section>
|
|
158
|
+
<section class="pf-v6-c-page__main-section pf-m-fill">
|
|
159
|
+
This section uses
|
|
160
|
+
<code>.pf-m-fill</code> to fill the available space.
|
|
161
|
+
</section>
|
|
162
|
+
<section class="pf-v6-c-page__main-section pf-m-no-fill">
|
|
163
|
+
This section uses
|
|
164
|
+
<code>.pf-m-no-fill</code> to not fill the available space.
|
|
165
|
+
</section>
|
|
166
|
+
</main>
|
|
167
|
+
</div>
|
|
160
168
|
</div>
|
|
161
169
|
|
|
162
170
|
```
|
|
@@ -185,25 +193,27 @@ wrapperTag: div
|
|
|
185
193
|
<div class="pf-v6-c-page__sidebar">
|
|
186
194
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
187
195
|
</div>
|
|
188
|
-
<
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
196
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
197
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
198
|
+
<section class="pf-v6-c-page__main-section">
|
|
199
|
+
This
|
|
200
|
+
<code>.pf-v6-c-page__main-section</code> has default padding.
|
|
201
|
+
</section>
|
|
202
|
+
<section class="pf-v6-c-page__main-section pf-m-no-padding">
|
|
203
|
+
This
|
|
204
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
205
|
+
<code>.pf-m-no-padding</code> to remove all padding.
|
|
206
|
+
</section>
|
|
207
|
+
<section
|
|
208
|
+
class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
|
|
209
|
+
>
|
|
210
|
+
This
|
|
211
|
+
<code>.pf-v6-c-page__main-section</code> uses
|
|
212
|
+
<code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
|
|
213
|
+
<code>md</code> breakpoint.
|
|
214
|
+
</section>
|
|
215
|
+
</main>
|
|
216
|
+
</div>
|
|
207
217
|
</div>
|
|
208
218
|
|
|
209
219
|
```
|
|
@@ -232,29 +242,31 @@ wrapperTag: div
|
|
|
232
242
|
<div class="pf-v6-c-page__sidebar">
|
|
233
243
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
234
244
|
</div>
|
|
235
|
-
<
|
|
236
|
-
<
|
|
237
|
-
<
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
<
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
<
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
<
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
<
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
<
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
<
|
|
256
|
-
|
|
257
|
-
|
|
245
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
246
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
247
|
+
<section class="pf-v6-c-page__main-subnav">
|
|
248
|
+
<code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
|
|
249
|
+
</section>
|
|
250
|
+
<section class="pf-v6-c-page__main-nav">
|
|
251
|
+
<code>.pf-v6-c-page__main-nav</code> for tertiary navigation
|
|
252
|
+
</section>
|
|
253
|
+
<section class="pf-v6-c-page__main-tabs">
|
|
254
|
+
<code>.pf-v6-c-page__main-tabs</code> for tabs
|
|
255
|
+
</section>
|
|
256
|
+
<div class="pf-v6-c-page__main-group">
|
|
257
|
+
<code>.pf-v6-c-page__main-group</code> for a group of page sections
|
|
258
|
+
</div>
|
|
259
|
+
<section class="pf-v6-c-page__main-breadcrumb">
|
|
260
|
+
<code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
|
|
261
|
+
</section>
|
|
262
|
+
<section class="pf-v6-c-page__main-section">
|
|
263
|
+
<code>.pf-v6-c-page__main-section</code> for main sections
|
|
264
|
+
</section>
|
|
265
|
+
<section class="pf-v6-c-page__main-wizard">
|
|
266
|
+
<code>.pf-v6-c-page__main-wizard</code> for wizards
|
|
267
|
+
</section>
|
|
268
|
+
</main>
|
|
269
|
+
</div>
|
|
258
270
|
</div>
|
|
259
271
|
|
|
260
272
|
```
|
|
@@ -280,22 +292,24 @@ wrapperTag: div
|
|
|
280
292
|
<span>Content</span>
|
|
281
293
|
</div>
|
|
282
294
|
</header>
|
|
283
|
-
<
|
|
284
|
-
<
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
<div class="pf-v6-c-
|
|
289
|
-
<div class="pf-v6-c-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
295
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
296
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
297
|
+
<section
|
|
298
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
|
|
299
|
+
>
|
|
300
|
+
<div class="pf-v6-c-page__main-body">
|
|
301
|
+
<div class="pf-v6-c-card">
|
|
302
|
+
<div class="pf-v6-c-card__body">
|
|
303
|
+
When a width limited page section is wider than the value of
|
|
304
|
+
<code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
|
|
305
|
+
<br />
|
|
306
|
+
<br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
|
|
307
|
+
</div>
|
|
294
308
|
</div>
|
|
295
309
|
</div>
|
|
296
|
-
</
|
|
297
|
-
</
|
|
298
|
-
</
|
|
310
|
+
</section>
|
|
311
|
+
</main>
|
|
312
|
+
</div>
|
|
299
313
|
</div>
|
|
300
314
|
|
|
301
315
|
```
|