@patternfly/patternfly 4.179.3 → 4.181.0

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 (45) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/Dropdown/dropdown.css +4 -2
  3. package/components/Dropdown/dropdown.scss +4 -2
  4. package/components/FormControl/form-control.css +26 -0
  5. package/components/FormControl/form-control.scss +33 -1
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +10 -7
  9. package/components/MenuToggle/menu-toggle.scss +11 -9
  10. package/components/SearchInput/search-input.css +1 -0
  11. package/components/SearchInput/search-input.scss +1 -0
  12. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  13. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  15. package/docs/components/FormControl/examples/FormControl.md +151 -11
  16. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  17. package/docs/components/Menu/examples/Menu.md +127 -30
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +247 -276
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  30. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  31. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  32. package/docs/demos/Masthead/examples/Masthead.md +426 -449
  33. package/docs/demos/Nav/examples/Nav.md +203 -343
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  35. package/docs/demos/Page/examples/Page.md +834 -1235
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +1189 -652
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +51 -9
  43. package/patternfly.css +51 -9
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/demos/Page/examples/Page.md CHANGED
@@ -74,7 +74,7 @@ wrapperTag: div
74
74
  <button
75
75
  class="pf-c-app-launcher__toggle"
76
76
  type="button"
77
- id="-button"
77
+ id="page-demo-basic-masthead-icon-group--app-launcher-button"
78
78
  aria-expanded="false"
79
79
  aria-label="Application launcher"
80
80
  >
@@ -85,14 +85,24 @@ wrapperTag: div
85
85
  hidden
86
86
  >
87
87
  <div class="pf-c-app-launcher__menu-search">
88
- <input
89
- class="pf-c-form-control"
90
- type="search"
91
- aria-label="Type to filter"
92
- placeholder="Filter by name..."
93
- id="page-demo-basic-masthead-application-launcher-text-input"
94
- name="textInput1"
95
- />
88
+ <div class="pf-c-search-input">
89
+ <div class="pf-c-search-input__bar">
90
+ <span class="pf-c-search-input__text">
91
+ <span class="pf-c-search-input__icon">
92
+ <i
93
+ class="fas fa-search fa-fw"
94
+ aria-hidden="true"
95
+ ></i>
96
+ </span>
97
+ <input
98
+ class="pf-c-search-input__text-input"
99
+ type="text"
100
+ placeholder="Filter by name"
101
+ aria-label="Filter by name"
102
+ />
103
+ </span>
104
+ </div>
105
+ </div>
96
106
  </div>
97
107
  <section class="pf-c-app-launcher__group">
98
108
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -574,13 +584,24 @@ wrapperTag: div
574
584
  </div>
575
585
  <div class="pf-c-menu__search">
576
586
  <div class="pf-c-menu__search-input">
577
- <input
578
- class="pf-c-form-control pf-m-search"
579
- type="search"
580
- id="page-demo-basic-masthead-drilldown-menu-list-3-search-input"
581
- name="page-demo-basic-masthead-drilldown-menu-list-3-search-input"
582
- aria-label="Search"
583
- />
587
+ <div class="pf-c-search-input">
588
+ <div class="pf-c-search-input__bar">
589
+ <span class="pf-c-search-input__text">
590
+ <span class="pf-c-search-input__icon">
591
+ <i
592
+ class="fas fa-search fa-fw"
593
+ aria-hidden="true"
594
+ ></i>
595
+ </span>
596
+ <input
597
+ class="pf-c-search-input__text-input"
598
+ type="text"
599
+ placeholder="Search"
600
+ aria-label="Search"
601
+ />
602
+ </span>
603
+ </div>
604
+ </div>
584
605
  </div>
585
606
  </div>
586
607
  <hr class="pf-c-divider" />
@@ -866,55 +887,35 @@ wrapperTag: div
866
887
  <section class="pf-c-page__main-section pf-m-limit-width">
867
888
  <div class="pf-c-page__main-body">
868
889
  <div class="pf-l-gallery pf-m-gutter">
869
- <div class="pf-l-gallery__item">
870
- <div class="pf-c-card">
871
- <div class="pf-c-card__body">This is a card</div>
872
- </div>
890
+ <div class="pf-c-card">
891
+ <div class="pf-c-card__body">This is a card</div>
873
892
  </div>
874
- <div class="pf-l-gallery__item">
875
- <div class="pf-c-card">
876
- <div class="pf-c-card__body">This is a card</div>
877
- </div>
893
+ <div class="pf-c-card">
894
+ <div class="pf-c-card__body">This is a card</div>
878
895
  </div>
879
- <div class="pf-l-gallery__item">
880
- <div class="pf-c-card">
881
- <div class="pf-c-card__body">This is a card</div>
882
- </div>
896
+ <div class="pf-c-card">
897
+ <div class="pf-c-card__body">This is a card</div>
883
898
  </div>
884
- <div class="pf-l-gallery__item">
885
- <div class="pf-c-card">
886
- <div class="pf-c-card__body">This is a card</div>
887
- </div>
899
+ <div class="pf-c-card">
900
+ <div class="pf-c-card__body">This is a card</div>
888
901
  </div>
889
- <div class="pf-l-gallery__item">
890
- <div class="pf-c-card">
891
- <div class="pf-c-card__body">This is a card</div>
892
- </div>
902
+ <div class="pf-c-card">
903
+ <div class="pf-c-card__body">This is a card</div>
893
904
  </div>
894
- <div class="pf-l-gallery__item">
895
- <div class="pf-c-card">
896
- <div class="pf-c-card__body">This is a card</div>
897
- </div>
905
+ <div class="pf-c-card">
906
+ <div class="pf-c-card__body">This is a card</div>
898
907
  </div>
899
- <div class="pf-l-gallery__item">
900
- <div class="pf-c-card">
901
- <div class="pf-c-card__body">This is a card</div>
902
- </div>
908
+ <div class="pf-c-card">
909
+ <div class="pf-c-card__body">This is a card</div>
903
910
  </div>
904
- <div class="pf-l-gallery__item">
905
- <div class="pf-c-card">
906
- <div class="pf-c-card__body">This is a card</div>
907
- </div>
911
+ <div class="pf-c-card">
912
+ <div class="pf-c-card__body">This is a card</div>
908
913
  </div>
909
- <div class="pf-l-gallery__item">
910
- <div class="pf-c-card">
911
- <div class="pf-c-card__body">This is a card</div>
912
- </div>
914
+ <div class="pf-c-card">
915
+ <div class="pf-c-card__body">This is a card</div>
913
916
  </div>
914
- <div class="pf-l-gallery__item">
915
- <div class="pf-c-card">
916
- <div class="pf-c-card__body">This is a card</div>
917
- </div>
917
+ <div class="pf-c-card">
918
+ <div class="pf-c-card__body">This is a card</div>
918
919
  </div>
919
920
  </div>
920
921
  </div>
@@ -997,7 +998,7 @@ wrapperTag: div
997
998
  <button
998
999
  class="pf-c-app-launcher__toggle"
999
1000
  type="button"
1000
- id="-button"
1001
+ id="page-demo-sticky-top-horizontal-subnav-masthead-icon-group--app-launcher-button"
1001
1002
  aria-expanded="false"
1002
1003
  aria-label="Application launcher"
1003
1004
  >
@@ -1008,14 +1009,24 @@ wrapperTag: div
1008
1009
  hidden
1009
1010
  >
1010
1011
  <div class="pf-c-app-launcher__menu-search">
1011
- <input
1012
- class="pf-c-form-control"
1013
- type="search"
1014
- aria-label="Type to filter"
1015
- placeholder="Filter by name..."
1016
- id="page-demo-sticky-top-horizontal-subnav-masthead-application-launcher-text-input"
1017
- name="textInput1"
1018
- />
1012
+ <div class="pf-c-search-input">
1013
+ <div class="pf-c-search-input__bar">
1014
+ <span class="pf-c-search-input__text">
1015
+ <span class="pf-c-search-input__icon">
1016
+ <i
1017
+ class="fas fa-search fa-fw"
1018
+ aria-hidden="true"
1019
+ ></i>
1020
+ </span>
1021
+ <input
1022
+ class="pf-c-search-input__text-input"
1023
+ type="text"
1024
+ placeholder="Filter by name"
1025
+ aria-label="Filter by name"
1026
+ />
1027
+ </span>
1028
+ </div>
1029
+ </div>
1019
1030
  </div>
1020
1031
  <section class="pf-c-app-launcher__group">
1021
1032
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -1497,13 +1508,24 @@ wrapperTag: div
1497
1508
  </div>
1498
1509
  <div class="pf-c-menu__search">
1499
1510
  <div class="pf-c-menu__search-input">
1500
- <input
1501
- class="pf-c-form-control pf-m-search"
1502
- type="search"
1503
- id="page-demo-sticky-top-horizontal-subnav-masthead-drilldown-menu-list-3-search-input"
1504
- name="page-demo-sticky-top-horizontal-subnav-masthead-drilldown-menu-list-3-search-input"
1505
- aria-label="Search"
1506
- />
1511
+ <div class="pf-c-search-input">
1512
+ <div class="pf-c-search-input__bar">
1513
+ <span class="pf-c-search-input__text">
1514
+ <span class="pf-c-search-input__icon">
1515
+ <i
1516
+ class="fas fa-search fa-fw"
1517
+ aria-hidden="true"
1518
+ ></i>
1519
+ </span>
1520
+ <input
1521
+ class="pf-c-search-input__text-input"
1522
+ type="text"
1523
+ placeholder="Search"
1524
+ aria-label="Search"
1525
+ />
1526
+ </span>
1527
+ </div>
1528
+ </div>
1507
1529
  </div>
1508
1530
  </div>
1509
1531
  <hr class="pf-c-divider" />
@@ -1833,255 +1855,155 @@ wrapperTag: div
1833
1855
  <section class="pf-c-page__main-section pf-m-limit-width">
1834
1856
  <div class="pf-c-page__main-body">
1835
1857
  <div class="pf-l-gallery pf-m-gutter">
1836
- <div class="pf-l-gallery__item">
1837
- <div class="pf-c-card">
1838
- <div class="pf-c-card__body">This is a card</div>
1839
- </div>
1858
+ <div class="pf-c-card">
1859
+ <div class="pf-c-card__body">This is a card</div>
1840
1860
  </div>
1841
- <div class="pf-l-gallery__item">
1842
- <div class="pf-c-card">
1843
- <div class="pf-c-card__body">This is a card</div>
1844
- </div>
1861
+ <div class="pf-c-card">
1862
+ <div class="pf-c-card__body">This is a card</div>
1845
1863
  </div>
1846
- <div class="pf-l-gallery__item">
1847
- <div class="pf-c-card">
1848
- <div class="pf-c-card__body">This is a card</div>
1849
- </div>
1864
+ <div class="pf-c-card">
1865
+ <div class="pf-c-card__body">This is a card</div>
1850
1866
  </div>
1851
- <div class="pf-l-gallery__item">
1852
- <div class="pf-c-card">
1853
- <div class="pf-c-card__body">This is a card</div>
1854
- </div>
1867
+ <div class="pf-c-card">
1868
+ <div class="pf-c-card__body">This is a card</div>
1855
1869
  </div>
1856
- <div class="pf-l-gallery__item">
1857
- <div class="pf-c-card">
1858
- <div class="pf-c-card__body">This is a card</div>
1859
- </div>
1870
+ <div class="pf-c-card">
1871
+ <div class="pf-c-card__body">This is a card</div>
1860
1872
  </div>
1861
- <div class="pf-l-gallery__item">
1862
- <div class="pf-c-card">
1863
- <div class="pf-c-card__body">This is a card</div>
1864
- </div>
1873
+ <div class="pf-c-card">
1874
+ <div class="pf-c-card__body">This is a card</div>
1865
1875
  </div>
1866
- <div class="pf-l-gallery__item">
1867
- <div class="pf-c-card">
1868
- <div class="pf-c-card__body">This is a card</div>
1869
- </div>
1876
+ <div class="pf-c-card">
1877
+ <div class="pf-c-card__body">This is a card</div>
1870
1878
  </div>
1871
- <div class="pf-l-gallery__item">
1872
- <div class="pf-c-card">
1873
- <div class="pf-c-card__body">This is a card</div>
1874
- </div>
1879
+ <div class="pf-c-card">
1880
+ <div class="pf-c-card__body">This is a card</div>
1875
1881
  </div>
1876
- <div class="pf-l-gallery__item">
1877
- <div class="pf-c-card">
1878
- <div class="pf-c-card__body">This is a card</div>
1879
- </div>
1882
+ <div class="pf-c-card">
1883
+ <div class="pf-c-card__body">This is a card</div>
1880
1884
  </div>
1881
- <div class="pf-l-gallery__item">
1882
- <div class="pf-c-card">
1883
- <div class="pf-c-card__body">This is a card</div>
1884
- </div>
1885
+ <div class="pf-c-card">
1886
+ <div class="pf-c-card__body">This is a card</div>
1885
1887
  </div>
1886
- <div class="pf-l-gallery__item">
1887
- <div class="pf-c-card">
1888
- <div class="pf-c-card__body">This is a card</div>
1889
- </div>
1888
+ <div class="pf-c-card">
1889
+ <div class="pf-c-card__body">This is a card</div>
1890
1890
  </div>
1891
- <div class="pf-l-gallery__item">
1892
- <div class="pf-c-card">
1893
- <div class="pf-c-card__body">This is a card</div>
1894
- </div>
1891
+ <div class="pf-c-card">
1892
+ <div class="pf-c-card__body">This is a card</div>
1895
1893
  </div>
1896
- <div class="pf-l-gallery__item">
1897
- <div class="pf-c-card">
1898
- <div class="pf-c-card__body">This is a card</div>
1899
- </div>
1894
+ <div class="pf-c-card">
1895
+ <div class="pf-c-card__body">This is a card</div>
1900
1896
  </div>
1901
- <div class="pf-l-gallery__item">
1902
- <div class="pf-c-card">
1903
- <div class="pf-c-card__body">This is a card</div>
1904
- </div>
1897
+ <div class="pf-c-card">
1898
+ <div class="pf-c-card__body">This is a card</div>
1905
1899
  </div>
1906
- <div class="pf-l-gallery__item">
1907
- <div class="pf-c-card">
1908
- <div class="pf-c-card__body">This is a card</div>
1909
- </div>
1900
+ <div class="pf-c-card">
1901
+ <div class="pf-c-card__body">This is a card</div>
1910
1902
  </div>
1911
- <div class="pf-l-gallery__item">
1912
- <div class="pf-c-card">
1913
- <div class="pf-c-card__body">This is a card</div>
1914
- </div>
1903
+ <div class="pf-c-card">
1904
+ <div class="pf-c-card__body">This is a card</div>
1915
1905
  </div>
1916
- <div class="pf-l-gallery__item">
1917
- <div class="pf-c-card">
1918
- <div class="pf-c-card__body">This is a card</div>
1919
- </div>
1906
+ <div class="pf-c-card">
1907
+ <div class="pf-c-card__body">This is a card</div>
1920
1908
  </div>
1921
- <div class="pf-l-gallery__item">
1922
- <div class="pf-c-card">
1923
- <div class="pf-c-card__body">This is a card</div>
1924
- </div>
1909
+ <div class="pf-c-card">
1910
+ <div class="pf-c-card__body">This is a card</div>
1925
1911
  </div>
1926
- <div class="pf-l-gallery__item">
1927
- <div class="pf-c-card">
1928
- <div class="pf-c-card__body">This is a card</div>
1929
- </div>
1912
+ <div class="pf-c-card">
1913
+ <div class="pf-c-card__body">This is a card</div>
1930
1914
  </div>
1931
- <div class="pf-l-gallery__item">
1932
- <div class="pf-c-card">
1933
- <div class="pf-c-card__body">This is a card</div>
1934
- </div>
1915
+ <div class="pf-c-card">
1916
+ <div class="pf-c-card__body">This is a card</div>
1935
1917
  </div>
1936
- <div class="pf-l-gallery__item">
1937
- <div class="pf-c-card">
1938
- <div class="pf-c-card__body">This is a card</div>
1939
- </div>
1918
+ <div class="pf-c-card">
1919
+ <div class="pf-c-card__body">This is a card</div>
1940
1920
  </div>
1941
- <div class="pf-l-gallery__item">
1942
- <div class="pf-c-card">
1943
- <div class="pf-c-card__body">This is a card</div>
1944
- </div>
1921
+ <div class="pf-c-card">
1922
+ <div class="pf-c-card__body">This is a card</div>
1945
1923
  </div>
1946
- <div class="pf-l-gallery__item">
1947
- <div class="pf-c-card">
1948
- <div class="pf-c-card__body">This is a card</div>
1949
- </div>
1924
+ <div class="pf-c-card">
1925
+ <div class="pf-c-card__body">This is a card</div>
1950
1926
  </div>
1951
- <div class="pf-l-gallery__item">
1952
- <div class="pf-c-card">
1953
- <div class="pf-c-card__body">This is a card</div>
1954
- </div>
1927
+ <div class="pf-c-card">
1928
+ <div class="pf-c-card__body">This is a card</div>
1955
1929
  </div>
1956
- <div class="pf-l-gallery__item">
1957
- <div class="pf-c-card">
1958
- <div class="pf-c-card__body">This is a card</div>
1959
- </div>
1930
+ <div class="pf-c-card">
1931
+ <div class="pf-c-card__body">This is a card</div>
1960
1932
  </div>
1961
- <div class="pf-l-gallery__item">
1962
- <div class="pf-c-card">
1963
- <div class="pf-c-card__body">This is a card</div>
1964
- </div>
1933
+ <div class="pf-c-card">
1934
+ <div class="pf-c-card__body">This is a card</div>
1965
1935
  </div>
1966
- <div class="pf-l-gallery__item">
1967
- <div class="pf-c-card">
1968
- <div class="pf-c-card__body">This is a card</div>
1969
- </div>
1936
+ <div class="pf-c-card">
1937
+ <div class="pf-c-card__body">This is a card</div>
1970
1938
  </div>
1971
- <div class="pf-l-gallery__item">
1972
- <div class="pf-c-card">
1973
- <div class="pf-c-card__body">This is a card</div>
1974
- </div>
1939
+ <div class="pf-c-card">
1940
+ <div class="pf-c-card__body">This is a card</div>
1975
1941
  </div>
1976
- <div class="pf-l-gallery__item">
1977
- <div class="pf-c-card">
1978
- <div class="pf-c-card__body">This is a card</div>
1979
- </div>
1942
+ <div class="pf-c-card">
1943
+ <div class="pf-c-card__body">This is a card</div>
1980
1944
  </div>
1981
- <div class="pf-l-gallery__item">
1982
- <div class="pf-c-card">
1983
- <div class="pf-c-card__body">This is a card</div>
1984
- </div>
1945
+ <div class="pf-c-card">
1946
+ <div class="pf-c-card__body">This is a card</div>
1985
1947
  </div>
1986
- <div class="pf-l-gallery__item">
1987
- <div class="pf-c-card">
1988
- <div class="pf-c-card__body">This is a card</div>
1989
- </div>
1948
+ <div class="pf-c-card">
1949
+ <div class="pf-c-card__body">This is a card</div>
1990
1950
  </div>
1991
- <div class="pf-l-gallery__item">
1992
- <div class="pf-c-card">
1993
- <div class="pf-c-card__body">This is a card</div>
1994
- </div>
1951
+ <div class="pf-c-card">
1952
+ <div class="pf-c-card__body">This is a card</div>
1995
1953
  </div>
1996
- <div class="pf-l-gallery__item">
1997
- <div class="pf-c-card">
1998
- <div class="pf-c-card__body">This is a card</div>
1999
- </div>
1954
+ <div class="pf-c-card">
1955
+ <div class="pf-c-card__body">This is a card</div>
2000
1956
  </div>
2001
- <div class="pf-l-gallery__item">
2002
- <div class="pf-c-card">
2003
- <div class="pf-c-card__body">This is a card</div>
2004
- </div>
1957
+ <div class="pf-c-card">
1958
+ <div class="pf-c-card__body">This is a card</div>
2005
1959
  </div>
2006
- <div class="pf-l-gallery__item">
2007
- <div class="pf-c-card">
2008
- <div class="pf-c-card__body">This is a card</div>
2009
- </div>
1960
+ <div class="pf-c-card">
1961
+ <div class="pf-c-card__body">This is a card</div>
2010
1962
  </div>
2011
- <div class="pf-l-gallery__item">
2012
- <div class="pf-c-card">
2013
- <div class="pf-c-card__body">This is a card</div>
2014
- </div>
1963
+ <div class="pf-c-card">
1964
+ <div class="pf-c-card__body">This is a card</div>
2015
1965
  </div>
2016
- <div class="pf-l-gallery__item">
2017
- <div class="pf-c-card">
2018
- <div class="pf-c-card__body">This is a card</div>
2019
- </div>
1966
+ <div class="pf-c-card">
1967
+ <div class="pf-c-card__body">This is a card</div>
2020
1968
  </div>
2021
- <div class="pf-l-gallery__item">
2022
- <div class="pf-c-card">
2023
- <div class="pf-c-card__body">This is a card</div>
2024
- </div>
1969
+ <div class="pf-c-card">
1970
+ <div class="pf-c-card__body">This is a card</div>
2025
1971
  </div>
2026
- <div class="pf-l-gallery__item">
2027
- <div class="pf-c-card">
2028
- <div class="pf-c-card__body">This is a card</div>
2029
- </div>
1972
+ <div class="pf-c-card">
1973
+ <div class="pf-c-card__body">This is a card</div>
2030
1974
  </div>
2031
- <div class="pf-l-gallery__item">
2032
- <div class="pf-c-card">
2033
- <div class="pf-c-card__body">This is a card</div>
2034
- </div>
1975
+ <div class="pf-c-card">
1976
+ <div class="pf-c-card__body">This is a card</div>
2035
1977
  </div>
2036
- <div class="pf-l-gallery__item">
2037
- <div class="pf-c-card">
2038
- <div class="pf-c-card__body">This is a card</div>
2039
- </div>
1978
+ <div class="pf-c-card">
1979
+ <div class="pf-c-card__body">This is a card</div>
2040
1980
  </div>
2041
- <div class="pf-l-gallery__item">
2042
- <div class="pf-c-card">
2043
- <div class="pf-c-card__body">This is a card</div>
2044
- </div>
1981
+ <div class="pf-c-card">
1982
+ <div class="pf-c-card__body">This is a card</div>
2045
1983
  </div>
2046
- <div class="pf-l-gallery__item">
2047
- <div class="pf-c-card">
2048
- <div class="pf-c-card__body">This is a card</div>
2049
- </div>
1984
+ <div class="pf-c-card">
1985
+ <div class="pf-c-card__body">This is a card</div>
2050
1986
  </div>
2051
- <div class="pf-l-gallery__item">
2052
- <div class="pf-c-card">
2053
- <div class="pf-c-card__body">This is a card</div>
2054
- </div>
1987
+ <div class="pf-c-card">
1988
+ <div class="pf-c-card__body">This is a card</div>
2055
1989
  </div>
2056
- <div class="pf-l-gallery__item">
2057
- <div class="pf-c-card">
2058
- <div class="pf-c-card__body">This is a card</div>
2059
- </div>
1990
+ <div class="pf-c-card">
1991
+ <div class="pf-c-card__body">This is a card</div>
2060
1992
  </div>
2061
- <div class="pf-l-gallery__item">
2062
- <div class="pf-c-card">
2063
- <div class="pf-c-card__body">This is a card</div>
2064
- </div>
1993
+ <div class="pf-c-card">
1994
+ <div class="pf-c-card__body">This is a card</div>
2065
1995
  </div>
2066
- <div class="pf-l-gallery__item">
2067
- <div class="pf-c-card">
2068
- <div class="pf-c-card__body">This is a card</div>
2069
- </div>
1996
+ <div class="pf-c-card">
1997
+ <div class="pf-c-card__body">This is a card</div>
2070
1998
  </div>
2071
- <div class="pf-l-gallery__item">
2072
- <div class="pf-c-card">
2073
- <div class="pf-c-card__body">This is a card</div>
2074
- </div>
1999
+ <div class="pf-c-card">
2000
+ <div class="pf-c-card__body">This is a card</div>
2075
2001
  </div>
2076
- <div class="pf-l-gallery__item">
2077
- <div class="pf-c-card">
2078
- <div class="pf-c-card__body">This is a card</div>
2079
- </div>
2002
+ <div class="pf-c-card">
2003
+ <div class="pf-c-card__body">This is a card</div>
2080
2004
  </div>
2081
- <div class="pf-l-gallery__item">
2082
- <div class="pf-c-card">
2083
- <div class="pf-c-card__body">This is a card</div>
2084
- </div>
2005
+ <div class="pf-c-card">
2006
+ <div class="pf-c-card__body">This is a card</div>
2085
2007
  </div>
2086
2008
  </div>
2087
2009
  </div>
@@ -2161,7 +2083,7 @@ wrapperTag: div
2161
2083
  <button
2162
2084
  class="pf-c-app-launcher__toggle"
2163
2085
  type="button"
2164
- id="-button"
2086
+ id="page-demo-sticky-top-breadcrumb-masthead-icon-group--app-launcher-button"
2165
2087
  aria-expanded="false"
2166
2088
  aria-label="Application launcher"
2167
2089
  >
@@ -2172,14 +2094,24 @@ wrapperTag: div
2172
2094
  hidden
2173
2095
  >
2174
2096
  <div class="pf-c-app-launcher__menu-search">
2175
- <input
2176
- class="pf-c-form-control"
2177
- type="search"
2178
- aria-label="Type to filter"
2179
- placeholder="Filter by name..."
2180
- id="page-demo-sticky-top-breadcrumb-masthead-application-launcher-text-input"
2181
- name="textInput1"
2182
- />
2097
+ <div class="pf-c-search-input">
2098
+ <div class="pf-c-search-input__bar">
2099
+ <span class="pf-c-search-input__text">
2100
+ <span class="pf-c-search-input__icon">
2101
+ <i
2102
+ class="fas fa-search fa-fw"
2103
+ aria-hidden="true"
2104
+ ></i>
2105
+ </span>
2106
+ <input
2107
+ class="pf-c-search-input__text-input"
2108
+ type="text"
2109
+ placeholder="Filter by name"
2110
+ aria-label="Filter by name"
2111
+ />
2112
+ </span>
2113
+ </div>
2114
+ </div>
2183
2115
  </div>
2184
2116
  <section class="pf-c-app-launcher__group">
2185
2117
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2661,13 +2593,24 @@ wrapperTag: div
2661
2593
  </div>
2662
2594
  <div class="pf-c-menu__search">
2663
2595
  <div class="pf-c-menu__search-input">
2664
- <input
2665
- class="pf-c-form-control pf-m-search"
2666
- type="search"
2667
- id="page-demo-sticky-top-breadcrumb-masthead-drilldown-menu-list-3-search-input"
2668
- name="page-demo-sticky-top-breadcrumb-masthead-drilldown-menu-list-3-search-input"
2669
- aria-label="Search"
2670
- />
2596
+ <div class="pf-c-search-input">
2597
+ <div class="pf-c-search-input__bar">
2598
+ <span class="pf-c-search-input__text">
2599
+ <span class="pf-c-search-input__icon">
2600
+ <i
2601
+ class="fas fa-search fa-fw"
2602
+ aria-hidden="true"
2603
+ ></i>
2604
+ </span>
2605
+ <input
2606
+ class="pf-c-search-input__text-input"
2607
+ type="text"
2608
+ placeholder="Search"
2609
+ aria-label="Search"
2610
+ />
2611
+ </span>
2612
+ </div>
2613
+ </div>
2671
2614
  </div>
2672
2615
  </div>
2673
2616
  <hr class="pf-c-divider" />
@@ -2959,255 +2902,155 @@ wrapperTag: div
2959
2902
  <section class="pf-c-page__main-section pf-m-limit-width">
2960
2903
  <div class="pf-c-page__main-body">
2961
2904
  <div class="pf-l-gallery pf-m-gutter">
2962
- <div class="pf-l-gallery__item">
2963
- <div class="pf-c-card">
2964
- <div class="pf-c-card__body">This is a card</div>
2965
- </div>
2905
+ <div class="pf-c-card">
2906
+ <div class="pf-c-card__body">This is a card</div>
2966
2907
  </div>
2967
- <div class="pf-l-gallery__item">
2968
- <div class="pf-c-card">
2969
- <div class="pf-c-card__body">This is a card</div>
2970
- </div>
2908
+ <div class="pf-c-card">
2909
+ <div class="pf-c-card__body">This is a card</div>
2971
2910
  </div>
2972
- <div class="pf-l-gallery__item">
2973
- <div class="pf-c-card">
2974
- <div class="pf-c-card__body">This is a card</div>
2975
- </div>
2911
+ <div class="pf-c-card">
2912
+ <div class="pf-c-card__body">This is a card</div>
2976
2913
  </div>
2977
- <div class="pf-l-gallery__item">
2978
- <div class="pf-c-card">
2979
- <div class="pf-c-card__body">This is a card</div>
2980
- </div>
2914
+ <div class="pf-c-card">
2915
+ <div class="pf-c-card__body">This is a card</div>
2981
2916
  </div>
2982
- <div class="pf-l-gallery__item">
2983
- <div class="pf-c-card">
2984
- <div class="pf-c-card__body">This is a card</div>
2985
- </div>
2917
+ <div class="pf-c-card">
2918
+ <div class="pf-c-card__body">This is a card</div>
2986
2919
  </div>
2987
- <div class="pf-l-gallery__item">
2988
- <div class="pf-c-card">
2989
- <div class="pf-c-card__body">This is a card</div>
2990
- </div>
2920
+ <div class="pf-c-card">
2921
+ <div class="pf-c-card__body">This is a card</div>
2991
2922
  </div>
2992
- <div class="pf-l-gallery__item">
2993
- <div class="pf-c-card">
2994
- <div class="pf-c-card__body">This is a card</div>
2995
- </div>
2923
+ <div class="pf-c-card">
2924
+ <div class="pf-c-card__body">This is a card</div>
2996
2925
  </div>
2997
- <div class="pf-l-gallery__item">
2998
- <div class="pf-c-card">
2999
- <div class="pf-c-card__body">This is a card</div>
3000
- </div>
2926
+ <div class="pf-c-card">
2927
+ <div class="pf-c-card__body">This is a card</div>
3001
2928
  </div>
3002
- <div class="pf-l-gallery__item">
3003
- <div class="pf-c-card">
3004
- <div class="pf-c-card__body">This is a card</div>
3005
- </div>
2929
+ <div class="pf-c-card">
2930
+ <div class="pf-c-card__body">This is a card</div>
3006
2931
  </div>
3007
- <div class="pf-l-gallery__item">
3008
- <div class="pf-c-card">
3009
- <div class="pf-c-card__body">This is a card</div>
3010
- </div>
2932
+ <div class="pf-c-card">
2933
+ <div class="pf-c-card__body">This is a card</div>
3011
2934
  </div>
3012
- <div class="pf-l-gallery__item">
3013
- <div class="pf-c-card">
3014
- <div class="pf-c-card__body">This is a card</div>
3015
- </div>
2935
+ <div class="pf-c-card">
2936
+ <div class="pf-c-card__body">This is a card</div>
3016
2937
  </div>
3017
- <div class="pf-l-gallery__item">
3018
- <div class="pf-c-card">
3019
- <div class="pf-c-card__body">This is a card</div>
3020
- </div>
2938
+ <div class="pf-c-card">
2939
+ <div class="pf-c-card__body">This is a card</div>
3021
2940
  </div>
3022
- <div class="pf-l-gallery__item">
3023
- <div class="pf-c-card">
3024
- <div class="pf-c-card__body">This is a card</div>
3025
- </div>
2941
+ <div class="pf-c-card">
2942
+ <div class="pf-c-card__body">This is a card</div>
3026
2943
  </div>
3027
- <div class="pf-l-gallery__item">
3028
- <div class="pf-c-card">
3029
- <div class="pf-c-card__body">This is a card</div>
3030
- </div>
2944
+ <div class="pf-c-card">
2945
+ <div class="pf-c-card__body">This is a card</div>
3031
2946
  </div>
3032
- <div class="pf-l-gallery__item">
3033
- <div class="pf-c-card">
3034
- <div class="pf-c-card__body">This is a card</div>
3035
- </div>
2947
+ <div class="pf-c-card">
2948
+ <div class="pf-c-card__body">This is a card</div>
3036
2949
  </div>
3037
- <div class="pf-l-gallery__item">
3038
- <div class="pf-c-card">
3039
- <div class="pf-c-card__body">This is a card</div>
3040
- </div>
2950
+ <div class="pf-c-card">
2951
+ <div class="pf-c-card__body">This is a card</div>
3041
2952
  </div>
3042
- <div class="pf-l-gallery__item">
3043
- <div class="pf-c-card">
3044
- <div class="pf-c-card__body">This is a card</div>
3045
- </div>
2953
+ <div class="pf-c-card">
2954
+ <div class="pf-c-card__body">This is a card</div>
3046
2955
  </div>
3047
- <div class="pf-l-gallery__item">
3048
- <div class="pf-c-card">
3049
- <div class="pf-c-card__body">This is a card</div>
3050
- </div>
2956
+ <div class="pf-c-card">
2957
+ <div class="pf-c-card__body">This is a card</div>
3051
2958
  </div>
3052
- <div class="pf-l-gallery__item">
3053
- <div class="pf-c-card">
3054
- <div class="pf-c-card__body">This is a card</div>
3055
- </div>
2959
+ <div class="pf-c-card">
2960
+ <div class="pf-c-card__body">This is a card</div>
3056
2961
  </div>
3057
- <div class="pf-l-gallery__item">
3058
- <div class="pf-c-card">
3059
- <div class="pf-c-card__body">This is a card</div>
3060
- </div>
2962
+ <div class="pf-c-card">
2963
+ <div class="pf-c-card__body">This is a card</div>
3061
2964
  </div>
3062
- <div class="pf-l-gallery__item">
3063
- <div class="pf-c-card">
3064
- <div class="pf-c-card__body">This is a card</div>
3065
- </div>
2965
+ <div class="pf-c-card">
2966
+ <div class="pf-c-card__body">This is a card</div>
3066
2967
  </div>
3067
- <div class="pf-l-gallery__item">
3068
- <div class="pf-c-card">
3069
- <div class="pf-c-card__body">This is a card</div>
3070
- </div>
2968
+ <div class="pf-c-card">
2969
+ <div class="pf-c-card__body">This is a card</div>
3071
2970
  </div>
3072
- <div class="pf-l-gallery__item">
3073
- <div class="pf-c-card">
3074
- <div class="pf-c-card__body">This is a card</div>
3075
- </div>
2971
+ <div class="pf-c-card">
2972
+ <div class="pf-c-card__body">This is a card</div>
3076
2973
  </div>
3077
- <div class="pf-l-gallery__item">
3078
- <div class="pf-c-card">
3079
- <div class="pf-c-card__body">This is a card</div>
3080
- </div>
2974
+ <div class="pf-c-card">
2975
+ <div class="pf-c-card__body">This is a card</div>
3081
2976
  </div>
3082
- <div class="pf-l-gallery__item">
3083
- <div class="pf-c-card">
3084
- <div class="pf-c-card__body">This is a card</div>
3085
- </div>
2977
+ <div class="pf-c-card">
2978
+ <div class="pf-c-card__body">This is a card</div>
3086
2979
  </div>
3087
- <div class="pf-l-gallery__item">
3088
- <div class="pf-c-card">
3089
- <div class="pf-c-card__body">This is a card</div>
3090
- </div>
2980
+ <div class="pf-c-card">
2981
+ <div class="pf-c-card__body">This is a card</div>
3091
2982
  </div>
3092
- <div class="pf-l-gallery__item">
3093
- <div class="pf-c-card">
3094
- <div class="pf-c-card__body">This is a card</div>
3095
- </div>
2983
+ <div class="pf-c-card">
2984
+ <div class="pf-c-card__body">This is a card</div>
3096
2985
  </div>
3097
- <div class="pf-l-gallery__item">
3098
- <div class="pf-c-card">
3099
- <div class="pf-c-card__body">This is a card</div>
3100
- </div>
2986
+ <div class="pf-c-card">
2987
+ <div class="pf-c-card__body">This is a card</div>
3101
2988
  </div>
3102
- <div class="pf-l-gallery__item">
3103
- <div class="pf-c-card">
3104
- <div class="pf-c-card__body">This is a card</div>
3105
- </div>
2989
+ <div class="pf-c-card">
2990
+ <div class="pf-c-card__body">This is a card</div>
3106
2991
  </div>
3107
- <div class="pf-l-gallery__item">
3108
- <div class="pf-c-card">
3109
- <div class="pf-c-card__body">This is a card</div>
3110
- </div>
2992
+ <div class="pf-c-card">
2993
+ <div class="pf-c-card__body">This is a card</div>
3111
2994
  </div>
3112
- <div class="pf-l-gallery__item">
3113
- <div class="pf-c-card">
3114
- <div class="pf-c-card__body">This is a card</div>
3115
- </div>
2995
+ <div class="pf-c-card">
2996
+ <div class="pf-c-card__body">This is a card</div>
3116
2997
  </div>
3117
- <div class="pf-l-gallery__item">
3118
- <div class="pf-c-card">
3119
- <div class="pf-c-card__body">This is a card</div>
3120
- </div>
2998
+ <div class="pf-c-card">
2999
+ <div class="pf-c-card__body">This is a card</div>
3121
3000
  </div>
3122
- <div class="pf-l-gallery__item">
3123
- <div class="pf-c-card">
3124
- <div class="pf-c-card__body">This is a card</div>
3125
- </div>
3001
+ <div class="pf-c-card">
3002
+ <div class="pf-c-card__body">This is a card</div>
3126
3003
  </div>
3127
- <div class="pf-l-gallery__item">
3128
- <div class="pf-c-card">
3129
- <div class="pf-c-card__body">This is a card</div>
3130
- </div>
3004
+ <div class="pf-c-card">
3005
+ <div class="pf-c-card__body">This is a card</div>
3131
3006
  </div>
3132
- <div class="pf-l-gallery__item">
3133
- <div class="pf-c-card">
3134
- <div class="pf-c-card__body">This is a card</div>
3135
- </div>
3007
+ <div class="pf-c-card">
3008
+ <div class="pf-c-card__body">This is a card</div>
3136
3009
  </div>
3137
- <div class="pf-l-gallery__item">
3138
- <div class="pf-c-card">
3139
- <div class="pf-c-card__body">This is a card</div>
3140
- </div>
3010
+ <div class="pf-c-card">
3011
+ <div class="pf-c-card__body">This is a card</div>
3141
3012
  </div>
3142
- <div class="pf-l-gallery__item">
3143
- <div class="pf-c-card">
3144
- <div class="pf-c-card__body">This is a card</div>
3145
- </div>
3013
+ <div class="pf-c-card">
3014
+ <div class="pf-c-card__body">This is a card</div>
3146
3015
  </div>
3147
- <div class="pf-l-gallery__item">
3148
- <div class="pf-c-card">
3149
- <div class="pf-c-card__body">This is a card</div>
3150
- </div>
3016
+ <div class="pf-c-card">
3017
+ <div class="pf-c-card__body">This is a card</div>
3151
3018
  </div>
3152
- <div class="pf-l-gallery__item">
3153
- <div class="pf-c-card">
3154
- <div class="pf-c-card__body">This is a card</div>
3155
- </div>
3019
+ <div class="pf-c-card">
3020
+ <div class="pf-c-card__body">This is a card</div>
3156
3021
  </div>
3157
- <div class="pf-l-gallery__item">
3158
- <div class="pf-c-card">
3159
- <div class="pf-c-card__body">This is a card</div>
3160
- </div>
3022
+ <div class="pf-c-card">
3023
+ <div class="pf-c-card__body">This is a card</div>
3161
3024
  </div>
3162
- <div class="pf-l-gallery__item">
3163
- <div class="pf-c-card">
3164
- <div class="pf-c-card__body">This is a card</div>
3165
- </div>
3025
+ <div class="pf-c-card">
3026
+ <div class="pf-c-card__body">This is a card</div>
3166
3027
  </div>
3167
- <div class="pf-l-gallery__item">
3168
- <div class="pf-c-card">
3169
- <div class="pf-c-card__body">This is a card</div>
3170
- </div>
3028
+ <div class="pf-c-card">
3029
+ <div class="pf-c-card__body">This is a card</div>
3171
3030
  </div>
3172
- <div class="pf-l-gallery__item">
3173
- <div class="pf-c-card">
3174
- <div class="pf-c-card__body">This is a card</div>
3175
- </div>
3031
+ <div class="pf-c-card">
3032
+ <div class="pf-c-card__body">This is a card</div>
3176
3033
  </div>
3177
- <div class="pf-l-gallery__item">
3178
- <div class="pf-c-card">
3179
- <div class="pf-c-card__body">This is a card</div>
3180
- </div>
3034
+ <div class="pf-c-card">
3035
+ <div class="pf-c-card__body">This is a card</div>
3181
3036
  </div>
3182
- <div class="pf-l-gallery__item">
3183
- <div class="pf-c-card">
3184
- <div class="pf-c-card__body">This is a card</div>
3185
- </div>
3037
+ <div class="pf-c-card">
3038
+ <div class="pf-c-card__body">This is a card</div>
3186
3039
  </div>
3187
- <div class="pf-l-gallery__item">
3188
- <div class="pf-c-card">
3189
- <div class="pf-c-card__body">This is a card</div>
3190
- </div>
3040
+ <div class="pf-c-card">
3041
+ <div class="pf-c-card__body">This is a card</div>
3191
3042
  </div>
3192
- <div class="pf-l-gallery__item">
3193
- <div class="pf-c-card">
3194
- <div class="pf-c-card__body">This is a card</div>
3195
- </div>
3043
+ <div class="pf-c-card">
3044
+ <div class="pf-c-card__body">This is a card</div>
3196
3045
  </div>
3197
- <div class="pf-l-gallery__item">
3198
- <div class="pf-c-card">
3199
- <div class="pf-c-card__body">This is a card</div>
3200
- </div>
3046
+ <div class="pf-c-card">
3047
+ <div class="pf-c-card__body">This is a card</div>
3201
3048
  </div>
3202
- <div class="pf-l-gallery__item">
3203
- <div class="pf-c-card">
3204
- <div class="pf-c-card__body">This is a card</div>
3205
- </div>
3049
+ <div class="pf-c-card">
3050
+ <div class="pf-c-card__body">This is a card</div>
3206
3051
  </div>
3207
- <div class="pf-l-gallery__item">
3208
- <div class="pf-c-card">
3209
- <div class="pf-c-card__body">This is a card</div>
3210
- </div>
3052
+ <div class="pf-c-card">
3053
+ <div class="pf-c-card__body">This is a card</div>
3211
3054
  </div>
3212
3055
  </div>
3213
3056
  </div>
@@ -3290,7 +3133,7 @@ wrapperTag: div
3290
3133
  <button
3291
3134
  class="pf-c-app-launcher__toggle"
3292
3135
  type="button"
3293
- id="-button"
3136
+ id="page-demo-sticky-top-section-group-masthead-icon-group--app-launcher-button"
3294
3137
  aria-expanded="false"
3295
3138
  aria-label="Application launcher"
3296
3139
  >
@@ -3301,14 +3144,24 @@ wrapperTag: div
3301
3144
  hidden
3302
3145
  >
3303
3146
  <div class="pf-c-app-launcher__menu-search">
3304
- <input
3305
- class="pf-c-form-control"
3306
- type="search"
3307
- aria-label="Type to filter"
3308
- placeholder="Filter by name..."
3309
- id="page-demo-sticky-top-section-group-masthead-application-launcher-text-input"
3310
- name="textInput1"
3311
- />
3147
+ <div class="pf-c-search-input">
3148
+ <div class="pf-c-search-input__bar">
3149
+ <span class="pf-c-search-input__text">
3150
+ <span class="pf-c-search-input__icon">
3151
+ <i
3152
+ class="fas fa-search fa-fw"
3153
+ aria-hidden="true"
3154
+ ></i>
3155
+ </span>
3156
+ <input
3157
+ class="pf-c-search-input__text-input"
3158
+ type="text"
3159
+ placeholder="Filter by name"
3160
+ aria-label="Filter by name"
3161
+ />
3162
+ </span>
3163
+ </div>
3164
+ </div>
3312
3165
  </div>
3313
3166
  <section class="pf-c-app-launcher__group">
3314
3167
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -3790,13 +3643,24 @@ wrapperTag: div
3790
3643
  </div>
3791
3644
  <div class="pf-c-menu__search">
3792
3645
  <div class="pf-c-menu__search-input">
3793
- <input
3794
- class="pf-c-form-control pf-m-search"
3795
- type="search"
3796
- id="page-demo-sticky-top-section-group-masthead-drilldown-menu-list-3-search-input"
3797
- name="page-demo-sticky-top-section-group-masthead-drilldown-menu-list-3-search-input"
3798
- aria-label="Search"
3799
- />
3646
+ <div class="pf-c-search-input">
3647
+ <div class="pf-c-search-input__bar">
3648
+ <span class="pf-c-search-input__text">
3649
+ <span class="pf-c-search-input__icon">
3650
+ <i
3651
+ class="fas fa-search fa-fw"
3652
+ aria-hidden="true"
3653
+ ></i>
3654
+ </span>
3655
+ <input
3656
+ class="pf-c-search-input__text-input"
3657
+ type="text"
3658
+ placeholder="Search"
3659
+ aria-label="Search"
3660
+ />
3661
+ </span>
3662
+ </div>
3663
+ </div>
3800
3664
  </div>
3801
3665
  </div>
3802
3666
  <hr class="pf-c-divider" />
@@ -4088,255 +3952,155 @@ wrapperTag: div
4088
3952
  <section class="pf-c-page__main-section pf-m-limit-width">
4089
3953
  <div class="pf-c-page__main-body">
4090
3954
  <div class="pf-l-gallery pf-m-gutter">
4091
- <div class="pf-l-gallery__item">
4092
- <div class="pf-c-card">
4093
- <div class="pf-c-card__body">This is a card</div>
4094
- </div>
3955
+ <div class="pf-c-card">
3956
+ <div class="pf-c-card__body">This is a card</div>
4095
3957
  </div>
4096
- <div class="pf-l-gallery__item">
4097
- <div class="pf-c-card">
4098
- <div class="pf-c-card__body">This is a card</div>
4099
- </div>
3958
+ <div class="pf-c-card">
3959
+ <div class="pf-c-card__body">This is a card</div>
4100
3960
  </div>
4101
- <div class="pf-l-gallery__item">
4102
- <div class="pf-c-card">
4103
- <div class="pf-c-card__body">This is a card</div>
4104
- </div>
3961
+ <div class="pf-c-card">
3962
+ <div class="pf-c-card__body">This is a card</div>
4105
3963
  </div>
4106
- <div class="pf-l-gallery__item">
4107
- <div class="pf-c-card">
4108
- <div class="pf-c-card__body">This is a card</div>
4109
- </div>
3964
+ <div class="pf-c-card">
3965
+ <div class="pf-c-card__body">This is a card</div>
4110
3966
  </div>
4111
- <div class="pf-l-gallery__item">
4112
- <div class="pf-c-card">
4113
- <div class="pf-c-card__body">This is a card</div>
4114
- </div>
3967
+ <div class="pf-c-card">
3968
+ <div class="pf-c-card__body">This is a card</div>
4115
3969
  </div>
4116
- <div class="pf-l-gallery__item">
4117
- <div class="pf-c-card">
4118
- <div class="pf-c-card__body">This is a card</div>
4119
- </div>
3970
+ <div class="pf-c-card">
3971
+ <div class="pf-c-card__body">This is a card</div>
4120
3972
  </div>
4121
- <div class="pf-l-gallery__item">
4122
- <div class="pf-c-card">
4123
- <div class="pf-c-card__body">This is a card</div>
4124
- </div>
3973
+ <div class="pf-c-card">
3974
+ <div class="pf-c-card__body">This is a card</div>
4125
3975
  </div>
4126
- <div class="pf-l-gallery__item">
4127
- <div class="pf-c-card">
4128
- <div class="pf-c-card__body">This is a card</div>
4129
- </div>
3976
+ <div class="pf-c-card">
3977
+ <div class="pf-c-card__body">This is a card</div>
4130
3978
  </div>
4131
- <div class="pf-l-gallery__item">
4132
- <div class="pf-c-card">
4133
- <div class="pf-c-card__body">This is a card</div>
4134
- </div>
3979
+ <div class="pf-c-card">
3980
+ <div class="pf-c-card__body">This is a card</div>
4135
3981
  </div>
4136
- <div class="pf-l-gallery__item">
4137
- <div class="pf-c-card">
4138
- <div class="pf-c-card__body">This is a card</div>
4139
- </div>
3982
+ <div class="pf-c-card">
3983
+ <div class="pf-c-card__body">This is a card</div>
4140
3984
  </div>
4141
- <div class="pf-l-gallery__item">
4142
- <div class="pf-c-card">
4143
- <div class="pf-c-card__body">This is a card</div>
4144
- </div>
3985
+ <div class="pf-c-card">
3986
+ <div class="pf-c-card__body">This is a card</div>
4145
3987
  </div>
4146
- <div class="pf-l-gallery__item">
4147
- <div class="pf-c-card">
4148
- <div class="pf-c-card__body">This is a card</div>
4149
- </div>
3988
+ <div class="pf-c-card">
3989
+ <div class="pf-c-card__body">This is a card</div>
4150
3990
  </div>
4151
- <div class="pf-l-gallery__item">
4152
- <div class="pf-c-card">
4153
- <div class="pf-c-card__body">This is a card</div>
4154
- </div>
3991
+ <div class="pf-c-card">
3992
+ <div class="pf-c-card__body">This is a card</div>
4155
3993
  </div>
4156
- <div class="pf-l-gallery__item">
4157
- <div class="pf-c-card">
4158
- <div class="pf-c-card__body">This is a card</div>
4159
- </div>
3994
+ <div class="pf-c-card">
3995
+ <div class="pf-c-card__body">This is a card</div>
4160
3996
  </div>
4161
- <div class="pf-l-gallery__item">
4162
- <div class="pf-c-card">
4163
- <div class="pf-c-card__body">This is a card</div>
4164
- </div>
3997
+ <div class="pf-c-card">
3998
+ <div class="pf-c-card__body">This is a card</div>
4165
3999
  </div>
4166
- <div class="pf-l-gallery__item">
4167
- <div class="pf-c-card">
4168
- <div class="pf-c-card__body">This is a card</div>
4169
- </div>
4000
+ <div class="pf-c-card">
4001
+ <div class="pf-c-card__body">This is a card</div>
4170
4002
  </div>
4171
- <div class="pf-l-gallery__item">
4172
- <div class="pf-c-card">
4173
- <div class="pf-c-card__body">This is a card</div>
4174
- </div>
4003
+ <div class="pf-c-card">
4004
+ <div class="pf-c-card__body">This is a card</div>
4175
4005
  </div>
4176
- <div class="pf-l-gallery__item">
4177
- <div class="pf-c-card">
4178
- <div class="pf-c-card__body">This is a card</div>
4179
- </div>
4006
+ <div class="pf-c-card">
4007
+ <div class="pf-c-card__body">This is a card</div>
4180
4008
  </div>
4181
- <div class="pf-l-gallery__item">
4182
- <div class="pf-c-card">
4183
- <div class="pf-c-card__body">This is a card</div>
4184
- </div>
4009
+ <div class="pf-c-card">
4010
+ <div class="pf-c-card__body">This is a card</div>
4185
4011
  </div>
4186
- <div class="pf-l-gallery__item">
4187
- <div class="pf-c-card">
4188
- <div class="pf-c-card__body">This is a card</div>
4189
- </div>
4012
+ <div class="pf-c-card">
4013
+ <div class="pf-c-card__body">This is a card</div>
4190
4014
  </div>
4191
- <div class="pf-l-gallery__item">
4192
- <div class="pf-c-card">
4193
- <div class="pf-c-card__body">This is a card</div>
4194
- </div>
4015
+ <div class="pf-c-card">
4016
+ <div class="pf-c-card__body">This is a card</div>
4195
4017
  </div>
4196
- <div class="pf-l-gallery__item">
4197
- <div class="pf-c-card">
4198
- <div class="pf-c-card__body">This is a card</div>
4199
- </div>
4018
+ <div class="pf-c-card">
4019
+ <div class="pf-c-card__body">This is a card</div>
4200
4020
  </div>
4201
- <div class="pf-l-gallery__item">
4202
- <div class="pf-c-card">
4203
- <div class="pf-c-card__body">This is a card</div>
4204
- </div>
4021
+ <div class="pf-c-card">
4022
+ <div class="pf-c-card__body">This is a card</div>
4205
4023
  </div>
4206
- <div class="pf-l-gallery__item">
4207
- <div class="pf-c-card">
4208
- <div class="pf-c-card__body">This is a card</div>
4209
- </div>
4024
+ <div class="pf-c-card">
4025
+ <div class="pf-c-card__body">This is a card</div>
4210
4026
  </div>
4211
- <div class="pf-l-gallery__item">
4212
- <div class="pf-c-card">
4213
- <div class="pf-c-card__body">This is a card</div>
4214
- </div>
4027
+ <div class="pf-c-card">
4028
+ <div class="pf-c-card__body">This is a card</div>
4215
4029
  </div>
4216
- <div class="pf-l-gallery__item">
4217
- <div class="pf-c-card">
4218
- <div class="pf-c-card__body">This is a card</div>
4219
- </div>
4030
+ <div class="pf-c-card">
4031
+ <div class="pf-c-card__body">This is a card</div>
4220
4032
  </div>
4221
- <div class="pf-l-gallery__item">
4222
- <div class="pf-c-card">
4223
- <div class="pf-c-card__body">This is a card</div>
4224
- </div>
4033
+ <div class="pf-c-card">
4034
+ <div class="pf-c-card__body">This is a card</div>
4225
4035
  </div>
4226
- <div class="pf-l-gallery__item">
4227
- <div class="pf-c-card">
4228
- <div class="pf-c-card__body">This is a card</div>
4229
- </div>
4036
+ <div class="pf-c-card">
4037
+ <div class="pf-c-card__body">This is a card</div>
4230
4038
  </div>
4231
- <div class="pf-l-gallery__item">
4232
- <div class="pf-c-card">
4233
- <div class="pf-c-card__body">This is a card</div>
4234
- </div>
4039
+ <div class="pf-c-card">
4040
+ <div class="pf-c-card__body">This is a card</div>
4235
4041
  </div>
4236
- <div class="pf-l-gallery__item">
4237
- <div class="pf-c-card">
4238
- <div class="pf-c-card__body">This is a card</div>
4239
- </div>
4042
+ <div class="pf-c-card">
4043
+ <div class="pf-c-card__body">This is a card</div>
4240
4044
  </div>
4241
- <div class="pf-l-gallery__item">
4242
- <div class="pf-c-card">
4243
- <div class="pf-c-card__body">This is a card</div>
4244
- </div>
4045
+ <div class="pf-c-card">
4046
+ <div class="pf-c-card__body">This is a card</div>
4245
4047
  </div>
4246
- <div class="pf-l-gallery__item">
4247
- <div class="pf-c-card">
4248
- <div class="pf-c-card__body">This is a card</div>
4249
- </div>
4048
+ <div class="pf-c-card">
4049
+ <div class="pf-c-card__body">This is a card</div>
4250
4050
  </div>
4251
- <div class="pf-l-gallery__item">
4252
- <div class="pf-c-card">
4253
- <div class="pf-c-card__body">This is a card</div>
4254
- </div>
4051
+ <div class="pf-c-card">
4052
+ <div class="pf-c-card__body">This is a card</div>
4255
4053
  </div>
4256
- <div class="pf-l-gallery__item">
4257
- <div class="pf-c-card">
4258
- <div class="pf-c-card__body">This is a card</div>
4259
- </div>
4054
+ <div class="pf-c-card">
4055
+ <div class="pf-c-card__body">This is a card</div>
4260
4056
  </div>
4261
- <div class="pf-l-gallery__item">
4262
- <div class="pf-c-card">
4263
- <div class="pf-c-card__body">This is a card</div>
4264
- </div>
4057
+ <div class="pf-c-card">
4058
+ <div class="pf-c-card__body">This is a card</div>
4265
4059
  </div>
4266
- <div class="pf-l-gallery__item">
4267
- <div class="pf-c-card">
4268
- <div class="pf-c-card__body">This is a card</div>
4269
- </div>
4060
+ <div class="pf-c-card">
4061
+ <div class="pf-c-card__body">This is a card</div>
4270
4062
  </div>
4271
- <div class="pf-l-gallery__item">
4272
- <div class="pf-c-card">
4273
- <div class="pf-c-card__body">This is a card</div>
4274
- </div>
4063
+ <div class="pf-c-card">
4064
+ <div class="pf-c-card__body">This is a card</div>
4275
4065
  </div>
4276
- <div class="pf-l-gallery__item">
4277
- <div class="pf-c-card">
4278
- <div class="pf-c-card__body">This is a card</div>
4279
- </div>
4066
+ <div class="pf-c-card">
4067
+ <div class="pf-c-card__body">This is a card</div>
4280
4068
  </div>
4281
- <div class="pf-l-gallery__item">
4282
- <div class="pf-c-card">
4283
- <div class="pf-c-card__body">This is a card</div>
4284
- </div>
4069
+ <div class="pf-c-card">
4070
+ <div class="pf-c-card__body">This is a card</div>
4285
4071
  </div>
4286
- <div class="pf-l-gallery__item">
4287
- <div class="pf-c-card">
4288
- <div class="pf-c-card__body">This is a card</div>
4289
- </div>
4072
+ <div class="pf-c-card">
4073
+ <div class="pf-c-card__body">This is a card</div>
4290
4074
  </div>
4291
- <div class="pf-l-gallery__item">
4292
- <div class="pf-c-card">
4293
- <div class="pf-c-card__body">This is a card</div>
4294
- </div>
4075
+ <div class="pf-c-card">
4076
+ <div class="pf-c-card__body">This is a card</div>
4295
4077
  </div>
4296
- <div class="pf-l-gallery__item">
4297
- <div class="pf-c-card">
4298
- <div class="pf-c-card__body">This is a card</div>
4299
- </div>
4078
+ <div class="pf-c-card">
4079
+ <div class="pf-c-card__body">This is a card</div>
4300
4080
  </div>
4301
- <div class="pf-l-gallery__item">
4302
- <div class="pf-c-card">
4303
- <div class="pf-c-card__body">This is a card</div>
4304
- </div>
4081
+ <div class="pf-c-card">
4082
+ <div class="pf-c-card__body">This is a card</div>
4305
4083
  </div>
4306
- <div class="pf-l-gallery__item">
4307
- <div class="pf-c-card">
4308
- <div class="pf-c-card__body">This is a card</div>
4309
- </div>
4084
+ <div class="pf-c-card">
4085
+ <div class="pf-c-card__body">This is a card</div>
4310
4086
  </div>
4311
- <div class="pf-l-gallery__item">
4312
- <div class="pf-c-card">
4313
- <div class="pf-c-card__body">This is a card</div>
4314
- </div>
4087
+ <div class="pf-c-card">
4088
+ <div class="pf-c-card__body">This is a card</div>
4315
4089
  </div>
4316
- <div class="pf-l-gallery__item">
4317
- <div class="pf-c-card">
4318
- <div class="pf-c-card__body">This is a card</div>
4319
- </div>
4090
+ <div class="pf-c-card">
4091
+ <div class="pf-c-card__body">This is a card</div>
4320
4092
  </div>
4321
- <div class="pf-l-gallery__item">
4322
- <div class="pf-c-card">
4323
- <div class="pf-c-card__body">This is a card</div>
4324
- </div>
4093
+ <div class="pf-c-card">
4094
+ <div class="pf-c-card__body">This is a card</div>
4325
4095
  </div>
4326
- <div class="pf-l-gallery__item">
4327
- <div class="pf-c-card">
4328
- <div class="pf-c-card__body">This is a card</div>
4329
- </div>
4096
+ <div class="pf-c-card">
4097
+ <div class="pf-c-card__body">This is a card</div>
4330
4098
  </div>
4331
- <div class="pf-l-gallery__item">
4332
- <div class="pf-c-card">
4333
- <div class="pf-c-card__body">This is a card</div>
4334
- </div>
4099
+ <div class="pf-c-card">
4100
+ <div class="pf-c-card__body">This is a card</div>
4335
4101
  </div>
4336
- <div class="pf-l-gallery__item">
4337
- <div class="pf-c-card">
4338
- <div class="pf-c-card__body">This is a card</div>
4339
- </div>
4102
+ <div class="pf-c-card">
4103
+ <div class="pf-c-card__body">This is a card</div>
4340
4104
  </div>
4341
4105
  </div>
4342
4106
  </div>
@@ -4416,7 +4180,7 @@ wrapperTag: div
4416
4180
  <button
4417
4181
  class="pf-c-app-launcher__toggle"
4418
4182
  type="button"
4419
- id="-button"
4183
+ id="page-demo-sticky-section-bottom-masthead-icon-group--app-launcher-button"
4420
4184
  aria-expanded="false"
4421
4185
  aria-label="Application launcher"
4422
4186
  >
@@ -4427,14 +4191,24 @@ wrapperTag: div
4427
4191
  hidden
4428
4192
  >
4429
4193
  <div class="pf-c-app-launcher__menu-search">
4430
- <input
4431
- class="pf-c-form-control"
4432
- type="search"
4433
- aria-label="Type to filter"
4434
- placeholder="Filter by name..."
4435
- id="page-demo-sticky-section-bottom-masthead-application-launcher-text-input"
4436
- name="textInput1"
4437
- />
4194
+ <div class="pf-c-search-input">
4195
+ <div class="pf-c-search-input__bar">
4196
+ <span class="pf-c-search-input__text">
4197
+ <span class="pf-c-search-input__icon">
4198
+ <i
4199
+ class="fas fa-search fa-fw"
4200
+ aria-hidden="true"
4201
+ ></i>
4202
+ </span>
4203
+ <input
4204
+ class="pf-c-search-input__text-input"
4205
+ type="text"
4206
+ placeholder="Filter by name"
4207
+ aria-label="Filter by name"
4208
+ />
4209
+ </span>
4210
+ </div>
4211
+ </div>
4438
4212
  </div>
4439
4213
  <section class="pf-c-app-launcher__group">
4440
4214
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -4916,13 +4690,24 @@ wrapperTag: div
4916
4690
  </div>
4917
4691
  <div class="pf-c-menu__search">
4918
4692
  <div class="pf-c-menu__search-input">
4919
- <input
4920
- class="pf-c-form-control pf-m-search"
4921
- type="search"
4922
- id="page-demo-sticky-section-bottom-masthead-drilldown-menu-list-3-search-input"
4923
- name="page-demo-sticky-section-bottom-masthead-drilldown-menu-list-3-search-input"
4924
- aria-label="Search"
4925
- />
4693
+ <div class="pf-c-search-input">
4694
+ <div class="pf-c-search-input__bar">
4695
+ <span class="pf-c-search-input__text">
4696
+ <span class="pf-c-search-input__icon">
4697
+ <i
4698
+ class="fas fa-search fa-fw"
4699
+ aria-hidden="true"
4700
+ ></i>
4701
+ </span>
4702
+ <input
4703
+ class="pf-c-search-input__text-input"
4704
+ type="text"
4705
+ placeholder="Search"
4706
+ aria-label="Search"
4707
+ />
4708
+ </span>
4709
+ </div>
4710
+ </div>
4926
4711
  </div>
4927
4712
  </div>
4928
4713
  <hr class="pf-c-divider" />
@@ -5212,255 +4997,155 @@ wrapperTag: div
5212
4997
  <section class="pf-c-page__main-section pf-m-limit-width">
5213
4998
  <div class="pf-c-page__main-body">
5214
4999
  <div class="pf-l-gallery pf-m-gutter">
5215
- <div class="pf-l-gallery__item">
5216
- <div class="pf-c-card">
5217
- <div class="pf-c-card__body">This is a card</div>
5218
- </div>
5000
+ <div class="pf-c-card">
5001
+ <div class="pf-c-card__body">This is a card</div>
5219
5002
  </div>
5220
- <div class="pf-l-gallery__item">
5221
- <div class="pf-c-card">
5222
- <div class="pf-c-card__body">This is a card</div>
5223
- </div>
5003
+ <div class="pf-c-card">
5004
+ <div class="pf-c-card__body">This is a card</div>
5224
5005
  </div>
5225
- <div class="pf-l-gallery__item">
5226
- <div class="pf-c-card">
5227
- <div class="pf-c-card__body">This is a card</div>
5228
- </div>
5006
+ <div class="pf-c-card">
5007
+ <div class="pf-c-card__body">This is a card</div>
5229
5008
  </div>
5230
- <div class="pf-l-gallery__item">
5231
- <div class="pf-c-card">
5232
- <div class="pf-c-card__body">This is a card</div>
5233
- </div>
5009
+ <div class="pf-c-card">
5010
+ <div class="pf-c-card__body">This is a card</div>
5234
5011
  </div>
5235
- <div class="pf-l-gallery__item">
5236
- <div class="pf-c-card">
5237
- <div class="pf-c-card__body">This is a card</div>
5238
- </div>
5012
+ <div class="pf-c-card">
5013
+ <div class="pf-c-card__body">This is a card</div>
5239
5014
  </div>
5240
- <div class="pf-l-gallery__item">
5241
- <div class="pf-c-card">
5242
- <div class="pf-c-card__body">This is a card</div>
5243
- </div>
5015
+ <div class="pf-c-card">
5016
+ <div class="pf-c-card__body">This is a card</div>
5244
5017
  </div>
5245
- <div class="pf-l-gallery__item">
5246
- <div class="pf-c-card">
5247
- <div class="pf-c-card__body">This is a card</div>
5248
- </div>
5018
+ <div class="pf-c-card">
5019
+ <div class="pf-c-card__body">This is a card</div>
5249
5020
  </div>
5250
- <div class="pf-l-gallery__item">
5251
- <div class="pf-c-card">
5252
- <div class="pf-c-card__body">This is a card</div>
5253
- </div>
5021
+ <div class="pf-c-card">
5022
+ <div class="pf-c-card__body">This is a card</div>
5254
5023
  </div>
5255
- <div class="pf-l-gallery__item">
5256
- <div class="pf-c-card">
5257
- <div class="pf-c-card__body">This is a card</div>
5258
- </div>
5024
+ <div class="pf-c-card">
5025
+ <div class="pf-c-card__body">This is a card</div>
5259
5026
  </div>
5260
- <div class="pf-l-gallery__item">
5261
- <div class="pf-c-card">
5262
- <div class="pf-c-card__body">This is a card</div>
5263
- </div>
5027
+ <div class="pf-c-card">
5028
+ <div class="pf-c-card__body">This is a card</div>
5264
5029
  </div>
5265
- <div class="pf-l-gallery__item">
5266
- <div class="pf-c-card">
5267
- <div class="pf-c-card__body">This is a card</div>
5268
- </div>
5030
+ <div class="pf-c-card">
5031
+ <div class="pf-c-card__body">This is a card</div>
5269
5032
  </div>
5270
- <div class="pf-l-gallery__item">
5271
- <div class="pf-c-card">
5272
- <div class="pf-c-card__body">This is a card</div>
5273
- </div>
5033
+ <div class="pf-c-card">
5034
+ <div class="pf-c-card__body">This is a card</div>
5274
5035
  </div>
5275
- <div class="pf-l-gallery__item">
5276
- <div class="pf-c-card">
5277
- <div class="pf-c-card__body">This is a card</div>
5278
- </div>
5036
+ <div class="pf-c-card">
5037
+ <div class="pf-c-card__body">This is a card</div>
5279
5038
  </div>
5280
- <div class="pf-l-gallery__item">
5281
- <div class="pf-c-card">
5282
- <div class="pf-c-card__body">This is a card</div>
5283
- </div>
5039
+ <div class="pf-c-card">
5040
+ <div class="pf-c-card__body">This is a card</div>
5284
5041
  </div>
5285
- <div class="pf-l-gallery__item">
5286
- <div class="pf-c-card">
5287
- <div class="pf-c-card__body">This is a card</div>
5288
- </div>
5042
+ <div class="pf-c-card">
5043
+ <div class="pf-c-card__body">This is a card</div>
5289
5044
  </div>
5290
- <div class="pf-l-gallery__item">
5291
- <div class="pf-c-card">
5292
- <div class="pf-c-card__body">This is a card</div>
5293
- </div>
5045
+ <div class="pf-c-card">
5046
+ <div class="pf-c-card__body">This is a card</div>
5294
5047
  </div>
5295
- <div class="pf-l-gallery__item">
5296
- <div class="pf-c-card">
5297
- <div class="pf-c-card__body">This is a card</div>
5298
- </div>
5048
+ <div class="pf-c-card">
5049
+ <div class="pf-c-card__body">This is a card</div>
5299
5050
  </div>
5300
- <div class="pf-l-gallery__item">
5301
- <div class="pf-c-card">
5302
- <div class="pf-c-card__body">This is a card</div>
5303
- </div>
5051
+ <div class="pf-c-card">
5052
+ <div class="pf-c-card__body">This is a card</div>
5304
5053
  </div>
5305
- <div class="pf-l-gallery__item">
5306
- <div class="pf-c-card">
5307
- <div class="pf-c-card__body">This is a card</div>
5308
- </div>
5054
+ <div class="pf-c-card">
5055
+ <div class="pf-c-card__body">This is a card</div>
5309
5056
  </div>
5310
- <div class="pf-l-gallery__item">
5311
- <div class="pf-c-card">
5312
- <div class="pf-c-card__body">This is a card</div>
5313
- </div>
5057
+ <div class="pf-c-card">
5058
+ <div class="pf-c-card__body">This is a card</div>
5314
5059
  </div>
5315
- <div class="pf-l-gallery__item">
5316
- <div class="pf-c-card">
5317
- <div class="pf-c-card__body">This is a card</div>
5318
- </div>
5060
+ <div class="pf-c-card">
5061
+ <div class="pf-c-card__body">This is a card</div>
5319
5062
  </div>
5320
- <div class="pf-l-gallery__item">
5321
- <div class="pf-c-card">
5322
- <div class="pf-c-card__body">This is a card</div>
5323
- </div>
5063
+ <div class="pf-c-card">
5064
+ <div class="pf-c-card__body">This is a card</div>
5324
5065
  </div>
5325
- <div class="pf-l-gallery__item">
5326
- <div class="pf-c-card">
5327
- <div class="pf-c-card__body">This is a card</div>
5328
- </div>
5066
+ <div class="pf-c-card">
5067
+ <div class="pf-c-card__body">This is a card</div>
5329
5068
  </div>
5330
- <div class="pf-l-gallery__item">
5331
- <div class="pf-c-card">
5332
- <div class="pf-c-card__body">This is a card</div>
5333
- </div>
5069
+ <div class="pf-c-card">
5070
+ <div class="pf-c-card__body">This is a card</div>
5334
5071
  </div>
5335
- <div class="pf-l-gallery__item">
5336
- <div class="pf-c-card">
5337
- <div class="pf-c-card__body">This is a card</div>
5338
- </div>
5072
+ <div class="pf-c-card">
5073
+ <div class="pf-c-card__body">This is a card</div>
5339
5074
  </div>
5340
- <div class="pf-l-gallery__item">
5341
- <div class="pf-c-card">
5342
- <div class="pf-c-card__body">This is a card</div>
5343
- </div>
5075
+ <div class="pf-c-card">
5076
+ <div class="pf-c-card__body">This is a card</div>
5344
5077
  </div>
5345
- <div class="pf-l-gallery__item">
5346
- <div class="pf-c-card">
5347
- <div class="pf-c-card__body">This is a card</div>
5348
- </div>
5078
+ <div class="pf-c-card">
5079
+ <div class="pf-c-card__body">This is a card</div>
5349
5080
  </div>
5350
- <div class="pf-l-gallery__item">
5351
- <div class="pf-c-card">
5352
- <div class="pf-c-card__body">This is a card</div>
5353
- </div>
5081
+ <div class="pf-c-card">
5082
+ <div class="pf-c-card__body">This is a card</div>
5354
5083
  </div>
5355
- <div class="pf-l-gallery__item">
5356
- <div class="pf-c-card">
5357
- <div class="pf-c-card__body">This is a card</div>
5358
- </div>
5084
+ <div class="pf-c-card">
5085
+ <div class="pf-c-card__body">This is a card</div>
5359
5086
  </div>
5360
- <div class="pf-l-gallery__item">
5361
- <div class="pf-c-card">
5362
- <div class="pf-c-card__body">This is a card</div>
5363
- </div>
5087
+ <div class="pf-c-card">
5088
+ <div class="pf-c-card__body">This is a card</div>
5364
5089
  </div>
5365
- <div class="pf-l-gallery__item">
5366
- <div class="pf-c-card">
5367
- <div class="pf-c-card__body">This is a card</div>
5368
- </div>
5090
+ <div class="pf-c-card">
5091
+ <div class="pf-c-card__body">This is a card</div>
5369
5092
  </div>
5370
- <div class="pf-l-gallery__item">
5371
- <div class="pf-c-card">
5372
- <div class="pf-c-card__body">This is a card</div>
5373
- </div>
5093
+ <div class="pf-c-card">
5094
+ <div class="pf-c-card__body">This is a card</div>
5374
5095
  </div>
5375
- <div class="pf-l-gallery__item">
5376
- <div class="pf-c-card">
5377
- <div class="pf-c-card__body">This is a card</div>
5378
- </div>
5096
+ <div class="pf-c-card">
5097
+ <div class="pf-c-card__body">This is a card</div>
5379
5098
  </div>
5380
- <div class="pf-l-gallery__item">
5381
- <div class="pf-c-card">
5382
- <div class="pf-c-card__body">This is a card</div>
5383
- </div>
5099
+ <div class="pf-c-card">
5100
+ <div class="pf-c-card__body">This is a card</div>
5384
5101
  </div>
5385
- <div class="pf-l-gallery__item">
5386
- <div class="pf-c-card">
5387
- <div class="pf-c-card__body">This is a card</div>
5388
- </div>
5102
+ <div class="pf-c-card">
5103
+ <div class="pf-c-card__body">This is a card</div>
5389
5104
  </div>
5390
- <div class="pf-l-gallery__item">
5391
- <div class="pf-c-card">
5392
- <div class="pf-c-card__body">This is a card</div>
5393
- </div>
5105
+ <div class="pf-c-card">
5106
+ <div class="pf-c-card__body">This is a card</div>
5394
5107
  </div>
5395
- <div class="pf-l-gallery__item">
5396
- <div class="pf-c-card">
5397
- <div class="pf-c-card__body">This is a card</div>
5398
- </div>
5108
+ <div class="pf-c-card">
5109
+ <div class="pf-c-card__body">This is a card</div>
5399
5110
  </div>
5400
- <div class="pf-l-gallery__item">
5401
- <div class="pf-c-card">
5402
- <div class="pf-c-card__body">This is a card</div>
5403
- </div>
5111
+ <div class="pf-c-card">
5112
+ <div class="pf-c-card__body">This is a card</div>
5404
5113
  </div>
5405
- <div class="pf-l-gallery__item">
5406
- <div class="pf-c-card">
5407
- <div class="pf-c-card__body">This is a card</div>
5408
- </div>
5114
+ <div class="pf-c-card">
5115
+ <div class="pf-c-card__body">This is a card</div>
5409
5116
  </div>
5410
- <div class="pf-l-gallery__item">
5411
- <div class="pf-c-card">
5412
- <div class="pf-c-card__body">This is a card</div>
5413
- </div>
5117
+ <div class="pf-c-card">
5118
+ <div class="pf-c-card__body">This is a card</div>
5414
5119
  </div>
5415
- <div class="pf-l-gallery__item">
5416
- <div class="pf-c-card">
5417
- <div class="pf-c-card__body">This is a card</div>
5418
- </div>
5120
+ <div class="pf-c-card">
5121
+ <div class="pf-c-card__body">This is a card</div>
5419
5122
  </div>
5420
- <div class="pf-l-gallery__item">
5421
- <div class="pf-c-card">
5422
- <div class="pf-c-card__body">This is a card</div>
5423
- </div>
5123
+ <div class="pf-c-card">
5124
+ <div class="pf-c-card__body">This is a card</div>
5424
5125
  </div>
5425
- <div class="pf-l-gallery__item">
5426
- <div class="pf-c-card">
5427
- <div class="pf-c-card__body">This is a card</div>
5428
- </div>
5126
+ <div class="pf-c-card">
5127
+ <div class="pf-c-card__body">This is a card</div>
5429
5128
  </div>
5430
- <div class="pf-l-gallery__item">
5431
- <div class="pf-c-card">
5432
- <div class="pf-c-card__body">This is a card</div>
5433
- </div>
5129
+ <div class="pf-c-card">
5130
+ <div class="pf-c-card__body">This is a card</div>
5434
5131
  </div>
5435
- <div class="pf-l-gallery__item">
5436
- <div class="pf-c-card">
5437
- <div class="pf-c-card__body">This is a card</div>
5438
- </div>
5132
+ <div class="pf-c-card">
5133
+ <div class="pf-c-card__body">This is a card</div>
5439
5134
  </div>
5440
- <div class="pf-l-gallery__item">
5441
- <div class="pf-c-card">
5442
- <div class="pf-c-card__body">This is a card</div>
5443
- </div>
5135
+ <div class="pf-c-card">
5136
+ <div class="pf-c-card__body">This is a card</div>
5444
5137
  </div>
5445
- <div class="pf-l-gallery__item">
5446
- <div class="pf-c-card">
5447
- <div class="pf-c-card__body">This is a card</div>
5448
- </div>
5138
+ <div class="pf-c-card">
5139
+ <div class="pf-c-card__body">This is a card</div>
5449
5140
  </div>
5450
- <div class="pf-l-gallery__item">
5451
- <div class="pf-c-card">
5452
- <div class="pf-c-card__body">This is a card</div>
5453
- </div>
5141
+ <div class="pf-c-card">
5142
+ <div class="pf-c-card__body">This is a card</div>
5454
5143
  </div>
5455
- <div class="pf-l-gallery__item">
5456
- <div class="pf-c-card">
5457
- <div class="pf-c-card__body">This is a card</div>
5458
- </div>
5144
+ <div class="pf-c-card">
5145
+ <div class="pf-c-card__body">This is a card</div>
5459
5146
  </div>
5460
- <div class="pf-l-gallery__item">
5461
- <div class="pf-c-card">
5462
- <div class="pf-c-card__body">This is a card</div>
5463
- </div>
5147
+ <div class="pf-c-card">
5148
+ <div class="pf-c-card__body">This is a card</div>
5464
5149
  </div>
5465
5150
  </div>
5466
5151
  </div>
@@ -5547,7 +5232,7 @@ wrapperTag: div
5547
5232
  <button
5548
5233
  class="pf-c-app-launcher__toggle"
5549
5234
  type="button"
5550
- id="-button"
5235
+ id="page-demo-overflow-scroll-masthead-icon-group--app-launcher-button"
5551
5236
  aria-expanded="false"
5552
5237
  aria-label="Application launcher"
5553
5238
  >
@@ -5558,14 +5243,24 @@ wrapperTag: div
5558
5243
  hidden
5559
5244
  >
5560
5245
  <div class="pf-c-app-launcher__menu-search">
5561
- <input
5562
- class="pf-c-form-control"
5563
- type="search"
5564
- aria-label="Type to filter"
5565
- placeholder="Filter by name..."
5566
- id="page-demo-overflow-scroll-masthead-application-launcher-text-input"
5567
- name="textInput1"
5568
- />
5246
+ <div class="pf-c-search-input">
5247
+ <div class="pf-c-search-input__bar">
5248
+ <span class="pf-c-search-input__text">
5249
+ <span class="pf-c-search-input__icon">
5250
+ <i
5251
+ class="fas fa-search fa-fw"
5252
+ aria-hidden="true"
5253
+ ></i>
5254
+ </span>
5255
+ <input
5256
+ class="pf-c-search-input__text-input"
5257
+ type="text"
5258
+ placeholder="Filter by name"
5259
+ aria-label="Filter by name"
5260
+ />
5261
+ </span>
5262
+ </div>
5263
+ </div>
5569
5264
  </div>
5570
5265
  <section class="pf-c-app-launcher__group">
5571
5266
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -6047,13 +5742,24 @@ wrapperTag: div
6047
5742
  </div>
6048
5743
  <div class="pf-c-menu__search">
6049
5744
  <div class="pf-c-menu__search-input">
6050
- <input
6051
- class="pf-c-form-control pf-m-search"
6052
- type="search"
6053
- id="page-demo-overflow-scroll-masthead-drilldown-menu-list-3-search-input"
6054
- name="page-demo-overflow-scroll-masthead-drilldown-menu-list-3-search-input"
6055
- aria-label="Search"
6056
- />
5745
+ <div class="pf-c-search-input">
5746
+ <div class="pf-c-search-input__bar">
5747
+ <span class="pf-c-search-input__text">
5748
+ <span class="pf-c-search-input__icon">
5749
+ <i
5750
+ class="fas fa-search fa-fw"
5751
+ aria-hidden="true"
5752
+ ></i>
5753
+ </span>
5754
+ <input
5755
+ class="pf-c-search-input__text-input"
5756
+ type="text"
5757
+ placeholder="Search"
5758
+ aria-label="Search"
5759
+ />
5760
+ </span>
5761
+ </div>
5762
+ </div>
6057
5763
  </div>
6058
5764
  </div>
6059
5765
  <hr class="pf-c-divider" />
@@ -6347,255 +6053,155 @@ wrapperTag: div
6347
6053
  >
6348
6054
  <div class="pf-c-page__main-body">
6349
6055
  <div class="pf-l-gallery pf-m-gutter">
6350
- <div class="pf-l-gallery__item">
6351
- <div class="pf-c-card">
6352
- <div class="pf-c-card__body">This is a card</div>
6353
- </div>
6056
+ <div class="pf-c-card">
6057
+ <div class="pf-c-card__body">This is a card</div>
6354
6058
  </div>
6355
- <div class="pf-l-gallery__item">
6356
- <div class="pf-c-card">
6357
- <div class="pf-c-card__body">This is a card</div>
6358
- </div>
6059
+ <div class="pf-c-card">
6060
+ <div class="pf-c-card__body">This is a card</div>
6359
6061
  </div>
6360
- <div class="pf-l-gallery__item">
6361
- <div class="pf-c-card">
6362
- <div class="pf-c-card__body">This is a card</div>
6363
- </div>
6062
+ <div class="pf-c-card">
6063
+ <div class="pf-c-card__body">This is a card</div>
6364
6064
  </div>
6365
- <div class="pf-l-gallery__item">
6366
- <div class="pf-c-card">
6367
- <div class="pf-c-card__body">This is a card</div>
6368
- </div>
6065
+ <div class="pf-c-card">
6066
+ <div class="pf-c-card__body">This is a card</div>
6369
6067
  </div>
6370
- <div class="pf-l-gallery__item">
6371
- <div class="pf-c-card">
6372
- <div class="pf-c-card__body">This is a card</div>
6373
- </div>
6068
+ <div class="pf-c-card">
6069
+ <div class="pf-c-card__body">This is a card</div>
6374
6070
  </div>
6375
- <div class="pf-l-gallery__item">
6376
- <div class="pf-c-card">
6377
- <div class="pf-c-card__body">This is a card</div>
6378
- </div>
6071
+ <div class="pf-c-card">
6072
+ <div class="pf-c-card__body">This is a card</div>
6379
6073
  </div>
6380
- <div class="pf-l-gallery__item">
6381
- <div class="pf-c-card">
6382
- <div class="pf-c-card__body">This is a card</div>
6383
- </div>
6074
+ <div class="pf-c-card">
6075
+ <div class="pf-c-card__body">This is a card</div>
6384
6076
  </div>
6385
- <div class="pf-l-gallery__item">
6386
- <div class="pf-c-card">
6387
- <div class="pf-c-card__body">This is a card</div>
6388
- </div>
6077
+ <div class="pf-c-card">
6078
+ <div class="pf-c-card__body">This is a card</div>
6389
6079
  </div>
6390
- <div class="pf-l-gallery__item">
6391
- <div class="pf-c-card">
6392
- <div class="pf-c-card__body">This is a card</div>
6393
- </div>
6080
+ <div class="pf-c-card">
6081
+ <div class="pf-c-card__body">This is a card</div>
6394
6082
  </div>
6395
- <div class="pf-l-gallery__item">
6396
- <div class="pf-c-card">
6397
- <div class="pf-c-card__body">This is a card</div>
6398
- </div>
6083
+ <div class="pf-c-card">
6084
+ <div class="pf-c-card__body">This is a card</div>
6399
6085
  </div>
6400
- <div class="pf-l-gallery__item">
6401
- <div class="pf-c-card">
6402
- <div class="pf-c-card__body">This is a card</div>
6403
- </div>
6086
+ <div class="pf-c-card">
6087
+ <div class="pf-c-card__body">This is a card</div>
6404
6088
  </div>
6405
- <div class="pf-l-gallery__item">
6406
- <div class="pf-c-card">
6407
- <div class="pf-c-card__body">This is a card</div>
6408
- </div>
6089
+ <div class="pf-c-card">
6090
+ <div class="pf-c-card__body">This is a card</div>
6409
6091
  </div>
6410
- <div class="pf-l-gallery__item">
6411
- <div class="pf-c-card">
6412
- <div class="pf-c-card__body">This is a card</div>
6413
- </div>
6092
+ <div class="pf-c-card">
6093
+ <div class="pf-c-card__body">This is a card</div>
6414
6094
  </div>
6415
- <div class="pf-l-gallery__item">
6416
- <div class="pf-c-card">
6417
- <div class="pf-c-card__body">This is a card</div>
6418
- </div>
6095
+ <div class="pf-c-card">
6096
+ <div class="pf-c-card__body">This is a card</div>
6419
6097
  </div>
6420
- <div class="pf-l-gallery__item">
6421
- <div class="pf-c-card">
6422
- <div class="pf-c-card__body">This is a card</div>
6423
- </div>
6098
+ <div class="pf-c-card">
6099
+ <div class="pf-c-card__body">This is a card</div>
6424
6100
  </div>
6425
- <div class="pf-l-gallery__item">
6426
- <div class="pf-c-card">
6427
- <div class="pf-c-card__body">This is a card</div>
6428
- </div>
6101
+ <div class="pf-c-card">
6102
+ <div class="pf-c-card__body">This is a card</div>
6429
6103
  </div>
6430
- <div class="pf-l-gallery__item">
6431
- <div class="pf-c-card">
6432
- <div class="pf-c-card__body">This is a card</div>
6433
- </div>
6104
+ <div class="pf-c-card">
6105
+ <div class="pf-c-card__body">This is a card</div>
6434
6106
  </div>
6435
- <div class="pf-l-gallery__item">
6436
- <div class="pf-c-card">
6437
- <div class="pf-c-card__body">This is a card</div>
6438
- </div>
6107
+ <div class="pf-c-card">
6108
+ <div class="pf-c-card__body">This is a card</div>
6439
6109
  </div>
6440
- <div class="pf-l-gallery__item">
6441
- <div class="pf-c-card">
6442
- <div class="pf-c-card__body">This is a card</div>
6443
- </div>
6110
+ <div class="pf-c-card">
6111
+ <div class="pf-c-card__body">This is a card</div>
6444
6112
  </div>
6445
- <div class="pf-l-gallery__item">
6446
- <div class="pf-c-card">
6447
- <div class="pf-c-card__body">This is a card</div>
6448
- </div>
6113
+ <div class="pf-c-card">
6114
+ <div class="pf-c-card__body">This is a card</div>
6449
6115
  </div>
6450
- <div class="pf-l-gallery__item">
6451
- <div class="pf-c-card">
6452
- <div class="pf-c-card__body">This is a card</div>
6453
- </div>
6116
+ <div class="pf-c-card">
6117
+ <div class="pf-c-card__body">This is a card</div>
6454
6118
  </div>
6455
- <div class="pf-l-gallery__item">
6456
- <div class="pf-c-card">
6457
- <div class="pf-c-card__body">This is a card</div>
6458
- </div>
6119
+ <div class="pf-c-card">
6120
+ <div class="pf-c-card__body">This is a card</div>
6459
6121
  </div>
6460
- <div class="pf-l-gallery__item">
6461
- <div class="pf-c-card">
6462
- <div class="pf-c-card__body">This is a card</div>
6463
- </div>
6122
+ <div class="pf-c-card">
6123
+ <div class="pf-c-card__body">This is a card</div>
6464
6124
  </div>
6465
- <div class="pf-l-gallery__item">
6466
- <div class="pf-c-card">
6467
- <div class="pf-c-card__body">This is a card</div>
6468
- </div>
6125
+ <div class="pf-c-card">
6126
+ <div class="pf-c-card__body">This is a card</div>
6469
6127
  </div>
6470
- <div class="pf-l-gallery__item">
6471
- <div class="pf-c-card">
6472
- <div class="pf-c-card__body">This is a card</div>
6473
- </div>
6128
+ <div class="pf-c-card">
6129
+ <div class="pf-c-card__body">This is a card</div>
6474
6130
  </div>
6475
- <div class="pf-l-gallery__item">
6476
- <div class="pf-c-card">
6477
- <div class="pf-c-card__body">This is a card</div>
6478
- </div>
6131
+ <div class="pf-c-card">
6132
+ <div class="pf-c-card__body">This is a card</div>
6479
6133
  </div>
6480
- <div class="pf-l-gallery__item">
6481
- <div class="pf-c-card">
6482
- <div class="pf-c-card__body">This is a card</div>
6483
- </div>
6134
+ <div class="pf-c-card">
6135
+ <div class="pf-c-card__body">This is a card</div>
6484
6136
  </div>
6485
- <div class="pf-l-gallery__item">
6486
- <div class="pf-c-card">
6487
- <div class="pf-c-card__body">This is a card</div>
6488
- </div>
6137
+ <div class="pf-c-card">
6138
+ <div class="pf-c-card__body">This is a card</div>
6489
6139
  </div>
6490
- <div class="pf-l-gallery__item">
6491
- <div class="pf-c-card">
6492
- <div class="pf-c-card__body">This is a card</div>
6493
- </div>
6140
+ <div class="pf-c-card">
6141
+ <div class="pf-c-card__body">This is a card</div>
6494
6142
  </div>
6495
- <div class="pf-l-gallery__item">
6496
- <div class="pf-c-card">
6497
- <div class="pf-c-card__body">This is a card</div>
6498
- </div>
6143
+ <div class="pf-c-card">
6144
+ <div class="pf-c-card__body">This is a card</div>
6499
6145
  </div>
6500
- <div class="pf-l-gallery__item">
6501
- <div class="pf-c-card">
6502
- <div class="pf-c-card__body">This is a card</div>
6503
- </div>
6146
+ <div class="pf-c-card">
6147
+ <div class="pf-c-card__body">This is a card</div>
6504
6148
  </div>
6505
- <div class="pf-l-gallery__item">
6506
- <div class="pf-c-card">
6507
- <div class="pf-c-card__body">This is a card</div>
6508
- </div>
6149
+ <div class="pf-c-card">
6150
+ <div class="pf-c-card__body">This is a card</div>
6509
6151
  </div>
6510
- <div class="pf-l-gallery__item">
6511
- <div class="pf-c-card">
6512
- <div class="pf-c-card__body">This is a card</div>
6513
- </div>
6152
+ <div class="pf-c-card">
6153
+ <div class="pf-c-card__body">This is a card</div>
6514
6154
  </div>
6515
- <div class="pf-l-gallery__item">
6516
- <div class="pf-c-card">
6517
- <div class="pf-c-card__body">This is a card</div>
6518
- </div>
6155
+ <div class="pf-c-card">
6156
+ <div class="pf-c-card__body">This is a card</div>
6519
6157
  </div>
6520
- <div class="pf-l-gallery__item">
6521
- <div class="pf-c-card">
6522
- <div class="pf-c-card__body">This is a card</div>
6523
- </div>
6158
+ <div class="pf-c-card">
6159
+ <div class="pf-c-card__body">This is a card</div>
6524
6160
  </div>
6525
- <div class="pf-l-gallery__item">
6526
- <div class="pf-c-card">
6527
- <div class="pf-c-card__body">This is a card</div>
6528
- </div>
6161
+ <div class="pf-c-card">
6162
+ <div class="pf-c-card__body">This is a card</div>
6529
6163
  </div>
6530
- <div class="pf-l-gallery__item">
6531
- <div class="pf-c-card">
6532
- <div class="pf-c-card__body">This is a card</div>
6533
- </div>
6164
+ <div class="pf-c-card">
6165
+ <div class="pf-c-card__body">This is a card</div>
6534
6166
  </div>
6535
- <div class="pf-l-gallery__item">
6536
- <div class="pf-c-card">
6537
- <div class="pf-c-card__body">This is a card</div>
6538
- </div>
6167
+ <div class="pf-c-card">
6168
+ <div class="pf-c-card__body">This is a card</div>
6539
6169
  </div>
6540
- <div class="pf-l-gallery__item">
6541
- <div class="pf-c-card">
6542
- <div class="pf-c-card__body">This is a card</div>
6543
- </div>
6170
+ <div class="pf-c-card">
6171
+ <div class="pf-c-card__body">This is a card</div>
6544
6172
  </div>
6545
- <div class="pf-l-gallery__item">
6546
- <div class="pf-c-card">
6547
- <div class="pf-c-card__body">This is a card</div>
6548
- </div>
6173
+ <div class="pf-c-card">
6174
+ <div class="pf-c-card__body">This is a card</div>
6549
6175
  </div>
6550
- <div class="pf-l-gallery__item">
6551
- <div class="pf-c-card">
6552
- <div class="pf-c-card__body">This is a card</div>
6553
- </div>
6176
+ <div class="pf-c-card">
6177
+ <div class="pf-c-card__body">This is a card</div>
6554
6178
  </div>
6555
- <div class="pf-l-gallery__item">
6556
- <div class="pf-c-card">
6557
- <div class="pf-c-card__body">This is a card</div>
6558
- </div>
6179
+ <div class="pf-c-card">
6180
+ <div class="pf-c-card__body">This is a card</div>
6559
6181
  </div>
6560
- <div class="pf-l-gallery__item">
6561
- <div class="pf-c-card">
6562
- <div class="pf-c-card__body">This is a card</div>
6563
- </div>
6182
+ <div class="pf-c-card">
6183
+ <div class="pf-c-card__body">This is a card</div>
6564
6184
  </div>
6565
- <div class="pf-l-gallery__item">
6566
- <div class="pf-c-card">
6567
- <div class="pf-c-card__body">This is a card</div>
6568
- </div>
6185
+ <div class="pf-c-card">
6186
+ <div class="pf-c-card__body">This is a card</div>
6569
6187
  </div>
6570
- <div class="pf-l-gallery__item">
6571
- <div class="pf-c-card">
6572
- <div class="pf-c-card__body">This is a card</div>
6573
- </div>
6188
+ <div class="pf-c-card">
6189
+ <div class="pf-c-card__body">This is a card</div>
6574
6190
  </div>
6575
- <div class="pf-l-gallery__item">
6576
- <div class="pf-c-card">
6577
- <div class="pf-c-card__body">This is a card</div>
6578
- </div>
6191
+ <div class="pf-c-card">
6192
+ <div class="pf-c-card__body">This is a card</div>
6579
6193
  </div>
6580
- <div class="pf-l-gallery__item">
6581
- <div class="pf-c-card">
6582
- <div class="pf-c-card__body">This is a card</div>
6583
- </div>
6194
+ <div class="pf-c-card">
6195
+ <div class="pf-c-card__body">This is a card</div>
6584
6196
  </div>
6585
- <div class="pf-l-gallery__item">
6586
- <div class="pf-c-card">
6587
- <div class="pf-c-card__body">This is a card</div>
6588
- </div>
6197
+ <div class="pf-c-card">
6198
+ <div class="pf-c-card__body">This is a card</div>
6589
6199
  </div>
6590
- <div class="pf-l-gallery__item">
6591
- <div class="pf-c-card">
6592
- <div class="pf-c-card__body">This is a card</div>
6593
- </div>
6200
+ <div class="pf-c-card">
6201
+ <div class="pf-c-card__body">This is a card</div>
6594
6202
  </div>
6595
- <div class="pf-l-gallery__item">
6596
- <div class="pf-c-card">
6597
- <div class="pf-c-card__body">This is a card</div>
6598
- </div>
6203
+ <div class="pf-c-card">
6204
+ <div class="pf-c-card__body">This is a card</div>
6599
6205
  </div>
6600
6206
  </div>
6601
6207
  </div>
@@ -6612,16 +6218,16 @@ wrapperTag: div
6612
6218
 
6613
6219
  ```
6614
6220
 
6615
- ### Centered content
6221
+ ### Centered section
6616
6222
 
6617
6223
  ```html isFullscreen
6618
- <div class="pf-c-page" id="page-demo-centered-contentt">
6224
+ <div class="pf-c-page" id="page-demo-centered-section">
6619
6225
  <a
6620
6226
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
6621
- href="#main-content-page-demo-centered-contentt"
6227
+ href="#main-content-page-demo-centered-section"
6622
6228
  >Skip to content</a>
6623
6229
 
6624
- <header class="pf-c-masthead" id="page-demo-centered-contentt-masthead">
6230
+ <header class="pf-c-masthead" id="page-demo-centered-section-masthead">
6625
6231
  <span class="pf-c-masthead__toggle">
6626
6232
  <button
6627
6233
  class="pf-c-button pf-m-plain"
@@ -6652,7 +6258,7 @@ wrapperTag: div
6652
6258
  <div class="pf-c-masthead__content">
6653
6259
  <div
6654
6260
  class="pf-c-toolbar pf-m-full-height pf-m-static"
6655
- id="page-demo-centered-contentt-masthead-toolbar"
6261
+ id="page-demo-centered-section-masthead-toolbar"
6656
6262
  >
6657
6263
  <div class="pf-c-toolbar__content">
6658
6264
  <div class="pf-c-toolbar__content-section">
@@ -6677,12 +6283,12 @@ wrapperTag: div
6677
6283
  <nav
6678
6284
  class="pf-c-app-launcher"
6679
6285
  aria-label="Application launcher"
6680
- id="page-demo-centered-contentt-masthead-icon-group--app-launcher"
6286
+ id="page-demo-centered-section-masthead-icon-group--app-launcher"
6681
6287
  >
6682
6288
  <button
6683
6289
  class="pf-c-app-launcher__toggle"
6684
6290
  type="button"
6685
- id="-button"
6291
+ id="page-demo-centered-section-masthead-icon-group--app-launcher-button"
6686
6292
  aria-expanded="false"
6687
6293
  aria-label="Application launcher"
6688
6294
  >
@@ -6693,14 +6299,24 @@ wrapperTag: div
6693
6299
  hidden
6694
6300
  >
6695
6301
  <div class="pf-c-app-launcher__menu-search">
6696
- <input
6697
- class="pf-c-form-control"
6698
- type="search"
6699
- aria-label="Type to filter"
6700
- placeholder="Filter by name..."
6701
- id="page-demo-centered-contentt-masthead-application-launcher-text-input"
6702
- name="textInput1"
6703
- />
6302
+ <div class="pf-c-search-input">
6303
+ <div class="pf-c-search-input__bar">
6304
+ <span class="pf-c-search-input__text">
6305
+ <span class="pf-c-search-input__icon">
6306
+ <i
6307
+ class="fas fa-search fa-fw"
6308
+ aria-hidden="true"
6309
+ ></i>
6310
+ </span>
6311
+ <input
6312
+ class="pf-c-search-input__text-input"
6313
+ type="text"
6314
+ placeholder="Filter by name"
6315
+ aria-label="Filter by name"
6316
+ />
6317
+ </span>
6318
+ </div>
6319
+ </div>
6704
6320
  </div>
6705
6321
  <section class="pf-c-app-launcher__group">
6706
6322
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -6812,7 +6428,7 @@ wrapperTag: div
6812
6428
  <div class="pf-c-dropdown">
6813
6429
  <button
6814
6430
  class="pf-c-dropdown__toggle pf-m-plain"
6815
- id="page-demo-centered-contentt-masthead-settings-button"
6431
+ id="page-demo-centered-section-masthead-settings-button"
6816
6432
  aria-expanded="false"
6817
6433
  type="button"
6818
6434
  aria-label="Settings"
@@ -6821,7 +6437,7 @@ wrapperTag: div
6821
6437
  </button>
6822
6438
  <ul
6823
6439
  class="pf-c-dropdown__menu pf-m-align-right"
6824
- aria-labelledby="page-demo-centered-contentt-masthead-settings-button"
6440
+ aria-labelledby="page-demo-centered-section-masthead-settings-button"
6825
6441
  hidden
6826
6442
  >
6827
6443
  <li>
@@ -6843,7 +6459,7 @@ wrapperTag: div
6843
6459
  <div class="pf-c-dropdown">
6844
6460
  <button
6845
6461
  class="pf-c-dropdown__toggle pf-m-plain"
6846
- id="page-demo-centered-contentt-masthead-help-button"
6462
+ id="page-demo-centered-section-masthead-help-button"
6847
6463
  aria-expanded="false"
6848
6464
  type="button"
6849
6465
  aria-label="Help"
@@ -6852,7 +6468,7 @@ wrapperTag: div
6852
6468
  </button>
6853
6469
  <ul
6854
6470
  class="pf-c-dropdown__menu pf-m-align-right"
6855
- aria-labelledby="page-demo-centered-contentt-masthead-help-button"
6471
+ aria-labelledby="page-demo-centered-section-masthead-help-button"
6856
6472
  hidden
6857
6473
  >
6858
6474
  <li>
@@ -7182,13 +6798,24 @@ wrapperTag: div
7182
6798
  </div>
7183
6799
  <div class="pf-c-menu__search">
7184
6800
  <div class="pf-c-menu__search-input">
7185
- <input
7186
- class="pf-c-form-control pf-m-search"
7187
- type="search"
7188
- id="page-demo-centered-contentt-masthead-drilldown-menu-list-3-search-input"
7189
- name="page-demo-centered-contentt-masthead-drilldown-menu-list-3-search-input"
7190
- aria-label="Search"
7191
- />
6801
+ <div class="pf-c-search-input">
6802
+ <div class="pf-c-search-input__bar">
6803
+ <span class="pf-c-search-input__text">
6804
+ <span class="pf-c-search-input__icon">
6805
+ <i
6806
+ class="fas fa-search fa-fw"
6807
+ aria-hidden="true"
6808
+ ></i>
6809
+ </span>
6810
+ <input
6811
+ class="pf-c-search-input__text-input"
6812
+ type="text"
6813
+ placeholder="Search"
6814
+ aria-label="Search"
6815
+ />
6816
+ </span>
6817
+ </div>
6818
+ </div>
7192
6819
  </div>
7193
6820
  </div>
7194
6821
  <hr class="pf-c-divider" />
@@ -7343,7 +6970,7 @@ wrapperTag: div
7343
6970
  >
7344
6971
  <button
7345
6972
  class="pf-c-dropdown__toggle"
7346
- id="page-demo-centered-contentt-masthead-profile-button"
6973
+ id="page-demo-centered-section-masthead-profile-button"
7347
6974
  aria-expanded="false"
7348
6975
  type="button"
7349
6976
  >
@@ -7399,7 +7026,7 @@ wrapperTag: div
7399
7026
  <div class="pf-c-page__sidebar-body">
7400
7027
  <nav
7401
7028
  class="pf-c-nav"
7402
- id="page-demo-centered-contentt-primary-nav"
7029
+ id="page-demo-centered-section-primary-nav"
7403
7030
  aria-label="Global"
7404
7031
  >
7405
7032
  <ul class="pf-c-nav__list">
@@ -7429,98 +7056,70 @@ wrapperTag: div
7429
7056
  <main
7430
7057
  class="pf-c-page__main"
7431
7058
  tabindex="-1"
7432
- id="main-content-page-demo-centered-contentt"
7059
+ id="main-content-page-demo-centered-section"
7433
7060
  >
7434
- <section
7435
- class="pf-c-page__main-section pf-m-limit-width pf-m-align-center pf-m-fill"
7436
- >
7437
- <div class="pf-c-page__main-body">
7438
- <div class="pf-l-bullseye">
7439
- <div class="pf-c-content pf-u-text-align-center">
7440
- <h1>Centered title (content centered)</h1>
7441
- <p>Page section filled, width limited, centered.</p>
7442
- </div>
7443
- </div>
7444
- </div>
7445
- </section>
7446
- <hr class="pf-c-divider" />
7447
7061
  <section
7448
7062
  class="pf-c-page__main-section pf-m-limit-width pf-m-align-center pf-m-light"
7449
7063
  >
7450
7064
  <div class="pf-c-page__main-body">
7451
- <div class="pf-l-bullseye">
7452
- <div class="pf-c-content pf-u-text-align-center">
7453
- <h2>Centered page section (content centered)</h2>
7454
- <p>Page section light, width limited, centered.</p>
7455
- </div>
7065
+ <div class="pf-c-content">
7066
+ <h1>Centering page sections</h1>
7067
+ <p>
7068
+ When a width limited page section is wider than the value of
7069
+ <code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
7070
+ </p>
7071
+ <p>All of the page sections on this page are centered.</p>
7456
7072
  </div>
7457
7073
  </div>
7458
7074
  </section>
7459
7075
  <hr class="pf-c-divider" />
7460
7076
  <section class="pf-c-page__main-section pf-m-limit-width pf-m-align-center">
7461
7077
  <div class="pf-c-page__main-body">
7462
- <div class="pf-c-card">
7463
- <div class="pf-c-card__title">
7464
- <h2>Card title</h2>
7078
+ <div class="pf-l-gallery pf-m-gutter">
7079
+ <div class="pf-c-card">
7080
+ <div class="pf-c-card__body">This is a card</div>
7465
7081
  </div>
7466
- <div class="pf-c-card__body">
7467
- <p>Page section width limited, centered. Full width card.</p>
7082
+ <div class="pf-c-card">
7083
+ <div class="pf-c-card__body">This is a card</div>
7468
7084
  </div>
7469
- </div>
7470
- </div>
7471
- </section>
7472
- <hr class="pf-c-divider" />
7473
- <section class="pf-c-page__main-section">
7474
- <div
7475
- class="pf-l-grid pf-m-gutter pf-m-all-6-col-on-md pf-m-all-3-col-on-xl"
7476
- >
7477
- <div class="pf-l-grid__item pf-m-12-col">
7478
- <h2 class="pf-u-text-align-center">(Default page section)</h2>
7479
- </div>
7480
- <div class="pf-c-card">
7481
- <div class="pf-c-card__header">Card header</div>
7482
- <div class="pf-c-card__body">Card body</div>
7483
- </div>
7484
- <div class="pf-c-card">
7485
- <div class="pf-c-card__header">Card header</div>
7486
- <div class="pf-c-card__body">Card body</div>
7487
- </div>
7488
- <div class="pf-c-card">
7489
- <div class="pf-c-card__header">Card header</div>
7490
- <div class="pf-c-card__body">Card body</div>
7491
- </div>
7492
- <div class="pf-c-card">
7493
- <div class="pf-c-card__header">Card header</div>
7494
- <div class="pf-c-card__body">Card body</div>
7495
- </div>
7496
- </div>
7497
- </section>
7498
- <hr class="pf-c-divider" />
7499
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-align-center">
7500
- <div class="pf-c-page__main-body">
7501
- <div
7502
- class="pf-l-grid pf-m-gutter pf-m-all-6-col-on-md pf-m-all-3-col-on-xl"
7503
- >
7504
- <div class="pf-l-grid__item pf-m-12-col">
7505
- <h2
7506
- class="pf-u-text-align-center"
7507
- >(Page section width limited, centered.)</h2>
7085
+ <div class="pf-c-card">
7086
+ <div class="pf-c-card__body">This is a card</div>
7087
+ </div>
7088
+ <div class="pf-c-card">
7089
+ <div class="pf-c-card__body">This is a card</div>
7508
7090
  </div>
7509
7091
  <div class="pf-c-card">
7510
- <div class="pf-c-card__header">Card header</div>
7511
- <div class="pf-c-card__body">Card body</div>
7092
+ <div class="pf-c-card__body">This is a card</div>
7512
7093
  </div>
7513
7094
  <div class="pf-c-card">
7514
- <div class="pf-c-card__header">Card header</div>
7515
- <div class="pf-c-card__body">Card body</div>
7095
+ <div class="pf-c-card__body">This is a card</div>
7516
7096
  </div>
7517
7097
  <div class="pf-c-card">
7518
- <div class="pf-c-card__header">Card header</div>
7519
- <div class="pf-c-card__body">Card body</div>
7098
+ <div class="pf-c-card__body">This is a card</div>
7520
7099
  </div>
7521
7100
  <div class="pf-c-card">
7522
- <div class="pf-c-card__header">Card header</div>
7523
- <div class="pf-c-card__body">Card body</div>
7101
+ <div class="pf-c-card__body">This is a card</div>
7102
+ </div>
7103
+ <div class="pf-c-card">
7104
+ <div class="pf-c-card__body">This is a card</div>
7105
+ </div>
7106
+ <div class="pf-c-card">
7107
+ <div class="pf-c-card__body">This is a card</div>
7108
+ </div>
7109
+ </div>
7110
+ </div>
7111
+ </section>
7112
+ <hr class="pf-c-divider" />
7113
+ <section
7114
+ class="pf-c-page__main-section pf-m-limit-width pf-m-align-center pf-u-text-align-center"
7115
+ >
7116
+ <div class="pf-c-page__main-body">
7117
+ <div class="pf-c-card">
7118
+ <div class="pf-c-card__body">
7119
+ <p>
7120
+ The content in this section is also centered using the
7121
+ <code>.pf-u-text-align-center</code> utility class.
7122
+ </p>
7524
7123
  </div>
7525
7124
  </div>
7526
7125
  </div>