@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.104
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.
- package/components/Drawer/drawer.css +5 -4
- package/components/Drawer/drawer.scss +7 -6
- package/components/Page/page.css +24 -23
- package/components/Page/page.scss +24 -23
- package/docs/components/Drawer/examples/Drawer.md +2 -1
- package/docs/components/Page/deprecated/PageHeader.md +113 -99
- package/docs/components/Page/examples/Page.md +114 -100
- package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
- package/docs/demos/Alert/examples/Alert.md +551 -524
- package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
- package/docs/demos/Banner/examples/Banner.md +420 -412
- package/docs/demos/CardView/examples/CardView.md +1302 -1297
- package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
- package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
- package/docs/demos/DataList/examples/DataList.md +3006 -2958
- package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
- package/docs/demos/Drawer/examples/Drawer.md +544 -528
- package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
- package/docs/demos/Masthead/examples/Masthead.md +729 -711
- package/docs/demos/Modal/examples/Modal.md +486 -474
- package/docs/demos/Nav/examples/Nav.md +528 -510
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
- package/docs/demos/Page/examples/Page.md +1656 -1633
- package/docs/demos/Page/examples/Penta.md +632 -577
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
- package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
- package/docs/demos/Table/examples/Table.md +14137 -13972
- package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
- package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
- package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
- package/package.json +1 -1
- package/patternfly-no-globals.css +29 -27
- package/patternfly-theme-dark-unversioned.css +29 -27
- package/patternfly.css +29 -27
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -226,92 +226,94 @@ section: components
|
|
|
226
226
|
</nav>
|
|
227
227
|
</div>
|
|
228
228
|
</div>
|
|
229
|
-
<
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
<
|
|
236
|
-
<
|
|
237
|
-
<
|
|
238
|
-
<
|
|
239
|
-
<
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
<
|
|
243
|
-
<
|
|
244
|
-
|
|
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
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
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
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
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
|
-
</
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
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
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
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
|
-
</
|
|
313
|
-
</
|
|
314
|
-
</
|
|
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
|
-
<
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
<
|
|
620
|
-
<
|
|
621
|
-
<
|
|
622
|
-
<
|
|
623
|
-
<
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
<
|
|
627
|
-
<
|
|
628
|
-
|
|
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
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
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
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
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
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
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
|
-
</
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
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
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
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
|
-
<
|
|
684
|
-
class="
|
|
685
|
-
|
|
686
|
-
|
|
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
|
|
689
|
-
<
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
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> <span
|
|
687
|
+
class="pf-v6-c-form__label-required"
|
|
688
|
+
aria-hidden="true"
|
|
689
|
+
>*</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
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
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
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
</
|
|
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> <span
|
|
750
|
-
class="pf-v6-c-form__label-required"
|
|
751
|
-
aria-hidden="true"
|
|
752
|
-
>*</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> <span
|
|
731
|
+
class="pf-v6-c-form__label-required"
|
|
732
|
+
aria-hidden="true"
|
|
733
|
+
>*</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
|
|
755
|
-
<
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
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> <span
|
|
753
|
+
class="pf-v6-c-form__label-required"
|
|
754
|
+
aria-hidden="true"
|
|
755
|
+
>*</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
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
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
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
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> <span
|
|
804
|
+
class="pf-v6-c-form__label-required"
|
|
805
|
+
aria-hidden="true"
|
|
806
|
+
>*</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
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
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
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
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
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
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
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
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
|
-
</
|
|
860
|
-
</
|
|
861
|
-
</
|
|
862
|
-
</
|
|
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
|
-
<
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
<
|
|
1097
|
-
<
|
|
1098
|
-
<
|
|
1099
|
-
<
|
|
1100
|
-
<
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
<
|
|
1104
|
-
<
|
|
1105
|
-
|
|
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
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
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
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
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
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
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
|
-
</
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
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
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
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
|
-
<
|
|
1161
|
-
class="
|
|
1162
|
-
|
|
1163
|
-
|
|
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
|
|
1166
|
-
<
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
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> <span
|
|
1169
|
+
class="pf-v6-c-form__label-required"
|
|
1170
|
+
aria-hidden="true"
|
|
1171
|
+
>*</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
|
-
|
|
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> <span
|
|
1213
|
+
class="pf-v6-c-form__label-required"
|
|
1214
|
+
aria-hidden="true"
|
|
1215
|
+
>*</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-
|
|
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
|
|
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
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
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> <span
|
|
1253
|
+
class="pf-v6-c-form__label-required"
|
|
1254
|
+
aria-hidden="true"
|
|
1255
|
+
>*</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
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
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
|
-
<
|
|
1227
|
-
|
|
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> <span
|
|
1242
|
-
class="pf-v6-c-form__label-required"
|
|
1243
|
-
aria-hidden="true"
|
|
1244
|
-
>*</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
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
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> <span
|
|
1301
|
-
class="pf-v6-c-form__label-required"
|
|
1302
|
-
aria-hidden="true"
|
|
1303
|
-
>*</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-
|
|
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
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
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> <span
|
|
1315
|
+
class="pf-v6-c-form__label-required"
|
|
1316
|
+
aria-hidden="true"
|
|
1317
|
+
>*</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-
|
|
1335
|
-
<
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
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
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
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
|
-
</
|
|
1364
|
-
</
|
|
1365
|
-
</
|
|
1366
|
-
</
|
|
1390
|
+
</form>
|
|
1391
|
+
</section>
|
|
1392
|
+
</main>
|
|
1393
|
+
</div>
|
|
1367
1394
|
</div>
|
|
1368
1395
|
|
|
1369
1396
|
```
|