@patternfly/patternfly 6.0.0-alpha.161 → 6.0.0-alpha.162
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/Page/page.css +38 -54
- package/components/Page/page.scss +19 -32
- package/components/Toolbar/toolbar.css +1 -0
- package/components/Toolbar/toolbar.scss +1 -0
- package/components/_index.css +39 -54
- package/docs/components/Page/examples/Page.css +5 -9
- package/docs/components/Page/examples/Page.md +71 -32
- package/docs/demos/Alert/examples/Alert.md +393 -374
- package/docs/demos/CardView/examples/CardView.md +717 -708
- package/docs/demos/DataList/examples/DataList.md +2574 -2500
- package/docs/demos/Drawer/examples/Drawer.md +190 -182
- package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
- package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
- package/docs/demos/Table/examples/Table.md +9458 -9105
- package/docs/demos/Tabs/examples/Tabs.md +889 -885
- package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
- package/package.json +1 -1
- package/patternfly-no-globals.css +39 -54
- package/patternfly.css +39 -54
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -290,129 +290,135 @@ section: components
|
|
|
290
290
|
</div>
|
|
291
291
|
</section>
|
|
292
292
|
<section class="pf-v6-c-page__main-section pf-m-no-padding">
|
|
293
|
-
<div class="pf-v6-c-
|
|
294
|
-
<div class="pf-v6-c-
|
|
295
|
-
<div class="pf-v6-c-
|
|
296
|
-
<
|
|
297
|
-
<
|
|
298
|
-
class="pf-v6-c-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
<
|
|
303
|
-
class="pf-v6-c-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
293
|
+
<div class="pf-v6-c-page__main-body">
|
|
294
|
+
<div class="pf-v6-c-sidebar">
|
|
295
|
+
<div class="pf-v6-c-sidebar__main">
|
|
296
|
+
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
297
|
+
<section class="pf-v6-c-page__main-section">
|
|
298
|
+
<div class="pf-v6-c-page__main-body">
|
|
299
|
+
<nav
|
|
300
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
301
|
+
>
|
|
302
|
+
<div class="pf-v6-c-jump-links__header">
|
|
303
|
+
<div class="pf-v6-c-jump-links__toggle">
|
|
304
|
+
<button
|
|
305
|
+
class="pf-v6-c-button pf-m-plain"
|
|
306
|
+
type="button"
|
|
307
|
+
aria-label="Toggle jump links"
|
|
308
|
+
aria-expanded="false"
|
|
309
|
+
>
|
|
310
|
+
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
311
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
312
|
+
</span>
|
|
313
|
+
<span
|
|
314
|
+
class="pf-v6-c-jump-links__toggle-text"
|
|
315
|
+
>Jump to section</span>
|
|
316
|
+
</button>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
319
|
+
</div>
|
|
320
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
321
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
322
|
+
<span class="pf-v6-c-jump-links__link">
|
|
323
|
+
<a
|
|
324
|
+
class="pf-v6-c-button pf-m-link"
|
|
325
|
+
href="#jump-links-collapsed-mobile-example-jump-links-first"
|
|
326
|
+
>
|
|
327
|
+
<span
|
|
328
|
+
class="pf-v6-c-jump-links__link-text"
|
|
329
|
+
>First section</span>
|
|
330
|
+
</a>
|
|
331
|
+
</span>
|
|
332
|
+
</li>
|
|
333
|
+
<li class="pf-v6-c-jump-links__item">
|
|
334
|
+
<span class="pf-v6-c-jump-links__link">
|
|
335
|
+
<a
|
|
336
|
+
class="pf-v6-c-button pf-m-link"
|
|
337
|
+
href="#jump-links-collapsed-mobile-example-jump-links-second"
|
|
338
|
+
>
|
|
339
|
+
<span
|
|
340
|
+
class="pf-v6-c-jump-links__link-text"
|
|
341
|
+
>Second section</span>
|
|
342
|
+
</a>
|
|
343
|
+
</span>
|
|
344
|
+
</li>
|
|
345
|
+
<li class="pf-v6-c-jump-links__item">
|
|
346
|
+
<span class="pf-v6-c-jump-links__link">
|
|
347
|
+
<a
|
|
348
|
+
class="pf-v6-c-button pf-m-link"
|
|
349
|
+
href="#jump-links-collapsed-mobile-example-jump-links-third"
|
|
350
|
+
>
|
|
351
|
+
<span
|
|
352
|
+
class="pf-v6-c-jump-links__link-text"
|
|
353
|
+
>Third section</span>
|
|
354
|
+
</a>
|
|
355
|
+
</span>
|
|
356
|
+
</li>
|
|
357
|
+
<li class="pf-v6-c-jump-links__item">
|
|
358
|
+
<span class="pf-v6-c-jump-links__link">
|
|
359
|
+
<a
|
|
360
|
+
class="pf-v6-c-button pf-m-link"
|
|
361
|
+
href="#jump-links-collapsed-mobile-example-jump-links-fourth"
|
|
362
|
+
>
|
|
363
|
+
<span
|
|
364
|
+
class="pf-v6-c-jump-links__link-text"
|
|
365
|
+
>Fourth section</span>
|
|
366
|
+
</a>
|
|
367
|
+
</span>
|
|
368
|
+
</li>
|
|
369
|
+
<li class="pf-v6-c-jump-links__item">
|
|
370
|
+
<span class="pf-v6-c-jump-links__link">
|
|
371
|
+
<a
|
|
372
|
+
class="pf-v6-c-button pf-m-link"
|
|
373
|
+
href="#jump-links-collapsed-mobile-example-jump-links-fifth"
|
|
374
|
+
>
|
|
375
|
+
<span
|
|
376
|
+
class="pf-v6-c-jump-links__link-text"
|
|
377
|
+
>Fifth section</span>
|
|
378
|
+
</a>
|
|
379
|
+
</span>
|
|
380
|
+
</li>
|
|
381
|
+
</ul>
|
|
382
|
+
</nav>
|
|
383
|
+
</div>
|
|
384
|
+
</section>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="pf-v6-c-sidebar__content">
|
|
387
|
+
<section class="pf-v6-c-page__main-section">
|
|
388
|
+
<div class="pf-v6-c-page__main-body">
|
|
389
|
+
<div class="pf-v6-c-content">
|
|
390
|
+
<p>
|
|
391
|
+
<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.
|
|
392
|
+
</p>
|
|
393
|
+
|
|
394
|
+
<h2
|
|
395
|
+
id="jump-links-collapsed-mobile-example-jump-links-first"
|
|
396
|
+
>First section</h2>
|
|
397
|
+
<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>
|
|
398
|
+
|
|
399
|
+
<h2
|
|
400
|
+
id="jump-links-collapsed-mobile-example-jump-links-second"
|
|
401
|
+
>Second section</h2>
|
|
402
|
+
<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>
|
|
403
|
+
|
|
404
|
+
<h2
|
|
405
|
+
id="jump-links-collapsed-mobile-example-jump-links-third"
|
|
406
|
+
>Third section</h2>
|
|
407
|
+
<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>
|
|
408
|
+
|
|
409
|
+
<h2
|
|
410
|
+
id="jump-links-collapsed-mobile-example-jump-links-fourth"
|
|
411
|
+
>Fourth section</h2>
|
|
412
|
+
<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>
|
|
413
|
+
|
|
414
|
+
<h2
|
|
415
|
+
id="jump-links-collapsed-mobile-example-jump-links-fifth"
|
|
416
|
+
>Fifth section</h2>
|
|
417
|
+
<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>
|
|
315
418
|
</div>
|
|
316
|
-
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
317
419
|
</div>
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
<span class="pf-v6-c-jump-links__link">
|
|
321
|
-
<a
|
|
322
|
-
class="pf-v6-c-button pf-m-link"
|
|
323
|
-
href="#jump-links-collapsed-mobile-example-jump-links-first"
|
|
324
|
-
>
|
|
325
|
-
<span
|
|
326
|
-
class="pf-v6-c-jump-links__link-text"
|
|
327
|
-
>First section</span>
|
|
328
|
-
</a>
|
|
329
|
-
</span>
|
|
330
|
-
</li>
|
|
331
|
-
<li class="pf-v6-c-jump-links__item">
|
|
332
|
-
<span class="pf-v6-c-jump-links__link">
|
|
333
|
-
<a
|
|
334
|
-
class="pf-v6-c-button pf-m-link"
|
|
335
|
-
href="#jump-links-collapsed-mobile-example-jump-links-second"
|
|
336
|
-
>
|
|
337
|
-
<span
|
|
338
|
-
class="pf-v6-c-jump-links__link-text"
|
|
339
|
-
>Second section</span>
|
|
340
|
-
</a>
|
|
341
|
-
</span>
|
|
342
|
-
</li>
|
|
343
|
-
<li class="pf-v6-c-jump-links__item">
|
|
344
|
-
<span class="pf-v6-c-jump-links__link">
|
|
345
|
-
<a
|
|
346
|
-
class="pf-v6-c-button pf-m-link"
|
|
347
|
-
href="#jump-links-collapsed-mobile-example-jump-links-third"
|
|
348
|
-
>
|
|
349
|
-
<span
|
|
350
|
-
class="pf-v6-c-jump-links__link-text"
|
|
351
|
-
>Third section</span>
|
|
352
|
-
</a>
|
|
353
|
-
</span>
|
|
354
|
-
</li>
|
|
355
|
-
<li class="pf-v6-c-jump-links__item">
|
|
356
|
-
<span class="pf-v6-c-jump-links__link">
|
|
357
|
-
<a
|
|
358
|
-
class="pf-v6-c-button pf-m-link"
|
|
359
|
-
href="#jump-links-collapsed-mobile-example-jump-links-fourth"
|
|
360
|
-
>
|
|
361
|
-
<span
|
|
362
|
-
class="pf-v6-c-jump-links__link-text"
|
|
363
|
-
>Fourth section</span>
|
|
364
|
-
</a>
|
|
365
|
-
</span>
|
|
366
|
-
</li>
|
|
367
|
-
<li class="pf-v6-c-jump-links__item">
|
|
368
|
-
<span class="pf-v6-c-jump-links__link">
|
|
369
|
-
<a
|
|
370
|
-
class="pf-v6-c-button pf-m-link"
|
|
371
|
-
href="#jump-links-collapsed-mobile-example-jump-links-fifth"
|
|
372
|
-
>
|
|
373
|
-
<span
|
|
374
|
-
class="pf-v6-c-jump-links__link-text"
|
|
375
|
-
>Fifth section</span>
|
|
376
|
-
</a>
|
|
377
|
-
</span>
|
|
378
|
-
</li>
|
|
379
|
-
</ul>
|
|
380
|
-
</nav>
|
|
381
|
-
</section>
|
|
382
|
-
</div>
|
|
383
|
-
<div class="pf-v6-c-sidebar__content">
|
|
384
|
-
<section class="pf-v6-c-page__main-section">
|
|
385
|
-
<div class="pf-v6-c-content">
|
|
386
|
-
<p>
|
|
387
|
-
<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.
|
|
388
|
-
</p>
|
|
389
|
-
|
|
390
|
-
<h2
|
|
391
|
-
id="jump-links-collapsed-mobile-example-jump-links-first"
|
|
392
|
-
>First section</h2>
|
|
393
|
-
<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>
|
|
394
|
-
|
|
395
|
-
<h2
|
|
396
|
-
id="jump-links-collapsed-mobile-example-jump-links-second"
|
|
397
|
-
>Second section</h2>
|
|
398
|
-
<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>
|
|
399
|
-
|
|
400
|
-
<h2
|
|
401
|
-
id="jump-links-collapsed-mobile-example-jump-links-third"
|
|
402
|
-
>Third section</h2>
|
|
403
|
-
<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>
|
|
404
|
-
|
|
405
|
-
<h2
|
|
406
|
-
id="jump-links-collapsed-mobile-example-jump-links-fourth"
|
|
407
|
-
>Fourth section</h2>
|
|
408
|
-
<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>
|
|
409
|
-
|
|
410
|
-
<h2
|
|
411
|
-
id="jump-links-collapsed-mobile-example-jump-links-fifth"
|
|
412
|
-
>Fifth section</h2>
|
|
413
|
-
<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>
|
|
414
|
-
</div>
|
|
415
|
-
</section>
|
|
420
|
+
</section>
|
|
421
|
+
</div>
|
|
416
422
|
</div>
|
|
417
423
|
</div>
|
|
418
424
|
</div>
|
|
@@ -710,129 +716,135 @@ section: components
|
|
|
710
716
|
</div>
|
|
711
717
|
</section>
|
|
712
718
|
<section class="pf-v6-c-page__main-section pf-m-no-padding">
|
|
713
|
-
<div class="pf-v6-c-
|
|
714
|
-
<div class="pf-v6-c-
|
|
715
|
-
<div class="pf-v6-c-
|
|
716
|
-
<
|
|
717
|
-
<
|
|
718
|
-
class="pf-v6-c-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
<
|
|
723
|
-
class="pf-v6-c-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
719
|
+
<div class="pf-v6-c-page__main-body">
|
|
720
|
+
<div class="pf-v6-c-sidebar">
|
|
721
|
+
<div class="pf-v6-c-sidebar__main">
|
|
722
|
+
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
723
|
+
<section class="pf-v6-c-page__main-section">
|
|
724
|
+
<div class="pf-v6-c-page__main-body">
|
|
725
|
+
<nav
|
|
726
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expanded pf-m-expandable"
|
|
727
|
+
>
|
|
728
|
+
<div class="pf-v6-c-jump-links__header">
|
|
729
|
+
<div class="pf-v6-c-jump-links__toggle">
|
|
730
|
+
<button
|
|
731
|
+
class="pf-v6-c-button pf-m-plain"
|
|
732
|
+
type="button"
|
|
733
|
+
aria-label="Toggle jump links"
|
|
734
|
+
aria-expanded="false"
|
|
735
|
+
>
|
|
736
|
+
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
737
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
738
|
+
</span>
|
|
739
|
+
<span
|
|
740
|
+
class="pf-v6-c-jump-links__toggle-text"
|
|
741
|
+
>Jump to section</span>
|
|
742
|
+
</button>
|
|
743
|
+
</div>
|
|
744
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
745
|
+
</div>
|
|
746
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
747
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
748
|
+
<span class="pf-v6-c-jump-links__link">
|
|
749
|
+
<a
|
|
750
|
+
class="pf-v6-c-button pf-m-link"
|
|
751
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-first"
|
|
752
|
+
>
|
|
753
|
+
<span
|
|
754
|
+
class="pf-v6-c-jump-links__link-text"
|
|
755
|
+
>First section</span>
|
|
756
|
+
</a>
|
|
757
|
+
</span>
|
|
758
|
+
</li>
|
|
759
|
+
<li class="pf-v6-c-jump-links__item">
|
|
760
|
+
<span class="pf-v6-c-jump-links__link">
|
|
761
|
+
<a
|
|
762
|
+
class="pf-v6-c-button pf-m-link"
|
|
763
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-second"
|
|
764
|
+
>
|
|
765
|
+
<span
|
|
766
|
+
class="pf-v6-c-jump-links__link-text"
|
|
767
|
+
>Second section</span>
|
|
768
|
+
</a>
|
|
769
|
+
</span>
|
|
770
|
+
</li>
|
|
771
|
+
<li class="pf-v6-c-jump-links__item">
|
|
772
|
+
<span class="pf-v6-c-jump-links__link">
|
|
773
|
+
<a
|
|
774
|
+
class="pf-v6-c-button pf-m-link"
|
|
775
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-third"
|
|
776
|
+
>
|
|
777
|
+
<span
|
|
778
|
+
class="pf-v6-c-jump-links__link-text"
|
|
779
|
+
>Third section</span>
|
|
780
|
+
</a>
|
|
781
|
+
</span>
|
|
782
|
+
</li>
|
|
783
|
+
<li class="pf-v6-c-jump-links__item">
|
|
784
|
+
<span class="pf-v6-c-jump-links__link">
|
|
785
|
+
<a
|
|
786
|
+
class="pf-v6-c-button pf-m-link"
|
|
787
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-fourth"
|
|
788
|
+
>
|
|
789
|
+
<span
|
|
790
|
+
class="pf-v6-c-jump-links__link-text"
|
|
791
|
+
>Fourth section</span>
|
|
792
|
+
</a>
|
|
793
|
+
</span>
|
|
794
|
+
</li>
|
|
795
|
+
<li class="pf-v6-c-jump-links__item">
|
|
796
|
+
<span class="pf-v6-c-jump-links__link">
|
|
797
|
+
<a
|
|
798
|
+
class="pf-v6-c-button pf-m-link"
|
|
799
|
+
href="#jump-links-vertical-expanded-mobile-example-jump-links-fifth"
|
|
800
|
+
>
|
|
801
|
+
<span
|
|
802
|
+
class="pf-v6-c-jump-links__link-text"
|
|
803
|
+
>Fifth section</span>
|
|
804
|
+
</a>
|
|
805
|
+
</span>
|
|
806
|
+
</li>
|
|
807
|
+
</ul>
|
|
808
|
+
</nav>
|
|
809
|
+
</div>
|
|
810
|
+
</section>
|
|
811
|
+
</div>
|
|
812
|
+
<div class="pf-v6-c-sidebar__content">
|
|
813
|
+
<section class="pf-v6-c-page__main-section">
|
|
814
|
+
<div class="pf-v6-c-page__main-body">
|
|
815
|
+
<div class="pf-v6-c-content">
|
|
816
|
+
<p>
|
|
817
|
+
<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.
|
|
818
|
+
</p>
|
|
819
|
+
|
|
820
|
+
<h2
|
|
821
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-first"
|
|
822
|
+
>First section</h2>
|
|
823
|
+
<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>
|
|
824
|
+
|
|
825
|
+
<h2
|
|
826
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-second"
|
|
827
|
+
>Second section</h2>
|
|
828
|
+
<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>
|
|
829
|
+
|
|
830
|
+
<h2
|
|
831
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-third"
|
|
832
|
+
>Third section</h2>
|
|
833
|
+
<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>
|
|
834
|
+
|
|
835
|
+
<h2
|
|
836
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-fourth"
|
|
837
|
+
>Fourth section</h2>
|
|
838
|
+
<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>
|
|
839
|
+
|
|
840
|
+
<h2
|
|
841
|
+
id="jump-links-vertical-expanded-mobile-example-jump-links-fifth"
|
|
842
|
+
>Fifth section</h2>
|
|
843
|
+
<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>
|
|
735
844
|
</div>
|
|
736
|
-
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
737
845
|
</div>
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
<span class="pf-v6-c-jump-links__link">
|
|
741
|
-
<a
|
|
742
|
-
class="pf-v6-c-button pf-m-link"
|
|
743
|
-
href="#jump-links-vertical-expanded-mobile-example-jump-links-first"
|
|
744
|
-
>
|
|
745
|
-
<span
|
|
746
|
-
class="pf-v6-c-jump-links__link-text"
|
|
747
|
-
>First section</span>
|
|
748
|
-
</a>
|
|
749
|
-
</span>
|
|
750
|
-
</li>
|
|
751
|
-
<li class="pf-v6-c-jump-links__item">
|
|
752
|
-
<span class="pf-v6-c-jump-links__link">
|
|
753
|
-
<a
|
|
754
|
-
class="pf-v6-c-button pf-m-link"
|
|
755
|
-
href="#jump-links-vertical-expanded-mobile-example-jump-links-second"
|
|
756
|
-
>
|
|
757
|
-
<span
|
|
758
|
-
class="pf-v6-c-jump-links__link-text"
|
|
759
|
-
>Second section</span>
|
|
760
|
-
</a>
|
|
761
|
-
</span>
|
|
762
|
-
</li>
|
|
763
|
-
<li class="pf-v6-c-jump-links__item">
|
|
764
|
-
<span class="pf-v6-c-jump-links__link">
|
|
765
|
-
<a
|
|
766
|
-
class="pf-v6-c-button pf-m-link"
|
|
767
|
-
href="#jump-links-vertical-expanded-mobile-example-jump-links-third"
|
|
768
|
-
>
|
|
769
|
-
<span
|
|
770
|
-
class="pf-v6-c-jump-links__link-text"
|
|
771
|
-
>Third section</span>
|
|
772
|
-
</a>
|
|
773
|
-
</span>
|
|
774
|
-
</li>
|
|
775
|
-
<li class="pf-v6-c-jump-links__item">
|
|
776
|
-
<span class="pf-v6-c-jump-links__link">
|
|
777
|
-
<a
|
|
778
|
-
class="pf-v6-c-button pf-m-link"
|
|
779
|
-
href="#jump-links-vertical-expanded-mobile-example-jump-links-fourth"
|
|
780
|
-
>
|
|
781
|
-
<span
|
|
782
|
-
class="pf-v6-c-jump-links__link-text"
|
|
783
|
-
>Fourth section</span>
|
|
784
|
-
</a>
|
|
785
|
-
</span>
|
|
786
|
-
</li>
|
|
787
|
-
<li class="pf-v6-c-jump-links__item">
|
|
788
|
-
<span class="pf-v6-c-jump-links__link">
|
|
789
|
-
<a
|
|
790
|
-
class="pf-v6-c-button pf-m-link"
|
|
791
|
-
href="#jump-links-vertical-expanded-mobile-example-jump-links-fifth"
|
|
792
|
-
>
|
|
793
|
-
<span
|
|
794
|
-
class="pf-v6-c-jump-links__link-text"
|
|
795
|
-
>Fifth section</span>
|
|
796
|
-
</a>
|
|
797
|
-
</span>
|
|
798
|
-
</li>
|
|
799
|
-
</ul>
|
|
800
|
-
</nav>
|
|
801
|
-
</section>
|
|
802
|
-
</div>
|
|
803
|
-
<div class="pf-v6-c-sidebar__content">
|
|
804
|
-
<section class="pf-v6-c-page__main-section">
|
|
805
|
-
<div class="pf-v6-c-content">
|
|
806
|
-
<p>
|
|
807
|
-
<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.
|
|
808
|
-
</p>
|
|
809
|
-
|
|
810
|
-
<h2
|
|
811
|
-
id="jump-links-vertical-expanded-mobile-example-jump-links-first"
|
|
812
|
-
>First section</h2>
|
|
813
|
-
<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>
|
|
814
|
-
|
|
815
|
-
<h2
|
|
816
|
-
id="jump-links-vertical-expanded-mobile-example-jump-links-second"
|
|
817
|
-
>Second section</h2>
|
|
818
|
-
<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>
|
|
819
|
-
|
|
820
|
-
<h2
|
|
821
|
-
id="jump-links-vertical-expanded-mobile-example-jump-links-third"
|
|
822
|
-
>Third section</h2>
|
|
823
|
-
<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>
|
|
824
|
-
|
|
825
|
-
<h2
|
|
826
|
-
id="jump-links-vertical-expanded-mobile-example-jump-links-fourth"
|
|
827
|
-
>Fourth section</h2>
|
|
828
|
-
<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>
|
|
829
|
-
|
|
830
|
-
<h2
|
|
831
|
-
id="jump-links-vertical-expanded-mobile-example-jump-links-fifth"
|
|
832
|
-
>Fifth section</h2>
|
|
833
|
-
<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>
|
|
834
|
-
</div>
|
|
835
|
-
</section>
|
|
846
|
+
</section>
|
|
847
|
+
</div>
|
|
836
848
|
</div>
|
|
837
849
|
</div>
|
|
838
850
|
</div>
|
|
@@ -1130,129 +1142,135 @@ section: components
|
|
|
1130
1142
|
</div>
|
|
1131
1143
|
</section>
|
|
1132
1144
|
<section class="pf-v6-c-page__main-section pf-m-no-padding">
|
|
1133
|
-
<div class="pf-v6-c-
|
|
1134
|
-
<div class="pf-v6-c-
|
|
1135
|
-
<div class="pf-v6-c-
|
|
1136
|
-
<
|
|
1137
|
-
<
|
|
1138
|
-
class="pf-v6-c-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
<
|
|
1143
|
-
class="pf-v6-c-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1145
|
+
<div class="pf-v6-c-page__main-body">
|
|
1146
|
+
<div class="pf-v6-c-sidebar">
|
|
1147
|
+
<div class="pf-v6-c-sidebar__main">
|
|
1148
|
+
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
1149
|
+
<section class="pf-v6-c-page__main-section">
|
|
1150
|
+
<div class="pf-v6-c-page__main-body">
|
|
1151
|
+
<nav
|
|
1152
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
1153
|
+
>
|
|
1154
|
+
<div class="pf-v6-c-jump-links__header">
|
|
1155
|
+
<div class="pf-v6-c-jump-links__toggle">
|
|
1156
|
+
<button
|
|
1157
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1158
|
+
type="button"
|
|
1159
|
+
aria-label="Toggle jump links"
|
|
1160
|
+
aria-expanded="false"
|
|
1161
|
+
>
|
|
1162
|
+
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
1163
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1164
|
+
</span>
|
|
1165
|
+
<span
|
|
1166
|
+
class="pf-v6-c-jump-links__toggle-text"
|
|
1167
|
+
>Jump to section</span>
|
|
1168
|
+
</button>
|
|
1169
|
+
</div>
|
|
1170
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
1171
|
+
</div>
|
|
1172
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
1173
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
1174
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1175
|
+
<a
|
|
1176
|
+
class="pf-v6-c-button pf-m-link"
|
|
1177
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-first"
|
|
1178
|
+
>
|
|
1179
|
+
<span
|
|
1180
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1181
|
+
>First section</span>
|
|
1182
|
+
</a>
|
|
1183
|
+
</span>
|
|
1184
|
+
</li>
|
|
1185
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1186
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1187
|
+
<a
|
|
1188
|
+
class="pf-v6-c-button pf-m-link"
|
|
1189
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-second"
|
|
1190
|
+
>
|
|
1191
|
+
<span
|
|
1192
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1193
|
+
>Second section</span>
|
|
1194
|
+
</a>
|
|
1195
|
+
</span>
|
|
1196
|
+
</li>
|
|
1197
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1198
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1199
|
+
<a
|
|
1200
|
+
class="pf-v6-c-button pf-m-link"
|
|
1201
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-third"
|
|
1202
|
+
>
|
|
1203
|
+
<span
|
|
1204
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1205
|
+
>Third section</span>
|
|
1206
|
+
</a>
|
|
1207
|
+
</span>
|
|
1208
|
+
</li>
|
|
1209
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1210
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1211
|
+
<a
|
|
1212
|
+
class="pf-v6-c-button pf-m-link"
|
|
1213
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
|
|
1214
|
+
>
|
|
1215
|
+
<span
|
|
1216
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1217
|
+
>Fourth section</span>
|
|
1218
|
+
</a>
|
|
1219
|
+
</span>
|
|
1220
|
+
</li>
|
|
1221
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1222
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1223
|
+
<a
|
|
1224
|
+
class="pf-v6-c-button pf-m-link"
|
|
1225
|
+
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
|
|
1226
|
+
>
|
|
1227
|
+
<span
|
|
1228
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1229
|
+
>Fifth section</span>
|
|
1230
|
+
</a>
|
|
1231
|
+
</span>
|
|
1232
|
+
</li>
|
|
1233
|
+
</ul>
|
|
1234
|
+
</nav>
|
|
1235
|
+
</div>
|
|
1236
|
+
</section>
|
|
1237
|
+
</div>
|
|
1238
|
+
<div class="pf-v6-c-sidebar__content">
|
|
1239
|
+
<section class="pf-v6-c-page__main-section">
|
|
1240
|
+
<div class="pf-v6-c-page__main-body">
|
|
1241
|
+
<div class="pf-v6-c-content">
|
|
1242
|
+
<p>
|
|
1243
|
+
<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.
|
|
1244
|
+
</p>
|
|
1245
|
+
|
|
1246
|
+
<h2
|
|
1247
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-first"
|
|
1248
|
+
>First section</h2>
|
|
1249
|
+
<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>
|
|
1250
|
+
|
|
1251
|
+
<h2
|
|
1252
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-second"
|
|
1253
|
+
>Second section</h2>
|
|
1254
|
+
<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>
|
|
1255
|
+
|
|
1256
|
+
<h2
|
|
1257
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-third"
|
|
1258
|
+
>Third section</h2>
|
|
1259
|
+
<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>
|
|
1260
|
+
|
|
1261
|
+
<h2
|
|
1262
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
|
|
1263
|
+
>Fourth section</h2>
|
|
1264
|
+
<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>
|
|
1265
|
+
|
|
1266
|
+
<h2
|
|
1267
|
+
id="jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
|
|
1268
|
+
>Fifth section</h2>
|
|
1269
|
+
<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>
|
|
1155
1270
|
</div>
|
|
1156
|
-
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
1157
1271
|
</div>
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1161
|
-
<a
|
|
1162
|
-
class="pf-v6-c-button pf-m-link"
|
|
1163
|
-
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-first"
|
|
1164
|
-
>
|
|
1165
|
-
<span
|
|
1166
|
-
class="pf-v6-c-jump-links__link-text"
|
|
1167
|
-
>First section</span>
|
|
1168
|
-
</a>
|
|
1169
|
-
</span>
|
|
1170
|
-
</li>
|
|
1171
|
-
<li class="pf-v6-c-jump-links__item">
|
|
1172
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1173
|
-
<a
|
|
1174
|
-
class="pf-v6-c-button pf-m-link"
|
|
1175
|
-
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-second"
|
|
1176
|
-
>
|
|
1177
|
-
<span
|
|
1178
|
-
class="pf-v6-c-jump-links__link-text"
|
|
1179
|
-
>Second section</span>
|
|
1180
|
-
</a>
|
|
1181
|
-
</span>
|
|
1182
|
-
</li>
|
|
1183
|
-
<li class="pf-v6-c-jump-links__item">
|
|
1184
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1185
|
-
<a
|
|
1186
|
-
class="pf-v6-c-button pf-m-link"
|
|
1187
|
-
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-third"
|
|
1188
|
-
>
|
|
1189
|
-
<span
|
|
1190
|
-
class="pf-v6-c-jump-links__link-text"
|
|
1191
|
-
>Third section</span>
|
|
1192
|
-
</a>
|
|
1193
|
-
</span>
|
|
1194
|
-
</li>
|
|
1195
|
-
<li class="pf-v6-c-jump-links__item">
|
|
1196
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1197
|
-
<a
|
|
1198
|
-
class="pf-v6-c-button pf-m-link"
|
|
1199
|
-
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
|
|
1200
|
-
>
|
|
1201
|
-
<span
|
|
1202
|
-
class="pf-v6-c-jump-links__link-text"
|
|
1203
|
-
>Fourth section</span>
|
|
1204
|
-
</a>
|
|
1205
|
-
</span>
|
|
1206
|
-
</li>
|
|
1207
|
-
<li class="pf-v6-c-jump-links__item">
|
|
1208
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1209
|
-
<a
|
|
1210
|
-
class="pf-v6-c-button pf-m-link"
|
|
1211
|
-
href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
|
|
1212
|
-
>
|
|
1213
|
-
<span
|
|
1214
|
-
class="pf-v6-c-jump-links__link-text"
|
|
1215
|
-
>Fifth section</span>
|
|
1216
|
-
</a>
|
|
1217
|
-
</span>
|
|
1218
|
-
</li>
|
|
1219
|
-
</ul>
|
|
1220
|
-
</nav>
|
|
1221
|
-
</section>
|
|
1222
|
-
</div>
|
|
1223
|
-
<div class="pf-v6-c-sidebar__content">
|
|
1224
|
-
<section class="pf-v6-c-page__main-section">
|
|
1225
|
-
<div class="pf-v6-c-content">
|
|
1226
|
-
<p>
|
|
1227
|
-
<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.
|
|
1228
|
-
</p>
|
|
1229
|
-
|
|
1230
|
-
<h2
|
|
1231
|
-
id="jump-links-vertical-toggle-text-mobile-example-jump-links-first"
|
|
1232
|
-
>First section</h2>
|
|
1233
|
-
<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>
|
|
1234
|
-
|
|
1235
|
-
<h2
|
|
1236
|
-
id="jump-links-vertical-toggle-text-mobile-example-jump-links-second"
|
|
1237
|
-
>Second section</h2>
|
|
1238
|
-
<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>
|
|
1239
|
-
|
|
1240
|
-
<h2
|
|
1241
|
-
id="jump-links-vertical-toggle-text-mobile-example-jump-links-third"
|
|
1242
|
-
>Third section</h2>
|
|
1243
|
-
<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>
|
|
1244
|
-
|
|
1245
|
-
<h2
|
|
1246
|
-
id="jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
|
|
1247
|
-
>Fourth section</h2>
|
|
1248
|
-
<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>
|
|
1249
|
-
|
|
1250
|
-
<h2
|
|
1251
|
-
id="jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
|
|
1252
|
-
>Fifth section</h2>
|
|
1253
|
-
<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>
|
|
1254
|
-
</div>
|
|
1255
|
-
</section>
|
|
1272
|
+
</section>
|
|
1273
|
+
</div>
|
|
1256
1274
|
</div>
|
|
1257
1275
|
</div>
|
|
1258
1276
|
</div>
|
|
@@ -1547,71 +1565,75 @@ section: components
|
|
|
1547
1565
|
</div>
|
|
1548
1566
|
</section>
|
|
1549
1567
|
<section class="pf-v6-c-page__main-section pf-m-sticky-top">
|
|
1550
|
-
<
|
|
1551
|
-
<
|
|
1552
|
-
<div class="pf-v6-c-jump-
|
|
1553
|
-
<div class="pf-v6-c-jump-
|
|
1568
|
+
<div class="pf-v6-c-page__main-body">
|
|
1569
|
+
<nav class="pf-v6-c-jump-links pf-m-center">
|
|
1570
|
+
<div class="pf-v6-c-jump-links__main">
|
|
1571
|
+
<div class="pf-v6-c-jump-links__header">
|
|
1572
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
1573
|
+
</div>
|
|
1574
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
1575
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
1576
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1577
|
+
<a class="pf-v6-c-button pf-m-link" href="#-first">
|
|
1578
|
+
<span class="pf-v6-c-jump-links__link-text">First section</span>
|
|
1579
|
+
</a>
|
|
1580
|
+
</span>
|
|
1581
|
+
</li>
|
|
1582
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1583
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1584
|
+
<a class="pf-v6-c-button pf-m-link" href="#-second">
|
|
1585
|
+
<span class="pf-v6-c-jump-links__link-text">Second section</span>
|
|
1586
|
+
</a>
|
|
1587
|
+
</span>
|
|
1588
|
+
</li>
|
|
1589
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1590
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1591
|
+
<a class="pf-v6-c-button pf-m-link" href="#-third">
|
|
1592
|
+
<span class="pf-v6-c-jump-links__link-text">Third section</span>
|
|
1593
|
+
</a>
|
|
1594
|
+
</span>
|
|
1595
|
+
</li>
|
|
1596
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1597
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1598
|
+
<a class="pf-v6-c-button pf-m-link" href="#-fourth">
|
|
1599
|
+
<span class="pf-v6-c-jump-links__link-text">Fourth section</span>
|
|
1600
|
+
</a>
|
|
1601
|
+
</span>
|
|
1602
|
+
</li>
|
|
1603
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1604
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1605
|
+
<a class="pf-v6-c-button pf-m-link" href="#-fifth">
|
|
1606
|
+
<span class="pf-v6-c-jump-links__link-text">Fifth section</span>
|
|
1607
|
+
</a>
|
|
1608
|
+
</span>
|
|
1609
|
+
</li>
|
|
1610
|
+
</ul>
|
|
1554
1611
|
</div>
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1558
|
-
<a class="pf-v6-c-button pf-m-link" href="#-first">
|
|
1559
|
-
<span class="pf-v6-c-jump-links__link-text">First section</span>
|
|
1560
|
-
</a>
|
|
1561
|
-
</span>
|
|
1562
|
-
</li>
|
|
1563
|
-
<li class="pf-v6-c-jump-links__item">
|
|
1564
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1565
|
-
<a class="pf-v6-c-button pf-m-link" href="#-second">
|
|
1566
|
-
<span class="pf-v6-c-jump-links__link-text">Second section</span>
|
|
1567
|
-
</a>
|
|
1568
|
-
</span>
|
|
1569
|
-
</li>
|
|
1570
|
-
<li class="pf-v6-c-jump-links__item">
|
|
1571
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1572
|
-
<a class="pf-v6-c-button pf-m-link" href="#-third">
|
|
1573
|
-
<span class="pf-v6-c-jump-links__link-text">Third section</span>
|
|
1574
|
-
</a>
|
|
1575
|
-
</span>
|
|
1576
|
-
</li>
|
|
1577
|
-
<li class="pf-v6-c-jump-links__item">
|
|
1578
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1579
|
-
<a class="pf-v6-c-button pf-m-link" href="#-fourth">
|
|
1580
|
-
<span class="pf-v6-c-jump-links__link-text">Fourth section</span>
|
|
1581
|
-
</a>
|
|
1582
|
-
</span>
|
|
1583
|
-
</li>
|
|
1584
|
-
<li class="pf-v6-c-jump-links__item">
|
|
1585
|
-
<span class="pf-v6-c-jump-links__link">
|
|
1586
|
-
<a class="pf-v6-c-button pf-m-link" href="#-fifth">
|
|
1587
|
-
<span class="pf-v6-c-jump-links__link-text">Fifth section</span>
|
|
1588
|
-
</a>
|
|
1589
|
-
</span>
|
|
1590
|
-
</li>
|
|
1591
|
-
</ul>
|
|
1592
|
-
</div>
|
|
1593
|
-
</nav>
|
|
1612
|
+
</nav>
|
|
1613
|
+
</div>
|
|
1594
1614
|
</section>
|
|
1595
1615
|
<section class="pf-v6-c-page__main-section">
|
|
1596
|
-
<div class="pf-v6-c-
|
|
1597
|
-
<
|
|
1598
|
-
<
|
|
1599
|
-
|
|
1616
|
+
<div class="pf-v6-c-page__main-body">
|
|
1617
|
+
<div class="pf-v6-c-content">
|
|
1618
|
+
<p>
|
|
1619
|
+
<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.
|
|
1620
|
+
</p>
|
|
1600
1621
|
|
|
1601
|
-
|
|
1602
|
-
|
|
1622
|
+
<h2 id="-first">First section</h2>
|
|
1623
|
+
<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>
|
|
1603
1624
|
|
|
1604
|
-
|
|
1605
|
-
|
|
1625
|
+
<h2 id="-second">Second section</h2>
|
|
1626
|
+
<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>
|
|
1606
1627
|
|
|
1607
|
-
|
|
1608
|
-
|
|
1628
|
+
<h2 id="-third">Third section</h2>
|
|
1629
|
+
<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>
|
|
1609
1630
|
|
|
1610
|
-
|
|
1611
|
-
|
|
1631
|
+
<h2 id="-fourth">Fourth section</h2>
|
|
1632
|
+
<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>
|
|
1612
1633
|
|
|
1613
|
-
|
|
1614
|
-
|
|
1634
|
+
<h2 id="-fifth">Fifth section</h2>
|
|
1635
|
+
<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>
|
|
1636
|
+
</div>
|
|
1615
1637
|
</div>
|
|
1616
1638
|
</section>
|
|
1617
1639
|
</main>
|
|
@@ -1870,106 +1892,110 @@ section: components
|
|
|
1870
1892
|
<div class="pf-v6-c-sidebar__main">
|
|
1871
1893
|
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
1872
1894
|
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1873
|
-
<
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
<
|
|
1879
|
-
<
|
|
1880
|
-
<
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
<
|
|
1892
|
-
<
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
<
|
|
1904
|
-
<
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
<
|
|
1916
|
-
<
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
<
|
|
1928
|
-
<
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1895
|
+
<div class="pf-v6-c-page__main-body">
|
|
1896
|
+
<nav
|
|
1897
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
1898
|
+
>
|
|
1899
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
1900
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
1901
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
1902
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1903
|
+
<a
|
|
1904
|
+
class="pf-v6-c-button pf-m-link"
|
|
1905
|
+
href="#jump-links-drawer-jump-links-first"
|
|
1906
|
+
>
|
|
1907
|
+
<span
|
|
1908
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1909
|
+
>First section</span>
|
|
1910
|
+
</a>
|
|
1911
|
+
</span>
|
|
1912
|
+
</li>
|
|
1913
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1914
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1915
|
+
<a
|
|
1916
|
+
class="pf-v6-c-button pf-m-link"
|
|
1917
|
+
href="#jump-links-drawer-jump-links-second"
|
|
1918
|
+
>
|
|
1919
|
+
<span
|
|
1920
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1921
|
+
>Second section</span>
|
|
1922
|
+
</a>
|
|
1923
|
+
</span>
|
|
1924
|
+
</li>
|
|
1925
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1926
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1927
|
+
<a
|
|
1928
|
+
class="pf-v6-c-button pf-m-link"
|
|
1929
|
+
href="#jump-links-drawer-jump-links-third"
|
|
1930
|
+
>
|
|
1931
|
+
<span
|
|
1932
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1933
|
+
>Third section</span>
|
|
1934
|
+
</a>
|
|
1935
|
+
</span>
|
|
1936
|
+
</li>
|
|
1937
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1938
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1939
|
+
<a
|
|
1940
|
+
class="pf-v6-c-button pf-m-link"
|
|
1941
|
+
href="#jump-links-drawer-jump-links-fourth"
|
|
1942
|
+
>
|
|
1943
|
+
<span
|
|
1944
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1945
|
+
>Fourth section</span>
|
|
1946
|
+
</a>
|
|
1947
|
+
</span>
|
|
1948
|
+
</li>
|
|
1949
|
+
<li class="pf-v6-c-jump-links__item">
|
|
1950
|
+
<span class="pf-v6-c-jump-links__link">
|
|
1951
|
+
<a
|
|
1952
|
+
class="pf-v6-c-button pf-m-link"
|
|
1953
|
+
href="#jump-links-drawer-jump-links-fifth"
|
|
1954
|
+
>
|
|
1955
|
+
<span
|
|
1956
|
+
class="pf-v6-c-jump-links__link-text"
|
|
1957
|
+
>Fifth section</span>
|
|
1958
|
+
</a>
|
|
1959
|
+
</span>
|
|
1960
|
+
</li>
|
|
1961
|
+
</ul>
|
|
1962
|
+
</nav>
|
|
1963
|
+
</div>
|
|
1940
1964
|
</section>
|
|
1941
1965
|
</div>
|
|
1942
1966
|
<div class="pf-v6-c-sidebar__content">
|
|
1943
1967
|
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
1944
|
-
<div class="pf-v6-c-
|
|
1945
|
-
<
|
|
1946
|
-
<
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1968
|
+
<div class="pf-v6-c-page__main-body">
|
|
1969
|
+
<div class="pf-v6-c-content">
|
|
1970
|
+
<p>
|
|
1971
|
+
<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.
|
|
1972
|
+
</p>
|
|
1973
|
+
|
|
1974
|
+
<h2
|
|
1975
|
+
id="jump-links-drawer-jump-links-first"
|
|
1976
|
+
>First section</h2>
|
|
1977
|
+
<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>
|
|
1978
|
+
|
|
1979
|
+
<h2
|
|
1980
|
+
id="jump-links-drawer-jump-links-second"
|
|
1981
|
+
>Second section</h2>
|
|
1982
|
+
<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>
|
|
1983
|
+
|
|
1984
|
+
<h2
|
|
1985
|
+
id="jump-links-drawer-jump-links-third"
|
|
1986
|
+
>Third section</h2>
|
|
1987
|
+
<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>
|
|
1988
|
+
|
|
1989
|
+
<h2
|
|
1990
|
+
id="jump-links-drawer-jump-links-fourth"
|
|
1991
|
+
>Fourth section</h2>
|
|
1992
|
+
<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>
|
|
1993
|
+
|
|
1994
|
+
<h2
|
|
1995
|
+
id="jump-links-drawer-jump-links-fifth"
|
|
1996
|
+
>Fifth section</h2>
|
|
1997
|
+
<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>
|
|
1998
|
+
</div>
|
|
1973
1999
|
</div>
|
|
1974
2000
|
</section>
|
|
1975
2001
|
</div>
|
|
@@ -2255,106 +2281,110 @@ section: components
|
|
|
2255
2281
|
<div class="pf-v6-c-sidebar__main">
|
|
2256
2282
|
<div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
2257
2283
|
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
2258
|
-
<
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
<
|
|
2264
|
-
<
|
|
2265
|
-
<
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
<
|
|
2277
|
-
<
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
<
|
|
2289
|
-
<
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
<
|
|
2301
|
-
<
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
<
|
|
2313
|
-
<
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2284
|
+
<div class="pf-v6-c-page__main-body">
|
|
2285
|
+
<nav
|
|
2286
|
+
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
2287
|
+
>
|
|
2288
|
+
<div class="pf-v6-c-jump-links__label">Jump to section</div>
|
|
2289
|
+
<ul class="pf-v6-c-jump-links__list" role="list">
|
|
2290
|
+
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
2291
|
+
<span class="pf-v6-c-jump-links__link">
|
|
2292
|
+
<a
|
|
2293
|
+
class="pf-v6-c-button pf-m-link"
|
|
2294
|
+
href="#jump-links-drawer-expanded-jump-links-first"
|
|
2295
|
+
>
|
|
2296
|
+
<span
|
|
2297
|
+
class="pf-v6-c-jump-links__link-text"
|
|
2298
|
+
>First section</span>
|
|
2299
|
+
</a>
|
|
2300
|
+
</span>
|
|
2301
|
+
</li>
|
|
2302
|
+
<li class="pf-v6-c-jump-links__item">
|
|
2303
|
+
<span class="pf-v6-c-jump-links__link">
|
|
2304
|
+
<a
|
|
2305
|
+
class="pf-v6-c-button pf-m-link"
|
|
2306
|
+
href="#jump-links-drawer-expanded-jump-links-second"
|
|
2307
|
+
>
|
|
2308
|
+
<span
|
|
2309
|
+
class="pf-v6-c-jump-links__link-text"
|
|
2310
|
+
>Second section</span>
|
|
2311
|
+
</a>
|
|
2312
|
+
</span>
|
|
2313
|
+
</li>
|
|
2314
|
+
<li class="pf-v6-c-jump-links__item">
|
|
2315
|
+
<span class="pf-v6-c-jump-links__link">
|
|
2316
|
+
<a
|
|
2317
|
+
class="pf-v6-c-button pf-m-link"
|
|
2318
|
+
href="#jump-links-drawer-expanded-jump-links-third"
|
|
2319
|
+
>
|
|
2320
|
+
<span
|
|
2321
|
+
class="pf-v6-c-jump-links__link-text"
|
|
2322
|
+
>Third section</span>
|
|
2323
|
+
</a>
|
|
2324
|
+
</span>
|
|
2325
|
+
</li>
|
|
2326
|
+
<li class="pf-v6-c-jump-links__item">
|
|
2327
|
+
<span class="pf-v6-c-jump-links__link">
|
|
2328
|
+
<a
|
|
2329
|
+
class="pf-v6-c-button pf-m-link"
|
|
2330
|
+
href="#jump-links-drawer-expanded-jump-links-fourth"
|
|
2331
|
+
>
|
|
2332
|
+
<span
|
|
2333
|
+
class="pf-v6-c-jump-links__link-text"
|
|
2334
|
+
>Fourth section</span>
|
|
2335
|
+
</a>
|
|
2336
|
+
</span>
|
|
2337
|
+
</li>
|
|
2338
|
+
<li class="pf-v6-c-jump-links__item">
|
|
2339
|
+
<span class="pf-v6-c-jump-links__link">
|
|
2340
|
+
<a
|
|
2341
|
+
class="pf-v6-c-button pf-m-link"
|
|
2342
|
+
href="#jump-links-drawer-expanded-jump-links-fifth"
|
|
2343
|
+
>
|
|
2344
|
+
<span
|
|
2345
|
+
class="pf-v6-c-jump-links__link-text"
|
|
2346
|
+
>Fifth section</span>
|
|
2347
|
+
</a>
|
|
2348
|
+
</span>
|
|
2349
|
+
</li>
|
|
2350
|
+
</ul>
|
|
2351
|
+
</nav>
|
|
2352
|
+
</div>
|
|
2325
2353
|
</section>
|
|
2326
2354
|
</div>
|
|
2327
2355
|
<div class="pf-v6-c-sidebar__content">
|
|
2328
2356
|
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
2329
|
-
<div class="pf-v6-c-
|
|
2330
|
-
<
|
|
2331
|
-
<
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2357
|
+
<div class="pf-v6-c-page__main-body">
|
|
2358
|
+
<div class="pf-v6-c-content">
|
|
2359
|
+
<p>
|
|
2360
|
+
<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.
|
|
2361
|
+
</p>
|
|
2362
|
+
|
|
2363
|
+
<h2
|
|
2364
|
+
id="jump-links-drawer-expanded-jump-links-first"
|
|
2365
|
+
>First section</h2>
|
|
2366
|
+
<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>
|
|
2367
|
+
|
|
2368
|
+
<h2
|
|
2369
|
+
id="jump-links-drawer-expanded-jump-links-second"
|
|
2370
|
+
>Second section</h2>
|
|
2371
|
+
<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>
|
|
2372
|
+
|
|
2373
|
+
<h2
|
|
2374
|
+
id="jump-links-drawer-expanded-jump-links-third"
|
|
2375
|
+
>Third section</h2>
|
|
2376
|
+
<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>
|
|
2377
|
+
|
|
2378
|
+
<h2
|
|
2379
|
+
id="jump-links-drawer-expanded-jump-links-fourth"
|
|
2380
|
+
>Fourth section</h2>
|
|
2381
|
+
<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>
|
|
2382
|
+
|
|
2383
|
+
<h2
|
|
2384
|
+
id="jump-links-drawer-expanded-jump-links-fifth"
|
|
2385
|
+
>Fifth section</h2>
|
|
2386
|
+
<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>
|
|
2387
|
+
</div>
|
|
2358
2388
|
</div>
|
|
2359
2389
|
</section>
|
|
2360
2390
|
</div>
|