@patternfly/patternfly 6.0.0-alpha.102 → 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/Check/check.css +2 -2
- package/components/Check/check.scss +2 -2
- 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/components/Table/table.css +0 -37
- package/components/Table/table.scss +0 -49
- 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 +31 -66
- package/patternfly-theme-dark-unversioned.css +31 -66
- package/patternfly.css +31 -66
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -232,103 +232,105 @@ wrapperTag: div
|
|
|
232
232
|
<div class="pf-v6-c-drawer__main">
|
|
233
233
|
<div class="pf-v6-c-drawer__content">
|
|
234
234
|
<div class="pf-v6-c-drawer__body">
|
|
235
|
-
<
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
<
|
|
242
|
-
<
|
|
243
|
-
<
|
|
244
|
-
<
|
|
245
|
-
<
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
<
|
|
252
|
-
<
|
|
253
|
-
|
|
235
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
236
|
+
<main
|
|
237
|
+
class="pf-v6-c-page__main"
|
|
238
|
+
tabindex="-1"
|
|
239
|
+
id="main-content-drawer-collapsed-example"
|
|
240
|
+
>
|
|
241
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
242
|
+
<div class="pf-v6-c-page__main-body">
|
|
243
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
244
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
245
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
246
|
+
<a
|
|
247
|
+
href="#"
|
|
248
|
+
class="pf-v6-c-breadcrumb__link"
|
|
249
|
+
>Section home</a>
|
|
250
|
+
</li>
|
|
251
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
252
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
253
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
254
|
+
</span>
|
|
254
255
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
256
|
+
<a
|
|
257
|
+
href="#"
|
|
258
|
+
class="pf-v6-c-breadcrumb__link"
|
|
259
|
+
>Section title</a>
|
|
260
|
+
</li>
|
|
261
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
262
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
263
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
264
|
+
</span>
|
|
264
265
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
266
|
+
<a
|
|
267
|
+
href="#"
|
|
268
|
+
class="pf-v6-c-breadcrumb__link"
|
|
269
|
+
>Section title</a>
|
|
270
|
+
</li>
|
|
271
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
272
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
273
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
274
|
+
</span>
|
|
274
275
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
</div>
|
|
284
|
-
</section>
|
|
285
|
-
<section
|
|
286
|
-
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
287
|
-
>
|
|
288
|
-
<div class="pf-v6-c-page__main-body">
|
|
289
|
-
<div class="pf-v6-c-content">
|
|
290
|
-
<h1>Main title</h1>
|
|
291
|
-
<p>This is a full page demo.</p>
|
|
276
|
+
<a
|
|
277
|
+
href="#"
|
|
278
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
279
|
+
aria-current="page"
|
|
280
|
+
>Section landing</a>
|
|
281
|
+
</li>
|
|
282
|
+
</ol>
|
|
283
|
+
</nav>
|
|
292
284
|
</div>
|
|
293
|
-
</
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
<div class="pf-v6-
|
|
298
|
-
<div class="pf-v6-c-
|
|
299
|
-
<
|
|
300
|
-
|
|
301
|
-
<div class="pf-v6-c-card">
|
|
302
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
303
|
-
</div>
|
|
304
|
-
<div class="pf-v6-c-card">
|
|
305
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
306
|
-
</div>
|
|
307
|
-
<div class="pf-v6-c-card">
|
|
308
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
309
|
-
</div>
|
|
310
|
-
<div class="pf-v6-c-card">
|
|
311
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
312
|
-
</div>
|
|
313
|
-
<div class="pf-v6-c-card">
|
|
314
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
315
|
-
</div>
|
|
316
|
-
<div class="pf-v6-c-card">
|
|
317
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
318
|
-
</div>
|
|
319
|
-
<div class="pf-v6-c-card">
|
|
320
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
321
|
-
</div>
|
|
322
|
-
<div class="pf-v6-c-card">
|
|
323
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
285
|
+
</section>
|
|
286
|
+
<section
|
|
287
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
288
|
+
>
|
|
289
|
+
<div class="pf-v6-c-page__main-body">
|
|
290
|
+
<div class="pf-v6-c-content">
|
|
291
|
+
<h1>Main title</h1>
|
|
292
|
+
<p>This is a full page demo.</p>
|
|
324
293
|
</div>
|
|
325
|
-
|
|
326
|
-
|
|
294
|
+
</div>
|
|
295
|
+
</section>
|
|
296
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
297
|
+
<div class="pf-v6-c-page__main-body">
|
|
298
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
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>
|
|
304
|
+
</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>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="pf-v6-c-card">
|
|
312
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="pf-v6-c-card">
|
|
315
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
316
|
+
</div>
|
|
317
|
+
<div class="pf-v6-c-card">
|
|
318
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
319
|
+
</div>
|
|
320
|
+
<div class="pf-v6-c-card">
|
|
321
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
322
|
+
</div>
|
|
323
|
+
<div class="pf-v6-c-card">
|
|
324
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
325
|
+
</div>
|
|
326
|
+
<div class="pf-v6-c-card">
|
|
327
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
328
|
+
</div>
|
|
327
329
|
</div>
|
|
328
330
|
</div>
|
|
329
|
-
</
|
|
330
|
-
</
|
|
331
|
-
</
|
|
331
|
+
</section>
|
|
332
|
+
</main>
|
|
333
|
+
</div>
|
|
332
334
|
</div>
|
|
333
335
|
</div>
|
|
334
336
|
<div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg" hidden>
|
|
@@ -758,103 +760,105 @@ wrapperTag: div
|
|
|
758
760
|
<div class="pf-v6-c-drawer__main">
|
|
759
761
|
<div class="pf-v6-c-drawer__content">
|
|
760
762
|
<div class="pf-v6-c-drawer__body">
|
|
761
|
-
<
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
<
|
|
768
|
-
<
|
|
769
|
-
<
|
|
770
|
-
<
|
|
771
|
-
<
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
<
|
|
778
|
-
<
|
|
779
|
-
|
|
763
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
764
|
+
<main
|
|
765
|
+
class="pf-v6-c-page__main"
|
|
766
|
+
tabindex="-1"
|
|
767
|
+
id="main-content-drawer-expanded-example"
|
|
768
|
+
>
|
|
769
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
770
|
+
<div class="pf-v6-c-page__main-body">
|
|
771
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
772
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
773
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
774
|
+
<a
|
|
775
|
+
href="#"
|
|
776
|
+
class="pf-v6-c-breadcrumb__link"
|
|
777
|
+
>Section home</a>
|
|
778
|
+
</li>
|
|
779
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
780
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
781
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
782
|
+
</span>
|
|
780
783
|
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
784
|
+
<a
|
|
785
|
+
href="#"
|
|
786
|
+
class="pf-v6-c-breadcrumb__link"
|
|
787
|
+
>Section title</a>
|
|
788
|
+
</li>
|
|
789
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
790
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
791
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
792
|
+
</span>
|
|
790
793
|
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
794
|
+
<a
|
|
795
|
+
href="#"
|
|
796
|
+
class="pf-v6-c-breadcrumb__link"
|
|
797
|
+
>Section title</a>
|
|
798
|
+
</li>
|
|
799
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
800
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
801
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
802
|
+
</span>
|
|
800
803
|
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
</div>
|
|
810
|
-
</section>
|
|
811
|
-
<section
|
|
812
|
-
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
813
|
-
>
|
|
814
|
-
<div class="pf-v6-c-page__main-body">
|
|
815
|
-
<div class="pf-v6-c-content">
|
|
816
|
-
<h1>Main title</h1>
|
|
817
|
-
<p>This is a full page demo.</p>
|
|
804
|
+
<a
|
|
805
|
+
href="#"
|
|
806
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
807
|
+
aria-current="page"
|
|
808
|
+
>Section landing</a>
|
|
809
|
+
</li>
|
|
810
|
+
</ol>
|
|
811
|
+
</nav>
|
|
818
812
|
</div>
|
|
819
|
-
</
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
<div class="pf-v6-
|
|
824
|
-
<div class="pf-v6-c-
|
|
825
|
-
<
|
|
826
|
-
|
|
827
|
-
<div class="pf-v6-c-card">
|
|
828
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
829
|
-
</div>
|
|
830
|
-
<div class="pf-v6-c-card">
|
|
831
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
832
|
-
</div>
|
|
833
|
-
<div class="pf-v6-c-card">
|
|
834
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
835
|
-
</div>
|
|
836
|
-
<div class="pf-v6-c-card">
|
|
837
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
838
|
-
</div>
|
|
839
|
-
<div class="pf-v6-c-card">
|
|
840
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
841
|
-
</div>
|
|
842
|
-
<div class="pf-v6-c-card">
|
|
843
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
844
|
-
</div>
|
|
845
|
-
<div class="pf-v6-c-card">
|
|
846
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
847
|
-
</div>
|
|
848
|
-
<div class="pf-v6-c-card">
|
|
849
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
813
|
+
</section>
|
|
814
|
+
<section
|
|
815
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
816
|
+
>
|
|
817
|
+
<div class="pf-v6-c-page__main-body">
|
|
818
|
+
<div class="pf-v6-c-content">
|
|
819
|
+
<h1>Main title</h1>
|
|
820
|
+
<p>This is a full page demo.</p>
|
|
850
821
|
</div>
|
|
851
|
-
|
|
852
|
-
|
|
822
|
+
</div>
|
|
823
|
+
</section>
|
|
824
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
825
|
+
<div class="pf-v6-c-page__main-body">
|
|
826
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
827
|
+
<div class="pf-v6-c-card">
|
|
828
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
829
|
+
</div>
|
|
830
|
+
<div class="pf-v6-c-card">
|
|
831
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
832
|
+
</div>
|
|
833
|
+
<div class="pf-v6-c-card">
|
|
834
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
835
|
+
</div>
|
|
836
|
+
<div class="pf-v6-c-card">
|
|
837
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
838
|
+
</div>
|
|
839
|
+
<div class="pf-v6-c-card">
|
|
840
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
841
|
+
</div>
|
|
842
|
+
<div class="pf-v6-c-card">
|
|
843
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
844
|
+
</div>
|
|
845
|
+
<div class="pf-v6-c-card">
|
|
846
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
847
|
+
</div>
|
|
848
|
+
<div class="pf-v6-c-card">
|
|
849
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
850
|
+
</div>
|
|
851
|
+
<div class="pf-v6-c-card">
|
|
852
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
853
|
+
</div>
|
|
854
|
+
<div class="pf-v6-c-card">
|
|
855
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
856
|
+
</div>
|
|
853
857
|
</div>
|
|
854
858
|
</div>
|
|
855
|
-
</
|
|
856
|
-
</
|
|
857
|
-
</
|
|
859
|
+
</section>
|
|
860
|
+
</main>
|
|
861
|
+
</div>
|
|
858
862
|
</div>
|
|
859
863
|
</div>
|
|
860
864
|
<div class="pf-v6-c-drawer__panel">
|
|
@@ -1095,103 +1099,105 @@ wrapperTag: div
|
|
|
1095
1099
|
<div class="pf-v6-c-drawer__main">
|
|
1096
1100
|
<div class="pf-v6-c-drawer__content">
|
|
1097
1101
|
<div class="pf-v6-c-drawer__body">
|
|
1098
|
-
<
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
<
|
|
1105
|
-
<
|
|
1106
|
-
<
|
|
1107
|
-
<
|
|
1108
|
-
<
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
<
|
|
1115
|
-
<
|
|
1116
|
-
|
|
1102
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
1103
|
+
<main
|
|
1104
|
+
class="pf-v6-c-page__main"
|
|
1105
|
+
tabindex="-1"
|
|
1106
|
+
id="main-content-drawer-expanded-bottom-example"
|
|
1107
|
+
>
|
|
1108
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
1109
|
+
<div class="pf-v6-c-page__main-body">
|
|
1110
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
1111
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
1112
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1113
|
+
<a
|
|
1114
|
+
href="#"
|
|
1115
|
+
class="pf-v6-c-breadcrumb__link"
|
|
1116
|
+
>Section home</a>
|
|
1117
|
+
</li>
|
|
1118
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1119
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1120
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1121
|
+
</span>
|
|
1117
1122
|
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1123
|
+
<a
|
|
1124
|
+
href="#"
|
|
1125
|
+
class="pf-v6-c-breadcrumb__link"
|
|
1126
|
+
>Section title</a>
|
|
1127
|
+
</li>
|
|
1128
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1129
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1130
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1131
|
+
</span>
|
|
1127
1132
|
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1133
|
+
<a
|
|
1134
|
+
href="#"
|
|
1135
|
+
class="pf-v6-c-breadcrumb__link"
|
|
1136
|
+
>Section title</a>
|
|
1137
|
+
</li>
|
|
1138
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
1139
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
1140
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1141
|
+
</span>
|
|
1137
1142
|
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
</div>
|
|
1147
|
-
</section>
|
|
1148
|
-
<section
|
|
1149
|
-
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
1150
|
-
>
|
|
1151
|
-
<div class="pf-v6-c-page__main-body">
|
|
1152
|
-
<div class="pf-v6-c-content">
|
|
1153
|
-
<h1>Main title</h1>
|
|
1154
|
-
<p>This is a full page demo.</p>
|
|
1143
|
+
<a
|
|
1144
|
+
href="#"
|
|
1145
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
1146
|
+
aria-current="page"
|
|
1147
|
+
>Section landing</a>
|
|
1148
|
+
</li>
|
|
1149
|
+
</ol>
|
|
1150
|
+
</nav>
|
|
1155
1151
|
</div>
|
|
1156
|
-
</
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
<div class="pf-v6-
|
|
1161
|
-
<div class="pf-v6-c-
|
|
1162
|
-
<
|
|
1163
|
-
|
|
1164
|
-
<div class="pf-v6-c-card">
|
|
1165
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1166
|
-
</div>
|
|
1167
|
-
<div class="pf-v6-c-card">
|
|
1168
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1169
|
-
</div>
|
|
1170
|
-
<div class="pf-v6-c-card">
|
|
1171
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1172
|
-
</div>
|
|
1173
|
-
<div class="pf-v6-c-card">
|
|
1174
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1175
|
-
</div>
|
|
1176
|
-
<div class="pf-v6-c-card">
|
|
1177
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1178
|
-
</div>
|
|
1179
|
-
<div class="pf-v6-c-card">
|
|
1180
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1181
|
-
</div>
|
|
1182
|
-
<div class="pf-v6-c-card">
|
|
1183
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1184
|
-
</div>
|
|
1185
|
-
<div class="pf-v6-c-card">
|
|
1186
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1152
|
+
</section>
|
|
1153
|
+
<section
|
|
1154
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
|
|
1155
|
+
>
|
|
1156
|
+
<div class="pf-v6-c-page__main-body">
|
|
1157
|
+
<div class="pf-v6-c-content">
|
|
1158
|
+
<h1>Main title</h1>
|
|
1159
|
+
<p>This is a full page demo.</p>
|
|
1187
1160
|
</div>
|
|
1188
|
-
|
|
1189
|
-
|
|
1161
|
+
</div>
|
|
1162
|
+
</section>
|
|
1163
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
1164
|
+
<div class="pf-v6-c-page__main-body">
|
|
1165
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
1166
|
+
<div class="pf-v6-c-card">
|
|
1167
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1168
|
+
</div>
|
|
1169
|
+
<div class="pf-v6-c-card">
|
|
1170
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1171
|
+
</div>
|
|
1172
|
+
<div class="pf-v6-c-card">
|
|
1173
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1174
|
+
</div>
|
|
1175
|
+
<div class="pf-v6-c-card">
|
|
1176
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1177
|
+
</div>
|
|
1178
|
+
<div class="pf-v6-c-card">
|
|
1179
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1180
|
+
</div>
|
|
1181
|
+
<div class="pf-v6-c-card">
|
|
1182
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1183
|
+
</div>
|
|
1184
|
+
<div class="pf-v6-c-card">
|
|
1185
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1186
|
+
</div>
|
|
1187
|
+
<div class="pf-v6-c-card">
|
|
1188
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1189
|
+
</div>
|
|
1190
|
+
<div class="pf-v6-c-card">
|
|
1191
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1192
|
+
</div>
|
|
1193
|
+
<div class="pf-v6-c-card">
|
|
1194
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
1195
|
+
</div>
|
|
1190
1196
|
</div>
|
|
1191
1197
|
</div>
|
|
1192
|
-
</
|
|
1193
|
-
</
|
|
1194
|
-
</
|
|
1198
|
+
</section>
|
|
1199
|
+
</main>
|
|
1200
|
+
</div>
|
|
1195
1201
|
</div>
|
|
1196
1202
|
</div>
|
|
1197
1203
|
<div class="pf-v6-c-drawer__panel">
|
|
@@ -1427,146 +1433,154 @@ wrapperTag: div
|
|
|
1427
1433
|
</nav>
|
|
1428
1434
|
</div>
|
|
1429
1435
|
</div>
|
|
1430
|
-
<
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
<div class="pf-v6-c-
|
|
1437
|
-
<div
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
<div class="pf-v6-c-
|
|
1443
|
-
<div class="pf-v6-c-
|
|
1444
|
-
<div class="pf-v6-c-
|
|
1445
|
-
<
|
|
1446
|
-
<
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
<
|
|
1452
|
-
<
|
|
1453
|
-
<
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
<
|
|
1465
|
-
<
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
<
|
|
1477
|
-
<
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
<
|
|
1489
|
-
<
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
<
|
|
1501
|
-
<
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
<
|
|
1517
|
-
<
|
|
1518
|
-
<
|
|
1519
|
-
<
|
|
1520
|
-
|
|
1436
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
1437
|
+
<main
|
|
1438
|
+
class="pf-v6-c-page__main"
|
|
1439
|
+
tabindex="-1"
|
|
1440
|
+
id="main-content-drawer-jump-links"
|
|
1441
|
+
>
|
|
1442
|
+
<div class="pf-v6-c-drawer">
|
|
1443
|
+
<div class="pf-v6-c-drawer__main">
|
|
1444
|
+
<div
|
|
1445
|
+
class="pf-v6-c-drawer__content"
|
|
1446
|
+
id="drawer-jump-links-drawer-scrollable-container"
|
|
1447
|
+
>
|
|
1448
|
+
<div class="pf-v6-c-drawer__body">
|
|
1449
|
+
<div class="pf-v6-c-sidebar">
|
|
1450
|
+
<div class="pf-v6-c-sidebar__main">
|
|
1451
|
+
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
1452
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1453
|
+
<nav
|
|
1454
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
1455
|
+
>
|
|
1456
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
1457
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
1458
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
1459
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1460
|
+
<a
|
|
1461
|
+
class="pf-v6-c-button pf-m-link"
|
|
1462
|
+
href="#drawer-jump-links-jump-links-first"
|
|
1463
|
+
>
|
|
1464
|
+
<span
|
|
1465
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1466
|
+
>First section</span>
|
|
1467
|
+
</a>
|
|
1468
|
+
</span>
|
|
1469
|
+
</li>
|
|
1470
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1471
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1472
|
+
<a
|
|
1473
|
+
class="pf-v6-c-button pf-m-link"
|
|
1474
|
+
href="#drawer-jump-links-jump-links-second"
|
|
1475
|
+
>
|
|
1476
|
+
<span
|
|
1477
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1478
|
+
>Second section</span>
|
|
1479
|
+
</a>
|
|
1480
|
+
</span>
|
|
1481
|
+
</li>
|
|
1482
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1483
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1484
|
+
<a
|
|
1485
|
+
class="pf-v6-c-button pf-m-link"
|
|
1486
|
+
href="#drawer-jump-links-jump-links-third"
|
|
1487
|
+
>
|
|
1488
|
+
<span
|
|
1489
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1490
|
+
>Third section</span>
|
|
1491
|
+
</a>
|
|
1492
|
+
</span>
|
|
1493
|
+
</li>
|
|
1494
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1495
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1496
|
+
<a
|
|
1497
|
+
class="pf-v6-c-button pf-m-link"
|
|
1498
|
+
href="#drawer-jump-links-jump-links-fourth"
|
|
1499
|
+
>
|
|
1500
|
+
<span
|
|
1501
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1502
|
+
>Fourth section</span>
|
|
1503
|
+
</a>
|
|
1504
|
+
</span>
|
|
1505
|
+
</li>
|
|
1506
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1507
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1508
|
+
<a
|
|
1509
|
+
class="pf-v6-c-button pf-m-link"
|
|
1510
|
+
href="#drawer-jump-links-jump-links-fifth"
|
|
1511
|
+
>
|
|
1512
|
+
<span
|
|
1513
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1514
|
+
>Fifth section</span>
|
|
1515
|
+
</a>
|
|
1516
|
+
</span>
|
|
1517
|
+
</li>
|
|
1518
|
+
</ul>
|
|
1519
|
+
</nav>
|
|
1520
|
+
</section>
|
|
1521
|
+
</div>
|
|
1522
|
+
<div class="pf-v6-c-sidebar__content">
|
|
1523
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1524
|
+
<div class="pf-v6-c-content">
|
|
1525
|
+
<p>
|
|
1526
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
1527
|
+
</p>
|
|
1521
1528
|
|
|
1522
|
-
|
|
1523
|
-
|
|
1529
|
+
<h2
|
|
1530
|
+
id="drawer-jump-links-jump-links-first"
|
|
1531
|
+
>First section</h2>
|
|
1532
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1524
1533
|
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1534
|
+
<h2
|
|
1535
|
+
id="drawer-jump-links-jump-links-second"
|
|
1536
|
+
>Second section</h2>
|
|
1537
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1529
1538
|
|
|
1530
|
-
|
|
1531
|
-
|
|
1539
|
+
<h2
|
|
1540
|
+
id="drawer-jump-links-jump-links-third"
|
|
1541
|
+
>Third section</h2>
|
|
1542
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1532
1543
|
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1544
|
+
<h2
|
|
1545
|
+
id="drawer-jump-links-jump-links-fourth"
|
|
1546
|
+
>Fourth section</h2>
|
|
1547
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1537
1548
|
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1549
|
+
<h2
|
|
1550
|
+
id="drawer-jump-links-jump-links-fifth"
|
|
1551
|
+
>Fifth section</h2>
|
|
1552
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1553
|
+
</div>
|
|
1554
|
+
</section>
|
|
1555
|
+
</div>
|
|
1542
1556
|
</div>
|
|
1543
1557
|
</div>
|
|
1544
1558
|
</div>
|
|
1545
1559
|
</div>
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
</
|
|
1560
|
+
<div class="pf-v6-c-drawer__panel" hidden>
|
|
1561
|
+
<div class="pf-v6-c-drawer__head">
|
|
1562
|
+
<span>Drawer panel header content</span>
|
|
1563
|
+
<div class="pf-v6-c-drawer__actions">
|
|
1564
|
+
<div class="pf-v6-c-drawer__close">
|
|
1565
|
+
<button
|
|
1566
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1567
|
+
type="button"
|
|
1568
|
+
aria-label="Close drawer panel"
|
|
1569
|
+
>
|
|
1570
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1571
|
+
</button>
|
|
1572
|
+
</div>
|
|
1559
1573
|
</div>
|
|
1560
1574
|
</div>
|
|
1575
|
+
<div
|
|
1576
|
+
class="pf-v6-c-drawer__description"
|
|
1577
|
+
>This is a helpful description of the drawer panel.</div>
|
|
1578
|
+
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
1561
1579
|
</div>
|
|
1562
|
-
<div
|
|
1563
|
-
class="pf-v6-c-drawer__description"
|
|
1564
|
-
>This is a helpful description of the drawer panel.</div>
|
|
1565
|
-
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
1566
1580
|
</div>
|
|
1567
1581
|
</div>
|
|
1568
|
-
</
|
|
1569
|
-
</
|
|
1582
|
+
</main>
|
|
1583
|
+
</div>
|
|
1570
1584
|
</div>
|
|
1571
1585
|
|
|
1572
1586
|
```
|
|
@@ -1794,152 +1808,154 @@ wrapperTag: div
|
|
|
1794
1808
|
</nav>
|
|
1795
1809
|
</div>
|
|
1796
1810
|
</div>
|
|
1797
|
-
<
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
<div class="pf-v6-c-
|
|
1804
|
-
<div
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
<div class="pf-v6-c-
|
|
1810
|
-
<div class="pf-v6-c-
|
|
1811
|
-
<div class="pf-v6-c-
|
|
1812
|
-
<
|
|
1813
|
-
<
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
<
|
|
1819
|
-
<
|
|
1820
|
-
<
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
<
|
|
1832
|
-
<
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
<
|
|
1844
|
-
<
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
<
|
|
1856
|
-
<
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
<
|
|
1868
|
-
<
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
<
|
|
1884
|
-
<
|
|
1885
|
-
<
|
|
1886
|
-
<
|
|
1887
|
-
|
|
1811
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
1812
|
+
<main
|
|
1813
|
+
class="pf-v6-c-page__main"
|
|
1814
|
+
tabindex="-1"
|
|
1815
|
+
id="main-content-drawer-expanded-jump-links"
|
|
1816
|
+
>
|
|
1817
|
+
<div class="pf-v6-c-drawer pf-m-expanded">
|
|
1818
|
+
<div class="pf-v6-c-drawer__main">
|
|
1819
|
+
<div
|
|
1820
|
+
class="pf-v6-c-drawer__content"
|
|
1821
|
+
id="drawer-expanded-jump-links-drawer-scrollable-container"
|
|
1822
|
+
>
|
|
1823
|
+
<div class="pf-v6-c-drawer__body">
|
|
1824
|
+
<div class="pf-v6-c-sidebar">
|
|
1825
|
+
<div class="pf-v6-c-sidebar__main">
|
|
1826
|
+
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
1827
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1828
|
+
<nav
|
|
1829
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
1830
|
+
>
|
|
1831
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
1832
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
1833
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
1834
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1835
|
+
<a
|
|
1836
|
+
class="pf-v6-c-button pf-m-link"
|
|
1837
|
+
href="#drawer-expanded-jump-links-jump-links-first"
|
|
1838
|
+
>
|
|
1839
|
+
<span
|
|
1840
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1841
|
+
>First section</span>
|
|
1842
|
+
</a>
|
|
1843
|
+
</span>
|
|
1844
|
+
</li>
|
|
1845
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1846
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1847
|
+
<a
|
|
1848
|
+
class="pf-v6-c-button pf-m-link"
|
|
1849
|
+
href="#drawer-expanded-jump-links-jump-links-second"
|
|
1850
|
+
>
|
|
1851
|
+
<span
|
|
1852
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1853
|
+
>Second section</span>
|
|
1854
|
+
</a>
|
|
1855
|
+
</span>
|
|
1856
|
+
</li>
|
|
1857
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1858
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1859
|
+
<a
|
|
1860
|
+
class="pf-v6-c-button pf-m-link"
|
|
1861
|
+
href="#drawer-expanded-jump-links-jump-links-third"
|
|
1862
|
+
>
|
|
1863
|
+
<span
|
|
1864
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1865
|
+
>Third section</span>
|
|
1866
|
+
</a>
|
|
1867
|
+
</span>
|
|
1868
|
+
</li>
|
|
1869
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1870
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1871
|
+
<a
|
|
1872
|
+
class="pf-v6-c-button pf-m-link"
|
|
1873
|
+
href="#drawer-expanded-jump-links-jump-links-fourth"
|
|
1874
|
+
>
|
|
1875
|
+
<span
|
|
1876
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1877
|
+
>Fourth section</span>
|
|
1878
|
+
</a>
|
|
1879
|
+
</span>
|
|
1880
|
+
</li>
|
|
1881
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1882
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1883
|
+
<a
|
|
1884
|
+
class="pf-v6-c-button pf-m-link"
|
|
1885
|
+
href="#drawer-expanded-jump-links-jump-links-fifth"
|
|
1886
|
+
>
|
|
1887
|
+
<span
|
|
1888
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1889
|
+
>Fifth section</span>
|
|
1890
|
+
</a>
|
|
1891
|
+
</span>
|
|
1892
|
+
</li>
|
|
1893
|
+
</ul>
|
|
1894
|
+
</nav>
|
|
1895
|
+
</section>
|
|
1896
|
+
</div>
|
|
1897
|
+
<div class="pf-v6-c-sidebar__content">
|
|
1898
|
+
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1899
|
+
<div class="pf-v6-c-content">
|
|
1900
|
+
<p>
|
|
1901
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
1902
|
+
</p>
|
|
1888
1903
|
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1904
|
+
<h2
|
|
1905
|
+
id="drawer-expanded-jump-links-jump-links-first"
|
|
1906
|
+
>First section</h2>
|
|
1907
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1893
1908
|
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1909
|
+
<h2
|
|
1910
|
+
id="drawer-expanded-jump-links-jump-links-second"
|
|
1911
|
+
>Second section</h2>
|
|
1912
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1898
1913
|
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1914
|
+
<h2
|
|
1915
|
+
id="drawer-expanded-jump-links-jump-links-third"
|
|
1916
|
+
>Third section</h2>
|
|
1917
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1903
1918
|
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1919
|
+
<h2
|
|
1920
|
+
id="drawer-expanded-jump-links-jump-links-fourth"
|
|
1921
|
+
>Fourth section</h2>
|
|
1922
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1908
1923
|
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1924
|
+
<h2
|
|
1925
|
+
id="drawer-expanded-jump-links-jump-links-fifth"
|
|
1926
|
+
>Fifth section</h2>
|
|
1927
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
1928
|
+
</div>
|
|
1929
|
+
</section>
|
|
1930
|
+
</div>
|
|
1915
1931
|
</div>
|
|
1916
1932
|
</div>
|
|
1917
1933
|
</div>
|
|
1918
1934
|
</div>
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
</
|
|
1935
|
+
<div class="pf-v6-c-drawer__panel">
|
|
1936
|
+
<div class="pf-v6-c-drawer__head">
|
|
1937
|
+
<span>Drawer panel header content</span>
|
|
1938
|
+
<div class="pf-v6-c-drawer__actions">
|
|
1939
|
+
<div class="pf-v6-c-drawer__close">
|
|
1940
|
+
<button
|
|
1941
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1942
|
+
type="button"
|
|
1943
|
+
aria-label="Close drawer panel"
|
|
1944
|
+
>
|
|
1945
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1946
|
+
</button>
|
|
1947
|
+
</div>
|
|
1932
1948
|
</div>
|
|
1933
1949
|
</div>
|
|
1950
|
+
<div
|
|
1951
|
+
class="pf-v6-c-drawer__description"
|
|
1952
|
+
>This is a helpful description of the drawer panel.</div>
|
|
1953
|
+
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
1934
1954
|
</div>
|
|
1935
|
-
<div
|
|
1936
|
-
class="pf-v6-c-drawer__description"
|
|
1937
|
-
>This is a helpful description of the drawer panel.</div>
|
|
1938
|
-
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
1939
1955
|
</div>
|
|
1940
1956
|
</div>
|
|
1941
|
-
</
|
|
1942
|
-
</
|
|
1957
|
+
</main>
|
|
1958
|
+
</div>
|
|
1943
1959
|
</div>
|
|
1944
1960
|
|
|
1945
1961
|
```
|