@patternfly/patternfly 4.168.0 → 4.171.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +41 -1
- package/components/ContextSelector/context-selector.css +7 -2
- package/components/ContextSelector/context-selector.scss +16 -11
- package/components/Dropdown/dropdown.css +12 -0
- package/components/Dropdown/dropdown.scss +11 -0
- package/components/Masthead/masthead.css +12 -6
- package/components/Masthead/masthead.scss +16 -5
- package/components/Menu/menu.css +1 -0
- package/components/Menu/menu.scss +1 -0
- package/components/MenuToggle/menu-toggle.css +13 -0
- package/components/MenuToggle/menu-toggle.scss +26 -12
- package/components/Nav/nav.css +2 -2
- package/components/Nav/nav.scss +4 -4
- package/components/OptionsMenu/options-menu.css +13 -2
- package/components/OptionsMenu/options-menu.scss +19 -7
- package/components/ProgressStepper/progress-stepper.css +2 -0
- package/components/ProgressStepper/progress-stepper.scss +2 -0
- package/components/Select/select.css +11 -0
- package/components/Select/select.scss +14 -0
- package/components/Sidebar/sidebar.css +1 -0
- package/components/Sidebar/sidebar.scss +1 -0
- package/components/Table/table-scrollable.css +2 -0
- package/components/Table/table-scrollable.scss +2 -0
- package/components/Table/table.css +1 -1
- package/components/Table/table.scss +1 -1
- package/components/Toolbar/toolbar.css +7 -0
- package/components/Toolbar/toolbar.scss +10 -0
- package/docs/components/BackToTop/examples/BackToTop.md +0 -1
- package/docs/components/JumpLinks/examples/JumpLinks.md +0 -1
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +26 -1
- package/docs/components/Toolbar/examples/Toolbar.md +1 -0
- package/docs/demos/BackToTop/examples/BackToTop.md +0 -1
- package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -1
- package/docs/demos/Masthead/examples/Masthead.md +865 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +84 -13
- package/patternfly.css +84 -13
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1515,7 +1515,10 @@ wrapperTag: div
|
|
|
1515
1515
|
</div>
|
|
1516
1516
|
</div>
|
|
1517
1517
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1518
|
-
<div
|
|
1518
|
+
<div
|
|
1519
|
+
class="pf-c-dropdown pf-m-expanded"
|
|
1520
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1521
|
+
>
|
|
1519
1522
|
<button
|
|
1520
1523
|
class="pf-c-dropdown__toggle"
|
|
1521
1524
|
id="masthead-advanced-with-menu-example-masthead-profile-button"
|
|
@@ -1714,6 +1717,867 @@ wrapperTag: div
|
|
|
1714
1717
|
|
|
1715
1718
|
```
|
|
1716
1719
|
|
|
1720
|
+
### Horizontal nav
|
|
1721
|
+
|
|
1722
|
+
```html isFullscreen
|
|
1723
|
+
<div class="pf-c-page" id="masthead-horizontal-nav">
|
|
1724
|
+
<a
|
|
1725
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1726
|
+
href="#masthead-horizontal-nav-main"
|
|
1727
|
+
>Skip to content</a>
|
|
1728
|
+
<header
|
|
1729
|
+
class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
|
|
1730
|
+
id="masthead-horizontal-nav-masthead"
|
|
1731
|
+
>
|
|
1732
|
+
<div class="pf-c-masthead__main">
|
|
1733
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1734
|
+
<picture
|
|
1735
|
+
class="pf-c-brand pf-m-picture"
|
|
1736
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1737
|
+
>
|
|
1738
|
+
<source
|
|
1739
|
+
media="(min-width: 768px)"
|
|
1740
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1741
|
+
/>
|
|
1742
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1743
|
+
<img
|
|
1744
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1745
|
+
alt="Fallback patternFly default logo"
|
|
1746
|
+
/>
|
|
1747
|
+
</picture>
|
|
1748
|
+
</a>
|
|
1749
|
+
</div>
|
|
1750
|
+
<div class="pf-c-masthead__content">
|
|
1751
|
+
<div
|
|
1752
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1753
|
+
id="masthead-horizontal-nav-masthead-toolbar"
|
|
1754
|
+
>
|
|
1755
|
+
<div class="pf-c-toolbar__content">
|
|
1756
|
+
<div class="pf-c-toolbar__content-section">
|
|
1757
|
+
<div
|
|
1758
|
+
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
1759
|
+
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
1760
|
+
>
|
|
1761
|
+
<nav
|
|
1762
|
+
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
1763
|
+
id="masthead-horizontal-nav-horizontal-nav"
|
|
1764
|
+
aria-label="Global"
|
|
1765
|
+
>
|
|
1766
|
+
<button
|
|
1767
|
+
class="pf-c-nav__scroll-button"
|
|
1768
|
+
disabled
|
|
1769
|
+
aria-label="Scroll left"
|
|
1770
|
+
>
|
|
1771
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1772
|
+
</button>
|
|
1773
|
+
<ul class="pf-c-nav__list">
|
|
1774
|
+
<li class="pf-c-nav__item">
|
|
1775
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
1776
|
+
</li>
|
|
1777
|
+
<li class="pf-c-nav__item">
|
|
1778
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
1779
|
+
</li>
|
|
1780
|
+
<li class="pf-c-nav__item">
|
|
1781
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
1782
|
+
</li>
|
|
1783
|
+
<li class="pf-c-nav__item">
|
|
1784
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
1785
|
+
</li>
|
|
1786
|
+
<li class="pf-c-nav__item">
|
|
1787
|
+
<a
|
|
1788
|
+
href="#"
|
|
1789
|
+
class="pf-c-nav__link pf-m-current"
|
|
1790
|
+
aria-current="page"
|
|
1791
|
+
>Horizontal nav item 5</a>
|
|
1792
|
+
</li>
|
|
1793
|
+
</ul>
|
|
1794
|
+
<button
|
|
1795
|
+
class="pf-c-nav__scroll-button"
|
|
1796
|
+
aria-label="Scroll right"
|
|
1797
|
+
>
|
|
1798
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1799
|
+
</button>
|
|
1800
|
+
</nav>
|
|
1801
|
+
</div>
|
|
1802
|
+
<div
|
|
1803
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1804
|
+
>
|
|
1805
|
+
<div class="pf-c-toolbar__item">
|
|
1806
|
+
<button
|
|
1807
|
+
class="pf-c-button pf-m-plain"
|
|
1808
|
+
type="button"
|
|
1809
|
+
aria-label="Notifications"
|
|
1810
|
+
>
|
|
1811
|
+
<span class="pf-c-notification-badge">
|
|
1812
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
1813
|
+
</span>
|
|
1814
|
+
</button>
|
|
1815
|
+
</div>
|
|
1816
|
+
<div
|
|
1817
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-xl"
|
|
1818
|
+
>
|
|
1819
|
+
<div class="pf-c-toolbar__item">
|
|
1820
|
+
<nav
|
|
1821
|
+
class="pf-c-app-launcher"
|
|
1822
|
+
aria-label="Application launcher"
|
|
1823
|
+
>
|
|
1824
|
+
<button
|
|
1825
|
+
class="pf-c-app-launcher__toggle"
|
|
1826
|
+
type="button"
|
|
1827
|
+
id="masthead-horizontal-nav-app-launcher-button"
|
|
1828
|
+
aria-expanded="false"
|
|
1829
|
+
aria-label="Application launcher"
|
|
1830
|
+
>
|
|
1831
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1832
|
+
</button>
|
|
1833
|
+
<div
|
|
1834
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1835
|
+
hidden
|
|
1836
|
+
>
|
|
1837
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1838
|
+
<input
|
|
1839
|
+
class="pf-c-form-control"
|
|
1840
|
+
type="search"
|
|
1841
|
+
aria-label="Type to filter"
|
|
1842
|
+
placeholder="Filter by name..."
|
|
1843
|
+
id="masthead-horizontal-nav-app-launcher-text-input"
|
|
1844
|
+
name="textInput1"
|
|
1845
|
+
/>
|
|
1846
|
+
</div>
|
|
1847
|
+
<section class="pf-c-app-launcher__group">
|
|
1848
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1849
|
+
<ul>
|
|
1850
|
+
<li
|
|
1851
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1852
|
+
>
|
|
1853
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1854
|
+
Link 1
|
|
1855
|
+
<span
|
|
1856
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1857
|
+
>
|
|
1858
|
+
<i
|
|
1859
|
+
class="fas fa-external-link-alt"
|
|
1860
|
+
aria-hidden="true"
|
|
1861
|
+
></i>
|
|
1862
|
+
</span>
|
|
1863
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1864
|
+
</a>
|
|
1865
|
+
<button
|
|
1866
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1867
|
+
type="button"
|
|
1868
|
+
aria-label="Favorite"
|
|
1869
|
+
>
|
|
1870
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1871
|
+
</button>
|
|
1872
|
+
</li>
|
|
1873
|
+
<li
|
|
1874
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1875
|
+
>
|
|
1876
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1877
|
+
Link 2
|
|
1878
|
+
<span
|
|
1879
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1880
|
+
>
|
|
1881
|
+
<i
|
|
1882
|
+
class="fas fa-external-link-alt"
|
|
1883
|
+
aria-hidden="true"
|
|
1884
|
+
></i>
|
|
1885
|
+
</span>
|
|
1886
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1887
|
+
</a>
|
|
1888
|
+
<button
|
|
1889
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1890
|
+
type="button"
|
|
1891
|
+
aria-label="Favorite"
|
|
1892
|
+
>
|
|
1893
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1894
|
+
</button>
|
|
1895
|
+
</li>
|
|
1896
|
+
</ul>
|
|
1897
|
+
</section>
|
|
1898
|
+
<hr class="pf-c-divider" />
|
|
1899
|
+
<section class="pf-c-app-launcher__group">
|
|
1900
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1901
|
+
<ul>
|
|
1902
|
+
<li
|
|
1903
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1904
|
+
>
|
|
1905
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1906
|
+
Link 1
|
|
1907
|
+
<span
|
|
1908
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1909
|
+
>
|
|
1910
|
+
<i
|
|
1911
|
+
class="fas fa-external-link-alt"
|
|
1912
|
+
aria-hidden="true"
|
|
1913
|
+
></i>
|
|
1914
|
+
</span>
|
|
1915
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1916
|
+
</a>
|
|
1917
|
+
<button
|
|
1918
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1919
|
+
type="button"
|
|
1920
|
+
aria-label="Favorite"
|
|
1921
|
+
>
|
|
1922
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1923
|
+
</button>
|
|
1924
|
+
</li>
|
|
1925
|
+
<li
|
|
1926
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1927
|
+
>
|
|
1928
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1929
|
+
Link 2
|
|
1930
|
+
<span
|
|
1931
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1932
|
+
>
|
|
1933
|
+
<i
|
|
1934
|
+
class="fas fa-external-link-alt"
|
|
1935
|
+
aria-hidden="true"
|
|
1936
|
+
></i>
|
|
1937
|
+
</span>
|
|
1938
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1939
|
+
</a>
|
|
1940
|
+
<button
|
|
1941
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1942
|
+
type="button"
|
|
1943
|
+
aria-label="Favorite"
|
|
1944
|
+
>
|
|
1945
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1946
|
+
</button>
|
|
1947
|
+
</li>
|
|
1948
|
+
</ul>
|
|
1949
|
+
</section>
|
|
1950
|
+
</div>
|
|
1951
|
+
</nav>
|
|
1952
|
+
</div>
|
|
1953
|
+
<div class="pf-c-toolbar__item">
|
|
1954
|
+
<div class="pf-c-dropdown">
|
|
1955
|
+
<button
|
|
1956
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1957
|
+
id="masthead-horizontal-nav-masthead-settings-button"
|
|
1958
|
+
aria-expanded="false"
|
|
1959
|
+
type="button"
|
|
1960
|
+
aria-label="Settings"
|
|
1961
|
+
>
|
|
1962
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1963
|
+
</button>
|
|
1964
|
+
<ul
|
|
1965
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1966
|
+
aria-labelledby="masthead-horizontal-nav-masthead-settings-button"
|
|
1967
|
+
hidden
|
|
1968
|
+
>
|
|
1969
|
+
<li>
|
|
1970
|
+
<button
|
|
1971
|
+
class="pf-c-dropdown__menu-item"
|
|
1972
|
+
type="button"
|
|
1973
|
+
>Settings</button>
|
|
1974
|
+
</li>
|
|
1975
|
+
<li>
|
|
1976
|
+
<button
|
|
1977
|
+
class="pf-c-dropdown__menu-item"
|
|
1978
|
+
type="button"
|
|
1979
|
+
>Use the beta release</button>
|
|
1980
|
+
</li>
|
|
1981
|
+
</ul>
|
|
1982
|
+
</div>
|
|
1983
|
+
</div>
|
|
1984
|
+
<div class="pf-c-toolbar__item">
|
|
1985
|
+
<div class="pf-c-dropdown">
|
|
1986
|
+
<button
|
|
1987
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1988
|
+
id="masthead-horizontal-nav-masthead-help-button"
|
|
1989
|
+
aria-expanded="false"
|
|
1990
|
+
type="button"
|
|
1991
|
+
aria-label="Help"
|
|
1992
|
+
>
|
|
1993
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
1994
|
+
</button>
|
|
1995
|
+
<ul
|
|
1996
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1997
|
+
aria-labelledby="masthead-horizontal-nav-masthead-help-button"
|
|
1998
|
+
hidden
|
|
1999
|
+
>
|
|
2000
|
+
<li>
|
|
2001
|
+
<button
|
|
2002
|
+
class="pf-c-dropdown__menu-item"
|
|
2003
|
+
type="button"
|
|
2004
|
+
>Support options</button>
|
|
2005
|
+
</li>
|
|
2006
|
+
<li>
|
|
2007
|
+
<button
|
|
2008
|
+
class="pf-c-dropdown__menu-item"
|
|
2009
|
+
type="button"
|
|
2010
|
+
>Open support case</button>
|
|
2011
|
+
</li>
|
|
2012
|
+
<li>
|
|
2013
|
+
<button
|
|
2014
|
+
class="pf-c-dropdown__menu-item"
|
|
2015
|
+
type="button"
|
|
2016
|
+
>API documentation</button>
|
|
2017
|
+
</li>
|
|
2018
|
+
</ul>
|
|
2019
|
+
</div>
|
|
2020
|
+
</div>
|
|
2021
|
+
</div>
|
|
2022
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-xl">
|
|
2023
|
+
<div class="pf-c-dropdown">
|
|
2024
|
+
<button
|
|
2025
|
+
class="pf-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
2026
|
+
type="button"
|
|
2027
|
+
aria-expanded="true"
|
|
2028
|
+
aria-label="Actions"
|
|
2029
|
+
>
|
|
2030
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2031
|
+
</button>
|
|
2032
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right">
|
|
2033
|
+
<div class="pf-c-menu__content">
|
|
2034
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
2035
|
+
<ul class="pf-c-menu__list">
|
|
2036
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
2037
|
+
<button
|
|
2038
|
+
class="pf-c-menu__item"
|
|
2039
|
+
type="button"
|
|
2040
|
+
disabled
|
|
2041
|
+
>
|
|
2042
|
+
<span class="pf-c-menu__item-description">
|
|
2043
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2044
|
+
<div
|
|
2045
|
+
class="pf-u-font-size-md"
|
|
2046
|
+
>mshaksho@redhat.com</div>
|
|
2047
|
+
</span>
|
|
2048
|
+
</button>
|
|
2049
|
+
</li>
|
|
2050
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
2051
|
+
<button
|
|
2052
|
+
class="pf-c-menu__item"
|
|
2053
|
+
type="button"
|
|
2054
|
+
disabled
|
|
2055
|
+
>
|
|
2056
|
+
<span class="pf-c-menu__item-description">
|
|
2057
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2058
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
2059
|
+
</span>
|
|
2060
|
+
</button>
|
|
2061
|
+
</li>
|
|
2062
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2063
|
+
<li class="pf-c-menu__list-item">
|
|
2064
|
+
<button class="pf-c-menu__item" type="button">
|
|
2065
|
+
<span class="pf-c-menu__item-main">
|
|
2066
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
2067
|
+
</span>
|
|
2068
|
+
</button>
|
|
2069
|
+
</li>
|
|
2070
|
+
<li class="pf-c-menu__list-item">
|
|
2071
|
+
<button class="pf-c-menu__item" type="button">
|
|
2072
|
+
<span class="pf-c-menu__item-main">
|
|
2073
|
+
<span
|
|
2074
|
+
class="pf-c-menu__item-text"
|
|
2075
|
+
>User management</span>
|
|
2076
|
+
</span>
|
|
2077
|
+
</button>
|
|
2078
|
+
</li>
|
|
2079
|
+
<li class="pf-c-menu__list-item">
|
|
2080
|
+
<button class="pf-c-menu__item" type="button">
|
|
2081
|
+
<span class="pf-c-menu__item-main">
|
|
2082
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
2083
|
+
</span>
|
|
2084
|
+
</button>
|
|
2085
|
+
</li>
|
|
2086
|
+
</ul>
|
|
2087
|
+
</section>
|
|
2088
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
2089
|
+
<section class="pf-c-menu__group">
|
|
2090
|
+
<ul class="pf-c-menu__list">
|
|
2091
|
+
<li class="pf-c-menu__list-item">
|
|
2092
|
+
<button
|
|
2093
|
+
class="pf-c-menu__item"
|
|
2094
|
+
type="button"
|
|
2095
|
+
aria-expanded="false"
|
|
2096
|
+
>
|
|
2097
|
+
<span class="pf-c-menu__item-main">
|
|
2098
|
+
<span class="pf-c-menu__item-icon">
|
|
2099
|
+
<i
|
|
2100
|
+
class="fas fa-fw fa-cog"
|
|
2101
|
+
aria-hidden="true"
|
|
2102
|
+
></i>
|
|
2103
|
+
</span>
|
|
2104
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
2105
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2106
|
+
<i class="fas fa-angle-right"></i>
|
|
2107
|
+
</span>
|
|
2108
|
+
</span>
|
|
2109
|
+
</button>
|
|
2110
|
+
<div class="pf-c-menu">
|
|
2111
|
+
<div class="pf-c-menu__content">
|
|
2112
|
+
<ul class="pf-c-menu__list">
|
|
2113
|
+
<li class="pf-c-menu__list-item">
|
|
2114
|
+
<button
|
|
2115
|
+
class="pf-c-menu__item"
|
|
2116
|
+
type="button"
|
|
2117
|
+
>
|
|
2118
|
+
<span class="pf-c-menu__item-main">
|
|
2119
|
+
<span
|
|
2120
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2121
|
+
>
|
|
2122
|
+
<i class="fas fa-angle-left"></i>
|
|
2123
|
+
</span>
|
|
2124
|
+
<span class="pf-c-menu__item-icon">
|
|
2125
|
+
<i
|
|
2126
|
+
class="fas fa-fw fa-cog"
|
|
2127
|
+
aria-hidden="true"
|
|
2128
|
+
></i>
|
|
2129
|
+
</span>
|
|
2130
|
+
<span
|
|
2131
|
+
class="pf-c-menu__item-text"
|
|
2132
|
+
>Settings</span>
|
|
2133
|
+
</span>
|
|
2134
|
+
</button>
|
|
2135
|
+
</li>
|
|
2136
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2137
|
+
<li class="pf-c-menu__list-item">
|
|
2138
|
+
<a class="pf-c-menu__item" href="#">
|
|
2139
|
+
<span class="pf-c-menu__item-main">
|
|
2140
|
+
<span
|
|
2141
|
+
class="pf-c-menu__item-text"
|
|
2142
|
+
>Customer support</span>
|
|
2143
|
+
</span>
|
|
2144
|
+
</a>
|
|
2145
|
+
</li>
|
|
2146
|
+
<li class="pf-c-menu__list-item">
|
|
2147
|
+
<a class="pf-c-menu__item" href="#">
|
|
2148
|
+
<span class="pf-c-menu__item-main">
|
|
2149
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
2150
|
+
</span>
|
|
2151
|
+
</a>
|
|
2152
|
+
</li>
|
|
2153
|
+
</ul>
|
|
2154
|
+
</div>
|
|
2155
|
+
</div>
|
|
2156
|
+
</li>
|
|
2157
|
+
|
|
2158
|
+
<li class="pf-c-menu__list-item">
|
|
2159
|
+
<button
|
|
2160
|
+
class="pf-c-menu__item"
|
|
2161
|
+
type="button"
|
|
2162
|
+
aria-expanded="false"
|
|
2163
|
+
>
|
|
2164
|
+
<span class="pf-c-menu__item-main">
|
|
2165
|
+
<span class="pf-c-menu__item-icon">
|
|
2166
|
+
<i
|
|
2167
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2168
|
+
aria-hidden="true"
|
|
2169
|
+
></i>
|
|
2170
|
+
</span>
|
|
2171
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2172
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2173
|
+
<i class="fas fa-angle-right"></i>
|
|
2174
|
+
</span>
|
|
2175
|
+
</span>
|
|
2176
|
+
</button>
|
|
2177
|
+
<div class="pf-c-menu">
|
|
2178
|
+
<div class="pf-c-menu__content">
|
|
2179
|
+
<ul class="pf-c-menu__list">
|
|
2180
|
+
<li class="pf-c-menu__list-item">
|
|
2181
|
+
<button
|
|
2182
|
+
class="pf-c-menu__item"
|
|
2183
|
+
type="button"
|
|
2184
|
+
>
|
|
2185
|
+
<span class="pf-c-menu__item-main">
|
|
2186
|
+
<span
|
|
2187
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2188
|
+
>
|
|
2189
|
+
<i class="fas fa-angle-left"></i>
|
|
2190
|
+
</span>
|
|
2191
|
+
<span class="pf-c-menu__item-icon">
|
|
2192
|
+
<i
|
|
2193
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2194
|
+
aria-hidden="true"
|
|
2195
|
+
></i>
|
|
2196
|
+
</span>
|
|
2197
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2198
|
+
</span>
|
|
2199
|
+
</button>
|
|
2200
|
+
</li>
|
|
2201
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2202
|
+
<li class="pf-c-menu__list-item">
|
|
2203
|
+
<a class="pf-c-menu__item" href="#">
|
|
2204
|
+
<span class="pf-c-menu__item-main">
|
|
2205
|
+
<span
|
|
2206
|
+
class="pf-c-menu__item-text"
|
|
2207
|
+
>Support options</span>
|
|
2208
|
+
</span>
|
|
2209
|
+
</a>
|
|
2210
|
+
</li>
|
|
2211
|
+
<li class="pf-c-menu__list-item">
|
|
2212
|
+
<a class="pf-c-menu__item" href="#">
|
|
2213
|
+
<span class="pf-c-menu__item-main">
|
|
2214
|
+
<span
|
|
2215
|
+
class="pf-c-menu__item-text"
|
|
2216
|
+
>Open support case</span>
|
|
2217
|
+
</span>
|
|
2218
|
+
</a>
|
|
2219
|
+
</li>
|
|
2220
|
+
<li class="pf-c-menu__list-item">
|
|
2221
|
+
<a class="pf-c-menu__item" href="#">
|
|
2222
|
+
<span class="pf-c-menu__item-main">
|
|
2223
|
+
<span
|
|
2224
|
+
class="pf-c-menu__item-text"
|
|
2225
|
+
>API documentation</span>
|
|
2226
|
+
</span>
|
|
2227
|
+
</a>
|
|
2228
|
+
</li>
|
|
2229
|
+
</ul>
|
|
2230
|
+
</div>
|
|
2231
|
+
</div>
|
|
2232
|
+
</li>
|
|
2233
|
+
|
|
2234
|
+
<li class="pf-c-menu__list-item">
|
|
2235
|
+
<button class="pf-c-menu__item" type="button">
|
|
2236
|
+
<span class="pf-c-menu__item-main">
|
|
2237
|
+
<span class="pf-c-menu__item-icon">
|
|
2238
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
2239
|
+
</span>
|
|
2240
|
+
<span
|
|
2241
|
+
class="pf-c-menu__item-text"
|
|
2242
|
+
>Application launcher</span>
|
|
2243
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2244
|
+
<i class="fas fa-angle-right"></i>
|
|
2245
|
+
</span>
|
|
2246
|
+
</span>
|
|
2247
|
+
</button>
|
|
2248
|
+
<div class="pf-c-menu">
|
|
2249
|
+
<div class="pf-c-menu__header">
|
|
2250
|
+
<button class="pf-c-menu__item" type="button">
|
|
2251
|
+
<span class="pf-c-menu__item-main">
|
|
2252
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2253
|
+
<i class="fas fa-angle-left"></i>
|
|
2254
|
+
</span>
|
|
2255
|
+
<span class="pf-c-menu__item-icon">
|
|
2256
|
+
<i
|
|
2257
|
+
class="fas fa-fw fa-th"
|
|
2258
|
+
aria-hidden="true"
|
|
2259
|
+
></i>
|
|
2260
|
+
</span>
|
|
2261
|
+
<span
|
|
2262
|
+
class="pf-c-menu__item-text"
|
|
2263
|
+
>Application launcher</span>
|
|
2264
|
+
</span>
|
|
2265
|
+
</button>
|
|
2266
|
+
</div>
|
|
2267
|
+
<div class="pf-c-menu__search">
|
|
2268
|
+
<div class="pf-c-menu__search-input">
|
|
2269
|
+
<input
|
|
2270
|
+
class="pf-c-form-control pf-m-search"
|
|
2271
|
+
type="search"
|
|
2272
|
+
id="masthead-horizontal-nav-masthead-drilldown-menu-list-3-search-input"
|
|
2273
|
+
name="masthead-horizontal-nav-masthead-drilldown-menu-list-3-search-input"
|
|
2274
|
+
aria-label="Search"
|
|
2275
|
+
/>
|
|
2276
|
+
</div>
|
|
2277
|
+
</div>
|
|
2278
|
+
<hr class="pf-c-divider" />
|
|
2279
|
+
<section class="pf-c-menu__group">
|
|
2280
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
2281
|
+
<ul class="pf-c-menu__list">
|
|
2282
|
+
<li class="pf-c-menu__list-item">
|
|
2283
|
+
<a class="pf-c-menu__item" href="#">
|
|
2284
|
+
<span class="pf-c-menu__item-main">
|
|
2285
|
+
<span
|
|
2286
|
+
class="pf-c-menu__item-text"
|
|
2287
|
+
>Link 1</span>
|
|
2288
|
+
</span>
|
|
2289
|
+
</a>
|
|
2290
|
+
<button
|
|
2291
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2292
|
+
type="button"
|
|
2293
|
+
aria-label="Starred"
|
|
2294
|
+
>
|
|
2295
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2296
|
+
<i
|
|
2297
|
+
class="fas fa-star"
|
|
2298
|
+
aria-hidden="true"
|
|
2299
|
+
></i>
|
|
2300
|
+
</span>
|
|
2301
|
+
</button>
|
|
2302
|
+
</li>
|
|
2303
|
+
<li class="pf-c-menu__list-item">
|
|
2304
|
+
<a
|
|
2305
|
+
class="pf-c-menu__item"
|
|
2306
|
+
href="#"
|
|
2307
|
+
target="_blank"
|
|
2308
|
+
>
|
|
2309
|
+
<span class="pf-c-menu__item-main">
|
|
2310
|
+
<span
|
|
2311
|
+
class="pf-c-menu__item-text"
|
|
2312
|
+
>Link 2</span>
|
|
2313
|
+
<span
|
|
2314
|
+
class="pf-c-menu__item-external-icon"
|
|
2315
|
+
>
|
|
2316
|
+
<i
|
|
2317
|
+
class="fas fa-external-link-alt"
|
|
2318
|
+
aria-hidden="true"
|
|
2319
|
+
></i>
|
|
2320
|
+
</span>
|
|
2321
|
+
<span
|
|
2322
|
+
class="pf-screen-reader"
|
|
2323
|
+
>(opens new window)</span>
|
|
2324
|
+
</span>
|
|
2325
|
+
</a>
|
|
2326
|
+
<button
|
|
2327
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2328
|
+
type="button"
|
|
2329
|
+
aria-label="Not starred"
|
|
2330
|
+
>
|
|
2331
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2332
|
+
<i
|
|
2333
|
+
class="fas fa-star"
|
|
2334
|
+
aria-hidden="true"
|
|
2335
|
+
></i>
|
|
2336
|
+
</span>
|
|
2337
|
+
</button>
|
|
2338
|
+
</li>
|
|
2339
|
+
</ul>
|
|
2340
|
+
</section>
|
|
2341
|
+
<hr class="pf-c-divider" />
|
|
2342
|
+
<section class="pf-c-menu__group">
|
|
2343
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
2344
|
+
<ul class="pf-c-menu__list">
|
|
2345
|
+
<li class="pf-c-menu__list-item">
|
|
2346
|
+
<a class="pf-c-menu__item" href="#">
|
|
2347
|
+
<span class="pf-c-menu__item-main">
|
|
2348
|
+
<span
|
|
2349
|
+
class="pf-c-menu__item-text"
|
|
2350
|
+
>Link 1</span>
|
|
2351
|
+
</span>
|
|
2352
|
+
</a>
|
|
2353
|
+
<button
|
|
2354
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2355
|
+
type="button"
|
|
2356
|
+
aria-label="Not starred"
|
|
2357
|
+
>
|
|
2358
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2359
|
+
<i
|
|
2360
|
+
class="fas fa-star"
|
|
2361
|
+
aria-hidden="true"
|
|
2362
|
+
></i>
|
|
2363
|
+
</span>
|
|
2364
|
+
</button>
|
|
2365
|
+
</li>
|
|
2366
|
+
<li class="pf-c-menu__list-item">
|
|
2367
|
+
<a
|
|
2368
|
+
class="pf-c-menu__item"
|
|
2369
|
+
href="#"
|
|
2370
|
+
target="_blank"
|
|
2371
|
+
>
|
|
2372
|
+
<span class="pf-c-menu__item-main">
|
|
2373
|
+
<span
|
|
2374
|
+
class="pf-c-menu__item-text"
|
|
2375
|
+
>Link 2</span>
|
|
2376
|
+
<span
|
|
2377
|
+
class="pf-c-menu__item-external-icon"
|
|
2378
|
+
>
|
|
2379
|
+
<i
|
|
2380
|
+
class="fas fa-external-link-alt"
|
|
2381
|
+
aria-hidden="true"
|
|
2382
|
+
></i>
|
|
2383
|
+
</span>
|
|
2384
|
+
<span
|
|
2385
|
+
class="pf-screen-reader"
|
|
2386
|
+
>(opens new window)</span>
|
|
2387
|
+
</span>
|
|
2388
|
+
</a>
|
|
2389
|
+
<button
|
|
2390
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2391
|
+
type="button"
|
|
2392
|
+
aria-label="Starred"
|
|
2393
|
+
>
|
|
2394
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2395
|
+
<i
|
|
2396
|
+
class="fas fa-star"
|
|
2397
|
+
aria-hidden="true"
|
|
2398
|
+
></i>
|
|
2399
|
+
</span>
|
|
2400
|
+
</button>
|
|
2401
|
+
</li>
|
|
2402
|
+
</ul>
|
|
2403
|
+
</section>
|
|
2404
|
+
</div>
|
|
2405
|
+
</li>
|
|
2406
|
+
</ul>
|
|
2407
|
+
</section>
|
|
2408
|
+
</div>
|
|
2409
|
+
</div>
|
|
2410
|
+
</div>
|
|
2411
|
+
</div>
|
|
2412
|
+
</div>
|
|
2413
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
2414
|
+
<div
|
|
2415
|
+
class="pf-c-dropdown pf-m-expanded"
|
|
2416
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
2417
|
+
>
|
|
2418
|
+
<button
|
|
2419
|
+
class="pf-c-dropdown__toggle"
|
|
2420
|
+
id="masthead-horizontal-nav-masthead-profile-button"
|
|
2421
|
+
aria-expanded="true"
|
|
2422
|
+
type="button"
|
|
2423
|
+
>
|
|
2424
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
2425
|
+
<img
|
|
2426
|
+
class="pf-c-avatar"
|
|
2427
|
+
src="/assets/images/img_avatar.svg"
|
|
2428
|
+
alt="Avatar image"
|
|
2429
|
+
/>
|
|
2430
|
+
</span>
|
|
2431
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
2432
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2433
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2434
|
+
</span>
|
|
2435
|
+
</button>
|
|
2436
|
+
<div class="pf-c-dropdown__menu">
|
|
2437
|
+
<section class="pf-c-dropdown__group">
|
|
2438
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2439
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2440
|
+
<div>123456789</div>
|
|
2441
|
+
</div>
|
|
2442
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2443
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2444
|
+
<div>mshaksho@redhat.com</div>
|
|
2445
|
+
</div>
|
|
2446
|
+
</section>
|
|
2447
|
+
<hr class="pf-c-divider" />
|
|
2448
|
+
<section class="pf-c-dropdown__group">
|
|
2449
|
+
<ul>
|
|
2450
|
+
<li>
|
|
2451
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
2452
|
+
</li>
|
|
2453
|
+
<li>
|
|
2454
|
+
<a
|
|
2455
|
+
class="pf-c-dropdown__menu-item"
|
|
2456
|
+
href="#"
|
|
2457
|
+
>User management</a>
|
|
2458
|
+
</li>
|
|
2459
|
+
<li>
|
|
2460
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
2461
|
+
</li>
|
|
2462
|
+
</ul>
|
|
2463
|
+
</section>
|
|
2464
|
+
</div>
|
|
2465
|
+
</div>
|
|
2466
|
+
</div>
|
|
2467
|
+
</div>
|
|
2468
|
+
</div>
|
|
2469
|
+
</div>
|
|
2470
|
+
</div>
|
|
2471
|
+
</header>
|
|
2472
|
+
|
|
2473
|
+
<main class="pf-c-page__main" tabindex="-1" id="masthead-horizontal-nav-main">
|
|
2474
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
2475
|
+
<div class="pf-c-page__main-body">
|
|
2476
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
2477
|
+
<ol class="pf-c-breadcrumb__list">
|
|
2478
|
+
<li class="pf-c-breadcrumb__item">
|
|
2479
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
2480
|
+
</li>
|
|
2481
|
+
<li class="pf-c-breadcrumb__item">
|
|
2482
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2483
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2484
|
+
</span>
|
|
2485
|
+
|
|
2486
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2487
|
+
</li>
|
|
2488
|
+
<li class="pf-c-breadcrumb__item">
|
|
2489
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2490
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2491
|
+
</span>
|
|
2492
|
+
|
|
2493
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2494
|
+
</li>
|
|
2495
|
+
<li class="pf-c-breadcrumb__item">
|
|
2496
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2497
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2498
|
+
</span>
|
|
2499
|
+
|
|
2500
|
+
<a
|
|
2501
|
+
href="#"
|
|
2502
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
2503
|
+
aria-current="page"
|
|
2504
|
+
>Section landing</a>
|
|
2505
|
+
</li>
|
|
2506
|
+
</ol>
|
|
2507
|
+
</nav>
|
|
2508
|
+
</div>
|
|
2509
|
+
</section>
|
|
2510
|
+
|
|
2511
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2512
|
+
<div class="pf-c-page__main-body">
|
|
2513
|
+
<div class="pf-c-content">
|
|
2514
|
+
<h1>Main title</h1>
|
|
2515
|
+
<p>This is a demo of the page component.</p>
|
|
2516
|
+
</div>
|
|
2517
|
+
</div>
|
|
2518
|
+
</section>
|
|
2519
|
+
|
|
2520
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
2521
|
+
<div class="pf-c-page__main-body">
|
|
2522
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
2523
|
+
<div class="pf-l-gallery__item">
|
|
2524
|
+
<div class="pf-c-card">
|
|
2525
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2526
|
+
</div>
|
|
2527
|
+
</div>
|
|
2528
|
+
<div class="pf-l-gallery__item">
|
|
2529
|
+
<div class="pf-c-card">
|
|
2530
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2531
|
+
</div>
|
|
2532
|
+
</div>
|
|
2533
|
+
<div class="pf-l-gallery__item">
|
|
2534
|
+
<div class="pf-c-card">
|
|
2535
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2536
|
+
</div>
|
|
2537
|
+
</div>
|
|
2538
|
+
<div class="pf-l-gallery__item">
|
|
2539
|
+
<div class="pf-c-card">
|
|
2540
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2541
|
+
</div>
|
|
2542
|
+
</div>
|
|
2543
|
+
<div class="pf-l-gallery__item">
|
|
2544
|
+
<div class="pf-c-card">
|
|
2545
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2546
|
+
</div>
|
|
2547
|
+
</div>
|
|
2548
|
+
<div class="pf-l-gallery__item">
|
|
2549
|
+
<div class="pf-c-card">
|
|
2550
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2551
|
+
</div>
|
|
2552
|
+
</div>
|
|
2553
|
+
<div class="pf-l-gallery__item">
|
|
2554
|
+
<div class="pf-c-card">
|
|
2555
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2556
|
+
</div>
|
|
2557
|
+
</div>
|
|
2558
|
+
<div class="pf-l-gallery__item">
|
|
2559
|
+
<div class="pf-c-card">
|
|
2560
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2561
|
+
</div>
|
|
2562
|
+
</div>
|
|
2563
|
+
<div class="pf-l-gallery__item">
|
|
2564
|
+
<div class="pf-c-card">
|
|
2565
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2566
|
+
</div>
|
|
2567
|
+
</div>
|
|
2568
|
+
<div class="pf-l-gallery__item">
|
|
2569
|
+
<div class="pf-c-card">
|
|
2570
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2571
|
+
</div>
|
|
2572
|
+
</div>
|
|
2573
|
+
</div>
|
|
2574
|
+
</div>
|
|
2575
|
+
</section>
|
|
2576
|
+
</main>
|
|
2577
|
+
</div>
|
|
2578
|
+
|
|
2579
|
+
```
|
|
2580
|
+
|
|
1717
2581
|
## Mobile examples
|
|
1718
2582
|
|
|
1719
2583
|
### With toggle group, filters, expandable content expanded (mobile)
|