@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/Masthead/examples/Masthead.md CHANGED
@@ -189,55 +189,35 @@ wrapperTag: div
189
189
  <section class="pf-c-page__main-section pf-m-limit-width">
190
190
  <div class="pf-c-page__main-body">
191
191
  <div class="pf-l-gallery pf-m-gutter">
192
- <div class="pf-l-gallery__item">
193
- <div class="pf-c-card">
194
- <div class="pf-c-card__body">This is a card</div>
195
- </div>
192
+ <div class="pf-c-card">
193
+ <div class="pf-c-card__body">This is a card</div>
196
194
  </div>
197
- <div class="pf-l-gallery__item">
198
- <div class="pf-c-card">
199
- <div class="pf-c-card__body">This is a card</div>
200
- </div>
195
+ <div class="pf-c-card">
196
+ <div class="pf-c-card__body">This is a card</div>
201
197
  </div>
202
- <div class="pf-l-gallery__item">
203
- <div class="pf-c-card">
204
- <div class="pf-c-card__body">This is a card</div>
205
- </div>
198
+ <div class="pf-c-card">
199
+ <div class="pf-c-card__body">This is a card</div>
206
200
  </div>
207
- <div class="pf-l-gallery__item">
208
- <div class="pf-c-card">
209
- <div class="pf-c-card__body">This is a card</div>
210
- </div>
201
+ <div class="pf-c-card">
202
+ <div class="pf-c-card__body">This is a card</div>
211
203
  </div>
212
- <div class="pf-l-gallery__item">
213
- <div class="pf-c-card">
214
- <div class="pf-c-card__body">This is a card</div>
215
- </div>
204
+ <div class="pf-c-card">
205
+ <div class="pf-c-card__body">This is a card</div>
216
206
  </div>
217
- <div class="pf-l-gallery__item">
218
- <div class="pf-c-card">
219
- <div class="pf-c-card__body">This is a card</div>
220
- </div>
207
+ <div class="pf-c-card">
208
+ <div class="pf-c-card__body">This is a card</div>
221
209
  </div>
222
- <div class="pf-l-gallery__item">
223
- <div class="pf-c-card">
224
- <div class="pf-c-card__body">This is a card</div>
225
- </div>
210
+ <div class="pf-c-card">
211
+ <div class="pf-c-card__body">This is a card</div>
226
212
  </div>
227
- <div class="pf-l-gallery__item">
228
- <div class="pf-c-card">
229
- <div class="pf-c-card__body">This is a card</div>
230
- </div>
213
+ <div class="pf-c-card">
214
+ <div class="pf-c-card__body">This is a card</div>
231
215
  </div>
232
- <div class="pf-l-gallery__item">
233
- <div class="pf-c-card">
234
- <div class="pf-c-card__body">This is a card</div>
235
- </div>
216
+ <div class="pf-c-card">
217
+ <div class="pf-c-card__body">This is a card</div>
236
218
  </div>
237
- <div class="pf-l-gallery__item">
238
- <div class="pf-c-card">
239
- <div class="pf-c-card__body">This is a card</div>
240
- </div>
219
+ <div class="pf-c-card">
220
+ <div class="pf-c-card__body">This is a card</div>
241
221
  </div>
242
222
  </div>
243
223
  </div>
@@ -612,55 +592,35 @@ wrapperTag: div
612
592
  <section class="pf-c-page__main-section pf-m-limit-width">
613
593
  <div class="pf-c-page__main-body">
614
594
  <div class="pf-l-gallery pf-m-gutter">
615
- <div class="pf-l-gallery__item">
616
- <div class="pf-c-card">
617
- <div class="pf-c-card__body">This is a card</div>
618
- </div>
595
+ <div class="pf-c-card">
596
+ <div class="pf-c-card__body">This is a card</div>
619
597
  </div>
620
- <div class="pf-l-gallery__item">
621
- <div class="pf-c-card">
622
- <div class="pf-c-card__body">This is a card</div>
623
- </div>
598
+ <div class="pf-c-card">
599
+ <div class="pf-c-card__body">This is a card</div>
624
600
  </div>
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>
601
+ <div class="pf-c-card">
602
+ <div class="pf-c-card__body">This is a card</div>
629
603
  </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>
604
+ <div class="pf-c-card">
605
+ <div class="pf-c-card__body">This is a card</div>
634
606
  </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>
607
+ <div class="pf-c-card">
608
+ <div class="pf-c-card__body">This is a card</div>
639
609
  </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>
610
+ <div class="pf-c-card">
611
+ <div class="pf-c-card__body">This is a card</div>
644
612
  </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>
613
+ <div class="pf-c-card">
614
+ <div class="pf-c-card__body">This is a card</div>
649
615
  </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>
616
+ <div class="pf-c-card">
617
+ <div class="pf-c-card__body">This is a card</div>
654
618
  </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>
619
+ <div class="pf-c-card">
620
+ <div class="pf-c-card__body">This is a card</div>
659
621
  </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>
622
+ <div class="pf-c-card">
623
+ <div class="pf-c-card__body">This is a card</div>
664
624
  </div>
665
625
  </div>
666
626
  </div>
@@ -962,55 +922,35 @@ wrapperTag: div
962
922
  <section class="pf-c-page__main-section pf-m-limit-width">
963
923
  <div class="pf-c-page__main-body">
964
924
  <div class="pf-l-gallery pf-m-gutter">
965
- <div class="pf-l-gallery__item">
966
- <div class="pf-c-card">
967
- <div class="pf-c-card__body">This is a card</div>
968
- </div>
925
+ <div class="pf-c-card">
926
+ <div class="pf-c-card__body">This is a card</div>
969
927
  </div>
970
- <div class="pf-l-gallery__item">
971
- <div class="pf-c-card">
972
- <div class="pf-c-card__body">This is a card</div>
973
- </div>
928
+ <div class="pf-c-card">
929
+ <div class="pf-c-card__body">This is a card</div>
974
930
  </div>
975
- <div class="pf-l-gallery__item">
976
- <div class="pf-c-card">
977
- <div class="pf-c-card__body">This is a card</div>
978
- </div>
931
+ <div class="pf-c-card">
932
+ <div class="pf-c-card__body">This is a card</div>
979
933
  </div>
980
- <div class="pf-l-gallery__item">
981
- <div class="pf-c-card">
982
- <div class="pf-c-card__body">This is a card</div>
983
- </div>
934
+ <div class="pf-c-card">
935
+ <div class="pf-c-card__body">This is a card</div>
984
936
  </div>
985
- <div class="pf-l-gallery__item">
986
- <div class="pf-c-card">
987
- <div class="pf-c-card__body">This is a card</div>
988
- </div>
937
+ <div class="pf-c-card">
938
+ <div class="pf-c-card__body">This is a card</div>
989
939
  </div>
990
- <div class="pf-l-gallery__item">
991
- <div class="pf-c-card">
992
- <div class="pf-c-card__body">This is a card</div>
993
- </div>
940
+ <div class="pf-c-card">
941
+ <div class="pf-c-card__body">This is a card</div>
994
942
  </div>
995
- <div class="pf-l-gallery__item">
996
- <div class="pf-c-card">
997
- <div class="pf-c-card__body">This is a card</div>
998
- </div>
943
+ <div class="pf-c-card">
944
+ <div class="pf-c-card__body">This is a card</div>
999
945
  </div>
1000
- <div class="pf-l-gallery__item">
1001
- <div class="pf-c-card">
1002
- <div class="pf-c-card__body">This is a card</div>
1003
- </div>
946
+ <div class="pf-c-card">
947
+ <div class="pf-c-card__body">This is a card</div>
1004
948
  </div>
1005
- <div class="pf-l-gallery__item">
1006
- <div class="pf-c-card">
1007
- <div class="pf-c-card__body">This is a card</div>
1008
- </div>
949
+ <div class="pf-c-card">
950
+ <div class="pf-c-card__body">This is a card</div>
1009
951
  </div>
1010
- <div class="pf-l-gallery__item">
1011
- <div class="pf-c-card">
1012
- <div class="pf-c-card__body">This is a card</div>
1013
- </div>
952
+ <div class="pf-c-card">
953
+ <div class="pf-c-card__body">This is a card</div>
1014
954
  </div>
1015
955
  </div>
1016
956
  </div>
@@ -1315,55 +1255,35 @@ wrapperTag: div
1315
1255
  <section class="pf-c-page__main-section pf-m-limit-width">
1316
1256
  <div class="pf-c-page__main-body">
1317
1257
  <div class="pf-l-gallery pf-m-gutter">
1318
- <div class="pf-l-gallery__item">
1319
- <div class="pf-c-card">
1320
- <div class="pf-c-card__body">This is a card</div>
1321
- </div>
1258
+ <div class="pf-c-card">
1259
+ <div class="pf-c-card__body">This is a card</div>
1322
1260
  </div>
1323
- <div class="pf-l-gallery__item">
1324
- <div class="pf-c-card">
1325
- <div class="pf-c-card__body">This is a card</div>
1326
- </div>
1261
+ <div class="pf-c-card">
1262
+ <div class="pf-c-card__body">This is a card</div>
1327
1263
  </div>
1328
- <div class="pf-l-gallery__item">
1329
- <div class="pf-c-card">
1330
- <div class="pf-c-card__body">This is a card</div>
1331
- </div>
1264
+ <div class="pf-c-card">
1265
+ <div class="pf-c-card__body">This is a card</div>
1332
1266
  </div>
1333
- <div class="pf-l-gallery__item">
1334
- <div class="pf-c-card">
1335
- <div class="pf-c-card__body">This is a card</div>
1336
- </div>
1267
+ <div class="pf-c-card">
1268
+ <div class="pf-c-card__body">This is a card</div>
1337
1269
  </div>
1338
- <div class="pf-l-gallery__item">
1339
- <div class="pf-c-card">
1340
- <div class="pf-c-card__body">This is a card</div>
1341
- </div>
1270
+ <div class="pf-c-card">
1271
+ <div class="pf-c-card__body">This is a card</div>
1342
1272
  </div>
1343
- <div class="pf-l-gallery__item">
1344
- <div class="pf-c-card">
1345
- <div class="pf-c-card__body">This is a card</div>
1346
- </div>
1273
+ <div class="pf-c-card">
1274
+ <div class="pf-c-card__body">This is a card</div>
1347
1275
  </div>
1348
- <div class="pf-l-gallery__item">
1349
- <div class="pf-c-card">
1350
- <div class="pf-c-card__body">This is a card</div>
1351
- </div>
1276
+ <div class="pf-c-card">
1277
+ <div class="pf-c-card__body">This is a card</div>
1352
1278
  </div>
1353
- <div class="pf-l-gallery__item">
1354
- <div class="pf-c-card">
1355
- <div class="pf-c-card__body">This is a card</div>
1356
- </div>
1279
+ <div class="pf-c-card">
1280
+ <div class="pf-c-card__body">This is a card</div>
1357
1281
  </div>
1358
- <div class="pf-l-gallery__item">
1359
- <div class="pf-c-card">
1360
- <div class="pf-c-card__body">This is a card</div>
1361
- </div>
1282
+ <div class="pf-c-card">
1283
+ <div class="pf-c-card__body">This is a card</div>
1362
1284
  </div>
1363
- <div class="pf-l-gallery__item">
1364
- <div class="pf-c-card">
1365
- <div class="pf-c-card__body">This is a card</div>
1366
- </div>
1285
+ <div class="pf-c-card">
1286
+ <div class="pf-c-card__body">This is a card</div>
1367
1287
  </div>
1368
1288
  </div>
1369
1289
  </div>
@@ -1446,7 +1366,7 @@ wrapperTag: div
1446
1366
  <button
1447
1367
  class="pf-c-app-launcher__toggle"
1448
1368
  type="button"
1449
- id="-button"
1369
+ id="masthead-advanced-with-menu-example-masthead-icon-group--app-launcher-button"
1450
1370
  aria-expanded="false"
1451
1371
  aria-label="Application launcher"
1452
1372
  >
@@ -2123,7 +2043,7 @@ wrapperTag: div
2123
2043
  </div>
2124
2044
  <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2125
2045
  <div
2126
- class="pf-c-dropdown"
2046
+ class="pf-c-dropdown pf-m-full-height"
2127
2047
  style="--pf-c-dropdown--MaxWidth: 20ch;"
2128
2048
  >
2129
2049
  <button
@@ -2263,55 +2183,35 @@ wrapperTag: div
2263
2183
  <section class="pf-c-page__main-section pf-m-limit-width">
2264
2184
  <div class="pf-c-page__main-body">
2265
2185
  <div class="pf-l-gallery pf-m-gutter">
2266
- <div class="pf-l-gallery__item">
2267
- <div class="pf-c-card">
2268
- <div class="pf-c-card__body">This is a card</div>
2269
- </div>
2186
+ <div class="pf-c-card">
2187
+ <div class="pf-c-card__body">This is a card</div>
2270
2188
  </div>
2271
- <div class="pf-l-gallery__item">
2272
- <div class="pf-c-card">
2273
- <div class="pf-c-card__body">This is a card</div>
2274
- </div>
2189
+ <div class="pf-c-card">
2190
+ <div class="pf-c-card__body">This is a card</div>
2275
2191
  </div>
2276
- <div class="pf-l-gallery__item">
2277
- <div class="pf-c-card">
2278
- <div class="pf-c-card__body">This is a card</div>
2279
- </div>
2192
+ <div class="pf-c-card">
2193
+ <div class="pf-c-card__body">This is a card</div>
2280
2194
  </div>
2281
- <div class="pf-l-gallery__item">
2282
- <div class="pf-c-card">
2283
- <div class="pf-c-card__body">This is a card</div>
2284
- </div>
2195
+ <div class="pf-c-card">
2196
+ <div class="pf-c-card__body">This is a card</div>
2285
2197
  </div>
2286
- <div class="pf-l-gallery__item">
2287
- <div class="pf-c-card">
2288
- <div class="pf-c-card__body">This is a card</div>
2289
- </div>
2198
+ <div class="pf-c-card">
2199
+ <div class="pf-c-card__body">This is a card</div>
2290
2200
  </div>
2291
- <div class="pf-l-gallery__item">
2292
- <div class="pf-c-card">
2293
- <div class="pf-c-card__body">This is a card</div>
2294
- </div>
2201
+ <div class="pf-c-card">
2202
+ <div class="pf-c-card__body">This is a card</div>
2295
2203
  </div>
2296
- <div class="pf-l-gallery__item">
2297
- <div class="pf-c-card">
2298
- <div class="pf-c-card__body">This is a card</div>
2299
- </div>
2204
+ <div class="pf-c-card">
2205
+ <div class="pf-c-card__body">This is a card</div>
2300
2206
  </div>
2301
- <div class="pf-l-gallery__item">
2302
- <div class="pf-c-card">
2303
- <div class="pf-c-card__body">This is a card</div>
2304
- </div>
2207
+ <div class="pf-c-card">
2208
+ <div class="pf-c-card__body">This is a card</div>
2305
2209
  </div>
2306
- <div class="pf-l-gallery__item">
2307
- <div class="pf-c-card">
2308
- <div class="pf-c-card__body">This is a card</div>
2309
- </div>
2210
+ <div class="pf-c-card">
2211
+ <div class="pf-c-card__body">This is a card</div>
2310
2212
  </div>
2311
- <div class="pf-l-gallery__item">
2312
- <div class="pf-c-card">
2313
- <div class="pf-c-card__body">This is a card</div>
2314
- </div>
2213
+ <div class="pf-c-card">
2214
+ <div class="pf-c-card__body">This is a card</div>
2315
2215
  </div>
2316
2216
  </div>
2317
2217
  </div>
@@ -2427,7 +2327,7 @@ wrapperTag: div
2427
2327
  <button
2428
2328
  class="pf-c-app-launcher__toggle"
2429
2329
  type="button"
2430
- id="-button"
2330
+ id="masthead-horizontal-nav-masthead-icon-group--app-launcher-button"
2431
2331
  aria-expanded="false"
2432
2332
  aria-label="Application launcher"
2433
2333
  >
@@ -3104,7 +3004,7 @@ wrapperTag: div
3104
3004
  </div>
3105
3005
  <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3106
3006
  <div
3107
- class="pf-c-dropdown pf-m-expanded"
3007
+ class="pf-c-dropdown pf-m-expanded pf-m-full-height"
3108
3008
  style="--pf-c-dropdown--MaxWidth: 20ch;"
3109
3009
  >
3110
3010
  <button
@@ -3213,55 +3113,35 @@ wrapperTag: div
3213
3113
  <section class="pf-c-page__main-section pf-m-limit-width">
3214
3114
  <div class="pf-c-page__main-body">
3215
3115
  <div class="pf-l-gallery pf-m-gutter">
3216
- <div class="pf-l-gallery__item">
3217
- <div class="pf-c-card">
3218
- <div class="pf-c-card__body">This is a card</div>
3219
- </div>
3116
+ <div class="pf-c-card">
3117
+ <div class="pf-c-card__body">This is a card</div>
3220
3118
  </div>
3221
- <div class="pf-l-gallery__item">
3222
- <div class="pf-c-card">
3223
- <div class="pf-c-card__body">This is a card</div>
3224
- </div>
3119
+ <div class="pf-c-card">
3120
+ <div class="pf-c-card__body">This is a card</div>
3225
3121
  </div>
3226
- <div class="pf-l-gallery__item">
3227
- <div class="pf-c-card">
3228
- <div class="pf-c-card__body">This is a card</div>
3229
- </div>
3122
+ <div class="pf-c-card">
3123
+ <div class="pf-c-card__body">This is a card</div>
3230
3124
  </div>
3231
- <div class="pf-l-gallery__item">
3232
- <div class="pf-c-card">
3233
- <div class="pf-c-card__body">This is a card</div>
3234
- </div>
3125
+ <div class="pf-c-card">
3126
+ <div class="pf-c-card__body">This is a card</div>
3235
3127
  </div>
3236
- <div class="pf-l-gallery__item">
3237
- <div class="pf-c-card">
3238
- <div class="pf-c-card__body">This is a card</div>
3239
- </div>
3128
+ <div class="pf-c-card">
3129
+ <div class="pf-c-card__body">This is a card</div>
3240
3130
  </div>
3241
- <div class="pf-l-gallery__item">
3242
- <div class="pf-c-card">
3243
- <div class="pf-c-card__body">This is a card</div>
3244
- </div>
3131
+ <div class="pf-c-card">
3132
+ <div class="pf-c-card__body">This is a card</div>
3245
3133
  </div>
3246
- <div class="pf-l-gallery__item">
3247
- <div class="pf-c-card">
3248
- <div class="pf-c-card__body">This is a card</div>
3249
- </div>
3134
+ <div class="pf-c-card">
3135
+ <div class="pf-c-card__body">This is a card</div>
3250
3136
  </div>
3251
- <div class="pf-l-gallery__item">
3252
- <div class="pf-c-card">
3253
- <div class="pf-c-card__body">This is a card</div>
3254
- </div>
3137
+ <div class="pf-c-card">
3138
+ <div class="pf-c-card__body">This is a card</div>
3255
3139
  </div>
3256
- <div class="pf-l-gallery__item">
3257
- <div class="pf-c-card">
3258
- <div class="pf-c-card__body">This is a card</div>
3259
- </div>
3140
+ <div class="pf-c-card">
3141
+ <div class="pf-c-card__body">This is a card</div>
3260
3142
  </div>
3261
- <div class="pf-l-gallery__item">
3262
- <div class="pf-c-card">
3263
- <div class="pf-c-card__body">This is a card</div>
3264
- </div>
3143
+ <div class="pf-c-card">
3144
+ <div class="pf-c-card__body">This is a card</div>
3265
3145
  </div>
3266
3146
  </div>
3267
3147
  </div>
@@ -3568,55 +3448,35 @@ wrapperTag: div
3568
3448
  <section class="pf-c-page__main-section pf-m-limit-width">
3569
3449
  <div class="pf-c-page__main-body">
3570
3450
  <div class="pf-l-gallery pf-m-gutter">
3571
- <div class="pf-l-gallery__item">
3572
- <div class="pf-c-card">
3573
- <div class="pf-c-card__body">This is a card</div>
3574
- </div>
3451
+ <div class="pf-c-card">
3452
+ <div class="pf-c-card__body">This is a card</div>
3575
3453
  </div>
3576
- <div class="pf-l-gallery__item">
3577
- <div class="pf-c-card">
3578
- <div class="pf-c-card__body">This is a card</div>
3579
- </div>
3454
+ <div class="pf-c-card">
3455
+ <div class="pf-c-card__body">This is a card</div>
3580
3456
  </div>
3581
- <div class="pf-l-gallery__item">
3582
- <div class="pf-c-card">
3583
- <div class="pf-c-card__body">This is a card</div>
3584
- </div>
3457
+ <div class="pf-c-card">
3458
+ <div class="pf-c-card__body">This is a card</div>
3585
3459
  </div>
3586
- <div class="pf-l-gallery__item">
3587
- <div class="pf-c-card">
3588
- <div class="pf-c-card__body">This is a card</div>
3589
- </div>
3460
+ <div class="pf-c-card">
3461
+ <div class="pf-c-card__body">This is a card</div>
3590
3462
  </div>
3591
- <div class="pf-l-gallery__item">
3592
- <div class="pf-c-card">
3593
- <div class="pf-c-card__body">This is a card</div>
3594
- </div>
3463
+ <div class="pf-c-card">
3464
+ <div class="pf-c-card__body">This is a card</div>
3595
3465
  </div>
3596
- <div class="pf-l-gallery__item">
3597
- <div class="pf-c-card">
3598
- <div class="pf-c-card__body">This is a card</div>
3599
- </div>
3466
+ <div class="pf-c-card">
3467
+ <div class="pf-c-card__body">This is a card</div>
3600
3468
  </div>
3601
- <div class="pf-l-gallery__item">
3602
- <div class="pf-c-card">
3603
- <div class="pf-c-card__body">This is a card</div>
3604
- </div>
3469
+ <div class="pf-c-card">
3470
+ <div class="pf-c-card__body">This is a card</div>
3605
3471
  </div>
3606
- <div class="pf-l-gallery__item">
3607
- <div class="pf-c-card">
3608
- <div class="pf-c-card__body">This is a card</div>
3609
- </div>
3472
+ <div class="pf-c-card">
3473
+ <div class="pf-c-card__body">This is a card</div>
3610
3474
  </div>
3611
- <div class="pf-l-gallery__item">
3612
- <div class="pf-c-card">
3613
- <div class="pf-c-card__body">This is a card</div>
3614
- </div>
3475
+ <div class="pf-c-card">
3476
+ <div class="pf-c-card__body">This is a card</div>
3615
3477
  </div>
3616
- <div class="pf-l-gallery__item">
3617
- <div class="pf-c-card">
3618
- <div class="pf-c-card__body">This is a card</div>
3619
- </div>
3478
+ <div class="pf-c-card">
3479
+ <div class="pf-c-card__body">This is a card</div>
3620
3480
  </div>
3621
3481
  </div>
3622
3482
  </div>