@patternfly/patternfly 6.5.0-prerelease.54 → 6.5.0-prerelease.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/assets/images/compass--hero-bg.png +0 -0
  2. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  3. package/assets/images/compass--wallpaper-light.jpg +0 -0
  4. package/assets/images/glass-brand-dark.jpg +0 -0
  5. package/assets/images/glass-brand-dark.png +0 -0
  6. package/assets/images/glass-brand-light.jpg +0 -0
  7. package/assets/images/glass-brand-light.png +0 -0
  8. package/base/patternfly-variables.css +4238 -784
  9. package/base/patternfly-variables.scss +23 -21
  10. package/base/tokens/tokens-dark.scss +17 -17
  11. package/base/tokens/tokens-default.scss +18 -16
  12. package/base/tokens/tokens-glass-dark.scss +21 -4
  13. package/base/tokens/tokens-glass.scss +17 -4
  14. package/base/tokens/tokens-local.scss +4 -3
  15. package/base/tokens/tokens-palette.scss +1 -1
  16. package/base/tokens/tokens-redhat-dark.scss +432 -2
  17. package/base/tokens/tokens-redhat-glass-dark.scss +432 -4
  18. package/base/tokens/tokens-redhat-glass.scss +748 -4
  19. package/base/tokens/tokens-redhat-highcontrast-dark.scss +400 -3
  20. package/base/tokens/tokens-redhat-highcontrast.scss +635 -3
  21. package/base/tokens/tokens-redhat.scss +786 -2
  22. package/components/Accordion/accordion.css +10 -0
  23. package/components/Accordion/accordion.scss +11 -0
  24. package/components/Button/button.css +0 -14
  25. package/components/Button/button.scss +1 -16
  26. package/components/Card/card.css +13 -0
  27. package/components/Card/card.scss +20 -0
  28. package/components/Compass/compass.css +6 -6
  29. package/components/Compass/compass.scss +6 -6
  30. package/components/DataList/data-list.css +1 -1
  31. package/components/DataList/data-list.scss +1 -0
  32. package/components/Drawer/drawer.css +11 -6
  33. package/components/Drawer/drawer.scss +24 -11
  34. package/components/Login/login.css +7 -3
  35. package/components/Login/login.scss +7 -3
  36. package/components/Masthead/masthead.css +11 -3
  37. package/components/Masthead/masthead.scss +14 -4
  38. package/components/MenuToggle/menu-toggle.scss +1 -1
  39. package/components/Nav/nav.scss +1 -1
  40. package/components/Page/page.css +115 -8
  41. package/components/Page/page.scss +123 -11
  42. package/components/Panel/panel.css +14 -0
  43. package/components/Panel/panel.scss +18 -0
  44. package/components/Table/table-grid.css +4 -4
  45. package/components/Table/table-grid.scss +4 -4
  46. package/components/Table/table.css +12 -7
  47. package/components/Table/table.scss +13 -9
  48. package/components/_index.css +204 -52
  49. package/docs/components/Accordion/examples/Accordion.md +1 -0
  50. package/docs/components/Card/examples/Card.md +1 -0
  51. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  52. package/docs/components/Page/examples/Page.md +47 -37
  53. package/docs/components/Panel/examples/Panel.md +12 -0
  54. package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
  55. package/docs/demos/Alert/examples/Alert.md +120 -114
  56. package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
  57. package/docs/demos/Banner/examples/Banner.md +80 -76
  58. package/docs/demos/CardView/examples/CardView.md +297 -271
  59. package/docs/demos/Compass/examples/Compass.md +1409 -2732
  60. package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
  61. package/docs/demos/DataList/examples/DataList.md +160 -152
  62. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
  63. package/docs/demos/Drawer/examples/Drawer.md +200 -190
  64. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
  65. package/docs/demos/Masthead/examples/Masthead.md +320 -304
  66. package/docs/demos/Modal/examples/Modal.md +240 -228
  67. package/docs/demos/Nav/examples/Nav.md +2302 -600
  68. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
  69. package/docs/demos/Page/examples/Page.md +606 -568
  70. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
  71. package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
  72. package/docs/demos/Table/examples/Table.md +640 -604
  73. package/docs/demos/Tabs/examples/Tabs.md +240 -228
  74. package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
  75. package/docs/demos/Wizard/examples/Wizard.md +360 -342
  76. package/package.json +1 -1
  77. package/patternfly-base-no-globals.css +4238 -784
  78. package/patternfly-base.css +4238 -784
  79. package/patternfly-no-globals.css +4356 -733
  80. package/patternfly.css +4356 -733
  81. package/patternfly.min.css +1 -1
  82. package/patternfly.min.css.map +1 -1
  83. package/patternfly.scss +27 -0
  84. package/sass-utilities/scss-variables.scss +1 -1
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -195,44 +195,46 @@ section: components
195
195
  </div>
196
196
  </header>
197
197
  <div class="pf-v6-c-page__sidebar">
198
- <div class="pf-v6-c-page__sidebar-body">
199
- <nav
200
- class="pf-v6-c-nav"
201
- id="nav-basic-example-primary-nav"
202
- aria-label="Global"
203
- >
204
- <ul class="pf-v6-c-nav__list" role="list">
205
- <li class="pf-v6-c-nav__item">
206
- <a href="#" class="pf-v6-c-nav__link">
207
- <span class="pf-v6-c-nav__link-text">System panel</span>
208
- </a>
209
- </li>
210
- <li class="pf-v6-c-nav__item">
211
- <a
212
- href="#"
213
- class="pf-v6-c-nav__link pf-m-current"
214
- aria-current="page"
215
- >
216
- <span class="pf-v6-c-nav__link-text">Policy</span>
217
- </a>
218
- </li>
219
- <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">
221
- <span class="pf-v6-c-nav__link-text">Authentication</span>
222
- </a>
223
- </li>
224
- <li class="pf-v6-c-nav__item">
225
- <a href="#" class="pf-v6-c-nav__link">
226
- <span class="pf-v6-c-nav__link-text">Network services</span>
227
- </a>
228
- </li>
229
- <li class="pf-v6-c-nav__item">
230
- <a href="#" class="pf-v6-c-nav__link">
231
- <span class="pf-v6-c-nav__link-text">Server</span>
232
- </a>
233
- </li>
234
- </ul>
235
- </nav>
198
+ <div class="pf-v6-c-page__sidebar-main">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
+ <nav
201
+ class="pf-v6-c-nav"
202
+ id="nav-basic-example-primary-nav"
203
+ aria-label="Global"
204
+ >
205
+ <ul class="pf-v6-c-nav__list" role="list">
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">System panel</span>
209
+ </a>
210
+ </li>
211
+ <li class="pf-v6-c-nav__item">
212
+ <a
213
+ href="#"
214
+ class="pf-v6-c-nav__link pf-m-current"
215
+ aria-current="page"
216
+ >
217
+ <span class="pf-v6-c-nav__link-text">Policy</span>
218
+ </a>
219
+ </li>
220
+ <li class="pf-v6-c-nav__item">
221
+ <a href="#" class="pf-v6-c-nav__link">
222
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
223
+ </a>
224
+ </li>
225
+ <li class="pf-v6-c-nav__item">
226
+ <a href="#" class="pf-v6-c-nav__link">
227
+ <span class="pf-v6-c-nav__link-text">Network services</span>
228
+ </a>
229
+ </li>
230
+ <li class="pf-v6-c-nav__item">
231
+ <a href="#" class="pf-v6-c-nav__link">
232
+ <span class="pf-v6-c-nav__link-text">Server</span>
233
+ </a>
234
+ </li>
235
+ </ul>
236
+ </nav>
237
+ </div>
236
238
  </div>
237
239
  </div>
238
240
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -553,76 +555,84 @@ section: components
553
555
  </div>
554
556
  </header>
555
557
  <div class="pf-v6-c-page__sidebar">
556
- <div class="pf-v6-c-page__sidebar-body">
557
- <nav
558
- class="pf-v6-c-nav"
559
- id="nav-grouped-nav-example-grouped-nav"
560
- aria-label="Global"
561
- >
562
- <section class="pf-v6-c-nav__section" aria-labelledby="grouped-title1">
563
- <h2
564
- class="pf-v6-c-nav__section-title"
565
- id="grouped-title1"
566
- >System panel</h2>
567
- <ul class="pf-v6-c-nav__list" role="list">
568
- <li class="pf-v6-c-nav__item">
569
- <a href="#" class="pf-v6-c-nav__link">
570
- <span class="pf-v6-c-nav__link-text">Overview</span>
571
- </a>
572
- </li>
573
- <li class="pf-v6-c-nav__item">
574
- <a href="#" class="pf-v6-c-nav__link">
575
- <span class="pf-v6-c-nav__link-text">Resource usage</span>
576
- </a>
577
- </li>
578
- <li class="pf-v6-c-nav__item">
579
- <a
580
- href="#"
581
- class="pf-v6-c-nav__link pf-m-current"
582
- aria-current="page"
583
- >
584
- <span class="pf-v6-c-nav__link-text">Hypervisors</span>
585
- </a>
586
- </li>
587
- <li class="pf-v6-c-nav__item">
588
- <a href="#" class="pf-v6-c-nav__link">
589
- <span class="pf-v6-c-nav__link-text">Instances</span>
590
- </a>
591
- </li>
592
- <li class="pf-v6-c-nav__item">
593
- <a href="#" class="pf-v6-c-nav__link">
594
- <span class="pf-v6-c-nav__link-text">Volumes</span>
595
- </a>
596
- </li>
597
- <li class="pf-v6-c-nav__item">
598
- <a href="#" class="pf-v6-c-nav__link">
599
- <span class="pf-v6-c-nav__link-text">Networks</span>
600
- </a>
601
- </li>
602
- </ul>
603
- </section>
558
+ <div class="pf-v6-c-page__sidebar-main">
559
+ <div class="pf-v6-c-page__sidebar-body">
560
+ <nav
561
+ class="pf-v6-c-nav"
562
+ id="nav-grouped-nav-example-grouped-nav"
563
+ aria-label="Global"
564
+ >
565
+ <section
566
+ class="pf-v6-c-nav__section"
567
+ aria-labelledby="grouped-title1"
568
+ >
569
+ <h2
570
+ class="pf-v6-c-nav__section-title"
571
+ id="grouped-title1"
572
+ >System panel</h2>
573
+ <ul class="pf-v6-c-nav__list" role="list">
574
+ <li class="pf-v6-c-nav__item">
575
+ <a href="#" class="pf-v6-c-nav__link">
576
+ <span class="pf-v6-c-nav__link-text">Overview</span>
577
+ </a>
578
+ </li>
579
+ <li class="pf-v6-c-nav__item">
580
+ <a href="#" class="pf-v6-c-nav__link">
581
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
582
+ </a>
583
+ </li>
584
+ <li class="pf-v6-c-nav__item">
585
+ <a
586
+ href="#"
587
+ class="pf-v6-c-nav__link pf-m-current"
588
+ aria-current="page"
589
+ >
590
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
591
+ </a>
592
+ </li>
593
+ <li class="pf-v6-c-nav__item">
594
+ <a href="#" class="pf-v6-c-nav__link">
595
+ <span class="pf-v6-c-nav__link-text">Instances</span>
596
+ </a>
597
+ </li>
598
+ <li class="pf-v6-c-nav__item">
599
+ <a href="#" class="pf-v6-c-nav__link">
600
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
601
+ </a>
602
+ </li>
603
+ <li class="pf-v6-c-nav__item">
604
+ <a href="#" class="pf-v6-c-nav__link">
605
+ <span class="pf-v6-c-nav__link-text">Networks</span>
606
+ </a>
607
+ </li>
608
+ </ul>
609
+ </section>
604
610
 
605
- <section class="pf-v6-c-nav__section" aria-labelledby="grouped-title2">
606
- <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Policy</h2>
607
- <ul class="pf-v6-c-nav__list" role="list">
608
- <li class="pf-v6-c-nav__item">
609
- <a href="#" class="pf-v6-c-nav__link">
610
- <span class="pf-v6-c-nav__link-text">Hosts</span>
611
- </a>
612
- </li>
613
- <li class="pf-v6-c-nav__item">
614
- <a href="#" class="pf-v6-c-nav__link">
615
- <span class="pf-v6-c-nav__link-text">Virtual machines</span>
616
- </a>
617
- </li>
618
- <li class="pf-v6-c-nav__item">
619
- <a href="#" class="pf-v6-c-nav__link">
620
- <span class="pf-v6-c-nav__link-text">Storage</span>
621
- </a>
622
- </li>
623
- </ul>
624
- </section>
625
- </nav>
611
+ <section
612
+ class="pf-v6-c-nav__section"
613
+ aria-labelledby="grouped-title2"
614
+ >
615
+ <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Policy</h2>
616
+ <ul class="pf-v6-c-nav__list" role="list">
617
+ <li class="pf-v6-c-nav__item">
618
+ <a href="#" class="pf-v6-c-nav__link">
619
+ <span class="pf-v6-c-nav__link-text">Hosts</span>
620
+ </a>
621
+ </li>
622
+ <li class="pf-v6-c-nav__item">
623
+ <a href="#" class="pf-v6-c-nav__link">
624
+ <span class="pf-v6-c-nav__link-text">Virtual machines</span>
625
+ </a>
626
+ </li>
627
+ <li class="pf-v6-c-nav__item">
628
+ <a href="#" class="pf-v6-c-nav__link">
629
+ <span class="pf-v6-c-nav__link-text">Storage</span>
630
+ </a>
631
+ </li>
632
+ </ul>
633
+ </section>
634
+ </nav>
635
+ </div>
626
636
  </div>
627
637
  </div>
628
638
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -943,22 +953,191 @@ section: components
943
953
  </div>
944
954
  </header>
945
955
  <div class="pf-v6-c-page__sidebar">
946
- <div class="pf-v6-c-page__sidebar-body">
947
- <nav
948
- class="pf-v6-c-nav"
949
- id="nav-expandable-example-expandable-nav"
950
- aria-label="Global"
951
- >
952
- <ul class="pf-v6-c-nav__list" role="list">
953
- <li class="pf-v6-c-nav__item pf-m-expanded">
954
- <button
955
- class="pf-v6-c-nav__link"
956
- aria-expanded="true"
957
- id="nav-expandable-example-expandable-nav-link1"
958
- >
959
- <span class="pf-v6-c-nav__link-text">System panel</span>
960
- <span class="pf-v6-c-nav__toggle">
961
- <span class="pf-v6-c-nav__toggle-icon">
956
+ <div class="pf-v6-c-page__sidebar-main">
957
+ <div class="pf-v6-c-page__sidebar-body">
958
+ <nav
959
+ class="pf-v6-c-nav"
960
+ id="nav-expandable-example-expandable-nav"
961
+ aria-label="Global"
962
+ >
963
+ <ul class="pf-v6-c-nav__list" role="list">
964
+ <li class="pf-v6-c-nav__item pf-m-expanded">
965
+ <button
966
+ class="pf-v6-c-nav__link"
967
+ aria-expanded="true"
968
+ id="nav-expandable-example-expandable-nav-link1"
969
+ >
970
+ <span class="pf-v6-c-nav__link-text">System panel</span>
971
+ <span class="pf-v6-c-nav__toggle">
972
+ <span class="pf-v6-c-nav__toggle-icon">
973
+ <svg
974
+ class="pf-v6-svg"
975
+ viewBox="0 0 20 20"
976
+ fill="currentColor"
977
+ aria-hidden="true"
978
+ role="img"
979
+ width="1em"
980
+ height="1em"
981
+ >
982
+ <path
983
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
984
+ />
985
+ </svg>
986
+ </span>
987
+ </span>
988
+ </button>
989
+ <section
990
+ class="pf-v6-c-nav__subnav"
991
+ aria-labelledby="nav-expandable-example-expandable-nav-link1"
992
+ >
993
+ <ul class="pf-v6-c-nav__list" role="list">
994
+ <li class="pf-v6-c-nav__item">
995
+ <a href="#" class="pf-v6-c-nav__link">
996
+ <span class="pf-v6-c-nav__link-text">Overview</span>
997
+ </a>
998
+ </li>
999
+ <li class="pf-v6-c-nav__item">
1000
+ <a
1001
+ href="#"
1002
+ class="pf-v6-c-nav__link pf-m-current"
1003
+ aria-current="page"
1004
+ >
1005
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
1006
+ </a>
1007
+ </li>
1008
+ <li class="pf-v6-c-nav__item">
1009
+ <a href="#" class="pf-v6-c-nav__link">
1010
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
1011
+ </a>
1012
+ </li>
1013
+ <li class="pf-v6-c-nav__item">
1014
+ <a href="#" class="pf-v6-c-nav__link">
1015
+ <span class="pf-v6-c-nav__link-text">Instances</span>
1016
+ </a>
1017
+ </li>
1018
+ <li class="pf-v6-c-nav__item">
1019
+ <a href="#" class="pf-v6-c-nav__link">
1020
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
1021
+ </a>
1022
+ </li>
1023
+ <li class="pf-v6-c-nav__item">
1024
+ <a href="#" class="pf-v6-c-nav__link">
1025
+ <span class="pf-v6-c-nav__link-text">Networks</span>
1026
+ </a>
1027
+ </li>
1028
+ </ul>
1029
+ </section>
1030
+ </li>
1031
+ <li class="pf-v6-c-nav__item">
1032
+ <button
1033
+ class="pf-v6-c-nav__link"
1034
+ aria-expanded="false"
1035
+ id="nav-expandable-example-expandable-nav-link2"
1036
+ >
1037
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1038
+ <span class="pf-v6-c-nav__toggle">
1039
+ <span class="pf-v6-c-nav__toggle-icon">
1040
+ <svg
1041
+ class="pf-v6-svg"
1042
+ viewBox="0 0 20 20"
1043
+ fill="currentColor"
1044
+ aria-hidden="true"
1045
+ role="img"
1046
+ width="1em"
1047
+ height="1em"
1048
+ >
1049
+ <path
1050
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1051
+ />
1052
+ </svg>
1053
+ </span>
1054
+ </span>
1055
+ </button>
1056
+ <section
1057
+ class="pf-v6-c-nav__subnav"
1058
+ aria-labelledby="nav-expandable-example-expandable-nav-link2"
1059
+ hidden
1060
+ inert
1061
+ >
1062
+ <ul class="pf-v6-c-nav__list" role="list">
1063
+ <li class="pf-v6-c-nav__item">
1064
+ <a href="#" class="pf-v6-c-nav__link">
1065
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
1066
+ </a>
1067
+ </li>
1068
+ <li class="pf-v6-c-nav__item">
1069
+ <a href="#" class="pf-v6-c-nav__link">
1070
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1071
+ </a>
1072
+ </li>
1073
+ </ul>
1074
+ </section>
1075
+ </li>
1076
+ <li class="pf-v6-c-nav__item">
1077
+ <button
1078
+ class="pf-v6-c-nav__link"
1079
+ aria-expanded="false"
1080
+ id="nav-expandable-example-expandable-nav-link3"
1081
+ >
1082
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1083
+ <span class="pf-v6-c-nav__toggle">
1084
+ <span class="pf-v6-c-nav__toggle-icon">
1085
+ <svg
1086
+ class="pf-v6-svg"
1087
+ viewBox="0 0 20 20"
1088
+ fill="currentColor"
1089
+ aria-hidden="true"
1090
+ role="img"
1091
+ width="1em"
1092
+ height="1em"
1093
+ >
1094
+ <path
1095
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1096
+ />
1097
+ </svg>
1098
+ </span>
1099
+ </span>
1100
+ </button>
1101
+ <section
1102
+ class="pf-v6-c-nav__subnav"
1103
+ aria-labelledby="nav-expandable-example-expandable-nav-link3"
1104
+ hidden
1105
+ inert
1106
+ >
1107
+ <ul class="pf-v6-c-nav__list" role="list">
1108
+ <li class="pf-v6-c-nav__item">
1109
+ <a href="#" class="pf-v6-c-nav__link">
1110
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
1111
+ </a>
1112
+ </li>
1113
+ <li class="pf-v6-c-nav__item">
1114
+ <a href="#" class="pf-v6-c-nav__link">
1115
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1116
+ </a>
1117
+ </li>
1118
+ </ul>
1119
+ </section>
1120
+ </li>
1121
+ </ul>
1122
+ </nav>
1123
+ </div>
1124
+ </div>
1125
+ </div>
1126
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1127
+ <main
1128
+ class="pf-v6-c-page__main"
1129
+ tabindex="-1"
1130
+ id="main-content-nav-expandable-example"
1131
+ >
1132
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1133
+ <div class="pf-v6-c-page__main-body">
1134
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1135
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1136
+ <li class="pf-v6-c-breadcrumb__item">
1137
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1138
+ </li>
1139
+ <li class="pf-v6-c-breadcrumb__item">
1140
+ <span class="pf-v6-c-breadcrumb__item-divider">
962
1141
  <svg
963
1142
  class="pf-v6-svg"
964
1143
  viewBox="0 0 20 20"
@@ -969,63 +1148,15 @@ section: components
969
1148
  height="1em"
970
1149
  >
971
1150
  <path
972
- d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1151
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
973
1152
  />
974
1153
  </svg>
975
1154
  </span>
976
- </span>
977
- </button>
978
- <section
979
- class="pf-v6-c-nav__subnav"
980
- aria-labelledby="nav-expandable-example-expandable-nav-link1"
981
- >
982
- <ul class="pf-v6-c-nav__list" role="list">
983
- <li class="pf-v6-c-nav__item">
984
- <a href="#" class="pf-v6-c-nav__link">
985
- <span class="pf-v6-c-nav__link-text">Overview</span>
986
- </a>
987
- </li>
988
- <li class="pf-v6-c-nav__item">
989
- <a
990
- href="#"
991
- class="pf-v6-c-nav__link pf-m-current"
992
- aria-current="page"
993
- >
994
- <span class="pf-v6-c-nav__link-text">Resource usage</span>
995
- </a>
996
- </li>
997
- <li class="pf-v6-c-nav__item">
998
- <a href="#" class="pf-v6-c-nav__link">
999
- <span class="pf-v6-c-nav__link-text">Hypervisors</span>
1000
- </a>
1001
- </li>
1002
- <li class="pf-v6-c-nav__item">
1003
- <a href="#" class="pf-v6-c-nav__link">
1004
- <span class="pf-v6-c-nav__link-text">Instances</span>
1005
- </a>
1006
- </li>
1007
- <li class="pf-v6-c-nav__item">
1008
- <a href="#" class="pf-v6-c-nav__link">
1009
- <span class="pf-v6-c-nav__link-text">Volumes</span>
1010
- </a>
1011
- </li>
1012
- <li class="pf-v6-c-nav__item">
1013
- <a href="#" class="pf-v6-c-nav__link">
1014
- <span class="pf-v6-c-nav__link-text">Networks</span>
1015
- </a>
1016
- </li>
1017
- </ul>
1018
- </section>
1019
- </li>
1020
- <li class="pf-v6-c-nav__item">
1021
- <button
1022
- class="pf-v6-c-nav__link"
1023
- aria-expanded="false"
1024
- id="nav-expandable-example-expandable-nav-link2"
1025
- >
1026
- <span class="pf-v6-c-nav__link-text">Policy</span>
1027
- <span class="pf-v6-c-nav__toggle">
1028
- <span class="pf-v6-c-nav__toggle-icon">
1155
+
1156
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1157
+ </li>
1158
+ <li class="pf-v6-c-breadcrumb__item">
1159
+ <span class="pf-v6-c-breadcrumb__item-divider">
1029
1160
  <svg
1030
1161
  class="pf-v6-svg"
1031
1162
  viewBox="0 0 20 20"
@@ -1036,41 +1167,15 @@ section: components
1036
1167
  height="1em"
1037
1168
  >
1038
1169
  <path
1039
- d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1170
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1040
1171
  />
1041
1172
  </svg>
1042
1173
  </span>
1043
- </span>
1044
- </button>
1045
- <section
1046
- class="pf-v6-c-nav__subnav"
1047
- aria-labelledby="nav-expandable-example-expandable-nav-link2"
1048
- hidden
1049
- inert
1050
- >
1051
- <ul class="pf-v6-c-nav__list" role="list">
1052
- <li class="pf-v6-c-nav__item">
1053
- <a href="#" class="pf-v6-c-nav__link">
1054
- <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
1055
- </a>
1056
- </li>
1057
- <li class="pf-v6-c-nav__item">
1058
- <a href="#" class="pf-v6-c-nav__link">
1059
- <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1060
- </a>
1061
- </li>
1062
- </ul>
1063
- </section>
1064
- </li>
1065
- <li class="pf-v6-c-nav__item">
1066
- <button
1067
- class="pf-v6-c-nav__link"
1068
- aria-expanded="false"
1069
- id="nav-expandable-example-expandable-nav-link3"
1070
- >
1071
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1072
- <span class="pf-v6-c-nav__toggle">
1073
- <span class="pf-v6-c-nav__toggle-icon">
1174
+
1175
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1176
+ </li>
1177
+ <li class="pf-v6-c-breadcrumb__item">
1178
+ <span class="pf-v6-c-breadcrumb__item-divider">
1074
1179
  <svg
1075
1180
  class="pf-v6-svg"
1076
1181
  viewBox="0 0 20 20"
@@ -1081,100 +1186,7 @@ section: components
1081
1186
  height="1em"
1082
1187
  >
1083
1188
  <path
1084
- d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1085
- />
1086
- </svg>
1087
- </span>
1088
- </span>
1089
- </button>
1090
- <section
1091
- class="pf-v6-c-nav__subnav"
1092
- aria-labelledby="nav-expandable-example-expandable-nav-link3"
1093
- hidden
1094
- inert
1095
- >
1096
- <ul class="pf-v6-c-nav__list" role="list">
1097
- <li class="pf-v6-c-nav__item">
1098
- <a href="#" class="pf-v6-c-nav__link">
1099
- <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
1100
- </a>
1101
- </li>
1102
- <li class="pf-v6-c-nav__item">
1103
- <a href="#" class="pf-v6-c-nav__link">
1104
- <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1105
- </a>
1106
- </li>
1107
- </ul>
1108
- </section>
1109
- </li>
1110
- </ul>
1111
- </nav>
1112
- </div>
1113
- </div>
1114
- <div class="pf-v6-c-page__main-container" tabindex="-1">
1115
- <main
1116
- class="pf-v6-c-page__main"
1117
- tabindex="-1"
1118
- id="main-content-nav-expandable-example"
1119
- >
1120
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1121
- <div class="pf-v6-c-page__main-body">
1122
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1123
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1124
- <li class="pf-v6-c-breadcrumb__item">
1125
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1126
- </li>
1127
- <li class="pf-v6-c-breadcrumb__item">
1128
- <span class="pf-v6-c-breadcrumb__item-divider">
1129
- <svg
1130
- class="pf-v6-svg"
1131
- viewBox="0 0 20 20"
1132
- fill="currentColor"
1133
- aria-hidden="true"
1134
- role="img"
1135
- width="1em"
1136
- height="1em"
1137
- >
1138
- <path
1139
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1140
- />
1141
- </svg>
1142
- </span>
1143
-
1144
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1145
- </li>
1146
- <li class="pf-v6-c-breadcrumb__item">
1147
- <span class="pf-v6-c-breadcrumb__item-divider">
1148
- <svg
1149
- class="pf-v6-svg"
1150
- viewBox="0 0 20 20"
1151
- fill="currentColor"
1152
- aria-hidden="true"
1153
- role="img"
1154
- width="1em"
1155
- height="1em"
1156
- >
1157
- <path
1158
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1159
- />
1160
- </svg>
1161
- </span>
1162
-
1163
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1164
- </li>
1165
- <li class="pf-v6-c-breadcrumb__item">
1166
- <span class="pf-v6-c-breadcrumb__item-divider">
1167
- <svg
1168
- class="pf-v6-svg"
1169
- viewBox="0 0 20 20"
1170
- fill="currentColor"
1171
- aria-hidden="true"
1172
- role="img"
1173
- width="1em"
1174
- height="1em"
1175
- >
1176
- <path
1177
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1189
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1178
1190
  />
1179
1191
  </svg>
1180
1192
  </span>
@@ -1747,44 +1759,46 @@ section: components
1747
1759
  </div>
1748
1760
  </header>
1749
1761
  <div class="pf-v6-c-page__sidebar">
1750
- <div class="pf-v6-c-page__sidebar-body">
1751
- <nav
1752
- class="pf-v6-c-nav"
1753
- id="nav-horizontal-subnav-example-primary-nav"
1754
- aria-label="Global"
1755
- >
1756
- <ul class="pf-v6-c-nav__list" role="list">
1757
- <li class="pf-v6-c-nav__item">
1758
- <a href="#" class="pf-v6-c-nav__link">
1759
- <span class="pf-v6-c-nav__link-text">System panel</span>
1760
- </a>
1761
- </li>
1762
- <li class="pf-v6-c-nav__item">
1763
- <a
1764
- href="#"
1765
- class="pf-v6-c-nav__link pf-m-current"
1766
- aria-current="page"
1767
- >
1768
- <span class="pf-v6-c-nav__link-text">Policy</span>
1769
- </a>
1770
- </li>
1771
- <li class="pf-v6-c-nav__item">
1772
- <a href="#" class="pf-v6-c-nav__link">
1773
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1774
- </a>
1775
- </li>
1776
- <li class="pf-v6-c-nav__item">
1777
- <a href="#" class="pf-v6-c-nav__link">
1778
- <span class="pf-v6-c-nav__link-text">Network services</span>
1779
- </a>
1780
- </li>
1781
- <li class="pf-v6-c-nav__item">
1782
- <a href="#" class="pf-v6-c-nav__link">
1783
- <span class="pf-v6-c-nav__link-text">Server</span>
1784
- </a>
1785
- </li>
1786
- </ul>
1787
- </nav>
1762
+ <div class="pf-v6-c-page__sidebar-main">
1763
+ <div class="pf-v6-c-page__sidebar-body">
1764
+ <nav
1765
+ class="pf-v6-c-nav"
1766
+ id="nav-horizontal-subnav-example-primary-nav"
1767
+ aria-label="Global"
1768
+ >
1769
+ <ul class="pf-v6-c-nav__list" role="list">
1770
+ <li class="pf-v6-c-nav__item">
1771
+ <a href="#" class="pf-v6-c-nav__link">
1772
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1773
+ </a>
1774
+ </li>
1775
+ <li class="pf-v6-c-nav__item">
1776
+ <a
1777
+ href="#"
1778
+ class="pf-v6-c-nav__link pf-m-current"
1779
+ aria-current="page"
1780
+ >
1781
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1782
+ </a>
1783
+ </li>
1784
+ <li class="pf-v6-c-nav__item">
1785
+ <a href="#" class="pf-v6-c-nav__link">
1786
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1787
+ </a>
1788
+ </li>
1789
+ <li class="pf-v6-c-nav__item">
1790
+ <a href="#" class="pf-v6-c-nav__link">
1791
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1792
+ </a>
1793
+ </li>
1794
+ <li class="pf-v6-c-nav__item">
1795
+ <a href="#" class="pf-v6-c-nav__link">
1796
+ <span class="pf-v6-c-nav__link-text">Server</span>
1797
+ </a>
1798
+ </li>
1799
+ </ul>
1800
+ </nav>
1801
+ </div>
1788
1802
  </div>
1789
1803
  </div>
1790
1804
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2430,297 +2444,1985 @@ section: components
2430
2444
  </div>
2431
2445
  </header>
2432
2446
  <div class="pf-v6-c-page__dock">
2433
- <div class="pf-v6-c-skip-to-content">
2434
- <a
2435
- class="pf-v6-c-button pf-m-primary"
2436
- href="#main-content-nav-docked-example"
2437
- >
2438
- <span class="pf-v6-c-button__text">Skip to content</span>
2439
- </a>
2440
- </div>
2447
+ <div class="pf-v6-c-page__dock-main">
2448
+ <div class="pf-v6-c-skip-to-content">
2449
+ <a
2450
+ class="pf-v6-c-button pf-m-primary"
2451
+ href="#main-content-nav-docked-example"
2452
+ >
2453
+ <span class="pf-v6-c-button__text">Skip to content</span>
2454
+ </a>
2455
+ </div>
2441
2456
 
2442
- <header
2443
- class="pf-v6-c-masthead pf-m-docked"
2444
- id="nav-docked-example-masthead"
2445
- >
2446
- <div class="pf-v6-c-masthead__main">
2447
- <span class="pf-v6-c-masthead__toggle">
2448
- <button
2449
- class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2450
- type="button"
2451
- aria-label="Global navigation"
2452
- >
2453
- <span class="pf-v6-c-button__icon">
2454
- <svg
2455
- viewBox="0 0 10 10"
2456
- class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2457
- width="1em"
2458
- height="1em"
2459
- >
2460
- <path
2461
- class="pf-v6-c-button--hamburger-icon--top"
2462
- d="M1,1 L9,1"
2463
- />
2464
- <path
2465
- class="pf-v6-c-button--hamburger-icon--middle"
2466
- d="M1,5 L9,5"
2467
- />
2468
- <path
2469
- class="pf-v6-c-button--hamburger-icon--arrow"
2470
- d="M1,5 L1,5 L1,5"
2471
- />
2472
- <path
2473
- class="pf-v6-c-button--hamburger-icon--bottom"
2474
- d="M9,9 L1,9"
2475
- />
2476
- </svg>
2477
- </span>
2478
- </button>
2479
- </span>
2480
- <div class="pf-v6-c-masthead__brand">
2481
- <a class="pf-v6-c-masthead__logo" href="#">
2482
- <svg height="37px" viewBox="0 0 679 158">
2483
- <title>PF-HorizontalLogo-Color</title>
2484
- <defs>
2485
- <linearGradient
2486
- x1="68%"
2487
- y1="2.25860997e-13%"
2488
- x2="32%"
2489
- y2="100%"
2490
- id="linearGradient-nav-docked-example-masthead"
2491
- >
2492
- <stop stop-color="#2B9AF3" offset="0%" />
2493
- <stop
2494
- stop-color="#73BCF7"
2495
- stop-opacity="0.502212631"
2496
- offset="100%"
2497
- />
2498
- </linearGradient>
2499
- </defs>
2500
- <g
2501
- stroke="none"
2502
- stroke-width="1"
2503
- fill="none"
2504
- fill-rule="evenodd"
2505
- >
2506
- <g
2507
- transform="translate(206.000000, 45.750000)"
2508
- fill="var(--pf-t--global--text--color--regular)"
2509
- fill-rule="nonzero"
2457
+ <header
2458
+ class="pf-v6-c-masthead pf-m-docked"
2459
+ id="nav-docked-example-masthead"
2460
+ >
2461
+ <div class="pf-v6-c-masthead__main">
2462
+ <span class="pf-v6-c-masthead__toggle">
2463
+ <button
2464
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2465
+ type="button"
2466
+ aria-label="Global navigation"
2467
+ >
2468
+ <span class="pf-v6-c-button__icon">
2469
+ <svg
2470
+ viewBox="0 0 10 10"
2471
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2472
+ width="1em"
2473
+ height="1em"
2510
2474
  >
2511
2475
  <path
2512
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2476
+ class="pf-v6-c-button--hamburger-icon--top"
2477
+ d="M1,1 L9,1"
2513
2478
  />
2514
2479
  <path
2515
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2480
+ class="pf-v6-c-button--hamburger-icon--middle"
2481
+ d="M1,5 L9,5"
2516
2482
  />
2517
2483
  <path
2518
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2484
+ class="pf-v6-c-button--hamburger-icon--arrow"
2485
+ d="M1,5 L1,5 L1,5"
2519
2486
  />
2520
2487
  <path
2521
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2522
- />
2523
- <path
2524
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2525
- />
2526
- <path
2527
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2528
- />
2529
- <path
2530
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2531
- />
2532
- <polygon
2533
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2534
- />
2535
- <polygon
2536
- points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2537
- />
2538
- <path
2539
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2540
- />
2541
- </g>
2542
- <g transform="translate(0.000000, 0.000000)">
2543
- <path
2544
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2545
- fill="#0066CC"
2546
- />
2547
- <path
2548
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2549
- fill="url(#linearGradient-nav-docked-example-masthead)"
2550
- />
2551
- <path
2552
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2553
- fill="url(#linearGradient-nav-docked-example-masthead)"
2554
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2488
+ class="pf-v6-c-button--hamburger-icon--bottom"
2489
+ d="M9,9 L1,9"
2555
2490
  />
2491
+ </svg>
2492
+ </span>
2493
+ </button>
2494
+ </span>
2495
+ <div class="pf-v6-c-masthead__brand">
2496
+ <a class="pf-v6-c-masthead__logo" href="#">
2497
+ <svg height="37px" viewBox="0 0 679 158">
2498
+ <title>PF-HorizontalLogo-Color</title>
2499
+ <defs>
2500
+ <linearGradient
2501
+ x1="68%"
2502
+ y1="2.25860997e-13%"
2503
+ x2="32%"
2504
+ y2="100%"
2505
+ id="linearGradient-nav-docked-example-masthead"
2506
+ >
2507
+ <stop stop-color="#2B9AF3" offset="0%" />
2508
+ <stop
2509
+ stop-color="#73BCF7"
2510
+ stop-opacity="0.502212631"
2511
+ offset="100%"
2512
+ />
2513
+ </linearGradient>
2514
+ </defs>
2515
+ <g
2516
+ stroke="none"
2517
+ stroke-width="1"
2518
+ fill="none"
2519
+ fill-rule="evenodd"
2520
+ >
2521
+ <g
2522
+ transform="translate(206.000000, 45.750000)"
2523
+ fill="var(--pf-t--global--text--color--regular)"
2524
+ fill-rule="nonzero"
2525
+ >
2526
+ <path
2527
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2528
+ />
2529
+ <path
2530
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2531
+ />
2532
+ <path
2533
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2534
+ />
2535
+ <path
2536
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2537
+ />
2538
+ <path
2539
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2540
+ />
2541
+ <path
2542
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2543
+ />
2544
+ <path
2545
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2546
+ />
2547
+ <polygon
2548
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2549
+ />
2550
+ <polygon
2551
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2552
+ />
2553
+ <path
2554
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2555
+ />
2556
+ </g>
2557
+ <g transform="translate(0.000000, 0.000000)">
2558
+ <path
2559
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2560
+ fill="#0066CC"
2561
+ />
2562
+ <path
2563
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2564
+ fill="url(#linearGradient-nav-docked-example-masthead)"
2565
+ />
2566
+ <path
2567
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2568
+ fill="url(#linearGradient-nav-docked-example-masthead)"
2569
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2570
+ />
2571
+ </g>
2556
2572
  </g>
2557
- </g>
2558
- </svg>
2559
- </a>
2560
- <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
2561
- <svg width="37px" height="37px" viewBox="0 0 158 158">
2562
- <title>PF-HorizontalLogo-Color</title>
2563
- <defs>
2564
- <linearGradient
2565
- x1="68%"
2566
- y1="2.25860997e-13%"
2567
- x2="32%"
2568
- y2="100%"
2569
- id="linearGradient-1"
2573
+ </svg>
2574
+ </a>
2575
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
2576
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
2577
+ <title>PF-HorizontalLogo-Color</title>
2578
+ <defs>
2579
+ <linearGradient
2580
+ x1="68%"
2581
+ y1="2.25860997e-13%"
2582
+ x2="32%"
2583
+ y2="100%"
2584
+ id="linearGradient-1"
2585
+ >
2586
+ <stop stop-color="#2B9AF3" offset="0%" />
2587
+ <stop
2588
+ stop-color="#73BCF7"
2589
+ stop-opacity="0.502212631"
2590
+ offset="100%"
2591
+ />
2592
+ </linearGradient>
2593
+ </defs>
2594
+ <g
2595
+ id="PF-IconLogo-color"
2596
+ stroke="none"
2597
+ stroke-width="1"
2598
+ fill="none"
2599
+ fill-rule="evenodd"
2570
2600
  >
2571
- <stop stop-color="#2B9AF3" offset="0%" />
2572
- <stop
2573
- stop-color="#73BCF7"
2574
- stop-opacity="0.502212631"
2575
- offset="100%"
2576
- />
2577
- </linearGradient>
2578
- </defs>
2579
- <g
2580
- id="PF-IconLogo-color"
2581
- stroke="none"
2582
- stroke-width="1"
2583
- fill="none"
2584
- fill-rule="evenodd"
2585
- >
2586
- <g id="Logo">
2587
- <path
2588
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2589
- id="Rectangle-Copy-17"
2590
- fill="#0066CC"
2591
- />
2592
- <path
2593
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2594
- id="Path-2"
2595
- fill="url(#linearGradient-1)"
2596
- />
2597
- <path
2598
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2599
- id="Path-2"
2600
- fill="url(#linearGradient-1)"
2601
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2602
- />
2601
+ <g id="Logo">
2602
+ <path
2603
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2604
+ id="Rectangle-Copy-17"
2605
+ fill="#0066CC"
2606
+ />
2607
+ <path
2608
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2609
+ id="Path-2"
2610
+ fill="url(#linearGradient-1)"
2611
+ />
2612
+ <path
2613
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2614
+ id="Path-2"
2615
+ fill="url(#linearGradient-1)"
2616
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2617
+ />
2618
+ </g>
2603
2619
  </g>
2604
- </g>
2605
- </svg>
2606
- </a>
2620
+ </svg>
2621
+ </a>
2622
+ </div>
2607
2623
  </div>
2608
- </div>
2609
- <hr class="pf-v6-c-divider" />
2610
- <div class="pf-v6-c-masthead__content">
2611
- <div
2612
- class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
2613
- id="nav-docked-example-masthead-toolbar"
2614
- >
2615
- <div class="pf-v6-c-toolbar__content">
2616
- <div class="pf-v6-c-toolbar__content-section">
2617
- <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
2618
- <ul class="pf-v6-c-nav__list" role="list">
2619
- <li class="pf-v6-c-nav__item">
2620
- <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
2621
- <span class="pf-v6-c-nav__link-icon">
2622
- <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2623
- </span>
2624
- <span class="pf-v6-c-nav__link-text">System panel</span>
2625
- </a>
2626
- </li>
2627
- <li class="pf-v6-c-nav__item">
2628
- <a
2629
- href="#"
2630
- class="pf-v6-c-nav__link pf-m-current"
2631
- aria-current="page"
2632
- aria-label="Folder"
2624
+ <hr class="pf-v6-c-divider" />
2625
+ <div class="pf-v6-c-masthead__content">
2626
+ <div
2627
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
2628
+ id="nav-docked-example-masthead-toolbar"
2629
+ >
2630
+ <div class="pf-v6-c-toolbar__content">
2631
+ <div class="pf-v6-c-toolbar__content-section">
2632
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
2633
+ <ul class="pf-v6-c-nav__list" role="list">
2634
+ <li class="pf-v6-c-nav__item">
2635
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
2636
+ <span class="pf-v6-c-nav__link-icon">
2637
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2638
+ </span>
2639
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2640
+ </a>
2641
+ </li>
2642
+ <li class="pf-v6-c-nav__item">
2643
+ <a
2644
+ href="#"
2645
+ class="pf-v6-c-nav__link pf-m-current"
2646
+ aria-current="page"
2647
+ aria-label="Folder"
2648
+ >
2649
+ <span class="pf-v6-c-nav__link-icon">
2650
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
2651
+ </span>
2652
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2653
+ </a>
2654
+ </li>
2655
+ <li class="pf-v6-c-nav__item">
2656
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
2657
+ <span class="pf-v6-c-nav__link-icon">
2658
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
2659
+ </span>
2660
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2661
+ </a>
2662
+ </li>
2663
+ <li class="pf-v6-c-nav__item">
2664
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
2665
+ <span class="pf-v6-c-nav__link-icon">
2666
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
2667
+ </span>
2668
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2669
+ </a>
2670
+ </li>
2671
+ </ul>
2672
+ </nav>
2673
+
2674
+ <div
2675
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
2676
+ >
2677
+ <div class="pf-v6-c-toolbar__item">
2678
+ <button
2679
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
2680
+ type="button"
2681
+ aria-expanded="false"
2682
+ aria-label="Applications"
2633
2683
  >
2634
- <span class="pf-v6-c-nav__link-icon">
2635
- <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
2684
+ <span class="pf-v6-c-menu-toggle__icon">
2685
+ <i class="fas fa-th" aria-hidden="true"></i>
2636
2686
  </span>
2637
- <span class="pf-v6-c-nav__link-text">Policy</span>
2638
- </a>
2639
- </li>
2640
- <li class="pf-v6-c-nav__item">
2641
- <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
2642
- <span class="pf-v6-c-nav__link-icon">
2643
- <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
2687
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
2688
+ </button>
2689
+ </div>
2690
+ <div class="pf-v6-c-toolbar__item">
2691
+ <button
2692
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
2693
+ type="button"
2694
+ aria-label="Settings"
2695
+ >
2696
+ <span class="pf-v6-c-button__icon pf-m-start">
2697
+ <svg
2698
+ class="pf-v6-svg"
2699
+ viewBox="0 0 32 32"
2700
+ fill="currentColor"
2701
+ aria-hidden="true"
2702
+ role="img"
2703
+ width="1em"
2704
+ height="1em"
2705
+ >
2706
+ <path
2707
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
2708
+ />
2709
+ </svg>
2644
2710
  </span>
2645
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2646
- </a>
2647
- </li>
2648
- <li class="pf-v6-c-nav__item">
2649
- <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
2650
- <span class="pf-v6-c-nav__link-icon">
2651
- <i class="fas fa-fw fa-code" aria-hidden="true"></i>
2711
+ <span class="pf-v6-c-button__text">Settings</span>
2712
+ </button>
2713
+ </div>
2714
+ <div class="pf-v6-c-toolbar__item">
2715
+ <button
2716
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
2717
+ type="button"
2718
+ aria-expanded="false"
2719
+ aria-label="Help"
2720
+ >
2721
+ <span class="pf-v6-c-menu-toggle__icon">
2722
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2652
2723
  </span>
2653
- <span class="pf-v6-c-nav__link-text">Network services</span>
2654
- </a>
2655
- </li>
2656
- </ul>
2657
- </nav>
2658
-
2659
- <div
2660
- class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
2661
- >
2662
- <div class="pf-v6-c-toolbar__item">
2663
- <button
2664
- class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
2665
- type="button"
2666
- aria-expanded="false"
2667
- aria-label="Applications"
2668
- >
2669
- <span class="pf-v6-c-menu-toggle__icon">
2670
- <i class="fas fa-th" aria-hidden="true"></i>
2671
- </span>
2672
- <span class="pf-v6-c-menu-toggle__text">Applications</span>
2673
- </button>
2724
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
2725
+ </button>
2726
+ </div>
2674
2727
  </div>
2675
- <div class="pf-v6-c-toolbar__item">
2676
- <button
2677
- class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
2678
- type="button"
2679
- aria-label="Settings"
2680
- >
2681
- <span class="pf-v6-c-button__icon pf-m-start">
2682
- <svg
2683
- class="pf-v6-svg"
2684
- viewBox="0 0 32 32"
2685
- fill="currentColor"
2686
- aria-hidden="true"
2687
- role="img"
2688
- width="1em"
2689
- height="1em"
2728
+ </div>
2729
+ </div>
2730
+ </div>
2731
+ </div>
2732
+ </header>
2733
+ </div>
2734
+ </div>
2735
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2736
+ <main
2737
+ class="pf-v6-c-page__main"
2738
+ tabindex="-1"
2739
+ id="main-content-nav-docked-example"
2740
+ >
2741
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2742
+ <div class="pf-v6-c-page__main-body">
2743
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2744
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2745
+ <li class="pf-v6-c-breadcrumb__item">
2746
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2747
+ </li>
2748
+ <li class="pf-v6-c-breadcrumb__item">
2749
+ <span class="pf-v6-c-breadcrumb__item-divider">
2750
+ <svg
2751
+ class="pf-v6-svg"
2752
+ viewBox="0 0 20 20"
2753
+ fill="currentColor"
2754
+ aria-hidden="true"
2755
+ role="img"
2756
+ width="1em"
2757
+ height="1em"
2758
+ >
2759
+ <path
2760
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2761
+ />
2762
+ </svg>
2763
+ </span>
2764
+
2765
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2766
+ </li>
2767
+ <li class="pf-v6-c-breadcrumb__item">
2768
+ <span class="pf-v6-c-breadcrumb__item-divider">
2769
+ <svg
2770
+ class="pf-v6-svg"
2771
+ viewBox="0 0 20 20"
2772
+ fill="currentColor"
2773
+ aria-hidden="true"
2774
+ role="img"
2775
+ width="1em"
2776
+ height="1em"
2777
+ >
2778
+ <path
2779
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2780
+ />
2781
+ </svg>
2782
+ </span>
2783
+
2784
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2785
+ </li>
2786
+ <li class="pf-v6-c-breadcrumb__item">
2787
+ <span class="pf-v6-c-breadcrumb__item-divider">
2788
+ <svg
2789
+ class="pf-v6-svg"
2790
+ viewBox="0 0 20 20"
2791
+ fill="currentColor"
2792
+ aria-hidden="true"
2793
+ role="img"
2794
+ width="1em"
2795
+ height="1em"
2796
+ >
2797
+ <path
2798
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2799
+ />
2800
+ </svg>
2801
+ </span>
2802
+
2803
+ <a
2804
+ href="#"
2805
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2806
+ aria-current="page"
2807
+ >Section landing</a>
2808
+ </li>
2809
+ </ol>
2810
+ </nav>
2811
+ </div>
2812
+ </section>
2813
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2814
+ <div class="pf-v6-c-page__main-body">
2815
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2816
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2817
+ </div>
2818
+ </section>
2819
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2820
+ <div class="pf-v6-c-page__main-body">
2821
+ <div class="pf-v6-l-gallery pf-m-gutter">
2822
+ <div class="pf-v6-c-card">
2823
+ <div class="pf-v6-c-card__body">This is a card</div>
2824
+ </div>
2825
+ <div class="pf-v6-c-card">
2826
+ <div class="pf-v6-c-card__body">This is a card</div>
2827
+ </div>
2828
+ <div class="pf-v6-c-card">
2829
+ <div class="pf-v6-c-card__body">This is a card</div>
2830
+ </div>
2831
+ <div class="pf-v6-c-card">
2832
+ <div class="pf-v6-c-card__body">This is a card</div>
2833
+ </div>
2834
+ <div class="pf-v6-c-card">
2835
+ <div class="pf-v6-c-card__body">This is a card</div>
2836
+ </div>
2837
+ <div class="pf-v6-c-card">
2838
+ <div class="pf-v6-c-card__body">This is a card</div>
2839
+ </div>
2840
+ <div class="pf-v6-c-card">
2841
+ <div class="pf-v6-c-card__body">This is a card</div>
2842
+ </div>
2843
+ <div class="pf-v6-c-card">
2844
+ <div class="pf-v6-c-card__body">This is a card</div>
2845
+ </div>
2846
+ <div class="pf-v6-c-card">
2847
+ <div class="pf-v6-c-card__body">This is a card</div>
2848
+ </div>
2849
+ <div class="pf-v6-c-card">
2850
+ <div class="pf-v6-c-card__body">This is a card</div>
2851
+ </div>
2852
+ </div>
2853
+ </div>
2854
+ </section>
2855
+ </main>
2856
+ </div>
2857
+ </div>
2858
+
2859
+ ```
2860
+
2861
+ ### Docked nav - expanded on mobile
2862
+
2863
+ ```html isFullscreen isBeta
2864
+ <div
2865
+ class="pf-v6-c-page pf-m-dock pf-m-no-sidebar"
2866
+ id="nav-docked-expanded-example"
2867
+ >
2868
+ <header class="pf-v6-c-masthead pf-m-display-inline">
2869
+ <div class="pf-v6-c-masthead__main">
2870
+ <span class="pf-v6-c-masthead__toggle">
2871
+ <button
2872
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2873
+ type="button"
2874
+ aria-label="Global navigation"
2875
+ >
2876
+ <span class="pf-v6-c-button__icon">
2877
+ <svg
2878
+ viewBox="0 0 10 10"
2879
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2880
+ width="1em"
2881
+ height="1em"
2882
+ >
2883
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2884
+ <path
2885
+ class="pf-v6-c-button--hamburger-icon--middle"
2886
+ d="M1,5 L9,5"
2887
+ />
2888
+ <path
2889
+ class="pf-v6-c-button--hamburger-icon--arrow"
2890
+ d="M1,5 L1,5 L1,5"
2891
+ />
2892
+ <path
2893
+ class="pf-v6-c-button--hamburger-icon--bottom"
2894
+ d="M9,9 L1,9"
2895
+ />
2896
+ </svg>
2897
+ </span>
2898
+ </button>
2899
+ </span>
2900
+ <div class="pf-v6-c-masthead__brand">
2901
+ <a class="pf-v6-c-masthead__logo" href="#">
2902
+ <svg height="37px" viewBox="0 0 679 158">
2903
+ <title>PF-HorizontalLogo-Color</title>
2904
+ <defs>
2905
+ <linearGradient
2906
+ x1="68%"
2907
+ y1="2.25860997e-13%"
2908
+ x2="32%"
2909
+ y2="100%"
2910
+ id="linearGradient-"
2911
+ >
2912
+ <stop stop-color="#2B9AF3" offset="0%" />
2913
+ <stop
2914
+ stop-color="#73BCF7"
2915
+ stop-opacity="0.502212631"
2916
+ offset="100%"
2917
+ />
2918
+ </linearGradient>
2919
+ </defs>
2920
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2921
+ <g
2922
+ transform="translate(206.000000, 45.750000)"
2923
+ fill="var(--pf-t--global--text--color--regular)"
2924
+ fill-rule="nonzero"
2925
+ >
2926
+ <path
2927
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2928
+ />
2929
+ <path
2930
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2931
+ />
2932
+ <path
2933
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2934
+ />
2935
+ <path
2936
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2937
+ />
2938
+ <path
2939
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2940
+ />
2941
+ <path
2942
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2943
+ />
2944
+ <path
2945
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2946
+ />
2947
+ <polygon
2948
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2949
+ />
2950
+ <polygon
2951
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2952
+ />
2953
+ <path
2954
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2955
+ />
2956
+ </g>
2957
+ <g transform="translate(0.000000, 0.000000)">
2958
+ <path
2959
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2960
+ fill="#0066CC"
2961
+ />
2962
+ <path
2963
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2964
+ fill="url(#linearGradient-)"
2965
+ />
2966
+ <path
2967
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2968
+ fill="url(#linearGradient-)"
2969
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2970
+ />
2971
+ </g>
2972
+ </g>
2973
+ </svg>
2974
+ </a>
2975
+ </div>
2976
+ </div>
2977
+ <div class="pf-v6-c-masthead__content">
2978
+ <div class="pf-v6-c-toolbar pf-m-static">
2979
+ <div class="pf-v6-c-toolbar__content">
2980
+ <div class="pf-v6-c-toolbar__content-section">
2981
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
2982
+ <button
2983
+ class="pf-v6-c-button pf-m-plain"
2984
+ type="button"
2985
+ aria-label="Search"
2986
+ >
2987
+ <span class="pf-v6-c-button__icon">
2988
+ <svg
2989
+ class="pf-v6-svg"
2990
+ viewBox="0 0 512 512"
2991
+ fill="currentColor"
2992
+ aria-hidden="true"
2993
+ role="img"
2994
+ width="1em"
2995
+ height="1em"
2996
+ >
2997
+ <path
2998
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
2999
+ />
3000
+ </svg>
3001
+ </span>
3002
+ </button>
3003
+ </div>
3004
+ </div>
3005
+ </div>
3006
+ </div>
3007
+ </div>
3008
+ </header>
3009
+ <div class="pf-v6-c-page__dock pf-m-expanded">
3010
+ <div class="pf-v6-c-page__dock-main">
3011
+ <div class="pf-v6-c-skip-to-content">
3012
+ <a
3013
+ class="pf-v6-c-button pf-m-primary"
3014
+ href="#main-content-nav-docked-expanded-example"
3015
+ >
3016
+ <span class="pf-v6-c-button__text">Skip to content</span>
3017
+ </a>
3018
+ </div>
3019
+
3020
+ <header
3021
+ class="pf-v6-c-masthead pf-m-docked"
3022
+ id="nav-docked-expanded-example-masthead"
3023
+ >
3024
+ <div class="pf-v6-c-masthead__main">
3025
+ <span class="pf-v6-c-masthead__toggle">
3026
+ <button
3027
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3028
+ type="button"
3029
+ aria-label="Global navigation"
3030
+ >
3031
+ <span class="pf-v6-c-button__icon">
3032
+ <svg
3033
+ viewBox="0 0 10 10"
3034
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3035
+ width="1em"
3036
+ height="1em"
3037
+ >
3038
+ <path
3039
+ class="pf-v6-c-button--hamburger-icon--top"
3040
+ d="M1,1 L9,1"
3041
+ />
3042
+ <path
3043
+ class="pf-v6-c-button--hamburger-icon--middle"
3044
+ d="M1,5 L9,5"
3045
+ />
3046
+ <path
3047
+ class="pf-v6-c-button--hamburger-icon--arrow"
3048
+ d="M1,5 L1,5 L1,5"
3049
+ />
3050
+ <path
3051
+ class="pf-v6-c-button--hamburger-icon--bottom"
3052
+ d="M9,9 L1,9"
3053
+ />
3054
+ </svg>
3055
+ </span>
3056
+ </button>
3057
+ </span>
3058
+ <div class="pf-v6-c-masthead__brand">
3059
+ <a class="pf-v6-c-masthead__logo" href="#">
3060
+ <svg height="37px" viewBox="0 0 679 158">
3061
+ <title>PF-HorizontalLogo-Color</title>
3062
+ <defs>
3063
+ <linearGradient
3064
+ x1="68%"
3065
+ y1="2.25860997e-13%"
3066
+ x2="32%"
3067
+ y2="100%"
3068
+ id="linearGradient-nav-docked-expanded-example-masthead"
3069
+ >
3070
+ <stop stop-color="#2B9AF3" offset="0%" />
3071
+ <stop
3072
+ stop-color="#73BCF7"
3073
+ stop-opacity="0.502212631"
3074
+ offset="100%"
3075
+ />
3076
+ </linearGradient>
3077
+ </defs>
3078
+ <g
3079
+ stroke="none"
3080
+ stroke-width="1"
3081
+ fill="none"
3082
+ fill-rule="evenodd"
3083
+ >
3084
+ <g
3085
+ transform="translate(206.000000, 45.750000)"
3086
+ fill="var(--pf-t--global--text--color--regular)"
3087
+ fill-rule="nonzero"
3088
+ >
3089
+ <path
3090
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
3091
+ />
3092
+ <path
3093
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
3094
+ />
3095
+ <path
3096
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
3097
+ />
3098
+ <path
3099
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
3100
+ />
3101
+ <path
3102
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
3103
+ />
3104
+ <path
3105
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
3106
+ />
3107
+ <path
3108
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
3109
+ />
3110
+ <polygon
3111
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
3112
+ />
3113
+ <polygon
3114
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3115
+ />
3116
+ <path
3117
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3118
+ />
3119
+ </g>
3120
+ <g transform="translate(0.000000, 0.000000)">
3121
+ <path
3122
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3123
+ fill="#0066CC"
3124
+ />
3125
+ <path
3126
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3127
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
3128
+ />
3129
+ <path
3130
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3131
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
3132
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3133
+ />
3134
+ </g>
3135
+ </g>
3136
+ </svg>
3137
+ </a>
3138
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
3139
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
3140
+ <title>PF-HorizontalLogo-Color</title>
3141
+ <defs>
3142
+ <linearGradient
3143
+ x1="68%"
3144
+ y1="2.25860997e-13%"
3145
+ x2="32%"
3146
+ y2="100%"
3147
+ id="linearGradient-1"
3148
+ >
3149
+ <stop stop-color="#2B9AF3" offset="0%" />
3150
+ <stop
3151
+ stop-color="#73BCF7"
3152
+ stop-opacity="0.502212631"
3153
+ offset="100%"
3154
+ />
3155
+ </linearGradient>
3156
+ </defs>
3157
+ <g
3158
+ id="PF-IconLogo-color"
3159
+ stroke="none"
3160
+ stroke-width="1"
3161
+ fill="none"
3162
+ fill-rule="evenodd"
3163
+ >
3164
+ <g id="Logo">
3165
+ <path
3166
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3167
+ id="Rectangle-Copy-17"
3168
+ fill="#0066CC"
3169
+ />
3170
+ <path
3171
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3172
+ id="Path-2"
3173
+ fill="url(#linearGradient-1)"
3174
+ />
3175
+ <path
3176
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3177
+ id="Path-2"
3178
+ fill="url(#linearGradient-1)"
3179
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3180
+ />
3181
+ </g>
3182
+ </g>
3183
+ </svg>
3184
+ </a>
3185
+ </div>
3186
+ </div>
3187
+ <hr class="pf-v6-c-divider" />
3188
+ <div class="pf-v6-c-masthead__content">
3189
+ <div
3190
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
3191
+ id="nav-docked-expanded-example-masthead-toolbar"
3192
+ >
3193
+ <div class="pf-v6-c-toolbar__content">
3194
+ <div class="pf-v6-c-toolbar__content-section">
3195
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
3196
+ <ul class="pf-v6-c-nav__list" role="list">
3197
+ <li class="pf-v6-c-nav__item">
3198
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
3199
+ <span class="pf-v6-c-nav__link-icon">
3200
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3201
+ </span>
3202
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3203
+ </a>
3204
+ </li>
3205
+ <li class="pf-v6-c-nav__item">
3206
+ <a
3207
+ href="#"
3208
+ class="pf-v6-c-nav__link pf-m-current"
3209
+ aria-current="page"
3210
+ aria-label="Folder"
3211
+ >
3212
+ <span class="pf-v6-c-nav__link-icon">
3213
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
3214
+ </span>
3215
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3216
+ </a>
3217
+ </li>
3218
+ <li class="pf-v6-c-nav__item">
3219
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
3220
+ <span class="pf-v6-c-nav__link-icon">
3221
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
3222
+ </span>
3223
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3224
+ </a>
3225
+ </li>
3226
+ <li class="pf-v6-c-nav__item">
3227
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
3228
+ <span class="pf-v6-c-nav__link-icon">
3229
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
3230
+ </span>
3231
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3232
+ </a>
3233
+ </li>
3234
+ </ul>
3235
+ </nav>
3236
+
3237
+ <div
3238
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
3239
+ >
3240
+ <div class="pf-v6-c-toolbar__item">
3241
+ <button
3242
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
3243
+ type="button"
3244
+ aria-expanded="false"
3245
+ aria-label="Applications"
3246
+ >
3247
+ <span class="pf-v6-c-menu-toggle__icon">
3248
+ <i class="fas fa-th" aria-hidden="true"></i>
3249
+ </span>
3250
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
3251
+ </button>
3252
+ </div>
3253
+ <div class="pf-v6-c-toolbar__item">
3254
+ <button
3255
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
3256
+ type="button"
3257
+ aria-label="Settings"
3258
+ >
3259
+ <span class="pf-v6-c-button__icon pf-m-start">
3260
+ <svg
3261
+ class="pf-v6-svg"
3262
+ viewBox="0 0 32 32"
3263
+ fill="currentColor"
3264
+ aria-hidden="true"
3265
+ role="img"
3266
+ width="1em"
3267
+ height="1em"
3268
+ >
3269
+ <path
3270
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
3271
+ />
3272
+ </svg>
3273
+ </span>
3274
+ <span class="pf-v6-c-button__text">Settings</span>
3275
+ </button>
3276
+ </div>
3277
+ <div class="pf-v6-c-toolbar__item">
3278
+ <button
3279
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
3280
+ type="button"
3281
+ aria-expanded="false"
3282
+ aria-label="Help"
3283
+ >
3284
+ <span class="pf-v6-c-menu-toggle__icon">
3285
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3286
+ </span>
3287
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
3288
+ </button>
3289
+ </div>
3290
+ </div>
3291
+ </div>
3292
+ </div>
3293
+ </div>
3294
+ </div>
3295
+ </header>
3296
+ </div>
3297
+ </div>
3298
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3299
+ <main
3300
+ class="pf-v6-c-page__main"
3301
+ tabindex="-1"
3302
+ id="main-content-nav-docked-expanded-example"
3303
+ >
3304
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3305
+ <div class="pf-v6-c-page__main-body">
3306
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3307
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3308
+ <li class="pf-v6-c-breadcrumb__item">
3309
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3310
+ </li>
3311
+ <li class="pf-v6-c-breadcrumb__item">
3312
+ <span class="pf-v6-c-breadcrumb__item-divider">
3313
+ <svg
3314
+ class="pf-v6-svg"
3315
+ viewBox="0 0 20 20"
3316
+ fill="currentColor"
3317
+ aria-hidden="true"
3318
+ role="img"
3319
+ width="1em"
3320
+ height="1em"
3321
+ >
3322
+ <path
3323
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3324
+ />
3325
+ </svg>
3326
+ </span>
3327
+
3328
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3329
+ </li>
3330
+ <li class="pf-v6-c-breadcrumb__item">
3331
+ <span class="pf-v6-c-breadcrumb__item-divider">
3332
+ <svg
3333
+ class="pf-v6-svg"
3334
+ viewBox="0 0 20 20"
3335
+ fill="currentColor"
3336
+ aria-hidden="true"
3337
+ role="img"
3338
+ width="1em"
3339
+ height="1em"
3340
+ >
3341
+ <path
3342
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3343
+ />
3344
+ </svg>
3345
+ </span>
3346
+
3347
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3348
+ </li>
3349
+ <li class="pf-v6-c-breadcrumb__item">
3350
+ <span class="pf-v6-c-breadcrumb__item-divider">
3351
+ <svg
3352
+ class="pf-v6-svg"
3353
+ viewBox="0 0 20 20"
3354
+ fill="currentColor"
3355
+ aria-hidden="true"
3356
+ role="img"
3357
+ width="1em"
3358
+ height="1em"
3359
+ >
3360
+ <path
3361
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3362
+ />
3363
+ </svg>
3364
+ </span>
3365
+
3366
+ <a
3367
+ href="#"
3368
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3369
+ aria-current="page"
3370
+ >Section landing</a>
3371
+ </li>
3372
+ </ol>
3373
+ </nav>
3374
+ </div>
3375
+ </section>
3376
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3377
+ <div class="pf-v6-c-page__main-body">
3378
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3379
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3380
+ </div>
3381
+ </section>
3382
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3383
+ <div class="pf-v6-c-page__main-body">
3384
+ <div class="pf-v6-l-gallery pf-m-gutter">
3385
+ <div class="pf-v6-c-card">
3386
+ <div class="pf-v6-c-card__body">This is a card</div>
3387
+ </div>
3388
+ <div class="pf-v6-c-card">
3389
+ <div class="pf-v6-c-card__body">This is a card</div>
3390
+ </div>
3391
+ <div class="pf-v6-c-card">
3392
+ <div class="pf-v6-c-card__body">This is a card</div>
3393
+ </div>
3394
+ <div class="pf-v6-c-card">
3395
+ <div class="pf-v6-c-card__body">This is a card</div>
3396
+ </div>
3397
+ <div class="pf-v6-c-card">
3398
+ <div class="pf-v6-c-card__body">This is a card</div>
3399
+ </div>
3400
+ <div class="pf-v6-c-card">
3401
+ <div class="pf-v6-c-card__body">This is a card</div>
3402
+ </div>
3403
+ <div class="pf-v6-c-card">
3404
+ <div class="pf-v6-c-card__body">This is a card</div>
3405
+ </div>
3406
+ <div class="pf-v6-c-card">
3407
+ <div class="pf-v6-c-card__body">This is a card</div>
3408
+ </div>
3409
+ <div class="pf-v6-c-card">
3410
+ <div class="pf-v6-c-card__body">This is a card</div>
3411
+ </div>
3412
+ <div class="pf-v6-c-card">
3413
+ <div class="pf-v6-c-card__body">This is a card</div>
3414
+ </div>
3415
+ </div>
3416
+ </div>
3417
+ </section>
3418
+ </main>
3419
+ </div>
3420
+ </div>
3421
+
3422
+ ```
3423
+
3424
+ ### Docked nav text expanded
3425
+
3426
+ ```html isFullscreen isBeta
3427
+ <div class="pf-v6-c-page pf-m-dock pf-m-no-sidebar" id="nav-docked-example">
3428
+ <header class="pf-v6-c-masthead pf-m-display-inline">
3429
+ <div class="pf-v6-c-masthead__main">
3430
+ <span class="pf-v6-c-masthead__toggle">
3431
+ <button
3432
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3433
+ type="button"
3434
+ aria-label="Global navigation"
3435
+ >
3436
+ <span class="pf-v6-c-button__icon">
3437
+ <svg
3438
+ viewBox="0 0 10 10"
3439
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3440
+ width="1em"
3441
+ height="1em"
3442
+ >
3443
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3444
+ <path
3445
+ class="pf-v6-c-button--hamburger-icon--middle"
3446
+ d="M1,5 L9,5"
3447
+ />
3448
+ <path
3449
+ class="pf-v6-c-button--hamburger-icon--arrow"
3450
+ d="M1,5 L1,5 L1,5"
3451
+ />
3452
+ <path
3453
+ class="pf-v6-c-button--hamburger-icon--bottom"
3454
+ d="M9,9 L1,9"
3455
+ />
3456
+ </svg>
3457
+ </span>
3458
+ </button>
3459
+ </span>
3460
+ <div class="pf-v6-c-masthead__brand">
3461
+ <a class="pf-v6-c-masthead__logo" href="#">
3462
+ <svg height="37px" viewBox="0 0 679 158">
3463
+ <title>PF-HorizontalLogo-Color</title>
3464
+ <defs>
3465
+ <linearGradient
3466
+ x1="68%"
3467
+ y1="2.25860997e-13%"
3468
+ x2="32%"
3469
+ y2="100%"
3470
+ id="linearGradient-"
3471
+ >
3472
+ <stop stop-color="#2B9AF3" offset="0%" />
3473
+ <stop
3474
+ stop-color="#73BCF7"
3475
+ stop-opacity="0.502212631"
3476
+ offset="100%"
3477
+ />
3478
+ </linearGradient>
3479
+ </defs>
3480
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3481
+ <g
3482
+ transform="translate(206.000000, 45.750000)"
3483
+ fill="var(--pf-t--global--text--color--regular)"
3484
+ fill-rule="nonzero"
3485
+ >
3486
+ <path
3487
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
3488
+ />
3489
+ <path
3490
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
3491
+ />
3492
+ <path
3493
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
3494
+ />
3495
+ <path
3496
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
3497
+ />
3498
+ <path
3499
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
3500
+ />
3501
+ <path
3502
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
3503
+ />
3504
+ <path
3505
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
3506
+ />
3507
+ <polygon
3508
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
3509
+ />
3510
+ <polygon
3511
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3512
+ />
3513
+ <path
3514
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3515
+ />
3516
+ </g>
3517
+ <g transform="translate(0.000000, 0.000000)">
3518
+ <path
3519
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3520
+ fill="#0066CC"
3521
+ />
3522
+ <path
3523
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3524
+ fill="url(#linearGradient-)"
3525
+ />
3526
+ <path
3527
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3528
+ fill="url(#linearGradient-)"
3529
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3530
+ />
3531
+ </g>
3532
+ </g>
3533
+ </svg>
3534
+ </a>
3535
+ </div>
3536
+ </div>
3537
+ <div class="pf-v6-c-masthead__content">
3538
+ <div class="pf-v6-c-toolbar pf-m-static">
3539
+ <div class="pf-v6-c-toolbar__content">
3540
+ <div class="pf-v6-c-toolbar__content-section">
3541
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
3542
+ <button
3543
+ class="pf-v6-c-button pf-m-plain"
3544
+ type="button"
3545
+ aria-label="Search"
3546
+ >
3547
+ <span class="pf-v6-c-button__icon">
3548
+ <svg
3549
+ class="pf-v6-svg"
3550
+ viewBox="0 0 512 512"
3551
+ fill="currentColor"
3552
+ aria-hidden="true"
3553
+ role="img"
3554
+ width="1em"
3555
+ height="1em"
3556
+ >
3557
+ <path
3558
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
3559
+ />
3560
+ </svg>
3561
+ </span>
3562
+ </button>
3563
+ </div>
3564
+ </div>
3565
+ </div>
3566
+ </div>
3567
+ </div>
3568
+ </header>
3569
+ <div class="pf-v6-c-page__dock pf-m-text-expanded">
3570
+ <div class="pf-v6-c-page__dock-main">
3571
+ <div class="pf-v6-c-skip-to-content">
3572
+ <a
3573
+ class="pf-v6-c-button pf-m-primary"
3574
+ href="#main-content-nav-docked-example"
3575
+ >
3576
+ <span class="pf-v6-c-button__text">Skip to content</span>
3577
+ </a>
3578
+ </div>
3579
+
3580
+ <header
3581
+ class="pf-v6-c-masthead pf-m-docked"
3582
+ id="nav-docked-example-masthead"
3583
+ >
3584
+ <div class="pf-v6-c-masthead__main">
3585
+ <span class="pf-v6-c-masthead__toggle">
3586
+ <button
3587
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3588
+ type="button"
3589
+ aria-label="Global navigation"
3590
+ >
3591
+ <span class="pf-v6-c-button__icon">
3592
+ <svg
3593
+ viewBox="0 0 10 10"
3594
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3595
+ width="1em"
3596
+ height="1em"
3597
+ >
3598
+ <path
3599
+ class="pf-v6-c-button--hamburger-icon--top"
3600
+ d="M1,1 L9,1"
3601
+ />
3602
+ <path
3603
+ class="pf-v6-c-button--hamburger-icon--middle"
3604
+ d="M1,5 L9,5"
3605
+ />
3606
+ <path
3607
+ class="pf-v6-c-button--hamburger-icon--arrow"
3608
+ d="M1,5 L1,5 L1,5"
3609
+ />
3610
+ <path
3611
+ class="pf-v6-c-button--hamburger-icon--bottom"
3612
+ d="M9,9 L1,9"
3613
+ />
3614
+ </svg>
3615
+ </span>
3616
+ </button>
3617
+ </span>
3618
+ <div class="pf-v6-c-masthead__brand">
3619
+ <a class="pf-v6-c-masthead__logo" href="#">
3620
+ <svg height="37px" viewBox="0 0 679 158">
3621
+ <title>PF-HorizontalLogo-Color</title>
3622
+ <defs>
3623
+ <linearGradient
3624
+ x1="68%"
3625
+ y1="2.25860997e-13%"
3626
+ x2="32%"
3627
+ y2="100%"
3628
+ id="linearGradient-nav-docked-example-masthead"
3629
+ >
3630
+ <stop stop-color="#2B9AF3" offset="0%" />
3631
+ <stop
3632
+ stop-color="#73BCF7"
3633
+ stop-opacity="0.502212631"
3634
+ offset="100%"
3635
+ />
3636
+ </linearGradient>
3637
+ </defs>
3638
+ <g
3639
+ stroke="none"
3640
+ stroke-width="1"
3641
+ fill="none"
3642
+ fill-rule="evenodd"
3643
+ >
3644
+ <g
3645
+ transform="translate(206.000000, 45.750000)"
3646
+ fill="var(--pf-t--global--text--color--regular)"
3647
+ fill-rule="nonzero"
3648
+ >
3649
+ <path
3650
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
3651
+ />
3652
+ <path
3653
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
3654
+ />
3655
+ <path
3656
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
3657
+ />
3658
+ <path
3659
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
3660
+ />
3661
+ <path
3662
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
3663
+ />
3664
+ <path
3665
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
3666
+ />
3667
+ <path
3668
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
3669
+ />
3670
+ <polygon
3671
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
3672
+ />
3673
+ <polygon
3674
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3675
+ />
3676
+ <path
3677
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3678
+ />
3679
+ </g>
3680
+ <g transform="translate(0.000000, 0.000000)">
3681
+ <path
3682
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3683
+ fill="#0066CC"
3684
+ />
3685
+ <path
3686
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3687
+ fill="url(#linearGradient-nav-docked-example-masthead)"
3688
+ />
3689
+ <path
3690
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3691
+ fill="url(#linearGradient-nav-docked-example-masthead)"
3692
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3693
+ />
3694
+ </g>
3695
+ </g>
3696
+ </svg>
3697
+ </a>
3698
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
3699
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
3700
+ <title>PF-HorizontalLogo-Color</title>
3701
+ <defs>
3702
+ <linearGradient
3703
+ x1="68%"
3704
+ y1="2.25860997e-13%"
3705
+ x2="32%"
3706
+ y2="100%"
3707
+ id="linearGradient-1"
3708
+ >
3709
+ <stop stop-color="#2B9AF3" offset="0%" />
3710
+ <stop
3711
+ stop-color="#73BCF7"
3712
+ stop-opacity="0.502212631"
3713
+ offset="100%"
3714
+ />
3715
+ </linearGradient>
3716
+ </defs>
3717
+ <g
3718
+ id="PF-IconLogo-color"
3719
+ stroke="none"
3720
+ stroke-width="1"
3721
+ fill="none"
3722
+ fill-rule="evenodd"
3723
+ >
3724
+ <g id="Logo">
3725
+ <path
3726
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3727
+ id="Rectangle-Copy-17"
3728
+ fill="#0066CC"
3729
+ />
3730
+ <path
3731
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3732
+ id="Path-2"
3733
+ fill="url(#linearGradient-1)"
3734
+ />
3735
+ <path
3736
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3737
+ id="Path-2"
3738
+ fill="url(#linearGradient-1)"
3739
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3740
+ />
3741
+ </g>
3742
+ </g>
3743
+ </svg>
3744
+ </a>
3745
+ </div>
3746
+ </div>
3747
+ <hr class="pf-v6-c-divider" />
3748
+ <div class="pf-v6-c-masthead__content">
3749
+ <div
3750
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
3751
+ id="nav-docked-example-masthead-toolbar"
3752
+ >
3753
+ <div class="pf-v6-c-toolbar__content">
3754
+ <div class="pf-v6-c-toolbar__content-section">
3755
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
3756
+ <ul class="pf-v6-c-nav__list" role="list">
3757
+ <li class="pf-v6-c-nav__item">
3758
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
3759
+ <span class="pf-v6-c-nav__link-icon">
3760
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3761
+ </span>
3762
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3763
+ </a>
3764
+ </li>
3765
+ <li class="pf-v6-c-nav__item">
3766
+ <a
3767
+ href="#"
3768
+ class="pf-v6-c-nav__link pf-m-current"
3769
+ aria-current="page"
3770
+ aria-label="Folder"
2690
3771
  >
2691
- <path
2692
- d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
2693
- />
2694
- </svg>
2695
- </span>
2696
- <span class="pf-v6-c-button__text">Settings</span>
2697
- </button>
3772
+ <span class="pf-v6-c-nav__link-icon">
3773
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
3774
+ </span>
3775
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3776
+ </a>
3777
+ </li>
3778
+ <li class="pf-v6-c-nav__item">
3779
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
3780
+ <span class="pf-v6-c-nav__link-icon">
3781
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
3782
+ </span>
3783
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3784
+ </a>
3785
+ </li>
3786
+ <li class="pf-v6-c-nav__item">
3787
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
3788
+ <span class="pf-v6-c-nav__link-icon">
3789
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
3790
+ </span>
3791
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3792
+ </a>
3793
+ </li>
3794
+ </ul>
3795
+ </nav>
3796
+
3797
+ <div
3798
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
3799
+ >
3800
+ <div class="pf-v6-c-toolbar__item">
3801
+ <button
3802
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
3803
+ type="button"
3804
+ aria-expanded="false"
3805
+ aria-label="Applications"
3806
+ >
3807
+ <span class="pf-v6-c-menu-toggle__icon">
3808
+ <i class="fas fa-th" aria-hidden="true"></i>
3809
+ </span>
3810
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
3811
+ </button>
3812
+ </div>
3813
+ <div class="pf-v6-c-toolbar__item">
3814
+ <button
3815
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
3816
+ type="button"
3817
+ aria-label="Settings"
3818
+ >
3819
+ <span class="pf-v6-c-button__icon pf-m-start">
3820
+ <svg
3821
+ class="pf-v6-svg"
3822
+ viewBox="0 0 32 32"
3823
+ fill="currentColor"
3824
+ aria-hidden="true"
3825
+ role="img"
3826
+ width="1em"
3827
+ height="1em"
3828
+ >
3829
+ <path
3830
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
3831
+ />
3832
+ </svg>
3833
+ </span>
3834
+ <span class="pf-v6-c-button__text">Settings</span>
3835
+ </button>
3836
+ </div>
3837
+ <div class="pf-v6-c-toolbar__item">
3838
+ <button
3839
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
3840
+ type="button"
3841
+ aria-expanded="false"
3842
+ aria-label="Help"
3843
+ >
3844
+ <span class="pf-v6-c-menu-toggle__icon">
3845
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3846
+ </span>
3847
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
3848
+ </button>
3849
+ </div>
2698
3850
  </div>
2699
- <div class="pf-v6-c-toolbar__item">
2700
- <button
2701
- class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
2702
- type="button"
2703
- aria-expanded="false"
2704
- aria-label="Help"
3851
+ </div>
3852
+ </div>
3853
+ </div>
3854
+ </div>
3855
+ </header>
3856
+ </div>
3857
+ </div>
3858
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3859
+ <main
3860
+ class="pf-v6-c-page__main"
3861
+ tabindex="-1"
3862
+ id="main-content-nav-docked-example"
3863
+ >
3864
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3865
+ <div class="pf-v6-c-page__main-body">
3866
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3867
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3868
+ <li class="pf-v6-c-breadcrumb__item">
3869
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3870
+ </li>
3871
+ <li class="pf-v6-c-breadcrumb__item">
3872
+ <span class="pf-v6-c-breadcrumb__item-divider">
3873
+ <svg
3874
+ class="pf-v6-svg"
3875
+ viewBox="0 0 20 20"
3876
+ fill="currentColor"
3877
+ aria-hidden="true"
3878
+ role="img"
3879
+ width="1em"
3880
+ height="1em"
3881
+ >
3882
+ <path
3883
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3884
+ />
3885
+ </svg>
3886
+ </span>
3887
+
3888
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3889
+ </li>
3890
+ <li class="pf-v6-c-breadcrumb__item">
3891
+ <span class="pf-v6-c-breadcrumb__item-divider">
3892
+ <svg
3893
+ class="pf-v6-svg"
3894
+ viewBox="0 0 20 20"
3895
+ fill="currentColor"
3896
+ aria-hidden="true"
3897
+ role="img"
3898
+ width="1em"
3899
+ height="1em"
3900
+ >
3901
+ <path
3902
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3903
+ />
3904
+ </svg>
3905
+ </span>
3906
+
3907
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3908
+ </li>
3909
+ <li class="pf-v6-c-breadcrumb__item">
3910
+ <span class="pf-v6-c-breadcrumb__item-divider">
3911
+ <svg
3912
+ class="pf-v6-svg"
3913
+ viewBox="0 0 20 20"
3914
+ fill="currentColor"
3915
+ aria-hidden="true"
3916
+ role="img"
3917
+ width="1em"
3918
+ height="1em"
3919
+ >
3920
+ <path
3921
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3922
+ />
3923
+ </svg>
3924
+ </span>
3925
+
3926
+ <a
3927
+ href="#"
3928
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3929
+ aria-current="page"
3930
+ >Section landing</a>
3931
+ </li>
3932
+ </ol>
3933
+ </nav>
3934
+ </div>
3935
+ </section>
3936
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3937
+ <div class="pf-v6-c-page__main-body">
3938
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3939
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3940
+ </div>
3941
+ </section>
3942
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3943
+ <div class="pf-v6-c-page__main-body">
3944
+ <div class="pf-v6-l-gallery pf-m-gutter">
3945
+ <div class="pf-v6-c-card">
3946
+ <div class="pf-v6-c-card__body">This is a card</div>
3947
+ </div>
3948
+ <div class="pf-v6-c-card">
3949
+ <div class="pf-v6-c-card__body">This is a card</div>
3950
+ </div>
3951
+ <div class="pf-v6-c-card">
3952
+ <div class="pf-v6-c-card__body">This is a card</div>
3953
+ </div>
3954
+ <div class="pf-v6-c-card">
3955
+ <div class="pf-v6-c-card__body">This is a card</div>
3956
+ </div>
3957
+ <div class="pf-v6-c-card">
3958
+ <div class="pf-v6-c-card__body">This is a card</div>
3959
+ </div>
3960
+ <div class="pf-v6-c-card">
3961
+ <div class="pf-v6-c-card__body">This is a card</div>
3962
+ </div>
3963
+ <div class="pf-v6-c-card">
3964
+ <div class="pf-v6-c-card__body">This is a card</div>
3965
+ </div>
3966
+ <div class="pf-v6-c-card">
3967
+ <div class="pf-v6-c-card__body">This is a card</div>
3968
+ </div>
3969
+ <div class="pf-v6-c-card">
3970
+ <div class="pf-v6-c-card__body">This is a card</div>
3971
+ </div>
3972
+ <div class="pf-v6-c-card">
3973
+ <div class="pf-v6-c-card__body">This is a card</div>
3974
+ </div>
3975
+ </div>
3976
+ </div>
3977
+ </section>
3978
+ </main>
3979
+ </div>
3980
+ </div>
3981
+
3982
+ ```
3983
+
3984
+ ### Docked nav text expanded - expanded on mobile
3985
+
3986
+ ```html isFullscreen isBeta
3987
+ <div
3988
+ class="pf-v6-c-page pf-m-dock pf-m-no-sidebar"
3989
+ id="nav-docked-expanded-example"
3990
+ >
3991
+ <header class="pf-v6-c-masthead pf-m-display-inline">
3992
+ <div class="pf-v6-c-masthead__main">
3993
+ <span class="pf-v6-c-masthead__toggle">
3994
+ <button
3995
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3996
+ type="button"
3997
+ aria-label="Global navigation"
3998
+ >
3999
+ <span class="pf-v6-c-button__icon">
4000
+ <svg
4001
+ viewBox="0 0 10 10"
4002
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4003
+ width="1em"
4004
+ height="1em"
4005
+ >
4006
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4007
+ <path
4008
+ class="pf-v6-c-button--hamburger-icon--middle"
4009
+ d="M1,5 L9,5"
4010
+ />
4011
+ <path
4012
+ class="pf-v6-c-button--hamburger-icon--arrow"
4013
+ d="M1,5 L1,5 L1,5"
4014
+ />
4015
+ <path
4016
+ class="pf-v6-c-button--hamburger-icon--bottom"
4017
+ d="M9,9 L1,9"
4018
+ />
4019
+ </svg>
4020
+ </span>
4021
+ </button>
4022
+ </span>
4023
+ <div class="pf-v6-c-masthead__brand">
4024
+ <a class="pf-v6-c-masthead__logo" href="#">
4025
+ <svg height="37px" viewBox="0 0 679 158">
4026
+ <title>PF-HorizontalLogo-Color</title>
4027
+ <defs>
4028
+ <linearGradient
4029
+ x1="68%"
4030
+ y1="2.25860997e-13%"
4031
+ x2="32%"
4032
+ y2="100%"
4033
+ id="linearGradient-"
4034
+ >
4035
+ <stop stop-color="#2B9AF3" offset="0%" />
4036
+ <stop
4037
+ stop-color="#73BCF7"
4038
+ stop-opacity="0.502212631"
4039
+ offset="100%"
4040
+ />
4041
+ </linearGradient>
4042
+ </defs>
4043
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4044
+ <g
4045
+ transform="translate(206.000000, 45.750000)"
4046
+ fill="var(--pf-t--global--text--color--regular)"
4047
+ fill-rule="nonzero"
4048
+ >
4049
+ <path
4050
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
4051
+ />
4052
+ <path
4053
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
4054
+ />
4055
+ <path
4056
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
4057
+ />
4058
+ <path
4059
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
4060
+ />
4061
+ <path
4062
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
4063
+ />
4064
+ <path
4065
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
4066
+ />
4067
+ <path
4068
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
4069
+ />
4070
+ <polygon
4071
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
4072
+ />
4073
+ <polygon
4074
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4075
+ />
4076
+ <path
4077
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
4078
+ />
4079
+ </g>
4080
+ <g transform="translate(0.000000, 0.000000)">
4081
+ <path
4082
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
4083
+ fill="#0066CC"
4084
+ />
4085
+ <path
4086
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4087
+ fill="url(#linearGradient-)"
4088
+ />
4089
+ <path
4090
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4091
+ fill="url(#linearGradient-)"
4092
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4093
+ />
4094
+ </g>
4095
+ </g>
4096
+ </svg>
4097
+ </a>
4098
+ </div>
4099
+ </div>
4100
+ <div class="pf-v6-c-masthead__content">
4101
+ <div class="pf-v6-c-toolbar pf-m-static">
4102
+ <div class="pf-v6-c-toolbar__content">
4103
+ <div class="pf-v6-c-toolbar__content-section">
4104
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
4105
+ <button
4106
+ class="pf-v6-c-button pf-m-plain"
4107
+ type="button"
4108
+ aria-label="Search"
4109
+ >
4110
+ <span class="pf-v6-c-button__icon">
4111
+ <svg
4112
+ class="pf-v6-svg"
4113
+ viewBox="0 0 512 512"
4114
+ fill="currentColor"
4115
+ aria-hidden="true"
4116
+ role="img"
4117
+ width="1em"
4118
+ height="1em"
2705
4119
  >
2706
- <span class="pf-v6-c-menu-toggle__icon">
2707
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2708
- </span>
2709
- <span class="pf-v6-c-menu-toggle__text">Help</span>
2710
- </button>
4120
+ <path
4121
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
4122
+ />
4123
+ </svg>
4124
+ </span>
4125
+ </button>
4126
+ </div>
4127
+ </div>
4128
+ </div>
4129
+ </div>
4130
+ </div>
4131
+ </header>
4132
+ <div class="pf-v6-c-page__dock pf-m-text-expanded pf-m-expanded">
4133
+ <div class="pf-v6-c-page__dock-main">
4134
+ <div class="pf-v6-c-skip-to-content">
4135
+ <a
4136
+ class="pf-v6-c-button pf-m-primary"
4137
+ href="#main-content-nav-docked-expanded-example"
4138
+ >
4139
+ <span class="pf-v6-c-button__text">Skip to content</span>
4140
+ </a>
4141
+ </div>
4142
+
4143
+ <header
4144
+ class="pf-v6-c-masthead pf-m-docked"
4145
+ id="nav-docked-expanded-example-masthead"
4146
+ >
4147
+ <div class="pf-v6-c-masthead__main">
4148
+ <span class="pf-v6-c-masthead__toggle">
4149
+ <button
4150
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4151
+ type="button"
4152
+ aria-label="Global navigation"
4153
+ >
4154
+ <span class="pf-v6-c-button__icon">
4155
+ <svg
4156
+ viewBox="0 0 10 10"
4157
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4158
+ width="1em"
4159
+ height="1em"
4160
+ >
4161
+ <path
4162
+ class="pf-v6-c-button--hamburger-icon--top"
4163
+ d="M1,1 L9,1"
4164
+ />
4165
+ <path
4166
+ class="pf-v6-c-button--hamburger-icon--middle"
4167
+ d="M1,5 L9,5"
4168
+ />
4169
+ <path
4170
+ class="pf-v6-c-button--hamburger-icon--arrow"
4171
+ d="M1,5 L1,5 L1,5"
4172
+ />
4173
+ <path
4174
+ class="pf-v6-c-button--hamburger-icon--bottom"
4175
+ d="M9,9 L1,9"
4176
+ />
4177
+ </svg>
4178
+ </span>
4179
+ </button>
4180
+ </span>
4181
+ <div class="pf-v6-c-masthead__brand">
4182
+ <a class="pf-v6-c-masthead__logo" href="#">
4183
+ <svg height="37px" viewBox="0 0 679 158">
4184
+ <title>PF-HorizontalLogo-Color</title>
4185
+ <defs>
4186
+ <linearGradient
4187
+ x1="68%"
4188
+ y1="2.25860997e-13%"
4189
+ x2="32%"
4190
+ y2="100%"
4191
+ id="linearGradient-nav-docked-expanded-example-masthead"
4192
+ >
4193
+ <stop stop-color="#2B9AF3" offset="0%" />
4194
+ <stop
4195
+ stop-color="#73BCF7"
4196
+ stop-opacity="0.502212631"
4197
+ offset="100%"
4198
+ />
4199
+ </linearGradient>
4200
+ </defs>
4201
+ <g
4202
+ stroke="none"
4203
+ stroke-width="1"
4204
+ fill="none"
4205
+ fill-rule="evenodd"
4206
+ >
4207
+ <g
4208
+ transform="translate(206.000000, 45.750000)"
4209
+ fill="var(--pf-t--global--text--color--regular)"
4210
+ fill-rule="nonzero"
4211
+ >
4212
+ <path
4213
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
4214
+ />
4215
+ <path
4216
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
4217
+ />
4218
+ <path
4219
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
4220
+ />
4221
+ <path
4222
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
4223
+ />
4224
+ <path
4225
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
4226
+ />
4227
+ <path
4228
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
4229
+ />
4230
+ <path
4231
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
4232
+ />
4233
+ <polygon
4234
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
4235
+ />
4236
+ <polygon
4237
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4238
+ />
4239
+ <path
4240
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
4241
+ />
4242
+ </g>
4243
+ <g transform="translate(0.000000, 0.000000)">
4244
+ <path
4245
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
4246
+ fill="#0066CC"
4247
+ />
4248
+ <path
4249
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4250
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
4251
+ />
4252
+ <path
4253
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4254
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
4255
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4256
+ />
4257
+ </g>
4258
+ </g>
4259
+ </svg>
4260
+ </a>
4261
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
4262
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
4263
+ <title>PF-HorizontalLogo-Color</title>
4264
+ <defs>
4265
+ <linearGradient
4266
+ x1="68%"
4267
+ y1="2.25860997e-13%"
4268
+ x2="32%"
4269
+ y2="100%"
4270
+ id="linearGradient-1"
4271
+ >
4272
+ <stop stop-color="#2B9AF3" offset="0%" />
4273
+ <stop
4274
+ stop-color="#73BCF7"
4275
+ stop-opacity="0.502212631"
4276
+ offset="100%"
4277
+ />
4278
+ </linearGradient>
4279
+ </defs>
4280
+ <g
4281
+ id="PF-IconLogo-color"
4282
+ stroke="none"
4283
+ stroke-width="1"
4284
+ fill="none"
4285
+ fill-rule="evenodd"
4286
+ >
4287
+ <g id="Logo">
4288
+ <path
4289
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
4290
+ id="Rectangle-Copy-17"
4291
+ fill="#0066CC"
4292
+ />
4293
+ <path
4294
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4295
+ id="Path-2"
4296
+ fill="url(#linearGradient-1)"
4297
+ />
4298
+ <path
4299
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4300
+ id="Path-2"
4301
+ fill="url(#linearGradient-1)"
4302
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4303
+ />
4304
+ </g>
4305
+ </g>
4306
+ </svg>
4307
+ </a>
4308
+ </div>
4309
+ </div>
4310
+ <hr class="pf-v6-c-divider" />
4311
+ <div class="pf-v6-c-masthead__content">
4312
+ <div
4313
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
4314
+ id="nav-docked-expanded-example-masthead-toolbar"
4315
+ >
4316
+ <div class="pf-v6-c-toolbar__content">
4317
+ <div class="pf-v6-c-toolbar__content-section">
4318
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
4319
+ <ul class="pf-v6-c-nav__list" role="list">
4320
+ <li class="pf-v6-c-nav__item">
4321
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
4322
+ <span class="pf-v6-c-nav__link-icon">
4323
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4324
+ </span>
4325
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4326
+ </a>
4327
+ </li>
4328
+ <li class="pf-v6-c-nav__item">
4329
+ <a
4330
+ href="#"
4331
+ class="pf-v6-c-nav__link pf-m-current"
4332
+ aria-current="page"
4333
+ aria-label="Folder"
4334
+ >
4335
+ <span class="pf-v6-c-nav__link-icon">
4336
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
4337
+ </span>
4338
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4339
+ </a>
4340
+ </li>
4341
+ <li class="pf-v6-c-nav__item">
4342
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
4343
+ <span class="pf-v6-c-nav__link-icon">
4344
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
4345
+ </span>
4346
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4347
+ </a>
4348
+ </li>
4349
+ <li class="pf-v6-c-nav__item">
4350
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
4351
+ <span class="pf-v6-c-nav__link-icon">
4352
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
4353
+ </span>
4354
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4355
+ </a>
4356
+ </li>
4357
+ </ul>
4358
+ </nav>
4359
+
4360
+ <div
4361
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
4362
+ >
4363
+ <div class="pf-v6-c-toolbar__item">
4364
+ <button
4365
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
4366
+ type="button"
4367
+ aria-expanded="false"
4368
+ aria-label="Applications"
4369
+ >
4370
+ <span class="pf-v6-c-menu-toggle__icon">
4371
+ <i class="fas fa-th" aria-hidden="true"></i>
4372
+ </span>
4373
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
4374
+ </button>
4375
+ </div>
4376
+ <div class="pf-v6-c-toolbar__item">
4377
+ <button
4378
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
4379
+ type="button"
4380
+ aria-label="Settings"
4381
+ >
4382
+ <span class="pf-v6-c-button__icon pf-m-start">
4383
+ <svg
4384
+ class="pf-v6-svg"
4385
+ viewBox="0 0 32 32"
4386
+ fill="currentColor"
4387
+ aria-hidden="true"
4388
+ role="img"
4389
+ width="1em"
4390
+ height="1em"
4391
+ >
4392
+ <path
4393
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
4394
+ />
4395
+ </svg>
4396
+ </span>
4397
+ <span class="pf-v6-c-button__text">Settings</span>
4398
+ </button>
4399
+ </div>
4400
+ <div class="pf-v6-c-toolbar__item">
4401
+ <button
4402
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
4403
+ type="button"
4404
+ aria-expanded="false"
4405
+ aria-label="Help"
4406
+ >
4407
+ <span class="pf-v6-c-menu-toggle__icon">
4408
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
4409
+ </span>
4410
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
4411
+ </button>
4412
+ </div>
2711
4413
  </div>
2712
4414
  </div>
2713
4415
  </div>
2714
4416
  </div>
2715
4417
  </div>
2716
- </div>
2717
- </header>
4418
+ </header>
4419
+ </div>
2718
4420
  </div>
2719
4421
  <div class="pf-v6-c-page__main-container" tabindex="-1">
2720
4422
  <main
2721
4423
  class="pf-v6-c-page__main"
2722
4424
  tabindex="-1"
2723
- id="main-content-nav-docked-example"
4425
+ id="main-content-nav-docked-expanded-example"
2724
4426
  >
2725
4427
  <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2726
4428
  <div class="pf-v6-c-page__main-body">