@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.105

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 (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/docs/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -226,207 +226,209 @@ section: components
226
226
  </nav>
227
227
  </div>
228
228
  </div>
229
- <main
230
- class="pf-v6-c-page__main"
231
- tabindex="-1"
232
- id="main-content-skeleton-basic-example"
233
- >
234
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v6-c-page__main-body">
236
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v6-c-breadcrumb__list" role="list">
238
- <li class="pf-v6-c-breadcrumb__item">
239
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
- </li>
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <span class="pf-v6-c-breadcrumb__item-divider">
243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
- </span>
229
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
230
+ <main
231
+ class="pf-v6-c-page__main"
232
+ tabindex="-1"
233
+ id="main-content-skeleton-basic-example"
234
+ >
235
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
236
+ <div class="pf-v6-c-page__main-body">
237
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
238
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
239
+ <li class="pf-v6-c-breadcrumb__item">
240
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
241
+ </li>
242
+ <li class="pf-v6-c-breadcrumb__item">
243
+ <span class="pf-v6-c-breadcrumb__item-divider">
244
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
245
+ </span>
245
246
 
246
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
- </li>
248
- <li class="pf-v6-c-breadcrumb__item">
249
- <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
- </span>
247
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
248
+ </li>
249
+ <li class="pf-v6-c-breadcrumb__item">
250
+ <span class="pf-v6-c-breadcrumb__item-divider">
251
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
252
+ </span>
252
253
 
253
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
- </li>
255
- <li class="pf-v6-c-breadcrumb__item">
256
- <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
- </span>
254
+ <a href="#" class="pf-v6-c-breadcrumb__link">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>
259
260
 
260
- <a
261
- href="#"
262
- class="pf-v6-c-breadcrumb__link pf-m-current"
263
- aria-current="page"
264
- >Section landing</a>
265
- </li>
266
- </ol>
267
- </nav>
268
- </div>
269
- </section>
270
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v6-c-page__main-body">
272
- <div class="pf-v6-c-content">
273
- <h1>Main title</h1>
274
- <p>This is a full page demo.</p>
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>
275
269
  </div>
276
- </div>
277
- </section>
278
- <section class="pf-v6-c-page__main-section">
279
- <div class="pf-v6-l-gallery pf-m-gutter">
280
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
281
- <div class="pf-v6-c-card__body">
282
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
283
- <div class="pf-v6-c-skeleton"></div>
284
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
285
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
286
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
287
- </div>
288
- </div>
289
- <div class="pf-v6-c-card__body">
290
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
291
- </div>
292
- <div class="pf-v6-c-card__body">
293
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
294
- <div class="pf-v6-c-skeleton"></div>
295
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
296
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
297
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
298
- </div>
270
+ </section>
271
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
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>
299
276
  </div>
300
277
  </div>
301
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
302
- <div class="pf-v6-c-card__body">
303
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
304
- <div class="pf-v6-c-skeleton"></div>
305
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
306
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
307
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
278
+ </section>
279
+ <section class="pf-v6-c-page__main-section">
280
+ <div class="pf-v6-l-gallery pf-m-gutter">
281
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
282
+ <div class="pf-v6-c-card__body">
283
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
284
+ <div class="pf-v6-c-skeleton"></div>
285
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
286
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
287
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
288
+ </div>
308
289
  </div>
309
- </div>
310
- <div class="pf-v6-c-card__body">
311
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
312
- </div>
313
- <div class="pf-v6-c-card__body">
314
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
315
- <div class="pf-v6-c-skeleton"></div>
316
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
317
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
318
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
290
+ <div class="pf-v6-c-card__body">
291
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
319
292
  </div>
320
- </div>
321
- </div>
322
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
323
- <div class="pf-v6-c-card__body">
324
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
325
- <div class="pf-v6-c-skeleton"></div>
326
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
327
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
328
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
293
+ <div class="pf-v6-c-card__body">
294
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
295
+ <div class="pf-v6-c-skeleton"></div>
296
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
297
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
298
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
299
+ </div>
329
300
  </div>
330
301
  </div>
331
- <div class="pf-v6-c-card__body">
332
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
333
- </div>
334
- <div class="pf-v6-c-card__body">
335
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
336
- <div class="pf-v6-c-skeleton"></div>
337
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
338
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
339
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
302
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
303
+ <div class="pf-v6-c-card__body">
304
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
305
+ <div class="pf-v6-c-skeleton"></div>
306
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
307
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
308
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
309
+ </div>
340
310
  </div>
341
- </div>
342
- </div>
343
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
344
- <div class="pf-v6-c-card__body">
345
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
346
- <div class="pf-v6-c-skeleton"></div>
347
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
348
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
349
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
311
+ <div class="pf-v6-c-card__body">
312
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
350
313
  </div>
351
- </div>
352
- <div class="pf-v6-c-card__body">
353
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
354
- </div>
355
- <div class="pf-v6-c-card__body">
356
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
357
- <div class="pf-v6-c-skeleton"></div>
358
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
359
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
360
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
314
+ <div class="pf-v6-c-card__body">
315
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
316
+ <div class="pf-v6-c-skeleton"></div>
317
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
318
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
319
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
320
+ </div>
361
321
  </div>
362
322
  </div>
363
- </div>
364
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
365
- <div class="pf-v6-c-card__body">
366
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
367
- <div class="pf-v6-c-skeleton"></div>
368
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
369
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
370
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
323
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
324
+ <div class="pf-v6-c-card__body">
325
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
326
+ <div class="pf-v6-c-skeleton"></div>
327
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
328
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
329
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
330
+ </div>
371
331
  </div>
372
- </div>
373
- <div class="pf-v6-c-card__body">
374
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
375
- </div>
376
- <div class="pf-v6-c-card__body">
377
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
378
- <div class="pf-v6-c-skeleton"></div>
379
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
380
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
381
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
332
+ <div class="pf-v6-c-card__body">
333
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
382
334
  </div>
383
- </div>
384
- </div>
385
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
386
- <div class="pf-v6-c-card__body">
387
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
388
- <div class="pf-v6-c-skeleton"></div>
389
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
390
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
391
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
335
+ <div class="pf-v6-c-card__body">
336
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
337
+ <div class="pf-v6-c-skeleton"></div>
338
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
339
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
340
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
341
+ </div>
392
342
  </div>
393
343
  </div>
394
- <div class="pf-v6-c-card__body">
395
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
396
- </div>
397
- <div class="pf-v6-c-card__body">
398
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
399
- <div class="pf-v6-c-skeleton"></div>
400
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
401
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
402
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
344
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
345
+ <div class="pf-v6-c-card__body">
346
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
347
+ <div class="pf-v6-c-skeleton"></div>
348
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
349
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
350
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
351
+ </div>
352
+ </div>
353
+ <div class="pf-v6-c-card__body">
354
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
355
+ </div>
356
+ <div class="pf-v6-c-card__body">
357
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
358
+ <div class="pf-v6-c-skeleton"></div>
359
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
360
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
361
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
362
+ </div>
403
363
  </div>
404
364
  </div>
405
- </div>
406
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
407
- <div class="pf-v6-c-card__body">
408
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
409
- <div class="pf-v6-c-skeleton"></div>
410
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
411
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
412
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
365
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
366
+ <div class="pf-v6-c-card__body">
367
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
368
+ <div class="pf-v6-c-skeleton"></div>
369
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
370
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
371
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
372
+ </div>
373
+ </div>
374
+ <div class="pf-v6-c-card__body">
375
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
376
+ </div>
377
+ <div class="pf-v6-c-card__body">
378
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
379
+ <div class="pf-v6-c-skeleton"></div>
380
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
381
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
382
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
383
+ </div>
413
384
  </div>
414
385
  </div>
415
- <div class="pf-v6-c-card__body">
416
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
386
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
387
+ <div class="pf-v6-c-card__body">
388
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
389
+ <div class="pf-v6-c-skeleton"></div>
390
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
391
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
392
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
393
+ </div>
394
+ </div>
395
+ <div class="pf-v6-c-card__body">
396
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
397
+ </div>
398
+ <div class="pf-v6-c-card__body">
399
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
400
+ <div class="pf-v6-c-skeleton"></div>
401
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
402
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
403
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
404
+ </div>
405
+ </div>
417
406
  </div>
418
- <div class="pf-v6-c-card__body">
419
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
420
- <div class="pf-v6-c-skeleton"></div>
421
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
422
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
423
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
407
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
408
+ <div class="pf-v6-c-card__body">
409
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
410
+ <div class="pf-v6-c-skeleton"></div>
411
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
412
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
413
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
414
+ </div>
415
+ </div>
416
+ <div class="pf-v6-c-card__body">
417
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
418
+ </div>
419
+ <div class="pf-v6-c-card__body">
420
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
421
+ <div class="pf-v6-c-skeleton"></div>
422
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
423
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
424
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
425
+ </div>
424
426
  </div>
425
427
  </div>
426
428
  </div>
427
- </div>
428
- </section>
429
- </main>
429
+ </section>
430
+ </main>
431
+ </div>
430
432
  </div>
431
433
 
432
434
  ```