@patternfly/patternfly 6.0.0-prerelease.9 → 6.1.0-prerelease.1

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.
Files changed (196) hide show
  1. package/README.md +1 -1
  2. package/base/normalize.scss +16 -0
  3. package/base/patternfly-variables.css +84 -62
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +12 -4
  7. package/base/tokens/tokens-default.scss +44 -27
  8. package/base/tokens/tokens-local.scss +30 -35
  9. package/base/tokens/tokens-palette.scss +1 -1
  10. package/components/AboutModalBox/about-modal-box.css +0 -7
  11. package/components/Accordion/accordion.css +0 -1
  12. package/components/ActionList/action-list.css +1 -2
  13. package/components/ActionList/action-list.scss +1 -1
  14. package/components/Alert/alert-group.css +0 -1
  15. package/components/Alert/alert.css +2 -7
  16. package/components/Alert/alert.scss +2 -7
  17. package/components/Avatar/avatar.css +0 -1
  18. package/components/BackToTop/back-to-top.css +0 -2
  19. package/components/Backdrop/backdrop.css +0 -1
  20. package/components/BackgroundImage/background-image.css +0 -1
  21. package/components/Badge/badge.css +0 -1
  22. package/components/Banner/banner.css +0 -2
  23. package/components/Brand/brand.css +0 -1
  24. package/components/Breadcrumb/breadcrumb.css +0 -1
  25. package/components/Button/button.css +8 -1
  26. package/components/Button/button.scss +8 -0
  27. package/components/CalendarMonth/calendar-month.css +0 -1
  28. package/components/Card/card.css +0 -1
  29. package/components/Check/check.css +0 -1
  30. package/components/ClipboardCopy/clipboard-copy.css +0 -1
  31. package/components/CodeBlock/code-block.css +0 -1
  32. package/components/CodeEditor/code-editor.css +0 -1
  33. package/components/Content/content.css +2 -3
  34. package/components/Content/content.scss +2 -2
  35. package/components/DataList/data-list.css +4 -16
  36. package/components/DataList/data-list.scss +4 -14
  37. package/components/DatePicker/date-picker.css +0 -1
  38. package/components/DescriptionList/description-list.css +2 -9
  39. package/components/DescriptionList/description-list.scss +2 -2
  40. package/components/Divider/divider.css +0 -1
  41. package/components/DragDrop/drag-drop.css +0 -2
  42. package/components/Drawer/drawer.css +0 -7
  43. package/components/Drawer/drawer.scss +0 -5
  44. package/components/DualListSelector/dual-list-selector.css +0 -1
  45. package/components/EmptyState/empty-state.css +1 -2
  46. package/components/EmptyState/empty-state.scss +1 -1
  47. package/components/ExpandableSection/expandable-section.css +0 -1
  48. package/components/FileUpload/file-upload.css +0 -1
  49. package/components/Form/form.css +1 -2
  50. package/components/Form/form.scss +1 -1
  51. package/components/FormControl/form-control.css +22 -4
  52. package/components/FormControl/form-control.scss +27 -4
  53. package/components/HelperText/helper-text.css +0 -1
  54. package/components/Hint/hint.css +0 -1
  55. package/components/Icon/icon.css +0 -1
  56. package/components/InlineEdit/inline-edit.css +0 -1
  57. package/components/InputGroup/input-group.css +0 -1
  58. package/components/JumpLinks/jump-links.css +0 -1
  59. package/components/Label/label-group.css +0 -1
  60. package/components/Label/label.css +0 -1
  61. package/components/List/list.css +0 -1
  62. package/components/Login/login.css +0 -9
  63. package/components/Masthead/masthead.css +0 -1
  64. package/components/Menu/menu.css +0 -1
  65. package/components/MenuToggle/menu-toggle.css +66 -56
  66. package/components/MenuToggle/menu-toggle.scss +76 -65
  67. package/components/ModalBox/modal-box.css +0 -2
  68. package/components/MultipleFileUpload/multiple-file-upload.css +0 -1
  69. package/components/Nav/nav.css +0 -1
  70. package/components/NotificationDrawer/notification-drawer.css +0 -1
  71. package/components/NumberInput/number-input.css +0 -1
  72. package/components/OverflowMenu/overflow-menu.css +0 -1
  73. package/components/Page/page.css +15 -10
  74. package/components/Page/page.scss +17 -8
  75. package/components/Pagination/pagination.css +31 -20
  76. package/components/Pagination/pagination.scss +35 -23
  77. package/components/Panel/panel.css +0 -1
  78. package/components/Popover/popover.css +0 -1
  79. package/components/Progress/progress.css +0 -1
  80. package/components/ProgressStepper/progress-stepper.css +0 -2
  81. package/components/Radio/radio.css +0 -1
  82. package/components/Sidebar/sidebar.css +0 -1
  83. package/components/SimpleList/simple-list.css +0 -1
  84. package/components/Skeleton/skeleton.css +0 -1
  85. package/components/SkipToContent/skip-to-content.css +0 -1
  86. package/components/Slider/slider.css +0 -1
  87. package/components/Spinner/spinner.css +0 -1
  88. package/components/Switch/switch.css +0 -1
  89. package/components/TabContent/tab-content.css +0 -1
  90. package/components/Table/table-grid.css +9 -5
  91. package/components/Table/table-grid.scss +5 -4
  92. package/components/Table/table-scrollable.css +0 -1
  93. package/components/Table/table-tree-view.css +0 -1
  94. package/components/Table/table.css +6 -6
  95. package/components/Table/table.scss +6 -5
  96. package/components/Tabs/tabs.css +0 -1
  97. package/components/TextInputGroup/text-input-group.css +2 -3
  98. package/components/TextInputGroup/text-input-group.scss +2 -2
  99. package/components/Tile/tile.css +0 -1
  100. package/components/Timestamp/timestamp.css +0 -1
  101. package/components/Title/title.css +0 -1
  102. package/components/ToggleGroup/toggle-group.css +0 -1
  103. package/components/Toolbar/toolbar.css +0 -1
  104. package/components/Tooltip/tooltip.css +0 -1
  105. package/components/TreeView/tree-view.css +0 -1
  106. package/components/Truncate/truncate.css +0 -1
  107. package/components/Wizard/wizard.css +0 -2
  108. package/components/_index.css +172 -239
  109. package/docs/components/Brand/examples/Brand.md +2 -2
  110. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  111. package/docs/components/CalendarMonth/examples/CalendarMonth.md +4 -4
  112. package/docs/components/Content/examples/Content.md +188 -204
  113. package/docs/components/DataList/examples/DataList.md +187 -221
  114. package/docs/components/DragDrop/examples/DragDrop.md +0 -1
  115. package/docs/components/FileUpload/examples/FileUpload.md +11 -7
  116. package/docs/components/Form/examples/Form.md +4 -2
  117. package/docs/components/FormControl/examples/FormControl.md +10 -10
  118. package/docs/components/InputGroup/examples/InputGroup.md +4 -4
  119. package/docs/components/Login/examples/Login.md +6 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +140 -139
  121. package/docs/components/Pagination/examples/Pagination.md +12 -12
  122. package/docs/components/Table/examples/Table.md +1 -1
  123. package/docs/components/Tile/{examples → deprecated}/Tile.md +1 -0
  124. package/docs/components/Toolbar/examples/Toolbar.md +37 -37
  125. package/docs/demos/Card/examples/Card.md +4 -4
  126. package/docs/demos/CardView/examples/CardView.md +10 -4
  127. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  128. package/docs/demos/DataList/examples/DataList.md +37 -13
  129. package/docs/demos/Masthead/examples/Masthead.md +5 -5
  130. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +425 -435
  131. package/docs/demos/Page/examples/Page.md +2 -2
  132. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -18
  133. package/docs/demos/Table/examples/Table.md +235 -91
  134. package/docs/demos/Tabs/examples/Tabs.md +1 -1
  135. package/docs/demos/Toolbar/examples/Toolbar.md +42 -30
  136. package/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  137. package/layouts/Bullseye/bullseye.css +0 -1
  138. package/layouts/Flex/flex.css +0 -1
  139. package/layouts/Gallery/gallery.css +0 -1
  140. package/layouts/Grid/grid.css +0 -1
  141. package/layouts/Level/level.css +0 -1
  142. package/layouts/Split/split.css +0 -1
  143. package/layouts/Stack/stack.css +0 -1
  144. package/layouts/_index.css +0 -7
  145. package/package.json +5 -5
  146. package/patternfly-base-no-globals.css +84 -62
  147. package/patternfly-base.css +99 -62
  148. package/patternfly-charts.css +2 -2
  149. package/patternfly-charts.scss +2 -2
  150. package/patternfly-no-globals.css +256 -308
  151. package/patternfly.css +271 -308
  152. package/patternfly.min.css +1 -1
  153. package/patternfly.min.css.map +1 -1
  154. package/sass-utilities/mixins.scss +3 -3
  155. package/assets/images/PF-Masthead-Logo.svg +0 -1
  156. package/assets/images/background-filter.svg +0 -17
  157. package/assets/images/g_sizing.png +0 -0
  158. package/assets/images/img_avatar-dark.svg +0 -22
  159. package/assets/images/img_avatar.svg +0 -21
  160. package/assets/images/l_pf-reverse-164x11.png +0 -0
  161. package/assets/images/l_pf-reverse.svg +0 -1
  162. package/assets/images/logo-dropbox-old.svg +0 -1
  163. package/assets/images/logo-dropbox.svg +0 -6
  164. package/assets/images/logo-facebook.svg +0 -4
  165. package/assets/images/logo-github.svg +0 -4
  166. package/assets/images/logo-gitlab.svg +0 -4
  167. package/assets/images/logo-google.svg +0 -4
  168. package/assets/images/logo-google2.svg +0 -10
  169. package/assets/images/logo__pf--reverse--base.png +0 -0
  170. package/assets/images/logo__pf--reverse--base.svg +0 -40
  171. package/assets/images/logo__pf--reverse-on-md.svg +0 -40
  172. package/assets/images/pf-c-brand__logo-base.jpg +0 -0
  173. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  174. package/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  175. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  176. package/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  177. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  178. package/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  179. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  180. package/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  181. package/assets/images/pf-c-brand__logo.svg +0 -10
  182. package/assets/images/pf-logo.svg +0 -28
  183. package/assets/images/pf_logo.svg +0 -37
  184. package/assets/images/pf_logo_color.svg +0 -22
  185. package/assets/images/pf_logo_white.svg +0 -37
  186. package/assets/images/pf_mini_logo_white.svg +0 -1
  187. package/assets/images/pfbg_1200.jpg +0 -0
  188. package/assets/images/pfbg_2000.jpg +0 -0
  189. package/assets/images/pfbg_576.jpg +0 -0
  190. package/assets/images/pfbg_576@2x.jpg +0 -0
  191. package/assets/images/pfbg_768.jpg +0 -0
  192. package/assets/images/pfbg_768@2x.jpg +0 -0
  193. package/assets/images/pfbg_992.jpg +0 -0
  194. package/assets/images/pfbg_992@2x.jpg +0 -0
  195. package/assets/images/status-icon-sprite.svg +0 -38
  196. /package/docs/components/Tile/{examples → deprecated}/Tile.css +0 -0
@@ -221,100 +221,98 @@ section: components
221
221
  <div class="pf-v6-c-drawer">
222
222
  <div class="pf-v6-c-drawer__main">
223
223
  <div class="pf-v6-c-drawer__content">
224
- <div class="pf-v6-c-drawer__body">
225
- <div class="pf-v6-c-page__main-container" tabindex="-1">
226
- <main class="pf-v6-c-page__main" tabindex="-1">
227
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
228
- <div class="pf-v6-c-page__main-body">
229
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
230
- <ol class="pf-v6-c-breadcrumb__list" role="list">
231
- <li class="pf-v6-c-breadcrumb__item">
232
- <a
233
- href="#"
234
- class="pf-v6-c-breadcrumb__link"
235
- >Section home</a>
236
- </li>
237
- <li class="pf-v6-c-breadcrumb__item">
238
- <span class="pf-v6-c-breadcrumb__item-divider">
239
- <i class="fas fa-angle-right" aria-hidden="true"></i>
240
- </span>
224
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
225
+ <main class="pf-v6-c-page__main" tabindex="-1">
226
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
227
+ <div class="pf-v6-c-page__main-body">
228
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
229
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
230
+ <li class="pf-v6-c-breadcrumb__item">
231
+ <a
232
+ href="#"
233
+ class="pf-v6-c-breadcrumb__link"
234
+ >Section home</a>
235
+ </li>
236
+ <li class="pf-v6-c-breadcrumb__item">
237
+ <span class="pf-v6-c-breadcrumb__item-divider">
238
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
239
+ </span>
241
240
 
242
- <a
243
- href="#"
244
- class="pf-v6-c-breadcrumb__link"
245
- >Section title</a>
246
- </li>
247
- <li class="pf-v6-c-breadcrumb__item">
248
- <span class="pf-v6-c-breadcrumb__item-divider">
249
- <i class="fas fa-angle-right" aria-hidden="true"></i>
250
- </span>
241
+ <a
242
+ href="#"
243
+ class="pf-v6-c-breadcrumb__link"
244
+ >Section title</a>
245
+ </li>
246
+ <li class="pf-v6-c-breadcrumb__item">
247
+ <span class="pf-v6-c-breadcrumb__item-divider">
248
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
249
+ </span>
251
250
 
252
- <a
253
- href="#"
254
- class="pf-v6-c-breadcrumb__link"
255
- >Section title</a>
256
- </li>
257
- <li class="pf-v6-c-breadcrumb__item">
258
- <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
260
- </span>
251
+ <a
252
+ href="#"
253
+ class="pf-v6-c-breadcrumb__link"
254
+ >Section title</a>
255
+ </li>
256
+ <li class="pf-v6-c-breadcrumb__item">
257
+ <span class="pf-v6-c-breadcrumb__item-divider">
258
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
259
+ </span>
261
260
 
262
- <a
263
- href="#"
264
- class="pf-v6-c-breadcrumb__link pf-m-current"
265
- aria-current="page"
266
- >Section landing</a>
267
- </li>
268
- </ol>
269
- </nav>
261
+ <a
262
+ href="#"
263
+ class="pf-v6-c-breadcrumb__link pf-m-current"
264
+ aria-current="page"
265
+ >Section landing</a>
266
+ </li>
267
+ </ol>
268
+ </nav>
269
+ </div>
270
+ </section>
271
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
272
+ <div class="pf-v6-c-page__main-body">
273
+ <div class="pf-v6-c-content">
274
+ <h1>Main title</h1>
275
+ <p>This is a full page demo.</p>
270
276
  </div>
271
- </section>
272
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
273
- <div class="pf-v6-c-page__main-body">
274
- <div class="pf-v6-c-content">
275
- <h1>Main title</h1>
276
- <p>This is a full page demo.</p>
277
+ </div>
278
+ </section>
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>
277
284
  </div>
278
- </div>
279
- </section>
280
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
281
- <div class="pf-v6-c-page__main-body">
282
- <div class="pf-v6-l-gallery pf-m-gutter">
283
- <div class="pf-v6-c-card">
284
- <div class="pf-v6-c-card__body">This is a card</div>
285
- </div>
286
- <div class="pf-v6-c-card">
287
- <div class="pf-v6-c-card__body">This is a card</div>
288
- </div>
289
- <div class="pf-v6-c-card">
290
- <div class="pf-v6-c-card__body">This is a card</div>
291
- </div>
292
- <div class="pf-v6-c-card">
293
- <div class="pf-v6-c-card__body">This is a card</div>
294
- </div>
295
- <div class="pf-v6-c-card">
296
- <div class="pf-v6-c-card__body">This is a card</div>
297
- </div>
298
- <div class="pf-v6-c-card">
299
- <div class="pf-v6-c-card__body">This is a card</div>
300
- </div>
301
- <div class="pf-v6-c-card">
302
- <div class="pf-v6-c-card__body">This is a card</div>
303
- </div>
304
- <div class="pf-v6-c-card">
305
- <div class="pf-v6-c-card__body">This is a card</div>
306
- </div>
307
- <div class="pf-v6-c-card">
308
- <div class="pf-v6-c-card__body">This is a card</div>
309
- </div>
310
- <div class="pf-v6-c-card">
311
- <div class="pf-v6-c-card__body">This is a card</div>
312
- </div>
285
+ <div class="pf-v6-c-card">
286
+ <div class="pf-v6-c-card__body">This is a card</div>
287
+ </div>
288
+ <div class="pf-v6-c-card">
289
+ <div class="pf-v6-c-card__body">This is a card</div>
290
+ </div>
291
+ <div class="pf-v6-c-card">
292
+ <div class="pf-v6-c-card__body">This is a card</div>
293
+ </div>
294
+ <div class="pf-v6-c-card">
295
+ <div class="pf-v6-c-card__body">This is a card</div>
296
+ </div>
297
+ <div class="pf-v6-c-card">
298
+ <div class="pf-v6-c-card__body">This is a card</div>
299
+ </div>
300
+ <div class="pf-v6-c-card">
301
+ <div class="pf-v6-c-card__body">This is a card</div>
302
+ </div>
303
+ <div class="pf-v6-c-card">
304
+ <div class="pf-v6-c-card__body">This is a card</div>
305
+ </div>
306
+ <div class="pf-v6-c-card">
307
+ <div class="pf-v6-c-card__body">This is a card</div>
308
+ </div>
309
+ <div class="pf-v6-c-card">
310
+ <div class="pf-v6-c-card__body">This is a card</div>
313
311
  </div>
314
312
  </div>
315
- </section>
316
- </main>
317
- </div>
313
+ </div>
314
+ </section>
315
+ </main>
318
316
  </div>
319
317
  </div>
320
318
  <div class="pf-v6-c-drawer__panel pf-m-width-33" hidden>
@@ -865,100 +863,98 @@ section: components
865
863
  <div class="pf-v6-c-drawer pf-m-expanded">
866
864
  <div class="pf-v6-c-drawer__main">
867
865
  <div class="pf-v6-c-drawer__content">
868
- <div class="pf-v6-c-drawer__body">
869
- <div class="pf-v6-c-page__main-container" tabindex="-1">
870
- <main class="pf-v6-c-page__main" tabindex="-1">
871
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
872
- <div class="pf-v6-c-page__main-body">
873
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
874
- <ol class="pf-v6-c-breadcrumb__list" role="list">
875
- <li class="pf-v6-c-breadcrumb__item">
876
- <a
877
- href="#"
878
- class="pf-v6-c-breadcrumb__link"
879
- >Section home</a>
880
- </li>
881
- <li class="pf-v6-c-breadcrumb__item">
882
- <span class="pf-v6-c-breadcrumb__item-divider">
883
- <i class="fas fa-angle-right" aria-hidden="true"></i>
884
- </span>
866
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
867
+ <main class="pf-v6-c-page__main" tabindex="-1">
868
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
869
+ <div class="pf-v6-c-page__main-body">
870
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
871
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
872
+ <li class="pf-v6-c-breadcrumb__item">
873
+ <a
874
+ href="#"
875
+ class="pf-v6-c-breadcrumb__link"
876
+ >Section home</a>
877
+ </li>
878
+ <li class="pf-v6-c-breadcrumb__item">
879
+ <span class="pf-v6-c-breadcrumb__item-divider">
880
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
881
+ </span>
885
882
 
886
- <a
887
- href="#"
888
- class="pf-v6-c-breadcrumb__link"
889
- >Section title</a>
890
- </li>
891
- <li class="pf-v6-c-breadcrumb__item">
892
- <span class="pf-v6-c-breadcrumb__item-divider">
893
- <i class="fas fa-angle-right" aria-hidden="true"></i>
894
- </span>
883
+ <a
884
+ href="#"
885
+ class="pf-v6-c-breadcrumb__link"
886
+ >Section title</a>
887
+ </li>
888
+ <li class="pf-v6-c-breadcrumb__item">
889
+ <span class="pf-v6-c-breadcrumb__item-divider">
890
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
891
+ </span>
895
892
 
896
- <a
897
- href="#"
898
- class="pf-v6-c-breadcrumb__link"
899
- >Section title</a>
900
- </li>
901
- <li class="pf-v6-c-breadcrumb__item">
902
- <span class="pf-v6-c-breadcrumb__item-divider">
903
- <i class="fas fa-angle-right" aria-hidden="true"></i>
904
- </span>
893
+ <a
894
+ href="#"
895
+ class="pf-v6-c-breadcrumb__link"
896
+ >Section title</a>
897
+ </li>
898
+ <li class="pf-v6-c-breadcrumb__item">
899
+ <span class="pf-v6-c-breadcrumb__item-divider">
900
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
901
+ </span>
905
902
 
906
- <a
907
- href="#"
908
- class="pf-v6-c-breadcrumb__link pf-m-current"
909
- aria-current="page"
910
- >Section landing</a>
911
- </li>
912
- </ol>
913
- </nav>
903
+ <a
904
+ href="#"
905
+ class="pf-v6-c-breadcrumb__link pf-m-current"
906
+ aria-current="page"
907
+ >Section landing</a>
908
+ </li>
909
+ </ol>
910
+ </nav>
911
+ </div>
912
+ </section>
913
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
914
+ <div class="pf-v6-c-page__main-body">
915
+ <div class="pf-v6-c-content">
916
+ <h1>Main title</h1>
917
+ <p>This is a full page demo.</p>
914
918
  </div>
915
- </section>
916
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
917
- <div class="pf-v6-c-page__main-body">
918
- <div class="pf-v6-c-content">
919
- <h1>Main title</h1>
920
- <p>This is a full page demo.</p>
919
+ </div>
920
+ </section>
921
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
922
+ <div class="pf-v6-c-page__main-body">
923
+ <div class="pf-v6-l-gallery pf-m-gutter">
924
+ <div class="pf-v6-c-card">
925
+ <div class="pf-v6-c-card__body">This is a card</div>
921
926
  </div>
922
- </div>
923
- </section>
924
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
925
- <div class="pf-v6-c-page__main-body">
926
- <div class="pf-v6-l-gallery pf-m-gutter">
927
- <div class="pf-v6-c-card">
928
- <div class="pf-v6-c-card__body">This is a card</div>
929
- </div>
930
- <div class="pf-v6-c-card">
931
- <div class="pf-v6-c-card__body">This is a card</div>
932
- </div>
933
- <div class="pf-v6-c-card">
934
- <div class="pf-v6-c-card__body">This is a card</div>
935
- </div>
936
- <div class="pf-v6-c-card">
937
- <div class="pf-v6-c-card__body">This is a card</div>
938
- </div>
939
- <div class="pf-v6-c-card">
940
- <div class="pf-v6-c-card__body">This is a card</div>
941
- </div>
942
- <div class="pf-v6-c-card">
943
- <div class="pf-v6-c-card__body">This is a card</div>
944
- </div>
945
- <div class="pf-v6-c-card">
946
- <div class="pf-v6-c-card__body">This is a card</div>
947
- </div>
948
- <div class="pf-v6-c-card">
949
- <div class="pf-v6-c-card__body">This is a card</div>
950
- </div>
951
- <div class="pf-v6-c-card">
952
- <div class="pf-v6-c-card__body">This is a card</div>
953
- </div>
954
- <div class="pf-v6-c-card">
955
- <div class="pf-v6-c-card__body">This is a card</div>
956
- </div>
927
+ <div class="pf-v6-c-card">
928
+ <div class="pf-v6-c-card__body">This is a card</div>
929
+ </div>
930
+ <div class="pf-v6-c-card">
931
+ <div class="pf-v6-c-card__body">This is a card</div>
932
+ </div>
933
+ <div class="pf-v6-c-card">
934
+ <div class="pf-v6-c-card__body">This is a card</div>
935
+ </div>
936
+ <div class="pf-v6-c-card">
937
+ <div class="pf-v6-c-card__body">This is a card</div>
938
+ </div>
939
+ <div class="pf-v6-c-card">
940
+ <div class="pf-v6-c-card__body">This is a card</div>
941
+ </div>
942
+ <div class="pf-v6-c-card">
943
+ <div class="pf-v6-c-card__body">This is a card</div>
944
+ </div>
945
+ <div class="pf-v6-c-card">
946
+ <div class="pf-v6-c-card__body">This is a card</div>
947
+ </div>
948
+ <div class="pf-v6-c-card">
949
+ <div class="pf-v6-c-card__body">This is a card</div>
950
+ </div>
951
+ <div class="pf-v6-c-card">
952
+ <div class="pf-v6-c-card__body">This is a card</div>
957
953
  </div>
958
954
  </div>
959
- </section>
960
- </main>
961
- </div>
955
+ </div>
956
+ </section>
957
+ </main>
962
958
  </div>
963
959
  </div>
964
960
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -1509,100 +1505,98 @@ section: components
1509
1505
  <div class="pf-v6-c-drawer pf-m-expanded">
1510
1506
  <div class="pf-v6-c-drawer__main">
1511
1507
  <div class="pf-v6-c-drawer__content">
1512
- <div class="pf-v6-c-drawer__body">
1513
- <div class="pf-v6-c-page__main-container" tabindex="-1">
1514
- <main class="pf-v6-c-page__main" tabindex="-1">
1515
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1516
- <div class="pf-v6-c-page__main-body">
1517
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1518
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1519
- <li class="pf-v6-c-breadcrumb__item">
1520
- <a
1521
- href="#"
1522
- class="pf-v6-c-breadcrumb__link"
1523
- >Section home</a>
1524
- </li>
1525
- <li class="pf-v6-c-breadcrumb__item">
1526
- <span class="pf-v6-c-breadcrumb__item-divider">
1527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1528
- </span>
1508
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1509
+ <main class="pf-v6-c-page__main" tabindex="-1">
1510
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1511
+ <div class="pf-v6-c-page__main-body">
1512
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1513
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1514
+ <li class="pf-v6-c-breadcrumb__item">
1515
+ <a
1516
+ href="#"
1517
+ class="pf-v6-c-breadcrumb__link"
1518
+ >Section home</a>
1519
+ </li>
1520
+ <li class="pf-v6-c-breadcrumb__item">
1521
+ <span class="pf-v6-c-breadcrumb__item-divider">
1522
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1523
+ </span>
1529
1524
 
1530
- <a
1531
- href="#"
1532
- class="pf-v6-c-breadcrumb__link"
1533
- >Section title</a>
1534
- </li>
1535
- <li class="pf-v6-c-breadcrumb__item">
1536
- <span class="pf-v6-c-breadcrumb__item-divider">
1537
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1538
- </span>
1525
+ <a
1526
+ href="#"
1527
+ class="pf-v6-c-breadcrumb__link"
1528
+ >Section title</a>
1529
+ </li>
1530
+ <li class="pf-v6-c-breadcrumb__item">
1531
+ <span class="pf-v6-c-breadcrumb__item-divider">
1532
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1533
+ </span>
1539
1534
 
1540
- <a
1541
- href="#"
1542
- class="pf-v6-c-breadcrumb__link"
1543
- >Section title</a>
1544
- </li>
1545
- <li class="pf-v6-c-breadcrumb__item">
1546
- <span class="pf-v6-c-breadcrumb__item-divider">
1547
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1548
- </span>
1535
+ <a
1536
+ href="#"
1537
+ class="pf-v6-c-breadcrumb__link"
1538
+ >Section title</a>
1539
+ </li>
1540
+ <li class="pf-v6-c-breadcrumb__item">
1541
+ <span class="pf-v6-c-breadcrumb__item-divider">
1542
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1543
+ </span>
1549
1544
 
1550
- <a
1551
- href="#"
1552
- class="pf-v6-c-breadcrumb__link pf-m-current"
1553
- aria-current="page"
1554
- >Section landing</a>
1555
- </li>
1556
- </ol>
1557
- </nav>
1545
+ <a
1546
+ href="#"
1547
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1548
+ aria-current="page"
1549
+ >Section landing</a>
1550
+ </li>
1551
+ </ol>
1552
+ </nav>
1553
+ </div>
1554
+ </section>
1555
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1556
+ <div class="pf-v6-c-page__main-body">
1557
+ <div class="pf-v6-c-content">
1558
+ <h1>Main title</h1>
1559
+ <p>This is a full page demo.</p>
1558
1560
  </div>
1559
- </section>
1560
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1561
- <div class="pf-v6-c-page__main-body">
1562
- <div class="pf-v6-c-content">
1563
- <h1>Main title</h1>
1564
- <p>This is a full page demo.</p>
1561
+ </div>
1562
+ </section>
1563
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1564
+ <div class="pf-v6-c-page__main-body">
1565
+ <div class="pf-v6-l-gallery pf-m-gutter">
1566
+ <div class="pf-v6-c-card">
1567
+ <div class="pf-v6-c-card__body">This is a card</div>
1565
1568
  </div>
1566
- </div>
1567
- </section>
1568
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1569
- <div class="pf-v6-c-page__main-body">
1570
- <div class="pf-v6-l-gallery pf-m-gutter">
1571
- <div class="pf-v6-c-card">
1572
- <div class="pf-v6-c-card__body">This is a card</div>
1573
- </div>
1574
- <div class="pf-v6-c-card">
1575
- <div class="pf-v6-c-card__body">This is a card</div>
1576
- </div>
1577
- <div class="pf-v6-c-card">
1578
- <div class="pf-v6-c-card__body">This is a card</div>
1579
- </div>
1580
- <div class="pf-v6-c-card">
1581
- <div class="pf-v6-c-card__body">This is a card</div>
1582
- </div>
1583
- <div class="pf-v6-c-card">
1584
- <div class="pf-v6-c-card__body">This is a card</div>
1585
- </div>
1586
- <div class="pf-v6-c-card">
1587
- <div class="pf-v6-c-card__body">This is a card</div>
1588
- </div>
1589
- <div class="pf-v6-c-card">
1590
- <div class="pf-v6-c-card__body">This is a card</div>
1591
- </div>
1592
- <div class="pf-v6-c-card">
1593
- <div class="pf-v6-c-card__body">This is a card</div>
1594
- </div>
1595
- <div class="pf-v6-c-card">
1596
- <div class="pf-v6-c-card__body">This is a card</div>
1597
- </div>
1598
- <div class="pf-v6-c-card">
1599
- <div class="pf-v6-c-card__body">This is a card</div>
1600
- </div>
1569
+ <div class="pf-v6-c-card">
1570
+ <div class="pf-v6-c-card__body">This is a card</div>
1571
+ </div>
1572
+ <div class="pf-v6-c-card">
1573
+ <div class="pf-v6-c-card__body">This is a card</div>
1574
+ </div>
1575
+ <div class="pf-v6-c-card">
1576
+ <div class="pf-v6-c-card__body">This is a card</div>
1577
+ </div>
1578
+ <div class="pf-v6-c-card">
1579
+ <div class="pf-v6-c-card__body">This is a card</div>
1580
+ </div>
1581
+ <div class="pf-v6-c-card">
1582
+ <div class="pf-v6-c-card__body">This is a card</div>
1583
+ </div>
1584
+ <div class="pf-v6-c-card">
1585
+ <div class="pf-v6-c-card__body">This is a card</div>
1586
+ </div>
1587
+ <div class="pf-v6-c-card">
1588
+ <div class="pf-v6-c-card__body">This is a card</div>
1589
+ </div>
1590
+ <div class="pf-v6-c-card">
1591
+ <div class="pf-v6-c-card__body">This is a card</div>
1592
+ </div>
1593
+ <div class="pf-v6-c-card">
1594
+ <div class="pf-v6-c-card__body">This is a card</div>
1601
1595
  </div>
1602
1596
  </div>
1603
- </section>
1604
- </main>
1605
- </div>
1597
+ </div>
1598
+ </section>
1599
+ </main>
1606
1600
  </div>
1607
1601
  </div>
1608
1602
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -2156,100 +2150,98 @@ section: components
2156
2150
  <div class="pf-v6-c-drawer pf-m-expanded">
2157
2151
  <div class="pf-v6-c-drawer__main">
2158
2152
  <div class="pf-v6-c-drawer__content">
2159
- <div class="pf-v6-c-drawer__body">
2160
- <div class="pf-v6-c-page__main-container" tabindex="-1">
2161
- <main class="pf-v6-c-page__main" tabindex="-1">
2162
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2163
- <div class="pf-v6-c-page__main-body">
2164
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2165
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2166
- <li class="pf-v6-c-breadcrumb__item">
2167
- <a
2168
- href="#"
2169
- class="pf-v6-c-breadcrumb__link"
2170
- >Section home</a>
2171
- </li>
2172
- <li class="pf-v6-c-breadcrumb__item">
2173
- <span class="pf-v6-c-breadcrumb__item-divider">
2174
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2175
- </span>
2153
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2154
+ <main class="pf-v6-c-page__main" tabindex="-1">
2155
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2156
+ <div class="pf-v6-c-page__main-body">
2157
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2158
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2159
+ <li class="pf-v6-c-breadcrumb__item">
2160
+ <a
2161
+ href="#"
2162
+ class="pf-v6-c-breadcrumb__link"
2163
+ >Section home</a>
2164
+ </li>
2165
+ <li class="pf-v6-c-breadcrumb__item">
2166
+ <span class="pf-v6-c-breadcrumb__item-divider">
2167
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2168
+ </span>
2176
2169
 
2177
- <a
2178
- href="#"
2179
- class="pf-v6-c-breadcrumb__link"
2180
- >Section title</a>
2181
- </li>
2182
- <li class="pf-v6-c-breadcrumb__item">
2183
- <span class="pf-v6-c-breadcrumb__item-divider">
2184
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2185
- </span>
2170
+ <a
2171
+ href="#"
2172
+ class="pf-v6-c-breadcrumb__link"
2173
+ >Section title</a>
2174
+ </li>
2175
+ <li class="pf-v6-c-breadcrumb__item">
2176
+ <span class="pf-v6-c-breadcrumb__item-divider">
2177
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2178
+ </span>
2186
2179
 
2187
- <a
2188
- href="#"
2189
- class="pf-v6-c-breadcrumb__link"
2190
- >Section title</a>
2191
- </li>
2192
- <li class="pf-v6-c-breadcrumb__item">
2193
- <span class="pf-v6-c-breadcrumb__item-divider">
2194
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2195
- </span>
2180
+ <a
2181
+ href="#"
2182
+ class="pf-v6-c-breadcrumb__link"
2183
+ >Section title</a>
2184
+ </li>
2185
+ <li class="pf-v6-c-breadcrumb__item">
2186
+ <span class="pf-v6-c-breadcrumb__item-divider">
2187
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2188
+ </span>
2196
2189
 
2197
- <a
2198
- href="#"
2199
- class="pf-v6-c-breadcrumb__link pf-m-current"
2200
- aria-current="page"
2201
- >Section landing</a>
2202
- </li>
2203
- </ol>
2204
- </nav>
2190
+ <a
2191
+ href="#"
2192
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2193
+ aria-current="page"
2194
+ >Section landing</a>
2195
+ </li>
2196
+ </ol>
2197
+ </nav>
2198
+ </div>
2199
+ </section>
2200
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2201
+ <div class="pf-v6-c-page__main-body">
2202
+ <div class="pf-v6-c-content">
2203
+ <h1>Main title</h1>
2204
+ <p>This is a full page demo.</p>
2205
2205
  </div>
2206
- </section>
2207
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2208
- <div class="pf-v6-c-page__main-body">
2209
- <div class="pf-v6-c-content">
2210
- <h1>Main title</h1>
2211
- <p>This is a full page demo.</p>
2206
+ </div>
2207
+ </section>
2208
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2209
+ <div class="pf-v6-c-page__main-body">
2210
+ <div class="pf-v6-l-gallery pf-m-gutter">
2211
+ <div class="pf-v6-c-card">
2212
+ <div class="pf-v6-c-card__body">This is a card</div>
2212
2213
  </div>
2213
- </div>
2214
- </section>
2215
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2216
- <div class="pf-v6-c-page__main-body">
2217
- <div class="pf-v6-l-gallery pf-m-gutter">
2218
- <div class="pf-v6-c-card">
2219
- <div class="pf-v6-c-card__body">This is a card</div>
2220
- </div>
2221
- <div class="pf-v6-c-card">
2222
- <div class="pf-v6-c-card__body">This is a card</div>
2223
- </div>
2224
- <div class="pf-v6-c-card">
2225
- <div class="pf-v6-c-card__body">This is a card</div>
2226
- </div>
2227
- <div class="pf-v6-c-card">
2228
- <div class="pf-v6-c-card__body">This is a card</div>
2229
- </div>
2230
- <div class="pf-v6-c-card">
2231
- <div class="pf-v6-c-card__body">This is a card</div>
2232
- </div>
2233
- <div class="pf-v6-c-card">
2234
- <div class="pf-v6-c-card__body">This is a card</div>
2235
- </div>
2236
- <div class="pf-v6-c-card">
2237
- <div class="pf-v6-c-card__body">This is a card</div>
2238
- </div>
2239
- <div class="pf-v6-c-card">
2240
- <div class="pf-v6-c-card__body">This is a card</div>
2241
- </div>
2242
- <div class="pf-v6-c-card">
2243
- <div class="pf-v6-c-card__body">This is a card</div>
2244
- </div>
2245
- <div class="pf-v6-c-card">
2246
- <div class="pf-v6-c-card__body">This is a card</div>
2247
- </div>
2214
+ <div class="pf-v6-c-card">
2215
+ <div class="pf-v6-c-card__body">This is a card</div>
2216
+ </div>
2217
+ <div class="pf-v6-c-card">
2218
+ <div class="pf-v6-c-card__body">This is a card</div>
2219
+ </div>
2220
+ <div class="pf-v6-c-card">
2221
+ <div class="pf-v6-c-card__body">This is a card</div>
2222
+ </div>
2223
+ <div class="pf-v6-c-card">
2224
+ <div class="pf-v6-c-card__body">This is a card</div>
2225
+ </div>
2226
+ <div class="pf-v6-c-card">
2227
+ <div class="pf-v6-c-card__body">This is a card</div>
2228
+ </div>
2229
+ <div class="pf-v6-c-card">
2230
+ <div class="pf-v6-c-card__body">This is a card</div>
2231
+ </div>
2232
+ <div class="pf-v6-c-card">
2233
+ <div class="pf-v6-c-card__body">This is a card</div>
2234
+ </div>
2235
+ <div class="pf-v6-c-card">
2236
+ <div class="pf-v6-c-card__body">This is a card</div>
2237
+ </div>
2238
+ <div class="pf-v6-c-card">
2239
+ <div class="pf-v6-c-card__body">This is a card</div>
2248
2240
  </div>
2249
2241
  </div>
2250
- </section>
2251
- </main>
2252
- </div>
2242
+ </div>
2243
+ </section>
2244
+ </main>
2253
2245
  </div>
2254
2246
  </div>
2255
2247
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -2798,100 +2790,98 @@ section: components
2798
2790
  <div class="pf-v6-c-drawer pf-m-expanded">
2799
2791
  <div class="pf-v6-c-drawer__main">
2800
2792
  <div class="pf-v6-c-drawer__content">
2801
- <div class="pf-v6-c-drawer__body">
2802
- <div class="pf-v6-c-page__main-container" tabindex="-1">
2803
- <main class="pf-v6-c-page__main" tabindex="-1">
2804
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2805
- <div class="pf-v6-c-page__main-body">
2806
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2807
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2808
- <li class="pf-v6-c-breadcrumb__item">
2809
- <a
2810
- href="#"
2811
- class="pf-v6-c-breadcrumb__link"
2812
- >Section home</a>
2813
- </li>
2814
- <li class="pf-v6-c-breadcrumb__item">
2815
- <span class="pf-v6-c-breadcrumb__item-divider">
2816
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2817
- </span>
2793
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2794
+ <main class="pf-v6-c-page__main" tabindex="-1">
2795
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2796
+ <div class="pf-v6-c-page__main-body">
2797
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2798
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2799
+ <li class="pf-v6-c-breadcrumb__item">
2800
+ <a
2801
+ href="#"
2802
+ class="pf-v6-c-breadcrumb__link"
2803
+ >Section home</a>
2804
+ </li>
2805
+ <li class="pf-v6-c-breadcrumb__item">
2806
+ <span class="pf-v6-c-breadcrumb__item-divider">
2807
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2808
+ </span>
2818
2809
 
2819
- <a
2820
- href="#"
2821
- class="pf-v6-c-breadcrumb__link"
2822
- >Section title</a>
2823
- </li>
2824
- <li class="pf-v6-c-breadcrumb__item">
2825
- <span class="pf-v6-c-breadcrumb__item-divider">
2826
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2827
- </span>
2810
+ <a
2811
+ href="#"
2812
+ class="pf-v6-c-breadcrumb__link"
2813
+ >Section title</a>
2814
+ </li>
2815
+ <li class="pf-v6-c-breadcrumb__item">
2816
+ <span class="pf-v6-c-breadcrumb__item-divider">
2817
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2818
+ </span>
2828
2819
 
2829
- <a
2830
- href="#"
2831
- class="pf-v6-c-breadcrumb__link"
2832
- >Section title</a>
2833
- </li>
2834
- <li class="pf-v6-c-breadcrumb__item">
2835
- <span class="pf-v6-c-breadcrumb__item-divider">
2836
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2837
- </span>
2820
+ <a
2821
+ href="#"
2822
+ class="pf-v6-c-breadcrumb__link"
2823
+ >Section title</a>
2824
+ </li>
2825
+ <li class="pf-v6-c-breadcrumb__item">
2826
+ <span class="pf-v6-c-breadcrumb__item-divider">
2827
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2828
+ </span>
2838
2829
 
2839
- <a
2840
- href="#"
2841
- class="pf-v6-c-breadcrumb__link pf-m-current"
2842
- aria-current="page"
2843
- >Section landing</a>
2844
- </li>
2845
- </ol>
2846
- </nav>
2830
+ <a
2831
+ href="#"
2832
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2833
+ aria-current="page"
2834
+ >Section landing</a>
2835
+ </li>
2836
+ </ol>
2837
+ </nav>
2838
+ </div>
2839
+ </section>
2840
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2841
+ <div class="pf-v6-c-page__main-body">
2842
+ <div class="pf-v6-c-content">
2843
+ <h1>Main title</h1>
2844
+ <p>This is a full page demo.</p>
2847
2845
  </div>
2848
- </section>
2849
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2850
- <div class="pf-v6-c-page__main-body">
2851
- <div class="pf-v6-c-content">
2852
- <h1>Main title</h1>
2853
- <p>This is a full page demo.</p>
2846
+ </div>
2847
+ </section>
2848
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2849
+ <div class="pf-v6-c-page__main-body">
2850
+ <div class="pf-v6-l-gallery pf-m-gutter">
2851
+ <div class="pf-v6-c-card">
2852
+ <div class="pf-v6-c-card__body">This is a card</div>
2854
2853
  </div>
2855
- </div>
2856
- </section>
2857
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2858
- <div class="pf-v6-c-page__main-body">
2859
- <div class="pf-v6-l-gallery pf-m-gutter">
2860
- <div class="pf-v6-c-card">
2861
- <div class="pf-v6-c-card__body">This is a card</div>
2862
- </div>
2863
- <div class="pf-v6-c-card">
2864
- <div class="pf-v6-c-card__body">This is a card</div>
2865
- </div>
2866
- <div class="pf-v6-c-card">
2867
- <div class="pf-v6-c-card__body">This is a card</div>
2868
- </div>
2869
- <div class="pf-v6-c-card">
2870
- <div class="pf-v6-c-card__body">This is a card</div>
2871
- </div>
2872
- <div class="pf-v6-c-card">
2873
- <div class="pf-v6-c-card__body">This is a card</div>
2874
- </div>
2875
- <div class="pf-v6-c-card">
2876
- <div class="pf-v6-c-card__body">This is a card</div>
2877
- </div>
2878
- <div class="pf-v6-c-card">
2879
- <div class="pf-v6-c-card__body">This is a card</div>
2880
- </div>
2881
- <div class="pf-v6-c-card">
2882
- <div class="pf-v6-c-card__body">This is a card</div>
2883
- </div>
2884
- <div class="pf-v6-c-card">
2885
- <div class="pf-v6-c-card__body">This is a card</div>
2886
- </div>
2887
- <div class="pf-v6-c-card">
2888
- <div class="pf-v6-c-card__body">This is a card</div>
2889
- </div>
2854
+ <div class="pf-v6-c-card">
2855
+ <div class="pf-v6-c-card__body">This is a card</div>
2856
+ </div>
2857
+ <div class="pf-v6-c-card">
2858
+ <div class="pf-v6-c-card__body">This is a card</div>
2859
+ </div>
2860
+ <div class="pf-v6-c-card">
2861
+ <div class="pf-v6-c-card__body">This is a card</div>
2862
+ </div>
2863
+ <div class="pf-v6-c-card">
2864
+ <div class="pf-v6-c-card__body">This is a card</div>
2865
+ </div>
2866
+ <div class="pf-v6-c-card">
2867
+ <div class="pf-v6-c-card__body">This is a card</div>
2868
+ </div>
2869
+ <div class="pf-v6-c-card">
2870
+ <div class="pf-v6-c-card__body">This is a card</div>
2871
+ </div>
2872
+ <div class="pf-v6-c-card">
2873
+ <div class="pf-v6-c-card__body">This is a card</div>
2874
+ </div>
2875
+ <div class="pf-v6-c-card">
2876
+ <div class="pf-v6-c-card__body">This is a card</div>
2877
+ </div>
2878
+ <div class="pf-v6-c-card">
2879
+ <div class="pf-v6-c-card__body">This is a card</div>
2890
2880
  </div>
2891
2881
  </div>
2892
- </section>
2893
- </main>
2894
- </div>
2882
+ </div>
2883
+ </section>
2884
+ </main>
2895
2885
  </div>
2896
2886
  </div>
2897
2887
  <div class="pf-v6-c-drawer__panel pf-m-width-33">