@patternfly/patternfly 6.0.0-alpha.49 → 6.0.0-alpha.50

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 (18) hide show
  1. package/components/Button/button.css +12 -2
  2. package/components/Button/button.scss +16 -6
  3. package/components/Nav/nav.css +240 -918
  4. package/components/Nav/nav.scss +300 -1082
  5. package/components/Page/page.scss +1 -1
  6. package/docs/components/Nav/examples/Navigation.css +1 -39
  7. package/docs/components/Nav/examples/Navigation.md +68 -242
  8. package/docs/demos/CardView/examples/CardView.md +4 -8
  9. package/docs/demos/Masthead/examples/Masthead.md +24 -15
  10. package/docs/demos/Nav/examples/Nav.md +79 -874
  11. package/docs/demos/Page/examples/Page.md +24 -12
  12. package/docs/demos/Page/examples/Penta.md +1 -0
  13. package/package.json +1 -1
  14. package/patternfly-no-globals.css +247 -919
  15. package/patternfly-theme-dark-unversioned.css +247 -919
  16. package/patternfly.css +247 -919
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -529,6 +529,7 @@ section: components
529
529
  </li>
530
530
  </ul>
531
531
  </section>
532
+
532
533
  <section class="pf-v5-c-nav__section" aria-labelledby="grouped-title2">
533
534
  <h2 class="pf-v5-c-nav__section-title" id="grouped-title2">Policy</h2>
534
535
  <ul class="pf-v5-c-nav__list" role="list">
@@ -828,13 +829,11 @@ section: components
828
829
  aria-label="Global"
829
830
  >
830
831
  <ul class="pf-v5-c-nav__list" role="list">
831
- <li
832
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
833
- >
832
+ <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
834
833
  <button
835
834
  class="pf-v5-c-nav__link"
836
- id="nav-expandable-example-expandable-nav-link1"
837
835
  aria-expanded="true"
836
+ id="nav-expandable-example-expandable-nav-link1"
838
837
  >
839
838
  System panel
840
839
  <span class="pf-v5-c-nav__toggle">
@@ -861,8 +860,6 @@ section: components
861
860
  <li class="pf-v5-c-nav__item">
862
861
  <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
863
862
  </li>
864
- <li class="pf-v5-c-divider" role="separator"></li>
865
-
866
863
  <li class="pf-v5-c-nav__item">
867
864
  <a href="#" class="pf-v5-c-nav__link">Instances</a>
868
865
  </li>
@@ -878,8 +875,8 @@ section: components
878
875
  <li class="pf-v5-c-nav__item pf-m-expandable">
879
876
  <button
880
877
  class="pf-v5-c-nav__link"
881
- id="nav-expandable-example-expandable-nav-link2"
882
878
  aria-expanded="false"
879
+ id="nav-expandable-example-expandable-nav-link2"
883
880
  >
884
881
  Policy
885
882
  <span class="pf-v5-c-nav__toggle">
@@ -906,8 +903,8 @@ section: components
906
903
  <li class="pf-v5-c-nav__item pf-m-expandable">
907
904
  <button
908
905
  class="pf-v5-c-nav__link"
909
- id="nav-expandable-example-expandable-nav-link3"
910
906
  aria-expanded="false"
907
+ id="nav-expandable-example-expandable-nav-link3"
911
908
  >
912
909
  Authentication
913
910
  <span class="pf-v5-c-nav__toggle">
@@ -1152,17 +1149,21 @@ section: components
1152
1149
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
1153
1150
  >
1154
1151
  <nav
1155
- class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable"
1156
- id="-horizontal-nav"
1152
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
1153
+ id="nav-horizontal-example-masthead-horizontal-nav"
1157
1154
  aria-label="Global"
1158
1155
  >
1159
- <button
1160
- class="pf-v5-c-nav__scroll-button"
1161
- disabled
1162
- aria-label="Scroll left"
1163
- >
1164
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1165
- </button>
1156
+ <div class="pf-v5-c-nav__scroll-button">
1157
+ <button
1158
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1159
+ type="button"
1160
+ aria-label="Scroll start"
1161
+ >
1162
+ <span class="pf-v5-c-button__icon">
1163
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1164
+ </span>
1165
+ </button>
1166
+ </div>
1166
1167
  <ul class="pf-v5-c-nav__list" role="list">
1167
1168
  <li class="pf-v5-c-nav__item">
1168
1169
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -1184,12 +1185,17 @@ section: components
1184
1185
  >Horizontal nav item 5</a>
1185
1186
  </li>
1186
1187
  </ul>
1187
- <button
1188
- class="pf-v5-c-nav__scroll-button"
1189
- aria-label="Scroll right"
1190
- >
1191
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1192
- </button>
1188
+ <div class="pf-v5-c-nav__scroll-button">
1189
+ <button
1190
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1191
+ type="button"
1192
+ aria-label="Scroll end"
1193
+ >
1194
+ <span class="pf-v5-c-button__icon">
1195
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1196
+ </span>
1197
+ </button>
1198
+ </div>
1193
1199
  </nav>
1194
1200
  </div>
1195
1201
  <div
@@ -1527,13 +1533,11 @@ section: components
1527
1533
  aria-label="Global"
1528
1534
  >
1529
1535
  <ul class="pf-v5-c-nav__list" role="list">
1530
- <li
1531
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
1532
- >
1536
+ <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
1533
1537
  <button
1534
1538
  class="pf-v5-c-nav__link"
1535
- id="nav-horizontal-subnav-example-expandable-nav-link1"
1536
1539
  aria-expanded="true"
1540
+ id="nav-horizontal-subnav-example-expandable-nav-link1"
1537
1541
  >
1538
1542
  System panel
1539
1543
  <span class="pf-v5-c-nav__toggle">
@@ -1560,8 +1564,6 @@ section: components
1560
1564
  <li class="pf-v5-c-nav__item">
1561
1565
  <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
1562
1566
  </li>
1563
- <li class="pf-v5-c-divider" role="separator"></li>
1564
-
1565
1567
  <li class="pf-v5-c-nav__item">
1566
1568
  <a href="#" class="pf-v5-c-nav__link">Instances</a>
1567
1569
  </li>
@@ -1577,8 +1579,8 @@ section: components
1577
1579
  <li class="pf-v5-c-nav__item pf-m-expandable">
1578
1580
  <button
1579
1581
  class="pf-v5-c-nav__link"
1580
- id="nav-horizontal-subnav-example-expandable-nav-link2"
1581
1582
  aria-expanded="false"
1583
+ id="nav-horizontal-subnav-example-expandable-nav-link2"
1582
1584
  >
1583
1585
  Policy
1584
1586
  <span class="pf-v5-c-nav__toggle">
@@ -1605,8 +1607,8 @@ section: components
1605
1607
  <li class="pf-v5-c-nav__item pf-m-expandable">
1606
1608
  <button
1607
1609
  class="pf-v5-c-nav__link"
1608
- id="nav-horizontal-subnav-example-expandable-nav-link3"
1609
1610
  aria-expanded="false"
1611
+ id="nav-horizontal-subnav-example-expandable-nav-link3"
1610
1612
  >
1611
1613
  Authentication
1612
1614
  <span class="pf-v5-c-nav__toggle">
@@ -1863,17 +1865,21 @@ section: components
1863
1865
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
1864
1866
  >
1865
1867
  <nav
1866
- class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable"
1867
- id="-horizontal-nav"
1868
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
1869
+ id="nav-horizontal-example-masthead-horizontal-nav"
1868
1870
  aria-label="Global"
1869
1871
  >
1870
- <button
1871
- class="pf-v5-c-nav__scroll-button"
1872
- disabled
1873
- aria-label="Scroll left"
1874
- >
1875
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1876
- </button>
1872
+ <div class="pf-v5-c-nav__scroll-button">
1873
+ <button
1874
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1875
+ type="button"
1876
+ aria-label="Scroll start"
1877
+ >
1878
+ <span class="pf-v5-c-button__icon">
1879
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1880
+ </span>
1881
+ </button>
1882
+ </div>
1877
1883
  <ul class="pf-v5-c-nav__list" role="list">
1878
1884
  <li class="pf-v5-c-nav__item">
1879
1885
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -1895,12 +1901,17 @@ section: components
1895
1901
  >Horizontal nav item 5</a>
1896
1902
  </li>
1897
1903
  </ul>
1898
- <button
1899
- class="pf-v5-c-nav__scroll-button"
1900
- aria-label="Scroll right"
1901
- >
1902
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1903
- </button>
1904
+ <div class="pf-v5-c-nav__scroll-button">
1905
+ <button
1906
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1907
+ type="button"
1908
+ aria-label="Scroll end"
1909
+ >
1910
+ <span class="pf-v5-c-button__icon">
1911
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1912
+ </span>
1913
+ </button>
1914
+ </div>
1904
1915
  </nav>
1905
1916
  </div>
1906
1917
  <div
@@ -1961,19 +1972,23 @@ section: components
1961
1972
  tabindex="-1"
1962
1973
  id="main-content-nav-horizontal-example"
1963
1974
  >
1964
- <section class="pf-v5-c-page__main-subnav pf-m-limit-width">
1975
+ <section class="pf-v5-c-page__main-nav pf-m-limit-width">
1965
1976
  <div class="pf-v5-c-page__main-body">
1966
1977
  <nav
1967
- class="pf-v5-c-nav pf-m-horizontal-subnav pf-m-scrollable"
1978
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
1968
1979
  aria-label="Local"
1969
1980
  >
1970
- <button
1971
- class="pf-v5-c-nav__scroll-button"
1972
- disabled
1973
- aria-label="Scroll left"
1974
- >
1975
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1976
- </button>
1981
+ <div class="pf-v5-c-nav__scroll-button">
1982
+ <button
1983
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1984
+ type="button"
1985
+ aria-label="Scroll start"
1986
+ >
1987
+ <span class="pf-v5-c-button__icon">
1988
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1989
+ </span>
1990
+ </button>
1991
+ </div>
1977
1992
  <ul class="pf-v5-c-nav__list" role="list">
1978
1993
  <li class="pf-v5-c-nav__item">
1979
1994
  <a
@@ -1995,830 +2010,20 @@ section: components
1995
2010
  <a href="#" class="pf-v5-c-nav__link">Horizontal subnav item 5</a>
1996
2011
  </li>
1997
2012
  </ul>
1998
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
1999
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2000
- </button>
2001
- </nav>
2002
- </div>
2003
- </section>
2004
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
2005
- <div class="pf-v5-c-page__main-body">
2006
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
2007
- <ol class="pf-v5-c-breadcrumb__list" role="list">
2008
- <li class="pf-v5-c-breadcrumb__item">
2009
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
2010
- </li>
2011
- <li class="pf-v5-c-breadcrumb__item">
2012
- <span class="pf-v5-c-breadcrumb__item-divider">
2013
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2014
- </span>
2015
-
2016
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
2017
- </li>
2018
- <li class="pf-v5-c-breadcrumb__item">
2019
- <span class="pf-v5-c-breadcrumb__item-divider">
2020
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2021
- </span>
2022
-
2023
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
2024
- </li>
2025
- <li class="pf-v5-c-breadcrumb__item">
2026
- <span class="pf-v5-c-breadcrumb__item-divider">
2013
+ <div class="pf-v5-c-nav__scroll-button">
2014
+ <button
2015
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
2016
+ type="button"
2017
+ aria-label="Scroll end"
2018
+ >
2019
+ <span class="pf-v5-c-button__icon">
2027
2020
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2028
2021
  </span>
2029
-
2030
- <a
2031
- href="#"
2032
- class="pf-v5-c-breadcrumb__link pf-m-current"
2033
- aria-current="page"
2034
- >Section landing</a>
2035
- </li>
2036
- </ol>
2037
- </nav>
2038
- </div>
2039
- </section>
2040
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
2041
- <div class="pf-v5-c-page__main-body">
2042
- <div class="pf-v5-c-content">
2043
- <h1>Main title</h1>
2044
- <p>This is a full page demo.</p>
2045
- </div>
2046
- </div>
2047
- </section>
2048
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
2049
- <div class="pf-v5-c-page__main-body">
2050
- <div class="pf-v5-l-gallery pf-m-gutter">
2051
- <div class="pf-v5-c-card">
2052
- <div class="pf-v5-c-card__body">This is a card</div>
2053
- </div>
2054
- <div class="pf-v5-c-card">
2055
- <div class="pf-v5-c-card__body">This is a card</div>
2056
- </div>
2057
- <div class="pf-v5-c-card">
2058
- <div class="pf-v5-c-card__body">This is a card</div>
2059
- </div>
2060
- <div class="pf-v5-c-card">
2061
- <div class="pf-v5-c-card__body">This is a card</div>
2062
- </div>
2063
- <div class="pf-v5-c-card">
2064
- <div class="pf-v5-c-card__body">This is a card</div>
2065
- </div>
2066
- <div class="pf-v5-c-card">
2067
- <div class="pf-v5-c-card__body">This is a card</div>
2068
- </div>
2069
- <div class="pf-v5-c-card">
2070
- <div class="pf-v5-c-card__body">This is a card</div>
2071
- </div>
2072
- <div class="pf-v5-c-card">
2073
- <div class="pf-v5-c-card__body">This is a card</div>
2074
- </div>
2075
- <div class="pf-v5-c-card">
2076
- <div class="pf-v5-c-card__body">This is a card</div>
2077
- </div>
2078
- <div class="pf-v5-c-card">
2079
- <div class="pf-v5-c-card__body">This is a card</div>
2022
+ </button>
2080
2023
  </div>
2081
- </div>
2024
+ </nav>
2082
2025
  </div>
2083
2026
  </section>
2084
- </main>
2085
- </div>
2086
-
2087
- ```
2088
-
2089
- ### Tertiary nav
2090
-
2091
- ```html isFullscreen isDeprecated
2092
- <div class="pf-v5-c-page" id="nav-legacy-teriary-example">
2093
- <div class="pf-v5-c-skip-to-content">
2094
- <a
2095
- class="pf-v5-c-button pf-m-primary"
2096
- href="#main-content-nav-legacy-teriary-example"
2097
- >Skip to content</a>
2098
- </div>
2099
- <header class="pf-v5-c-masthead" id="nav-legacy-teriary-example-masthead">
2100
- <span class="pf-v5-c-masthead__toggle">
2101
- <button
2102
- class="pf-v5-c-button pf-m-plain"
2103
- type="button"
2104
- aria-label="Global navigation"
2105
- >
2106
- <i class="fas fa-bars" aria-hidden="true"></i>
2107
- </button>
2108
- </span>
2109
- <div class="pf-v5-c-masthead__main">
2110
- <a class="pf-v5-c-masthead__brand" href="#">
2111
- <svg height="40px" viewBox="0 0 679 158">
2112
- <title>PF-HorizontalLogo-Color</title>
2113
- <defs>
2114
- <linearGradient
2115
- x1="68%"
2116
- y1="2.25860997e-13%"
2117
- x2="32%"
2118
- y2="100%"
2119
- id="linearGradient-nav-legacy-teriary-example-masthead"
2120
- >
2121
- <stop stop-color="#2B9AF3" offset="0%" />
2122
- <stop
2123
- stop-color="#73BCF7"
2124
- stop-opacity="0.502212631"
2125
- offset="100%"
2126
- />
2127
- </linearGradient>
2128
- </defs>
2129
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2130
- <g
2131
- transform="translate(206.000000, 45.750000)"
2132
- fill="var(--pf-t--global--text--color--regular)"
2133
- fill-rule="nonzero"
2134
- >
2135
- <path
2136
- 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"
2137
- />
2138
- <path
2139
- 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"
2140
- />
2141
- <path
2142
- 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"
2143
- />
2144
- <path
2145
- 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"
2146
- />
2147
- <path
2148
- 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"
2149
- />
2150
- <path
2151
- 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"
2152
- />
2153
- <path
2154
- 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"
2155
- />
2156
- <polygon
2157
- 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"
2158
- />
2159
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2160
- <path
2161
- 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"
2162
- />
2163
- </g>
2164
- <g transform="translate(0.000000, 0.000000)">
2165
- <path
2166
- 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"
2167
- fill="#0066CC"
2168
- />
2169
- <path
2170
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2171
- fill="url(#linearGradient-nav-legacy-teriary-example-masthead)"
2172
- />
2173
- <path
2174
- 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"
2175
- fill="url(#linearGradient-nav-legacy-teriary-example-masthead)"
2176
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2177
- />
2178
- </g>
2179
- </g>
2180
- </svg>
2181
- </a>
2182
- </div>
2183
- <div class="pf-v5-c-masthead__content">
2184
- <div
2185
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2186
- id="nav-legacy-teriary-example-masthead-toolbar"
2187
- >
2188
- <div class="pf-v5-c-toolbar__content">
2189
- <div class="pf-v5-c-toolbar__content-section">
2190
- <div class="pf-v5-c-toolbar__item">
2191
- <button
2192
- class="pf-v5-c-menu-toggle"
2193
- type="button"
2194
- aria-expanded="false"
2195
- >
2196
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
2197
- <span class="pf-v5-c-menu-toggle__controls">
2198
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2199
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2200
- </span>
2201
- </span>
2202
- </button>
2203
- </div>
2204
-
2205
- <div class="pf-v5-c-toolbar__item">
2206
- <button
2207
- class="pf-v5-c-menu-toggle"
2208
- type="button"
2209
- aria-expanded="false"
2210
- >
2211
- <span class="pf-v5-c-menu-toggle__text">Services</span>
2212
- <span class="pf-v5-c-menu-toggle__controls">
2213
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2214
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2215
- </span>
2216
- </span>
2217
- </button>
2218
- </div>
2219
-
2220
- <div
2221
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2222
- >
2223
- <div
2224
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2225
- >
2226
- <div class="pf-v5-c-toolbar__item">
2227
- <button
2228
- class="pf-v5-c-menu-toggle pf-m-plain"
2229
- type="button"
2230
- aria-expanded="false"
2231
- aria-label="Application launcher"
2232
- >
2233
- <i class="fas fa-th" aria-hidden="true"></i>
2234
- </button>
2235
- </div>
2236
- <div class="pf-v5-c-toolbar__item">
2237
- <button
2238
- class="pf-v5-c-menu-toggle pf-m-plain"
2239
- type="button"
2240
- aria-expanded="false"
2241
- aria-label="Settings"
2242
- >
2243
- <i class="fas fa-cog" aria-hidden="true"></i>
2244
- </button>
2245
- </div>
2246
- <div class="pf-v5-c-toolbar__item">
2247
- <button
2248
- class="pf-v5-c-menu-toggle pf-m-plain"
2249
- type="button"
2250
- aria-expanded="false"
2251
- aria-label="Help"
2252
- >
2253
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2254
- </button>
2255
- </div>
2256
- </div>
2257
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2258
- <button
2259
- class="pf-v5-c-menu-toggle pf-m-plain"
2260
- type="button"
2261
- aria-expanded="false"
2262
- aria-label="Actions"
2263
- >
2264
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2265
- </button>
2266
- </div>
2267
- </div>
2268
- </div>
2269
- </div>
2270
- </div>
2271
- </div>
2272
- </header>
2273
- <div class="pf-v5-c-page__sidebar">
2274
- <div class="pf-v5-c-page__sidebar-body">
2275
- <nav
2276
- class="pf-v5-c-nav"
2277
- id="nav-legacy-teriary-example-expandable-nav"
2278
- aria-label="Global"
2279
- >
2280
- <ul class="pf-v5-c-nav__list" role="list">
2281
- <li
2282
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
2283
- >
2284
- <button
2285
- class="pf-v5-c-nav__link"
2286
- id="nav-legacy-teriary-example-expandable-nav-link1"
2287
- aria-expanded="true"
2288
- >
2289
- System panel
2290
- <span class="pf-v5-c-nav__toggle">
2291
- <span class="pf-v5-c-nav__toggle-icon">
2292
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2293
- </span>
2294
- </span>
2295
- </button>
2296
- <section
2297
- class="pf-v5-c-nav__subnav"
2298
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
2299
- >
2300
- <ul class="pf-v5-c-nav__list" role="list">
2301
- <li class="pf-v5-c-nav__item">
2302
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
2303
- </li>
2304
- <li class="pf-v5-c-nav__item">
2305
- <a
2306
- href="#"
2307
- class="pf-v5-c-nav__link pf-m-current"
2308
- aria-current="page"
2309
- >Resource usage</a>
2310
- </li>
2311
- <li class="pf-v5-c-nav__item">
2312
- <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
2313
- </li>
2314
- <li class="pf-v5-c-divider" role="separator"></li>
2315
-
2316
- <li class="pf-v5-c-nav__item">
2317
- <a href="#" class="pf-v5-c-nav__link">Instances</a>
2318
- </li>
2319
- <li class="pf-v5-c-nav__item">
2320
- <a href="#" class="pf-v5-c-nav__link">Volumes</a>
2321
- </li>
2322
- <li class="pf-v5-c-nav__item">
2323
- <a href="#" class="pf-v5-c-nav__link">Networks</a>
2324
- </li>
2325
- </ul>
2326
- </section>
2327
- </li>
2328
- <li class="pf-v5-c-nav__item pf-m-expandable">
2329
- <button
2330
- class="pf-v5-c-nav__link"
2331
- id="nav-legacy-teriary-example-expandable-nav-link2"
2332
- aria-expanded="false"
2333
- >
2334
- Policy
2335
- <span class="pf-v5-c-nav__toggle">
2336
- <span class="pf-v5-c-nav__toggle-icon">
2337
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2338
- </span>
2339
- </span>
2340
- </button>
2341
- <section
2342
- class="pf-v5-c-nav__subnav"
2343
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
2344
- hidden
2345
- >
2346
- <ul class="pf-v5-c-nav__list" role="list">
2347
- <li class="pf-v5-c-nav__item">
2348
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2349
- </li>
2350
- <li class="pf-v5-c-nav__item">
2351
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
2352
- </li>
2353
- </ul>
2354
- </section>
2355
- </li>
2356
- <li class="pf-v5-c-nav__item pf-m-expandable">
2357
- <button
2358
- class="pf-v5-c-nav__link"
2359
- id="nav-legacy-teriary-example-expandable-nav-link3"
2360
- aria-expanded="false"
2361
- >
2362
- Authentication
2363
- <span class="pf-v5-c-nav__toggle">
2364
- <span class="pf-v5-c-nav__toggle-icon">
2365
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2366
- </span>
2367
- </span>
2368
- </button>
2369
- <section
2370
- class="pf-v5-c-nav__subnav"
2371
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
2372
- hidden
2373
- >
2374
- <ul class="pf-v5-c-nav__list" role="list">
2375
- <li class="pf-v5-c-nav__item">
2376
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2377
- </li>
2378
- <li class="pf-v5-c-nav__item">
2379
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
2380
- </li>
2381
- </ul>
2382
- </section>
2383
- </li>
2384
- </ul>
2385
- </nav>
2386
- </div>
2387
- </div>
2388
- <main
2389
- class="pf-v5-c-page__main"
2390
- tabindex="-1"
2391
- id="main-content-nav-legacy-teriary-example"
2392
- >
2393
- <section class="pf-v5-c-page__main-nav pf-m-limit-width">
2394
- <div class="pf-v5-c-page__main-body">
2395
- <nav
2396
- class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary pf-m-scrollable"
2397
- aria-label="Local"
2398
- >
2399
- <button
2400
- class="pf-v5-c-nav__scroll-button"
2401
- disabled
2402
- aria-label="Scroll left"
2403
- >
2404
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2405
- </button>
2406
- <ul class="pf-v5-c-nav__list" role="list">
2407
- <li class="pf-v5-c-nav__item">
2408
- <a
2409
- href="#"
2410
- class="pf-v5-c-nav__link pf-m-current"
2411
- aria-current="page"
2412
- >Tertiary nav item 1</a>
2413
- </li>
2414
- <li class="pf-v5-c-nav__item">
2415
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 2</a>
2416
- </li>
2417
- <li class="pf-v5-c-nav__item">
2418
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 3</a>
2419
- </li>
2420
- <li class="pf-v5-c-nav__item">
2421
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 4</a>
2422
- </li>
2423
- <li class="pf-v5-c-nav__item">
2424
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 5</a>
2425
- </li>
2426
- </ul>
2427
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
2428
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2429
- </button>
2430
- </nav>
2431
- </div>
2432
- </section>
2433
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
2434
- <div class="pf-v5-c-page__main-body">
2435
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
2436
- <ol class="pf-v5-c-breadcrumb__list" role="list">
2437
- <li class="pf-v5-c-breadcrumb__item">
2438
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
2439
- </li>
2440
- <li class="pf-v5-c-breadcrumb__item">
2441
- <span class="pf-v5-c-breadcrumb__item-divider">
2442
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2443
- </span>
2444
-
2445
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
2446
- </li>
2447
- <li class="pf-v5-c-breadcrumb__item">
2448
- <span class="pf-v5-c-breadcrumb__item-divider">
2449
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2450
- </span>
2451
-
2452
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
2453
- </li>
2454
- <li class="pf-v5-c-breadcrumb__item">
2455
- <span class="pf-v5-c-breadcrumb__item-divider">
2456
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2457
- </span>
2458
-
2459
- <a
2460
- href="#"
2461
- class="pf-v5-c-breadcrumb__link pf-m-current"
2462
- aria-current="page"
2463
- >Section landing</a>
2464
- </li>
2465
- </ol>
2466
- </nav>
2467
- </div>
2468
- </section>
2469
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
2470
- <div class="pf-v5-c-page__main-body">
2471
- <div class="pf-v5-c-content">
2472
- <h1>Main title</h1>
2473
- <p>This is a full page demo.</p>
2474
- </div>
2475
- </div>
2476
- </section>
2477
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
2478
- <div class="pf-v5-c-page__main-body">
2479
- <div class="pf-v5-l-gallery pf-m-gutter">
2480
- <div class="pf-v5-c-card">
2481
- <div class="pf-v5-c-card__body">This is a card</div>
2482
- </div>
2483
- <div class="pf-v5-c-card">
2484
- <div class="pf-v5-c-card__body">This is a card</div>
2485
- </div>
2486
- <div class="pf-v5-c-card">
2487
- <div class="pf-v5-c-card__body">This is a card</div>
2488
- </div>
2489
- <div class="pf-v5-c-card">
2490
- <div class="pf-v5-c-card__body">This is a card</div>
2491
- </div>
2492
- <div class="pf-v5-c-card">
2493
- <div class="pf-v5-c-card__body">This is a card</div>
2494
- </div>
2495
- <div class="pf-v5-c-card">
2496
- <div class="pf-v5-c-card__body">This is a card</div>
2497
- </div>
2498
- <div class="pf-v5-c-card">
2499
- <div class="pf-v5-c-card__body">This is a card</div>
2500
- </div>
2501
- <div class="pf-v5-c-card">
2502
- <div class="pf-v5-c-card__body">This is a card</div>
2503
- </div>
2504
- <div class="pf-v5-c-card">
2505
- <div class="pf-v5-c-card__body">This is a card</div>
2506
- </div>
2507
- <div class="pf-v5-c-card">
2508
- <div class="pf-v5-c-card__body">This is a card</div>
2509
- </div>
2510
- </div>
2511
- </div>
2512
- </section>
2513
- </main>
2514
- </div>
2515
-
2516
- ```
2517
-
2518
- ### Light theme sidebar and nav
2519
-
2520
- ```html isFullscreen isDeprecated
2521
- <div class="pf-v5-c-page" id="nav-light-theme-example">
2522
- <div class="pf-v5-c-skip-to-content">
2523
- <a
2524
- class="pf-v5-c-button pf-m-primary"
2525
- href="#main-content-nav-light-theme-example"
2526
- >Skip to content</a>
2527
- </div>
2528
- <header class="pf-v5-c-masthead" id="nav-light-theme-example-masthead">
2529
- <span class="pf-v5-c-masthead__toggle">
2530
- <button
2531
- class="pf-v5-c-button pf-m-plain"
2532
- type="button"
2533
- aria-label="Global navigation"
2534
- >
2535
- <i class="fas fa-bars" aria-hidden="true"></i>
2536
- </button>
2537
- </span>
2538
- <div class="pf-v5-c-masthead__main">
2539
- <a class="pf-v5-c-masthead__brand" href="#">
2540
- <svg height="40px" viewBox="0 0 679 158">
2541
- <title>PF-HorizontalLogo-Color</title>
2542
- <defs>
2543
- <linearGradient
2544
- x1="68%"
2545
- y1="2.25860997e-13%"
2546
- x2="32%"
2547
- y2="100%"
2548
- id="linearGradient-nav-light-theme-example-masthead"
2549
- >
2550
- <stop stop-color="#2B9AF3" offset="0%" />
2551
- <stop
2552
- stop-color="#73BCF7"
2553
- stop-opacity="0.502212631"
2554
- offset="100%"
2555
- />
2556
- </linearGradient>
2557
- </defs>
2558
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2559
- <g
2560
- transform="translate(206.000000, 45.750000)"
2561
- fill="var(--pf-t--global--text--color--regular)"
2562
- fill-rule="nonzero"
2563
- >
2564
- <path
2565
- 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"
2566
- />
2567
- <path
2568
- 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"
2569
- />
2570
- <path
2571
- 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"
2572
- />
2573
- <path
2574
- 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"
2575
- />
2576
- <path
2577
- 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"
2578
- />
2579
- <path
2580
- 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"
2581
- />
2582
- <path
2583
- 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"
2584
- />
2585
- <polygon
2586
- 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"
2587
- />
2588
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2589
- <path
2590
- 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"
2591
- />
2592
- </g>
2593
- <g transform="translate(0.000000, 0.000000)">
2594
- <path
2595
- 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"
2596
- fill="#0066CC"
2597
- />
2598
- <path
2599
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2600
- fill="url(#linearGradient-nav-light-theme-example-masthead)"
2601
- />
2602
- <path
2603
- 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"
2604
- fill="url(#linearGradient-nav-light-theme-example-masthead)"
2605
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2606
- />
2607
- </g>
2608
- </g>
2609
- </svg>
2610
- </a>
2611
- </div>
2612
- <div class="pf-v5-c-masthead__content">
2613
- <div
2614
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2615
- id="nav-light-theme-example-masthead-toolbar"
2616
- >
2617
- <div class="pf-v5-c-toolbar__content">
2618
- <div class="pf-v5-c-toolbar__content-section">
2619
- <div class="pf-v5-c-toolbar__item">
2620
- <button
2621
- class="pf-v5-c-menu-toggle"
2622
- type="button"
2623
- aria-expanded="false"
2624
- >
2625
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
2626
- <span class="pf-v5-c-menu-toggle__controls">
2627
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2628
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2629
- </span>
2630
- </span>
2631
- </button>
2632
- </div>
2633
-
2634
- <div class="pf-v5-c-toolbar__item">
2635
- <button
2636
- class="pf-v5-c-menu-toggle"
2637
- type="button"
2638
- aria-expanded="false"
2639
- >
2640
- <span class="pf-v5-c-menu-toggle__text">Services</span>
2641
- <span class="pf-v5-c-menu-toggle__controls">
2642
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2643
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2644
- </span>
2645
- </span>
2646
- </button>
2647
- </div>
2648
-
2649
- <div
2650
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2651
- >
2652
- <div
2653
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2654
- >
2655
- <div class="pf-v5-c-toolbar__item">
2656
- <button
2657
- class="pf-v5-c-menu-toggle pf-m-plain"
2658
- type="button"
2659
- aria-expanded="false"
2660
- aria-label="Application launcher"
2661
- >
2662
- <i class="fas fa-th" aria-hidden="true"></i>
2663
- </button>
2664
- </div>
2665
- <div class="pf-v5-c-toolbar__item">
2666
- <button
2667
- class="pf-v5-c-menu-toggle pf-m-plain"
2668
- type="button"
2669
- aria-expanded="false"
2670
- aria-label="Settings"
2671
- >
2672
- <i class="fas fa-cog" aria-hidden="true"></i>
2673
- </button>
2674
- </div>
2675
- <div class="pf-v5-c-toolbar__item">
2676
- <button
2677
- class="pf-v5-c-menu-toggle pf-m-plain"
2678
- type="button"
2679
- aria-expanded="false"
2680
- aria-label="Help"
2681
- >
2682
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2683
- </button>
2684
- </div>
2685
- </div>
2686
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2687
- <button
2688
- class="pf-v5-c-menu-toggle pf-m-plain"
2689
- type="button"
2690
- aria-expanded="false"
2691
- aria-label="Actions"
2692
- >
2693
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2694
- </button>
2695
- </div>
2696
- </div>
2697
- </div>
2698
- </div>
2699
- </div>
2700
- </div>
2701
- </header>
2702
- <div class="pf-v5-c-page__sidebar pf-m-light">
2703
- <div class="pf-v5-c-page__sidebar-body">
2704
- <nav
2705
- class="pf-v5-c-nav pf-m-light"
2706
- id="nav-light-theme-example-expandable-nav"
2707
- aria-label="Global"
2708
- >
2709
- <ul class="pf-v5-c-nav__list" role="list">
2710
- <li
2711
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
2712
- >
2713
- <button
2714
- class="pf-v5-c-nav__link"
2715
- id="nav-light-theme-example-expandable-nav-link1"
2716
- aria-expanded="true"
2717
- >
2718
- System panel
2719
- <span class="pf-v5-c-nav__toggle">
2720
- <span class="pf-v5-c-nav__toggle-icon">
2721
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2722
- </span>
2723
- </span>
2724
- </button>
2725
- <section
2726
- class="pf-v5-c-nav__subnav"
2727
- aria-labelledby="nav-light-theme-example-expandable-nav-link1"
2728
- >
2729
- <ul class="pf-v5-c-nav__list" role="list">
2730
- <li class="pf-v5-c-nav__item">
2731
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
2732
- </li>
2733
- <li class="pf-v5-c-nav__item">
2734
- <a
2735
- href="#"
2736
- class="pf-v5-c-nav__link pf-m-current"
2737
- aria-current="page"
2738
- >Resource usage</a>
2739
- </li>
2740
- <li class="pf-v5-c-nav__item">
2741
- <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
2742
- </li>
2743
- <li class="pf-v5-c-divider" role="separator"></li>
2744
-
2745
- <li class="pf-v5-c-nav__item">
2746
- <a href="#" class="pf-v5-c-nav__link">Instances</a>
2747
- </li>
2748
- <li class="pf-v5-c-nav__item">
2749
- <a href="#" class="pf-v5-c-nav__link">Volumes</a>
2750
- </li>
2751
- <li class="pf-v5-c-nav__item">
2752
- <a href="#" class="pf-v5-c-nav__link">Networks</a>
2753
- </li>
2754
- </ul>
2755
- </section>
2756
- </li>
2757
- <li class="pf-v5-c-nav__item pf-m-expandable">
2758
- <button
2759
- class="pf-v5-c-nav__link"
2760
- id="nav-light-theme-example-expandable-nav-link2"
2761
- aria-expanded="false"
2762
- >
2763
- Policy
2764
- <span class="pf-v5-c-nav__toggle">
2765
- <span class="pf-v5-c-nav__toggle-icon">
2766
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2767
- </span>
2768
- </span>
2769
- </button>
2770
- <section
2771
- class="pf-v5-c-nav__subnav"
2772
- aria-labelledby="nav-light-theme-example-expandable-nav-link2"
2773
- hidden
2774
- >
2775
- <ul class="pf-v5-c-nav__list" role="list">
2776
- <li class="pf-v5-c-nav__item">
2777
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2778
- </li>
2779
- <li class="pf-v5-c-nav__item">
2780
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
2781
- </li>
2782
- </ul>
2783
- </section>
2784
- </li>
2785
- <li class="pf-v5-c-nav__item pf-m-expandable">
2786
- <button
2787
- class="pf-v5-c-nav__link"
2788
- id="nav-light-theme-example-expandable-nav-link3"
2789
- aria-expanded="false"
2790
- >
2791
- Authentication
2792
- <span class="pf-v5-c-nav__toggle">
2793
- <span class="pf-v5-c-nav__toggle-icon">
2794
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2795
- </span>
2796
- </span>
2797
- </button>
2798
- <section
2799
- class="pf-v5-c-nav__subnav"
2800
- aria-labelledby="nav-light-theme-example-expandable-nav-link3"
2801
- hidden
2802
- >
2803
- <ul class="pf-v5-c-nav__list" role="list">
2804
- <li class="pf-v5-c-nav__item">
2805
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2806
- </li>
2807
- <li class="pf-v5-c-nav__item">
2808
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
2809
- </li>
2810
- </ul>
2811
- </section>
2812
- </li>
2813
- </ul>
2814
- </nav>
2815
- </div>
2816
- </div>
2817
- <main
2818
- class="pf-v5-c-page__main"
2819
- tabindex="-1"
2820
- id="main-content-nav-light-theme-example"
2821
- >
2822
2027
  <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
2823
2028
  <div class="pf-v5-c-page__main-body">
2824
2029
  <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">