@patternfly/patternfly 4.180.0 → 4.182.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 (33) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/FormControl/form-control.css +26 -0
  3. package/components/FormControl/form-control.scss +30 -1
  4. package/components/Masthead/masthead.css +21 -27
  5. package/components/Masthead/masthead.scss +21 -27
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +141 -7
  9. package/components/MenuToggle/menu-toggle.scss +208 -8
  10. package/docs/components/FormControl/examples/FormControl.md +151 -0
  11. package/docs/components/Menu/examples/Menu.md +67 -2
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
  13. package/docs/components/Page/examples/Page.md +11 -2
  14. package/docs/components/Table/examples/Table.md +8 -0
  15. package/docs/components/Wizard/examples/Wizard.md +6 -6
  16. package/docs/demos/Alert/examples/Alert.md +20 -40
  17. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +86 -166
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  20. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -284
  23. package/docs/demos/Nav/examples/Nav.md +203 -343
  24. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  25. package/docs/demos/Page/examples/Page.md +589 -1137
  26. package/docs/demos/Table/examples/Table.md +26 -26
  27. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  28. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +198 -34
  31. package/patternfly.css +198 -34
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -242,55 +242,35 @@ section: components
242
242
  <section class="pf-c-page__main-section pf-m-limit-width">
243
243
  <div class="pf-c-page__main-body">
244
244
  <div class="pf-l-gallery pf-m-gutter">
245
- <div class="pf-l-gallery__item">
246
- <div class="pf-c-card">
247
- <div class="pf-c-card__body">This is a card</div>
248
- </div>
249
- </div>
250
- <div class="pf-l-gallery__item">
251
- <div class="pf-c-card">
252
- <div class="pf-c-card__body">This is a card</div>
253
- </div>
254
- </div>
255
- <div class="pf-l-gallery__item">
256
- <div class="pf-c-card">
257
- <div class="pf-c-card__body">This is a card</div>
258
- </div>
259
- </div>
260
- <div class="pf-l-gallery__item">
261
- <div class="pf-c-card">
262
- <div class="pf-c-card__body">This is a card</div>
263
- </div>
264
- </div>
265
- <div class="pf-l-gallery__item">
266
- <div class="pf-c-card">
267
- <div class="pf-c-card__body">This is a card</div>
268
- </div>
269
- </div>
270
- <div class="pf-l-gallery__item">
271
- <div class="pf-c-card">
272
- <div class="pf-c-card__body">This is a card</div>
273
- </div>
274
- </div>
275
- <div class="pf-l-gallery__item">
276
- <div class="pf-c-card">
277
- <div class="pf-c-card__body">This is a card</div>
278
- </div>
279
- </div>
280
- <div class="pf-l-gallery__item">
281
- <div class="pf-c-card">
282
- <div class="pf-c-card__body">This is a card</div>
283
- </div>
284
- </div>
285
- <div class="pf-l-gallery__item">
286
- <div class="pf-c-card">
287
- <div class="pf-c-card__body">This is a card</div>
288
- </div>
289
- </div>
290
- <div class="pf-l-gallery__item">
291
- <div class="pf-c-card">
292
- <div class="pf-c-card__body">This is a card</div>
293
- </div>
245
+ <div class="pf-c-card">
246
+ <div class="pf-c-card__body">This is a card</div>
247
+ </div>
248
+ <div class="pf-c-card">
249
+ <div class="pf-c-card__body">This is a card</div>
250
+ </div>
251
+ <div class="pf-c-card">
252
+ <div class="pf-c-card__body">This is a card</div>
253
+ </div>
254
+ <div class="pf-c-card">
255
+ <div class="pf-c-card__body">This is a card</div>
256
+ </div>
257
+ <div class="pf-c-card">
258
+ <div class="pf-c-card__body">This is a card</div>
259
+ </div>
260
+ <div class="pf-c-card">
261
+ <div class="pf-c-card__body">This is a card</div>
262
+ </div>
263
+ <div class="pf-c-card">
264
+ <div class="pf-c-card__body">This is a card</div>
265
+ </div>
266
+ <div class="pf-c-card">
267
+ <div class="pf-c-card__body">This is a card</div>
268
+ </div>
269
+ <div class="pf-c-card">
270
+ <div class="pf-c-card__body">This is a card</div>
271
+ </div>
272
+ <div class="pf-c-card">
273
+ <div class="pf-c-card__body">This is a card</div>
294
274
  </div>
295
275
  </div>
296
276
  </div>
@@ -622,55 +602,35 @@ section: components
622
602
  <section class="pf-c-page__main-section pf-m-limit-width">
623
603
  <div class="pf-c-page__main-body">
624
604
  <div class="pf-l-gallery pf-m-gutter">
625
- <div class="pf-l-gallery__item">
626
- <div class="pf-c-card">
627
- <div class="pf-c-card__body">This is a card</div>
628
- </div>
629
- </div>
630
- <div class="pf-l-gallery__item">
631
- <div class="pf-c-card">
632
- <div class="pf-c-card__body">This is a card</div>
633
- </div>
634
- </div>
635
- <div class="pf-l-gallery__item">
636
- <div class="pf-c-card">
637
- <div class="pf-c-card__body">This is a card</div>
638
- </div>
639
- </div>
640
- <div class="pf-l-gallery__item">
641
- <div class="pf-c-card">
642
- <div class="pf-c-card__body">This is a card</div>
643
- </div>
644
- </div>
645
- <div class="pf-l-gallery__item">
646
- <div class="pf-c-card">
647
- <div class="pf-c-card__body">This is a card</div>
648
- </div>
649
- </div>
650
- <div class="pf-l-gallery__item">
651
- <div class="pf-c-card">
652
- <div class="pf-c-card__body">This is a card</div>
653
- </div>
654
- </div>
655
- <div class="pf-l-gallery__item">
656
- <div class="pf-c-card">
657
- <div class="pf-c-card__body">This is a card</div>
658
- </div>
659
- </div>
660
- <div class="pf-l-gallery__item">
661
- <div class="pf-c-card">
662
- <div class="pf-c-card__body">This is a card</div>
663
- </div>
664
- </div>
665
- <div class="pf-l-gallery__item">
666
- <div class="pf-c-card">
667
- <div class="pf-c-card__body">This is a card</div>
668
- </div>
669
- </div>
670
- <div class="pf-l-gallery__item">
671
- <div class="pf-c-card">
672
- <div class="pf-c-card__body">This is a card</div>
673
- </div>
605
+ <div class="pf-c-card">
606
+ <div class="pf-c-card__body">This is a card</div>
607
+ </div>
608
+ <div class="pf-c-card">
609
+ <div class="pf-c-card__body">This is a card</div>
610
+ </div>
611
+ <div class="pf-c-card">
612
+ <div class="pf-c-card__body">This is a card</div>
613
+ </div>
614
+ <div class="pf-c-card">
615
+ <div class="pf-c-card__body">This is a card</div>
616
+ </div>
617
+ <div class="pf-c-card">
618
+ <div class="pf-c-card__body">This is a card</div>
619
+ </div>
620
+ <div class="pf-c-card">
621
+ <div class="pf-c-card__body">This is a card</div>
622
+ </div>
623
+ <div class="pf-c-card">
624
+ <div class="pf-c-card__body">This is a card</div>
625
+ </div>
626
+ <div class="pf-c-card">
627
+ <div class="pf-c-card__body">This is a card</div>
628
+ </div>
629
+ <div class="pf-c-card">
630
+ <div class="pf-c-card__body">This is a card</div>
631
+ </div>
632
+ <div class="pf-c-card">
633
+ <div class="pf-c-card__body">This is a card</div>
674
634
  </div>
675
635
  </div>
676
636
  </div>
@@ -915,55 +875,35 @@ section: components
915
875
  <section class="pf-c-page__main-section pf-m-limit-width">
916
876
  <div class="pf-c-page__main-body">
917
877
  <div class="pf-l-gallery pf-m-gutter">
918
- <div class="pf-l-gallery__item">
919
- <div class="pf-c-card">
920
- <div class="pf-c-card__body">This is a card</div>
921
- </div>
922
- </div>
923
- <div class="pf-l-gallery__item">
924
- <div class="pf-c-card">
925
- <div class="pf-c-card__body">This is a card</div>
926
- </div>
927
- </div>
928
- <div class="pf-l-gallery__item">
929
- <div class="pf-c-card">
930
- <div class="pf-c-card__body">This is a card</div>
931
- </div>
932
- </div>
933
- <div class="pf-l-gallery__item">
934
- <div class="pf-c-card">
935
- <div class="pf-c-card__body">This is a card</div>
936
- </div>
937
- </div>
938
- <div class="pf-l-gallery__item">
939
- <div class="pf-c-card">
940
- <div class="pf-c-card__body">This is a card</div>
941
- </div>
942
- </div>
943
- <div class="pf-l-gallery__item">
944
- <div class="pf-c-card">
945
- <div class="pf-c-card__body">This is a card</div>
946
- </div>
947
- </div>
948
- <div class="pf-l-gallery__item">
949
- <div class="pf-c-card">
950
- <div class="pf-c-card__body">This is a card</div>
951
- </div>
952
- </div>
953
- <div class="pf-l-gallery__item">
954
- <div class="pf-c-card">
955
- <div class="pf-c-card__body">This is a card</div>
956
- </div>
957
- </div>
958
- <div class="pf-l-gallery__item">
959
- <div class="pf-c-card">
960
- <div class="pf-c-card__body">This is a card</div>
961
- </div>
962
- </div>
963
- <div class="pf-l-gallery__item">
964
- <div class="pf-c-card">
965
- <div class="pf-c-card__body">This is a card</div>
966
- </div>
878
+ <div class="pf-c-card">
879
+ <div class="pf-c-card__body">This is a card</div>
880
+ </div>
881
+ <div class="pf-c-card">
882
+ <div class="pf-c-card__body">This is a card</div>
883
+ </div>
884
+ <div class="pf-c-card">
885
+ <div class="pf-c-card__body">This is a card</div>
886
+ </div>
887
+ <div class="pf-c-card">
888
+ <div class="pf-c-card__body">This is a card</div>
889
+ </div>
890
+ <div class="pf-c-card">
891
+ <div class="pf-c-card__body">This is a card</div>
892
+ </div>
893
+ <div class="pf-c-card">
894
+ <div class="pf-c-card__body">This is a card</div>
895
+ </div>
896
+ <div class="pf-c-card">
897
+ <div class="pf-c-card__body">This is a card</div>
898
+ </div>
899
+ <div class="pf-c-card">
900
+ <div class="pf-c-card__body">This is a card</div>
901
+ </div>
902
+ <div class="pf-c-card">
903
+ <div class="pf-c-card__body">This is a card</div>
904
+ </div>
905
+ <div class="pf-c-card">
906
+ <div class="pf-c-card__body">This is a card</div>
967
907
  </div>
968
908
  </div>
969
909
  </div>
@@ -1333,55 +1273,35 @@ section: components
1333
1273
  <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
1334
1274
  <div class="pf-c-page__main-body">
1335
1275
  <div class="pf-l-gallery pf-m-gutter">
1336
- <div class="pf-l-gallery__item">
1337
- <div class="pf-c-card">
1338
- <div class="pf-c-card__body">This is a card</div>
1339
- </div>
1340
- </div>
1341
- <div class="pf-l-gallery__item">
1342
- <div class="pf-c-card">
1343
- <div class="pf-c-card__body">This is a card</div>
1344
- </div>
1345
- </div>
1346
- <div class="pf-l-gallery__item">
1347
- <div class="pf-c-card">
1348
- <div class="pf-c-card__body">This is a card</div>
1349
- </div>
1350
- </div>
1351
- <div class="pf-l-gallery__item">
1352
- <div class="pf-c-card">
1353
- <div class="pf-c-card__body">This is a card</div>
1354
- </div>
1355
- </div>
1356
- <div class="pf-l-gallery__item">
1357
- <div class="pf-c-card">
1358
- <div class="pf-c-card__body">This is a card</div>
1359
- </div>
1360
- </div>
1361
- <div class="pf-l-gallery__item">
1362
- <div class="pf-c-card">
1363
- <div class="pf-c-card__body">This is a card</div>
1364
- </div>
1365
- </div>
1366
- <div class="pf-l-gallery__item">
1367
- <div class="pf-c-card">
1368
- <div class="pf-c-card__body">This is a card</div>
1369
- </div>
1370
- </div>
1371
- <div class="pf-l-gallery__item">
1372
- <div class="pf-c-card">
1373
- <div class="pf-c-card__body">This is a card</div>
1374
- </div>
1375
- </div>
1376
- <div class="pf-l-gallery__item">
1377
- <div class="pf-c-card">
1378
- <div class="pf-c-card__body">This is a card</div>
1379
- </div>
1380
- </div>
1381
- <div class="pf-l-gallery__item">
1382
- <div class="pf-c-card">
1383
- <div class="pf-c-card__body">This is a card</div>
1384
- </div>
1276
+ <div class="pf-c-card">
1277
+ <div class="pf-c-card__body">This is a card</div>
1278
+ </div>
1279
+ <div class="pf-c-card">
1280
+ <div class="pf-c-card__body">This is a card</div>
1281
+ </div>
1282
+ <div class="pf-c-card">
1283
+ <div class="pf-c-card__body">This is a card</div>
1284
+ </div>
1285
+ <div class="pf-c-card">
1286
+ <div class="pf-c-card__body">This is a card</div>
1287
+ </div>
1288
+ <div class="pf-c-card">
1289
+ <div class="pf-c-card__body">This is a card</div>
1290
+ </div>
1291
+ <div class="pf-c-card">
1292
+ <div class="pf-c-card__body">This is a card</div>
1293
+ </div>
1294
+ <div class="pf-c-card">
1295
+ <div class="pf-c-card__body">This is a card</div>
1296
+ </div>
1297
+ <div class="pf-c-card">
1298
+ <div class="pf-c-card__body">This is a card</div>
1299
+ </div>
1300
+ <div class="pf-c-card">
1301
+ <div class="pf-c-card__body">This is a card</div>
1302
+ </div>
1303
+ <div class="pf-c-card">
1304
+ <div class="pf-c-card__body">This is a card</div>
1385
1305
  </div>
1386
1306
  </div>
1387
1307
  </div>
@@ -1673,55 +1593,35 @@ section: components
1673
1593
  <section class="pf-c-page__main-section pf-m-limit-width">
1674
1594
  <div class="pf-c-page__main-body">
1675
1595
  <div class="pf-l-gallery pf-m-gutter">
1676
- <div class="pf-l-gallery__item">
1677
- <div class="pf-c-card">
1678
- <div class="pf-c-card__body">This is a card</div>
1679
- </div>
1680
- </div>
1681
- <div class="pf-l-gallery__item">
1682
- <div class="pf-c-card">
1683
- <div class="pf-c-card__body">This is a card</div>
1684
- </div>
1685
- </div>
1686
- <div class="pf-l-gallery__item">
1687
- <div class="pf-c-card">
1688
- <div class="pf-c-card__body">This is a card</div>
1689
- </div>
1690
- </div>
1691
- <div class="pf-l-gallery__item">
1692
- <div class="pf-c-card">
1693
- <div class="pf-c-card__body">This is a card</div>
1694
- </div>
1695
- </div>
1696
- <div class="pf-l-gallery__item">
1697
- <div class="pf-c-card">
1698
- <div class="pf-c-card__body">This is a card</div>
1699
- </div>
1700
- </div>
1701
- <div class="pf-l-gallery__item">
1702
- <div class="pf-c-card">
1703
- <div class="pf-c-card__body">This is a card</div>
1704
- </div>
1705
- </div>
1706
- <div class="pf-l-gallery__item">
1707
- <div class="pf-c-card">
1708
- <div class="pf-c-card__body">This is a card</div>
1709
- </div>
1710
- </div>
1711
- <div class="pf-l-gallery__item">
1712
- <div class="pf-c-card">
1713
- <div class="pf-c-card__body">This is a card</div>
1714
- </div>
1715
- </div>
1716
- <div class="pf-l-gallery__item">
1717
- <div class="pf-c-card">
1718
- <div class="pf-c-card__body">This is a card</div>
1719
- </div>
1720
- </div>
1721
- <div class="pf-l-gallery__item">
1722
- <div class="pf-c-card">
1723
- <div class="pf-c-card__body">This is a card</div>
1724
- </div>
1596
+ <div class="pf-c-card">
1597
+ <div class="pf-c-card__body">This is a card</div>
1598
+ </div>
1599
+ <div class="pf-c-card">
1600
+ <div class="pf-c-card__body">This is a card</div>
1601
+ </div>
1602
+ <div class="pf-c-card">
1603
+ <div class="pf-c-card__body">This is a card</div>
1604
+ </div>
1605
+ <div class="pf-c-card">
1606
+ <div class="pf-c-card__body">This is a card</div>
1607
+ </div>
1608
+ <div class="pf-c-card">
1609
+ <div class="pf-c-card__body">This is a card</div>
1610
+ </div>
1611
+ <div class="pf-c-card">
1612
+ <div class="pf-c-card__body">This is a card</div>
1613
+ </div>
1614
+ <div class="pf-c-card">
1615
+ <div class="pf-c-card__body">This is a card</div>
1616
+ </div>
1617
+ <div class="pf-c-card">
1618
+ <div class="pf-c-card__body">This is a card</div>
1619
+ </div>
1620
+ <div class="pf-c-card">
1621
+ <div class="pf-c-card__body">This is a card</div>
1622
+ </div>
1623
+ <div class="pf-c-card">
1624
+ <div class="pf-c-card__body">This is a card</div>
1725
1625
  </div>
1726
1626
  </div>
1727
1627
  </div>
@@ -2091,55 +1991,35 @@ section: components
2091
1991
  <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
2092
1992
  <div class="pf-c-page__main-body">
2093
1993
  <div class="pf-l-gallery pf-m-gutter">
2094
- <div class="pf-l-gallery__item">
2095
- <div class="pf-c-card">
2096
- <div class="pf-c-card__body">This is a card</div>
2097
- </div>
2098
- </div>
2099
- <div class="pf-l-gallery__item">
2100
- <div class="pf-c-card">
2101
- <div class="pf-c-card__body">This is a card</div>
2102
- </div>
2103
- </div>
2104
- <div class="pf-l-gallery__item">
2105
- <div class="pf-c-card">
2106
- <div class="pf-c-card__body">This is a card</div>
2107
- </div>
2108
- </div>
2109
- <div class="pf-l-gallery__item">
2110
- <div class="pf-c-card">
2111
- <div class="pf-c-card__body">This is a card</div>
2112
- </div>
2113
- </div>
2114
- <div class="pf-l-gallery__item">
2115
- <div class="pf-c-card">
2116
- <div class="pf-c-card__body">This is a card</div>
2117
- </div>
2118
- </div>
2119
- <div class="pf-l-gallery__item">
2120
- <div class="pf-c-card">
2121
- <div class="pf-c-card__body">This is a card</div>
2122
- </div>
2123
- </div>
2124
- <div class="pf-l-gallery__item">
2125
- <div class="pf-c-card">
2126
- <div class="pf-c-card__body">This is a card</div>
2127
- </div>
2128
- </div>
2129
- <div class="pf-l-gallery__item">
2130
- <div class="pf-c-card">
2131
- <div class="pf-c-card__body">This is a card</div>
2132
- </div>
2133
- </div>
2134
- <div class="pf-l-gallery__item">
2135
- <div class="pf-c-card">
2136
- <div class="pf-c-card__body">This is a card</div>
2137
- </div>
2138
- </div>
2139
- <div class="pf-l-gallery__item">
2140
- <div class="pf-c-card">
2141
- <div class="pf-c-card__body">This is a card</div>
2142
- </div>
1994
+ <div class="pf-c-card">
1995
+ <div class="pf-c-card__body">This is a card</div>
1996
+ </div>
1997
+ <div class="pf-c-card">
1998
+ <div class="pf-c-card__body">This is a card</div>
1999
+ </div>
2000
+ <div class="pf-c-card">
2001
+ <div class="pf-c-card__body">This is a card</div>
2002
+ </div>
2003
+ <div class="pf-c-card">
2004
+ <div class="pf-c-card__body">This is a card</div>
2005
+ </div>
2006
+ <div class="pf-c-card">
2007
+ <div class="pf-c-card__body">This is a card</div>
2008
+ </div>
2009
+ <div class="pf-c-card">
2010
+ <div class="pf-c-card__body">This is a card</div>
2011
+ </div>
2012
+ <div class="pf-c-card">
2013
+ <div class="pf-c-card__body">This is a card</div>
2014
+ </div>
2015
+ <div class="pf-c-card">
2016
+ <div class="pf-c-card__body">This is a card</div>
2017
+ </div>
2018
+ <div class="pf-c-card">
2019
+ <div class="pf-c-card__body">This is a card</div>
2020
+ </div>
2021
+ <div class="pf-c-card">
2022
+ <div class="pf-c-card__body">This is a card</div>
2143
2023
  </div>
2144
2024
  </div>
2145
2025
  </div>
@@ -2706,55 +2586,35 @@ section: components
2706
2586
  <section class="pf-c-page__main-section pf-m-limit-width">
2707
2587
  <div class="pf-c-page__main-body">
2708
2588
  <div class="pf-l-gallery pf-m-gutter">
2709
- <div class="pf-l-gallery__item">
2710
- <div class="pf-c-card">
2711
- <div class="pf-c-card__body">This is a card</div>
2712
- </div>
2713
- </div>
2714
- <div class="pf-l-gallery__item">
2715
- <div class="pf-c-card">
2716
- <div class="pf-c-card__body">This is a card</div>
2717
- </div>
2718
- </div>
2719
- <div class="pf-l-gallery__item">
2720
- <div class="pf-c-card">
2721
- <div class="pf-c-card__body">This is a card</div>
2722
- </div>
2723
- </div>
2724
- <div class="pf-l-gallery__item">
2725
- <div class="pf-c-card">
2726
- <div class="pf-c-card__body">This is a card</div>
2727
- </div>
2728
- </div>
2729
- <div class="pf-l-gallery__item">
2730
- <div class="pf-c-card">
2731
- <div class="pf-c-card__body">This is a card</div>
2732
- </div>
2733
- </div>
2734
- <div class="pf-l-gallery__item">
2735
- <div class="pf-c-card">
2736
- <div class="pf-c-card__body">This is a card</div>
2737
- </div>
2738
- </div>
2739
- <div class="pf-l-gallery__item">
2740
- <div class="pf-c-card">
2741
- <div class="pf-c-card__body">This is a card</div>
2742
- </div>
2743
- </div>
2744
- <div class="pf-l-gallery__item">
2745
- <div class="pf-c-card">
2746
- <div class="pf-c-card__body">This is a card</div>
2747
- </div>
2748
- </div>
2749
- <div class="pf-l-gallery__item">
2750
- <div class="pf-c-card">
2751
- <div class="pf-c-card__body">This is a card</div>
2752
- </div>
2753
- </div>
2754
- <div class="pf-l-gallery__item">
2755
- <div class="pf-c-card">
2756
- <div class="pf-c-card__body">This is a card</div>
2757
- </div>
2589
+ <div class="pf-c-card">
2590
+ <div class="pf-c-card__body">This is a card</div>
2591
+ </div>
2592
+ <div class="pf-c-card">
2593
+ <div class="pf-c-card__body">This is a card</div>
2594
+ </div>
2595
+ <div class="pf-c-card">
2596
+ <div class="pf-c-card__body">This is a card</div>
2597
+ </div>
2598
+ <div class="pf-c-card">
2599
+ <div class="pf-c-card__body">This is a card</div>
2600
+ </div>
2601
+ <div class="pf-c-card">
2602
+ <div class="pf-c-card__body">This is a card</div>
2603
+ </div>
2604
+ <div class="pf-c-card">
2605
+ <div class="pf-c-card__body">This is a card</div>
2606
+ </div>
2607
+ <div class="pf-c-card">
2608
+ <div class="pf-c-card__body">This is a card</div>
2609
+ </div>
2610
+ <div class="pf-c-card">
2611
+ <div class="pf-c-card__body">This is a card</div>
2612
+ </div>
2613
+ <div class="pf-c-card">
2614
+ <div class="pf-c-card__body">This is a card</div>
2615
+ </div>
2616
+ <div class="pf-c-card">
2617
+ <div class="pf-c-card__body">This is a card</div>
2758
2618
  </div>
2759
2619
  </div>
2760
2620
  </div>