@patternfly/patternfly 4.176.0 → 4.177.0

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 (63) hide show
  1. package/UPGRADE-GUIDE.md +3 -0
  2. package/components/Avatar/avatar.css +224 -0
  3. package/components/Avatar/avatar.scss +18 -0
  4. package/components/CodeEditor/code-editor.css +8 -0
  5. package/components/CodeEditor/code-editor.scss +11 -1
  6. package/components/Dropdown/dropdown.css +10 -9
  7. package/components/Dropdown/dropdown.scss +17 -16
  8. package/components/Label/label.css +43 -12
  9. package/components/Label/label.scss +45 -13
  10. package/components/Nav/nav.css +11 -0
  11. package/components/Nav/nav.scss +14 -0
  12. package/docs/components/Avatar/examples/Avatar.md +53 -5
  13. package/docs/components/Brand/examples/Brand.md +6 -6
  14. package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
  15. package/docs/components/DataList/examples/DataList.md +11 -11
  16. package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
  17. package/docs/components/Divider/examples/Divider.md +2 -2
  18. package/docs/components/Drawer/examples/Drawer.md +27 -27
  19. package/docs/components/Dropdown/examples/Dropdown.md +2 -2
  20. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  21. package/docs/components/Label/examples/Label.md +33 -67
  22. package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
  23. package/docs/components/LogViewer/examples/LogViewer.md +28 -28
  24. package/docs/components/Masthead/examples/masthead.md +10 -10
  25. package/docs/components/Menu/examples/Menu.md +45 -44
  26. package/docs/components/Nav/examples/Navigation.md +23 -44
  27. package/docs/components/Page/examples/Page.md +4 -4
  28. package/docs/components/Pagination/examples/Pagination.md +2 -2
  29. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  30. package/docs/components/Table/examples/Table.md +8 -8
  31. package/docs/components/Tabs/examples/Tabs.md +27 -27
  32. package/docs/components/Toolbar/examples/Toolbar.md +31 -31
  33. package/docs/demos/Alert/examples/Alert.md +1 -2
  34. package/docs/demos/BackToTop/examples/BackToTop.md +1 -202
  35. package/docs/demos/Card/examples/Card.md +42 -36
  36. package/docs/demos/ContextSelector/examples/ContextSelector.md +1166 -17
  37. package/docs/demos/Drawer/examples/Drawer.md +3 -3
  38. package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -8
  39. package/docs/demos/Masthead/examples/Masthead.md +14 -6
  40. package/docs/demos/Nav/examples/Nav.md +8 -9
  41. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  42. package/docs/demos/Page/examples/Page.md +4004 -989
  43. package/docs/demos/Table/examples/Table.md +15623 -12413
  44. package/docs/demos/Tabs/examples/Tabs.md +0 -96
  45. package/docs/demos/Toolbar/examples/Toolbar.md +1 -2
  46. package/docs/demos/Wizard/examples/Wizard.md +2 -2
  47. package/docs/layouts/Flex/examples/Flex.md +1 -1
  48. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  49. package/docs/layouts/Grid/examples/Grid.md +9 -9
  50. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  51. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  52. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  53. package/docs/utilities/Display/examples/Display.md +1 -1
  54. package/docs/utilities/Flex/examples/Flex.md +1 -1
  55. package/docs/utilities/Float/examples/Float.md +1 -1
  56. package/docs/utilities/Sizing/examples/Sizing.md +12 -0
  57. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  58. package/docs/utilities/Text/examples/Text.md +1 -1
  59. package/package.json +1 -1
  60. package/patternfly-no-reset.css +296 -21
  61. package/patternfly.css +296 -21
  62. package/patternfly.min.css +1 -1
  63. package/patternfly.min.css.map +1 -1
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -26,18 +26,18 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
26
26
 
27
27
  ### Modifiers
28
28
 
29
- | Class | Applied to | Outcome |
30
- | ------------------------------------- | ------------------- | ---------------------------------------------------------------- |
31
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional breakpoint. |
32
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional breakpoint. |
33
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional breakpoint. |
34
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint. |
29
+ | Class | Applied to | Outcome |
30
+ | ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
35
35
 
36
36
  ### Special notes
37
37
 
38
38
  Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-c-select`, `.pf-c-options-menu`). Rather, `.pf-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
39
39
 
40
- **Available breakpoints are: `-on-sm, -on-md, -on-lg, -on-xl, -on-2xl`.**
40
+ **Available [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
41
41
 
42
42
  ## Examples
43
43
 
@@ -167,9 +167,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
167
167
  | Class | Applied to | Outcome |
168
168
  | ----------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
169
169
  | `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
170
- | `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing. |
171
- | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing. |
172
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding. |
170
+ | `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
171
+ | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
172
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
173
173
 
174
174
  ### Width control
175
175
 
@@ -195,10 +195,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
195
195
 
196
196
  ### Width control usage
197
197
 
198
- | Class | Applied to | Outcome |
199
- | ----------------------------------------------------------- | --------------------- | ----------------------------------------------- |
200
- | `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item. |
201
- | `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item. |
198
+ | Class | Applied to | Outcome |
199
+ | ----------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
200
+ | `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
201
+ | `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
202
202
 
203
203
  ### Group types
204
204
 
@@ -1041,11 +1041,11 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1041
1041
 
1042
1042
  ### Usage
1043
1043
 
1044
- | Class | Applied to | Outcome |
1045
- | ------------------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
1046
- | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at breakpoint. This selector must be applied consistently to toggle group and expandable content. |
1047
- | `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
1048
- | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
1044
+ | Class | Applied to | Outcome |
1045
+ | ------------------------------ | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1046
+ | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
1047
+ | `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
1048
+ | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
1049
1049
 
1050
1050
  ### Selected
1051
1051
 
@@ -4094,10 +4094,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
4094
4094
  | `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
4095
4095
  | `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
4096
4096
  | `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
4097
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional breakpoint. |
4098
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional breakpoint. |
4099
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional breakpoint. |
4100
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint. |
4097
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4098
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4099
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4100
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4101
4101
  | `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
4102
4102
  | `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
4103
4103
  | `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
@@ -4119,14 +4119,14 @@ As the toolbar component is a hybrid layout and component, some of its elements
4119
4119
 
4120
4120
  ### Toggle group usage
4121
4121
 
4122
- | Class | Applied to | Outcome |
4123
- | ------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4124
- | `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
4125
- | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at breakpoint. This selector must be applied consistently to toggle group and expandable content. |
4122
+ | Class | Applied to | Outcome |
4123
+ | ------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4124
+ | `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
4125
+ | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
4126
4126
 
4127
4127
  ### Spacer system
4128
4128
 
4129
- | Class | Applied to | Outcome |
4130
- | ------------------------------------------------------------ | --------------------------------------------- | --------------------------------------- |
4131
- | `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing. |
4132
- | `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing. |
4129
+ | Class | Applied to | Outcome |
4130
+ | ------------------------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
4131
+ | `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4132
+ | `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -33,7 +33,6 @@ section: components
33
33
  />
34
34
  </a>
35
35
  </div>
36
-
37
36
  <div class="pf-c-page__header-tools">
38
37
  <div class="pf-c-page__header-tools-group">
39
38
  <div
@@ -236,7 +235,7 @@ section: components
236
235
  <div class="pf-c-page__main-body">
237
236
  <div class="pf-c-content">
238
237
  <h1>Main title</h1>
239
- <p>This is a demo of the page component.</p>
238
+ <p>This is a full page demo.</p>
240
239
  </div>
241
240
  </div>
242
241
  </section>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -34,7 +34,6 @@ cssPrefix: pf-d-back-to-top
34
34
  />
35
35
  </a>
36
36
  </div>
37
-
38
37
  <div class="pf-c-page__header-tools">
39
38
  <div class="pf-c-page__header-tools-group">
40
39
  <div
@@ -237,7 +236,7 @@ cssPrefix: pf-d-back-to-top
237
236
  <div class="pf-c-page__main-body">
238
237
  <div class="pf-c-content">
239
238
  <h1>Main title</h1>
240
- <p>This is a demo of the page component.</p>
239
+ <p>This is a full page demo.</p>
241
240
  </div>
242
241
  </div>
243
242
  </section>
@@ -294,206 +293,6 @@ cssPrefix: pf-d-back-to-top
294
293
  <div class="pf-c-card__body">This is a card</div>
295
294
  </div>
296
295
  </div>
297
- <div class="pf-l-gallery__item">
298
- <div class="pf-c-card">
299
- <div class="pf-c-card__body">This is a card</div>
300
- </div>
301
- </div>
302
- <div class="pf-l-gallery__item">
303
- <div class="pf-c-card">
304
- <div class="pf-c-card__body">This is a card</div>
305
- </div>
306
- </div>
307
- <div class="pf-l-gallery__item">
308
- <div class="pf-c-card">
309
- <div class="pf-c-card__body">This is a card</div>
310
- </div>
311
- </div>
312
- <div class="pf-l-gallery__item">
313
- <div class="pf-c-card">
314
- <div class="pf-c-card__body">This is a card</div>
315
- </div>
316
- </div>
317
- <div class="pf-l-gallery__item">
318
- <div class="pf-c-card">
319
- <div class="pf-c-card__body">This is a card</div>
320
- </div>
321
- </div>
322
- <div class="pf-l-gallery__item">
323
- <div class="pf-c-card">
324
- <div class="pf-c-card__body">This is a card</div>
325
- </div>
326
- </div>
327
- <div class="pf-l-gallery__item">
328
- <div class="pf-c-card">
329
- <div class="pf-c-card__body">This is a card</div>
330
- </div>
331
- </div>
332
- <div class="pf-l-gallery__item">
333
- <div class="pf-c-card">
334
- <div class="pf-c-card__body">This is a card</div>
335
- </div>
336
- </div>
337
- <div class="pf-l-gallery__item">
338
- <div class="pf-c-card">
339
- <div class="pf-c-card__body">This is a card</div>
340
- </div>
341
- </div>
342
- <div class="pf-l-gallery__item">
343
- <div class="pf-c-card">
344
- <div class="pf-c-card__body">This is a card</div>
345
- </div>
346
- </div>
347
- <div class="pf-l-gallery__item">
348
- <div class="pf-c-card">
349
- <div class="pf-c-card__body">This is a card</div>
350
- </div>
351
- </div>
352
- <div class="pf-l-gallery__item">
353
- <div class="pf-c-card">
354
- <div class="pf-c-card__body">This is a card</div>
355
- </div>
356
- </div>
357
- <div class="pf-l-gallery__item">
358
- <div class="pf-c-card">
359
- <div class="pf-c-card__body">This is a card</div>
360
- </div>
361
- </div>
362
- <div class="pf-l-gallery__item">
363
- <div class="pf-c-card">
364
- <div class="pf-c-card__body">This is a card</div>
365
- </div>
366
- </div>
367
- <div class="pf-l-gallery__item">
368
- <div class="pf-c-card">
369
- <div class="pf-c-card__body">This is a card</div>
370
- </div>
371
- </div>
372
- <div class="pf-l-gallery__item">
373
- <div class="pf-c-card">
374
- <div class="pf-c-card__body">This is a card</div>
375
- </div>
376
- </div>
377
- <div class="pf-l-gallery__item">
378
- <div class="pf-c-card">
379
- <div class="pf-c-card__body">This is a card</div>
380
- </div>
381
- </div>
382
- <div class="pf-l-gallery__item">
383
- <div class="pf-c-card">
384
- <div class="pf-c-card__body">This is a card</div>
385
- </div>
386
- </div>
387
- <div class="pf-l-gallery__item">
388
- <div class="pf-c-card">
389
- <div class="pf-c-card__body">This is a card</div>
390
- </div>
391
- </div>
392
- <div class="pf-l-gallery__item">
393
- <div class="pf-c-card">
394
- <div class="pf-c-card__body">This is a card</div>
395
- </div>
396
- </div>
397
- <div class="pf-l-gallery__item">
398
- <div class="pf-c-card">
399
- <div class="pf-c-card__body">This is a card</div>
400
- </div>
401
- </div>
402
- <div class="pf-l-gallery__item">
403
- <div class="pf-c-card">
404
- <div class="pf-c-card__body">This is a card</div>
405
- </div>
406
- </div>
407
- <div class="pf-l-gallery__item">
408
- <div class="pf-c-card">
409
- <div class="pf-c-card__body">This is a card</div>
410
- </div>
411
- </div>
412
- <div class="pf-l-gallery__item">
413
- <div class="pf-c-card">
414
- <div class="pf-c-card__body">This is a card</div>
415
- </div>
416
- </div>
417
- <div class="pf-l-gallery__item">
418
- <div class="pf-c-card">
419
- <div class="pf-c-card__body">This is a card</div>
420
- </div>
421
- </div>
422
- <div class="pf-l-gallery__item">
423
- <div class="pf-c-card">
424
- <div class="pf-c-card__body">This is a card</div>
425
- </div>
426
- </div>
427
- <div class="pf-l-gallery__item">
428
- <div class="pf-c-card">
429
- <div class="pf-c-card__body">This is a card</div>
430
- </div>
431
- </div>
432
- <div class="pf-l-gallery__item">
433
- <div class="pf-c-card">
434
- <div class="pf-c-card__body">This is a card</div>
435
- </div>
436
- </div>
437
- <div class="pf-l-gallery__item">
438
- <div class="pf-c-card">
439
- <div class="pf-c-card__body">This is a card</div>
440
- </div>
441
- </div>
442
- <div class="pf-l-gallery__item">
443
- <div class="pf-c-card">
444
- <div class="pf-c-card__body">This is a card</div>
445
- </div>
446
- </div>
447
- <div class="pf-l-gallery__item">
448
- <div class="pf-c-card">
449
- <div class="pf-c-card__body">This is a card</div>
450
- </div>
451
- </div>
452
- <div class="pf-l-gallery__item">
453
- <div class="pf-c-card">
454
- <div class="pf-c-card__body">This is a card</div>
455
- </div>
456
- </div>
457
- <div class="pf-l-gallery__item">
458
- <div class="pf-c-card">
459
- <div class="pf-c-card__body">This is a card</div>
460
- </div>
461
- </div>
462
- <div class="pf-l-gallery__item">
463
- <div class="pf-c-card">
464
- <div class="pf-c-card__body">This is a card</div>
465
- </div>
466
- </div>
467
- <div class="pf-l-gallery__item">
468
- <div class="pf-c-card">
469
- <div class="pf-c-card__body">This is a card</div>
470
- </div>
471
- </div>
472
- <div class="pf-l-gallery__item">
473
- <div class="pf-c-card">
474
- <div class="pf-c-card__body">This is a card</div>
475
- </div>
476
- </div>
477
- <div class="pf-l-gallery__item">
478
- <div class="pf-c-card">
479
- <div class="pf-c-card__body">This is a card</div>
480
- </div>
481
- </div>
482
- <div class="pf-l-gallery__item">
483
- <div class="pf-c-card">
484
- <div class="pf-c-card__body">This is a card</div>
485
- </div>
486
- </div>
487
- <div class="pf-l-gallery__item">
488
- <div class="pf-c-card">
489
- <div class="pf-c-card__body">This is a card</div>
490
- </div>
491
- </div>
492
- <div class="pf-l-gallery__item">
493
- <div class="pf-c-card">
494
- <div class="pf-c-card__body">This is a card</div>
495
- </div>
496
- </div>
497
296
  </div>
498
297
  </div>
499
298
  </section>