@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/Alert/examples/Alert.md CHANGED
@@ -226,92 +226,94 @@ 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-alert-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-alert-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 pf-m-limit-width">
279
- <div class="pf-v6-c-page__main-body">
280
- <div class="pf-v6-l-gallery pf-m-gutter">
281
- <div class="pf-v6-c-card">
282
- <div class="pf-v6-c-card__body">This is a card</div>
283
- </div>
284
- <div class="pf-v6-c-card">
285
- <div class="pf-v6-c-card__body">This is a card</div>
286
- </div>
287
- <div class="pf-v6-c-card">
288
- <div class="pf-v6-c-card__body">This is a card</div>
289
- </div>
290
- <div class="pf-v6-c-card">
291
- <div class="pf-v6-c-card__body">This is a card</div>
292
- </div>
293
- <div class="pf-v6-c-card">
294
- <div class="pf-v6-c-card__body">This is a card</div>
295
- </div>
296
- <div class="pf-v6-c-card">
297
- <div class="pf-v6-c-card__body">This is a card</div>
298
- </div>
299
- <div class="pf-v6-c-card">
300
- <div class="pf-v6-c-card__body">This is a card</div>
301
- </div>
302
- <div class="pf-v6-c-card">
303
- <div class="pf-v6-c-card__body">This is a card</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>
304
276
  </div>
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
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>
284
+ </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>
311
+ </div>
310
312
  </div>
311
313
  </div>
312
- </div>
313
- </section>
314
- </main>
314
+ </section>
315
+ </main>
316
+ </div>
315
317
  </div>
316
318
  <ul class="pf-v6-c-alert-group pf-m-toast" role="list">
317
319
  <li class="pf-v6-c-alert-group__item">
@@ -610,256 +612,261 @@ section: components
610
612
  </nav>
611
613
  </div>
612
614
  </div>
613
- <main
614
- class="pf-v6-c-page__main"
615
- tabindex="-1"
616
- id="main-content-alert-horizontal-example"
617
- >
618
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
619
- <div class="pf-v6-c-page__main-body">
620
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
621
- <ol class="pf-v6-c-breadcrumb__list" role="list">
622
- <li class="pf-v6-c-breadcrumb__item">
623
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
624
- </li>
625
- <li class="pf-v6-c-breadcrumb__item">
626
- <span class="pf-v6-c-breadcrumb__item-divider">
627
- <i class="fas fa-angle-right" aria-hidden="true"></i>
628
- </span>
615
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
616
+ <main
617
+ class="pf-v6-c-page__main"
618
+ tabindex="-1"
619
+ id="main-content-alert-horizontal-example"
620
+ >
621
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
622
+ <div class="pf-v6-c-page__main-body">
623
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
624
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
625
+ <li class="pf-v6-c-breadcrumb__item">
626
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
627
+ </li>
628
+ <li class="pf-v6-c-breadcrumb__item">
629
+ <span class="pf-v6-c-breadcrumb__item-divider">
630
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
631
+ </span>
629
632
 
630
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
631
- </li>
632
- <li class="pf-v6-c-breadcrumb__item">
633
- <span class="pf-v6-c-breadcrumb__item-divider">
634
- <i class="fas fa-angle-right" aria-hidden="true"></i>
635
- </span>
633
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
634
+ </li>
635
+ <li class="pf-v6-c-breadcrumb__item">
636
+ <span class="pf-v6-c-breadcrumb__item-divider">
637
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
638
+ </span>
636
639
 
637
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
638
- </li>
639
- <li class="pf-v6-c-breadcrumb__item">
640
- <span class="pf-v6-c-breadcrumb__item-divider">
641
- <i class="fas fa-angle-right" aria-hidden="true"></i>
642
- </span>
640
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
641
+ </li>
642
+ <li class="pf-v6-c-breadcrumb__item">
643
+ <span class="pf-v6-c-breadcrumb__item-divider">
644
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
645
+ </span>
643
646
 
644
- <a
645
- href="#"
646
- class="pf-v6-c-breadcrumb__link pf-m-current"
647
- aria-current="page"
648
- >Section landing</a>
649
- </li>
650
- </ol>
651
- </nav>
652
- </div>
653
- </section>
654
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
655
- <div class="pf-v6-c-page__main-body">
656
- <div class="pf-v6-c-content">
657
- <h1>Main title</h1>
658
- <p>This is a full page demo.</p>
647
+ <a
648
+ href="#"
649
+ class="pf-v6-c-breadcrumb__link pf-m-current"
650
+ aria-current="page"
651
+ >Section landing</a>
652
+ </li>
653
+ </ol>
654
+ </nav>
659
655
  </div>
660
- </div>
661
- </section>
662
- <section class="pf-v6-c-page__main-section pf-m-light">
663
- <form class="pf-v6-c-form pf-m-limit-width pf-m-horizontal" novalidate>
664
- <div class="pf-v6-c-form__alert">
665
- <div
666
- class="pf-v6-c-alert pf-m-danger pf-m-inline"
667
- aria-label="Inline danger alert"
668
- >
669
- <div class="pf-v6-c-alert__icon">
670
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
671
- </div>
672
- <p class="pf-v6-c-alert__title">
673
- <span class="pf-v6-screen-reader">Danger alert:</span>
674
- Fill out all required fields before continuing.
675
- </p>
656
+ </section>
657
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
658
+ <div class="pf-v6-c-page__main-body">
659
+ <div class="pf-v6-c-content">
660
+ <h1>Main title</h1>
661
+ <p>This is a full page demo.</p>
676
662
  </div>
677
663
  </div>
678
- <div class="pf-v6-c-form__group">
679
- <div class="pf-v6-c-form__group-label"><label
680
- class="pf-v6-c-form__label"
681
- for="alert-horizontal-example-form-name"
664
+ </section>
665
+ <section class="pf-v6-c-page__main-section pf-m-light">
666
+ <form class="pf-v6-c-form pf-m-limit-width pf-m-horizontal" novalidate>
667
+ <div class="pf-v6-c-form__alert">
668
+ <div
669
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
670
+ aria-label="Inline danger alert"
682
671
  >
683
- <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span
684
- class="pf-v6-c-form__label-required"
685
- aria-hidden="true"
686
- >&#42;</span></label>
672
+ <div class="pf-v6-c-alert__icon">
673
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
674
+ </div>
675
+ <p class="pf-v6-c-alert__title">
676
+ <span class="pf-v6-screen-reader">Danger alert:</span>
677
+ Fill out all required fields before continuing.
678
+ </p>
679
+ </div>
687
680
  </div>
688
- <div class="pf-v6-c-form__group-control">
689
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
690
- <input
691
- required
692
- type="text"
693
- id="alert-horizontal-example-form-name"
694
- name="alert-horizontal-example-form-name"
695
- aria-invalid="true"
696
- aria-describedby="alert-horizontal-example-form-name-helper"
697
- />
698
- <span class="pf-v6-c-form-control__utilities">
699
- <span class="pf-v6-c-form-control__icon pf-m-status">
700
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
681
+ <div class="pf-v6-c-form__group">
682
+ <div class="pf-v6-c-form__group-label"><label
683
+ class="pf-v6-c-form__label"
684
+ for="alert-horizontal-example-form-name"
685
+ >
686
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span
687
+ class="pf-v6-c-form__label-required"
688
+ aria-hidden="true"
689
+ >&#42;</span></label>
690
+ </div>
691
+ <div class="pf-v6-c-form__group-control">
692
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
693
+ <input
694
+ required
695
+ type="text"
696
+ id="alert-horizontal-example-form-name"
697
+ name="alert-horizontal-example-form-name"
698
+ aria-invalid="true"
699
+ aria-describedby="alert-horizontal-example-form-name-helper"
700
+ />
701
+ <span class="pf-v6-c-form-control__utilities">
702
+ <span class="pf-v6-c-form-control__icon pf-m-status">
703
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
704
+ </span>
701
705
  </span>
702
706
  </span>
703
- </span>
704
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
705
- <div class="pf-v6-c-helper-text">
706
- <div
707
- class="pf-v6-c-helper-text__item pf-m-error"
708
- id="alert-horizontal-example-form-name-helper"
709
- >
710
- <span class="pf-v6-c-helper-text__item-icon">
711
- <i
712
- class="fas fa-fw fa-exclamation-circle"
713
- aria-hidden="true"
714
- ></i>
715
- </span>
716
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
707
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
708
+ <div class="pf-v6-c-helper-text">
709
+ <div
710
+ class="pf-v6-c-helper-text__item pf-m-error"
711
+ id="alert-horizontal-example-form-name-helper"
712
+ >
713
+ <span class="pf-v6-c-helper-text__item-icon">
714
+ <i
715
+ class="fas fa-fw fa-exclamation-circle"
716
+ aria-hidden="true"
717
+ ></i>
718
+ </span>
719
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
720
+ </div>
717
721
  </div>
718
722
  </div>
719
723
  </div>
720
724
  </div>
721
- </div>
722
- <div class="pf-v6-c-form__group">
723
- <div class="pf-v6-c-form__group-label"><label
724
- class="pf-v6-c-form__label"
725
- for="alert-horizontal-example-form-email"
726
- >
727
- <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
728
- class="pf-v6-c-form__label-required"
729
- aria-hidden="true"
730
- >&#42;</span></label>
731
- </div>
732
- <div class="pf-v6-c-form__group-control">
733
- <span class="pf-v6-c-form-control pf-m-required">
734
- <input
735
- required
736
- type="text"
737
- value="patternfly@patternfly.com"
738
- id="alert-horizontal-example-form-email"
739
- name="alert-horizontal-example-form-email"
740
- />
741
- </span>
742
- </div>
743
- </div>
744
- <div class="pf-v6-c-form__group">
745
- <div class="pf-v6-c-form__group-label"><label
746
- class="pf-v6-c-form__label"
747
- for="alert-horizontal-example-form-phone"
748
- >
749
- <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span
750
- class="pf-v6-c-form__label-required"
751
- aria-hidden="true"
752
- >&#42;</span></label>
725
+ <div class="pf-v6-c-form__group">
726
+ <div class="pf-v6-c-form__group-label"><label
727
+ class="pf-v6-c-form__label"
728
+ for="alert-horizontal-example-form-email"
729
+ >
730
+ <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
731
+ class="pf-v6-c-form__label-required"
732
+ aria-hidden="true"
733
+ >&#42;</span></label>
734
+ </div>
735
+ <div class="pf-v6-c-form__group-control">
736
+ <span class="pf-v6-c-form-control pf-m-required">
737
+ <input
738
+ required
739
+ type="text"
740
+ value="patternfly@patternfly.com"
741
+ id="alert-horizontal-example-form-email"
742
+ name="alert-horizontal-example-form-email"
743
+ />
744
+ </span>
745
+ </div>
753
746
  </div>
754
- <div class="pf-v6-c-form__group-control">
755
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
756
- <input
757
- required
758
- type="text"
759
- id="alert-horizontal-example-form-phone"
760
- name="alert-horizontal-example-form-phone"
761
- aria-invalid="true"
762
- aria-describedby="alert-horizontal-example-form-phone-helper"
763
- />
764
- <span class="pf-v6-c-form-control__utilities">
765
- <span class="pf-v6-c-form-control__icon pf-m-status">
766
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
747
+ <div class="pf-v6-c-form__group">
748
+ <div class="pf-v6-c-form__group-label"><label
749
+ class="pf-v6-c-form__label"
750
+ for="alert-horizontal-example-form-phone"
751
+ >
752
+ <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span
753
+ class="pf-v6-c-form__label-required"
754
+ aria-hidden="true"
755
+ >&#42;</span></label>
756
+ </div>
757
+ <div class="pf-v6-c-form__group-control">
758
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
759
+ <input
760
+ required
761
+ type="text"
762
+ id="alert-horizontal-example-form-phone"
763
+ name="alert-horizontal-example-form-phone"
764
+ aria-invalid="true"
765
+ aria-describedby="alert-horizontal-example-form-phone-helper"
766
+ />
767
+ <span class="pf-v6-c-form-control__utilities">
768
+ <span class="pf-v6-c-form-control__icon pf-m-status">
769
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
770
+ </span>
767
771
  </span>
768
772
  </span>
769
- </span>
770
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
771
- <div class="pf-v6-c-helper-text">
772
- <div
773
- class="pf-v6-c-helper-text__item pf-m-error"
774
- id="alert-horizontal-example-form-phone-helper"
775
- >
776
- <span class="pf-v6-c-helper-text__item-icon">
777
- <i
778
- class="fas fa-fw fa-exclamation-circle"
779
- aria-hidden="true"
780
- ></i>
781
- </span>
782
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
773
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
774
+ <div class="pf-v6-c-helper-text">
775
+ <div
776
+ class="pf-v6-c-helper-text__item pf-m-error"
777
+ id="alert-horizontal-example-form-phone-helper"
778
+ >
779
+ <span class="pf-v6-c-helper-text__item-icon">
780
+ <i
781
+ class="fas fa-fw fa-exclamation-circle"
782
+ aria-hidden="true"
783
+ ></i>
784
+ </span>
785
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
786
+ </div>
783
787
  </div>
784
788
  </div>
785
789
  </div>
786
790
  </div>
787
- </div>
788
- <div
789
- class="pf-v6-c-form__group"
790
- role="group"
791
- aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
792
- >
793
791
  <div
794
- class="pf-v6-c-form__group-label pf-m-no-padding-top"
795
- id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
796
- ><span
797
- class="pf-v6-c-form__label"
798
- for="alert-horizontal-example-form-check-group"
799
- >
800
- <span class="pf-v6-c-form__label-text">Your experience</span>&nbsp;<span
801
- class="pf-v6-c-form__label-required"
802
- aria-hidden="true"
803
- >&#42;</span></span>
804
- </div>
805
- <div class="pf-v6-c-form__group-control">
806
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
807
- <div class="pf-v6-c-helper-text">
808
- <div
809
- class="pf-v6-c-helper-text__item pf-m-error"
810
- id="alert-horizontal-example-form-check-group-helper"
811
- >
812
- <span class="pf-v6-c-helper-text__item-icon">
813
- <i
814
- class="fas fa-fw fa-exclamation-circle"
815
- aria-hidden="true"
816
- ></i>
817
- </span>
818
- <span
819
- class="pf-v6-c-helper-text__item-text"
820
- >This is a required field</span>
792
+ class="pf-v6-c-form__group"
793
+ role="group"
794
+ aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
795
+ >
796
+ <div
797
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
798
+ id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
799
+ ><span
800
+ class="pf-v6-c-form__label"
801
+ for="alert-horizontal-example-form-check-group"
802
+ >
803
+ <span class="pf-v6-c-form__label-text">Your experience</span>&nbsp;<span
804
+ class="pf-v6-c-form__label-required"
805
+ aria-hidden="true"
806
+ >&#42;</span></span>
807
+ </div>
808
+ <div class="pf-v6-c-form__group-control">
809
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
810
+ <div class="pf-v6-c-helper-text">
811
+ <div
812
+ class="pf-v6-c-helper-text__item pf-m-error"
813
+ id="alert-horizontal-example-form-check-group-helper"
814
+ >
815
+ <span class="pf-v6-c-helper-text__item-icon">
816
+ <i
817
+ class="fas fa-fw fa-exclamation-circle"
818
+ aria-hidden="true"
819
+ ></i>
820
+ </span>
821
+ <span
822
+ class="pf-v6-c-helper-text__item-text"
823
+ >This is a required field</span>
824
+ </div>
821
825
  </div>
822
826
  </div>
823
- </div>
824
- <div class="pf-v6-c-check">
825
- <input
826
- class="pf-v6-c-check__input"
827
- type="checkbox"
828
- id="alt-checkbox1"
829
- name="alt-checkbox1"
830
- />
827
+ <div class="pf-v6-c-check">
828
+ <input
829
+ class="pf-v6-c-check__input"
830
+ type="checkbox"
831
+ id="alt-checkbox1"
832
+ name="alt-checkbox1"
833
+ />
831
834
 
832
- <label
833
- class="pf-v6-c-check__label"
834
- for="alt-checkbox1"
835
- >Follow up via email.</label>
836
- </div>
837
- <div class="pf-v6-c-check">
838
- <input
839
- class="pf-v6-c-check__input"
840
- type="checkbox"
841
- id="alt-checkbox2"
842
- name="alt-checkbox2"
843
- />
835
+ <label
836
+ class="pf-v6-c-check__label"
837
+ for="alt-checkbox1"
838
+ >Follow up via email.</label>
839
+ </div>
840
+ <div class="pf-v6-c-check">
841
+ <input
842
+ class="pf-v6-c-check__input"
843
+ type="checkbox"
844
+ id="alt-checkbox2"
845
+ name="alt-checkbox2"
846
+ />
844
847
 
845
- <label
846
- class="pf-v6-c-check__label"
847
- for="alt-checkbox2"
848
- >Remember my password for 30 days.</label>
848
+ <label
849
+ class="pf-v6-c-check__label"
850
+ for="alt-checkbox2"
851
+ >Remember my password for 30 days.</label>
852
+ </div>
849
853
  </div>
850
854
  </div>
851
- </div>
852
- <div class="pf-v6-c-form__group pf-m-action">
853
- <div class="pf-v6-c-form__group-control">
854
- <div class="pf-v6-c-form__actions">
855
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
856
- <button class="pf-v6-c-button pf-m-secondary" type="reset">Cancel</button>
855
+ <div class="pf-v6-c-form__group pf-m-action">
856
+ <div class="pf-v6-c-form__group-control">
857
+ <div class="pf-v6-c-form__actions">
858
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
859
+ <button
860
+ class="pf-v6-c-button pf-m-secondary"
861
+ type="reset"
862
+ >Cancel</button>
863
+ </div>
857
864
  </div>
858
865
  </div>
859
- </div>
860
- </form>
861
- </section>
862
- </main>
866
+ </form>
867
+ </section>
868
+ </main>
869
+ </div>
863
870
  </div>
864
871
 
865
872
  ```
@@ -1087,102 +1094,142 @@ section: components
1087
1094
  </nav>
1088
1095
  </div>
1089
1096
  </div>
1090
- <main
1091
- class="pf-v6-c-page__main"
1092
- tabindex="-1"
1093
- id="main-content-alert-stacked-example"
1094
- >
1095
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1096
- <div class="pf-v6-c-page__main-body">
1097
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1098
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1099
- <li class="pf-v6-c-breadcrumb__item">
1100
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1101
- </li>
1102
- <li class="pf-v6-c-breadcrumb__item">
1103
- <span class="pf-v6-c-breadcrumb__item-divider">
1104
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1105
- </span>
1097
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1098
+ <main
1099
+ class="pf-v6-c-page__main"
1100
+ tabindex="-1"
1101
+ id="main-content-alert-stacked-example"
1102
+ >
1103
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1104
+ <div class="pf-v6-c-page__main-body">
1105
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1106
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1107
+ <li class="pf-v6-c-breadcrumb__item">
1108
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1109
+ </li>
1110
+ <li class="pf-v6-c-breadcrumb__item">
1111
+ <span class="pf-v6-c-breadcrumb__item-divider">
1112
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1113
+ </span>
1106
1114
 
1107
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1108
- </li>
1109
- <li class="pf-v6-c-breadcrumb__item">
1110
- <span class="pf-v6-c-breadcrumb__item-divider">
1111
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1112
- </span>
1115
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1116
+ </li>
1117
+ <li class="pf-v6-c-breadcrumb__item">
1118
+ <span class="pf-v6-c-breadcrumb__item-divider">
1119
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1120
+ </span>
1113
1121
 
1114
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1115
- </li>
1116
- <li class="pf-v6-c-breadcrumb__item">
1117
- <span class="pf-v6-c-breadcrumb__item-divider">
1118
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1119
- </span>
1122
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1123
+ </li>
1124
+ <li class="pf-v6-c-breadcrumb__item">
1125
+ <span class="pf-v6-c-breadcrumb__item-divider">
1126
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1127
+ </span>
1120
1128
 
1121
- <a
1122
- href="#"
1123
- class="pf-v6-c-breadcrumb__link pf-m-current"
1124
- aria-current="page"
1125
- >Section landing</a>
1126
- </li>
1127
- </ol>
1128
- </nav>
1129
- </div>
1130
- </section>
1131
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1132
- <div class="pf-v6-c-page__main-body">
1133
- <div class="pf-v6-c-content">
1134
- <h1>Main title</h1>
1135
- <p>This is a full page demo.</p>
1129
+ <a
1130
+ href="#"
1131
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1132
+ aria-current="page"
1133
+ >Section landing</a>
1134
+ </li>
1135
+ </ol>
1136
+ </nav>
1136
1137
  </div>
1137
- </div>
1138
- </section>
1139
- <section class="pf-v6-c-page__main-section pf-m-light">
1140
- <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1141
- <div class="pf-v6-c-form__alert">
1142
- <div
1143
- class="pf-v6-c-alert pf-m-danger pf-m-inline"
1144
- aria-label="Inline danger alert"
1145
- >
1146
- <div class="pf-v6-c-alert__icon">
1147
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1148
- </div>
1149
- <p class="pf-v6-c-alert__title">
1150
- <span class="pf-v6-screen-reader">Danger alert:</span>
1151
- Fill out all required fields before continuing.
1152
- </p>
1138
+ </section>
1139
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1140
+ <div class="pf-v6-c-page__main-body">
1141
+ <div class="pf-v6-c-content">
1142
+ <h1>Main title</h1>
1143
+ <p>This is a full page demo.</p>
1153
1144
  </div>
1154
1145
  </div>
1155
- <div class="pf-v6-c-form__group">
1156
- <div class="pf-v6-c-form__group-label"><label
1157
- class="pf-v6-c-form__label"
1158
- for="alert-stacked-example-form-name"
1146
+ </section>
1147
+ <section class="pf-v6-c-page__main-section pf-m-light">
1148
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1149
+ <div class="pf-v6-c-form__alert">
1150
+ <div
1151
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
1152
+ aria-label="Inline danger alert"
1159
1153
  >
1160
- <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span
1161
- class="pf-v6-c-form__label-required"
1162
- aria-hidden="true"
1163
- >&#42;</span></label>
1154
+ <div class="pf-v6-c-alert__icon">
1155
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1156
+ </div>
1157
+ <p class="pf-v6-c-alert__title">
1158
+ <span class="pf-v6-screen-reader">Danger alert:</span>
1159
+ Fill out all required fields before continuing.
1160
+ </p>
1161
+ </div>
1164
1162
  </div>
1165
- <div class="pf-v6-c-form__group-control">
1166
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1167
- <input
1168
- required
1169
- type="text"
1170
- id="alert-stacked-example-form-name"
1171
- name="alert-stacked-example-form-name"
1172
- aria-invalid="true"
1173
- aria-describedby="alert-stacked-example-form-helper"
1174
- />
1175
- <span class="pf-v6-c-form-control__utilities">
1176
- <span class="pf-v6-c-form-control__icon pf-m-status">
1177
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1163
+ <div class="pf-v6-c-form__group">
1164
+ <div class="pf-v6-c-form__group-label"><label
1165
+ class="pf-v6-c-form__label"
1166
+ for="alert-stacked-example-form-name"
1167
+ >
1168
+ <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span
1169
+ class="pf-v6-c-form__label-required"
1170
+ aria-hidden="true"
1171
+ >&#42;</span></label>
1172
+ </div>
1173
+ <div class="pf-v6-c-form__group-control">
1174
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1175
+ <input
1176
+ required
1177
+ type="text"
1178
+ id="alert-stacked-example-form-name"
1179
+ name="alert-stacked-example-form-name"
1180
+ aria-invalid="true"
1181
+ aria-describedby="alert-stacked-example-form-helper"
1182
+ />
1183
+ <span class="pf-v6-c-form-control__utilities">
1184
+ <span class="pf-v6-c-form-control__icon pf-m-status">
1185
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1186
+ </span>
1178
1187
  </span>
1179
1188
  </span>
1180
- </span>
1189
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1190
+ <div class="pf-v6-c-helper-text">
1191
+ <div
1192
+ class="pf-v6-c-helper-text__item pf-m-error"
1193
+ id="alert-stacked-example-form-name-helper"
1194
+ >
1195
+ <span class="pf-v6-c-helper-text__item-icon">
1196
+ <i
1197
+ class="fas fa-fw fa-exclamation-circle"
1198
+ aria-hidden="true"
1199
+ ></i>
1200
+ </span>
1201
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
1202
+ </div>
1203
+ </div>
1204
+ </div>
1205
+ </div>
1206
+ </div>
1207
+ <div class="pf-v6-c-form__group">
1208
+ <div class="pf-v6-c-form__group-label"><label
1209
+ class="pf-v6-c-form__label"
1210
+ for="alert-stacked-example-form-email"
1211
+ >
1212
+ <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
1213
+ class="pf-v6-c-form__label-required"
1214
+ aria-hidden="true"
1215
+ >&#42;</span></label>
1216
+ </div>
1217
+ <div class="pf-v6-c-form__group-control">
1218
+ <span class="pf-v6-c-form-control pf-m-required">
1219
+ <input
1220
+ required
1221
+ type="text"
1222
+ value="patternfly.com"
1223
+ id="alert-stacked-example-form-email"
1224
+ name="alert-stacked-example-form-email"
1225
+ />
1226
+ </span>
1227
+ </div>
1181
1228
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
1182
1229
  <div class="pf-v6-c-helper-text">
1183
1230
  <div
1184
1231
  class="pf-v6-c-helper-text__item pf-m-error"
1185
- id="alert-stacked-example-form-name-helper"
1232
+ id="alert-stacked-example-form-email-helper"
1186
1233
  >
1187
1234
  <span class="pf-v6-c-helper-text__item-icon">
1188
1235
  <i
@@ -1190,122 +1237,56 @@ section: components
1190
1237
  aria-hidden="true"
1191
1238
  ></i>
1192
1239
  </span>
1193
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
1240
+ <span
1241
+ class="pf-v6-c-helper-text__item-text"
1242
+ >Enter a valid email address: example@gmail.com</span>
1194
1243
  </div>
1195
1244
  </div>
1196
1245
  </div>
1197
1246
  </div>
1198
- </div>
1199
- <div class="pf-v6-c-form__group">
1200
- <div class="pf-v6-c-form__group-label"><label
1201
- class="pf-v6-c-form__label"
1202
- for="alert-stacked-example-form-email"
1203
- >
1204
- <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
1205
- class="pf-v6-c-form__label-required"
1206
- aria-hidden="true"
1207
- >&#42;</span></label>
1208
- </div>
1209
- <div class="pf-v6-c-form__group-control">
1210
- <span class="pf-v6-c-form-control pf-m-required">
1211
- <input
1247
+ <div class="pf-v6-c-form__group">
1248
+ <div class="pf-v6-c-form__group-label"><label
1249
+ class="pf-v6-c-form__label"
1250
+ for="alert-stacked-example-form-state"
1251
+ >
1252
+ <span class="pf-v6-c-form__label-text">State of residence</span>&nbsp;<span
1253
+ class="pf-v6-c-form__label-required"
1254
+ aria-hidden="true"
1255
+ >&#42;</span></label>
1256
+ </div>
1257
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1258
+ <select
1259
+ class
1212
1260
  required
1213
- type="text"
1214
- value="patternfly.com"
1215
- id="alert-stacked-example-form-email"
1216
- name="alert-stacked-example-form-email"
1217
- />
1218
- </span>
1219
- </div>
1220
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
1221
- <div class="pf-v6-c-helper-text">
1222
- <div
1223
- class="pf-v6-c-helper-text__item pf-m-error"
1224
- id="alert-stacked-example-form-email-helper"
1261
+ aria-invalid="true"
1262
+ id="select-group-error"
1263
+ name="select-group-error"
1264
+ aria-label="Error state select group example"
1225
1265
  >
1226
- <span class="pf-v6-c-helper-text__item-icon">
1227
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1266
+ <option value>Select a state</option>
1267
+ <option value="Option 1">CA</option>
1268
+ <option value="Option 2">FL</option>
1269
+ <option value="Option 3">MA</option>
1270
+ <option value="Option 4">NY</option>
1271
+ </select>
1272
+ <span class="pf-v6-c-form-control__utilities">
1273
+ <span class="pf-v6-c-form-control__icon pf-m-status">
1274
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1275
+ </span>
1276
+ <span class="pf-v6-c-form-control__toggle-icon">
1277
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1228
1278
  </span>
1229
- <span
1230
- class="pf-v6-c-helper-text__item-text"
1231
- >Enter a valid email address: example@gmail.com</span>
1232
- </div>
1233
- </div>
1234
- </div>
1235
- </div>
1236
- <div class="pf-v6-c-form__group">
1237
- <div class="pf-v6-c-form__group-label"><label
1238
- class="pf-v6-c-form__label"
1239
- for="alert-stacked-example-form-state"
1240
- >
1241
- <span class="pf-v6-c-form__label-text">State of residence</span>&nbsp;<span
1242
- class="pf-v6-c-form__label-required"
1243
- aria-hidden="true"
1244
- >&#42;</span></label>
1245
- </div>
1246
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1247
- <select
1248
- class
1249
- required
1250
- aria-invalid="true"
1251
- id="select-group-error"
1252
- name="select-group-error"
1253
- aria-label="Error state select group example"
1254
- >
1255
- <option value>Select a state</option>
1256
- <option value="Option 1">CA</option>
1257
- <option value="Option 2">FL</option>
1258
- <option value="Option 3">MA</option>
1259
- <option value="Option 4">NY</option>
1260
- </select>
1261
- <span class="pf-v6-c-form-control__utilities">
1262
- <span class="pf-v6-c-form-control__icon pf-m-status">
1263
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1264
- </span>
1265
- <span class="pf-v6-c-form-control__toggle-icon">
1266
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1267
1279
  </span>
1268
1280
  </span>
1269
- </span>
1270
- <div
1271
- class="pf-v6-c-form__helper-text"
1272
- aria-live="polite"
1273
- id="alert-stacked-example-form-state-form-email-helper-state"
1274
- >
1275
- <div class="pf-v6-c-helper-text">
1276
- <div
1277
- class="pf-v6-c-helper-text__item pf-m-error"
1278
- id="alert-stacked-example-form-state-helper"
1279
- >
1280
- <span class="pf-v6-c-helper-text__item-icon">
1281
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1282
- </span>
1283
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
1284
- </div>
1285
- </div>
1286
- </div>
1287
- </div>
1288
- <div
1289
- class="pf-v6-c-form__group"
1290
- role="group"
1291
- aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1292
- >
1293
- <div
1294
- class="pf-v6-c-form__group-label pf-m-no-padding-top"
1295
- id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1296
- ><span
1297
- class="pf-v6-c-form__label"
1298
- for="alert-stacked-example-form-check-group"
1281
+ <div
1282
+ class="pf-v6-c-form__helper-text"
1283
+ aria-live="polite"
1284
+ id="alert-stacked-example-form-state-form-email-helper-state"
1299
1285
  >
1300
- <span class="pf-v6-c-form__label-text">How can we contact you?</span>&nbsp;<span
1301
- class="pf-v6-c-form__label-required"
1302
- aria-hidden="true"
1303
- >&#42;</span></span>
1304
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
1305
1286
  <div class="pf-v6-c-helper-text">
1306
1287
  <div
1307
1288
  class="pf-v6-c-helper-text__item pf-m-error"
1308
- id="alert-stacked-example-form-check-group-helper"
1289
+ id="alert-stacked-example-form-state-helper"
1309
1290
  >
1310
1291
  <span class="pf-v6-c-helper-text__item-icon">
1311
1292
  <i
@@ -1313,57 +1294,103 @@ section: components
1313
1294
  aria-hidden="true"
1314
1295
  ></i>
1315
1296
  </span>
1316
- <span
1317
- class="pf-v6-c-helper-text__item-text"
1318
- >This is a required field</span>
1297
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
1319
1298
  </div>
1320
1299
  </div>
1321
1300
  </div>
1322
1301
  </div>
1323
- <div class="pf-v6-c-form__group-control pf-m-inline">
1324
- <div class="pf-v6-c-check">
1325
- <input
1326
- class="pf-v6-c-check__input"
1327
- type="checkbox"
1328
- id="alt-form-checkbox1"
1329
- name="alt-form-checkbox1"
1330
- />
1331
-
1332
- <label class="pf-v6-c-check__label" for="alt-form-checkbox1">Email</label>
1302
+ <div
1303
+ class="pf-v6-c-form__group"
1304
+ role="group"
1305
+ aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1306
+ >
1307
+ <div
1308
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
1309
+ id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1310
+ ><span
1311
+ class="pf-v6-c-form__label"
1312
+ for="alert-stacked-example-form-check-group"
1313
+ >
1314
+ <span class="pf-v6-c-form__label-text">How can we contact you?</span>&nbsp;<span
1315
+ class="pf-v6-c-form__label-required"
1316
+ aria-hidden="true"
1317
+ >&#42;</span></span>
1318
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1319
+ <div class="pf-v6-c-helper-text">
1320
+ <div
1321
+ class="pf-v6-c-helper-text__item pf-m-error"
1322
+ id="alert-stacked-example-form-check-group-helper"
1323
+ >
1324
+ <span class="pf-v6-c-helper-text__item-icon">
1325
+ <i
1326
+ class="fas fa-fw fa-exclamation-circle"
1327
+ aria-hidden="true"
1328
+ ></i>
1329
+ </span>
1330
+ <span
1331
+ class="pf-v6-c-helper-text__item-text"
1332
+ >This is a required field</span>
1333
+ </div>
1334
+ </div>
1335
+ </div>
1333
1336
  </div>
1334
- <div class="pf-v6-c-check">
1335
- <input
1336
- class="pf-v6-c-check__input"
1337
- type="checkbox"
1338
- id="alt-form-checkbox2"
1339
- name="alt-form-checkbox2"
1340
- />
1337
+ <div class="pf-v6-c-form__group-control pf-m-inline">
1338
+ <div class="pf-v6-c-check">
1339
+ <input
1340
+ class="pf-v6-c-check__input"
1341
+ type="checkbox"
1342
+ id="alt-form-checkbox1"
1343
+ name="alt-form-checkbox1"
1344
+ />
1341
1345
 
1342
- <label class="pf-v6-c-check__label" for="alt-form-checkbox2">Phone</label>
1343
- </div>
1344
- <div class="pf-v6-c-check">
1345
- <input
1346
- class="pf-v6-c-check__input"
1347
- type="checkbox"
1348
- id="alt-form-checkbox3"
1349
- name="alt-form-checkbox3"
1350
- />
1346
+ <label
1347
+ class="pf-v6-c-check__label"
1348
+ for="alt-form-checkbox1"
1349
+ >Email</label>
1350
+ </div>
1351
+ <div class="pf-v6-c-check">
1352
+ <input
1353
+ class="pf-v6-c-check__input"
1354
+ type="checkbox"
1355
+ id="alt-form-checkbox2"
1356
+ name="alt-form-checkbox2"
1357
+ />
1358
+
1359
+ <label
1360
+ class="pf-v6-c-check__label"
1361
+ for="alt-form-checkbox2"
1362
+ >Phone</label>
1363
+ </div>
1364
+ <div class="pf-v6-c-check">
1365
+ <input
1366
+ class="pf-v6-c-check__input"
1367
+ type="checkbox"
1368
+ id="alt-form-checkbox3"
1369
+ name="alt-form-checkbox3"
1370
+ />
1351
1371
 
1352
- <label class="pf-v6-c-check__label" for="alt-form-checkbox3">Mail</label>
1372
+ <label
1373
+ class="pf-v6-c-check__label"
1374
+ for="alt-form-checkbox3"
1375
+ >Mail</label>
1376
+ </div>
1353
1377
  </div>
1354
1378
  </div>
1355
- </div>
1356
- <div class="pf-v6-c-form__group pf-m-action">
1357
- <div class="pf-v6-c-form__group-control">
1358
- <div class="pf-v6-c-form__actions">
1359
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1360
- <button class="pf-v6-c-button pf-m-secondary" type="reset">Cancel</button>
1379
+ <div class="pf-v6-c-form__group pf-m-action">
1380
+ <div class="pf-v6-c-form__group-control">
1381
+ <div class="pf-v6-c-form__actions">
1382
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1383
+ <button
1384
+ class="pf-v6-c-button pf-m-secondary"
1385
+ type="reset"
1386
+ >Cancel</button>
1387
+ </div>
1361
1388
  </div>
1362
1389
  </div>
1363
- </div>
1364
- </form>
1365
- </section>
1366
- </main>
1390
+ </form>
1391
+ </section>
1392
+ </main>
1393
+ </div>
1367
1394
  </div>
1368
1395
 
1369
1396
  ```