@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

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 (341) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +66 -116
  92. package/components/Form/form.scss +63 -128
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/components/Login/examples/Login.md CHANGED
@@ -10,7 +10,7 @@ wrapperTag: div
10
10
  ```html isFullscreen
11
11
  <div
12
12
  class="pf-v5-c-background-image"
13
- style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
13
+ style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
14
14
  ></div>
15
15
  <div class="pf-v5-c-login">
16
16
  <div class="pf-v5-c-login__container">
@@ -19,6 +19,7 @@ wrapperTag: div
19
19
  class="pf-v5-c-brand"
20
20
  src="/assets/images/pf_logo_color.svg"
21
21
  alt="PatternFly Logo"
22
+ style="--pf-v5-c-brand--Height:48px;"
22
23
  />
23
24
  </header>
24
25
  <main class="pf-v5-c-login__main">
@@ -99,89 +100,99 @@ wrapperTag: div
99
100
  <footer class="pf-v5-c-login__main-footer">
100
101
  <ul class="pf-v5-c-login__main-footer-links" role="list">
101
102
  <li class="pf-v5-c-login__main-footer-links-item">
102
- <a
103
- href="#"
104
- class="pf-v5-c-login__main-footer-links-item-link"
103
+ <button
104
+ class="pf-v5-c-button pf-m-plain"
105
+ type="button"
105
106
  aria-label="Log in with Google"
106
107
  >
107
108
  <svg
108
109
  aria-hidden="true"
109
110
  xmlns="http://www.w3.org/2000/svg"
111
+ fill="currentColor"
110
112
  viewBox="0 0 488 512"
113
+ class="pf-v5-svg"
111
114
  >
112
115
  <path
113
116
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
114
117
  />
115
118
  </svg>
116
- </a>
119
+ </button>
117
120
  </li>
118
121
  <li class="pf-v5-c-login__main-footer-links-item">
119
- <a
120
- href="#"
121
- class="pf-v5-c-login__main-footer-links-item-link"
122
+ <button
123
+ class="pf-v5-c-button pf-m-plain"
124
+ type="button"
122
125
  aria-label="Log in with Github"
123
126
  >
124
127
  <svg
125
128
  aria-hidden="true"
126
129
  xmlns="http://www.w3.org/2000/svg"
130
+ fill="currentColor"
127
131
  viewBox="0 0 496 512"
132
+ class="pf-v5-svg"
128
133
  >
129
134
  <path
130
135
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
131
136
  />
132
137
  </svg>
133
- </a>
138
+ </button>
134
139
  </li>
135
140
  <li class="pf-v5-c-login__main-footer-links-item">
136
- <a
137
- href="#"
138
- class="pf-v5-c-login__main-footer-links-item-link"
141
+ <button
142
+ class="pf-v5-c-button pf-m-plain"
143
+ type="button"
139
144
  aria-label="Log in with Dropbox"
140
145
  >
141
146
  <svg
142
147
  aria-hidden="true"
143
148
  xmlns="http://www.w3.org/2000/svg"
149
+ fill="currentColor"
144
150
  viewBox="0 0 528 512"
151
+ class="pf-v5-svg"
145
152
  >
146
153
  <path
147
154
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
148
155
  />
149
156
  </svg>
150
- </a>
157
+ </button>
151
158
  </li>
152
159
  <li class="pf-v5-c-login__main-footer-links-item">
153
- <a
154
- href="#"
155
- class="pf-v5-c-login__main-footer-links-item-link"
160
+ <button
161
+ class="pf-v5-c-button pf-m-plain"
162
+ type="button"
156
163
  aria-label="Log in with Facebook"
157
164
  >
158
165
  <svg
159
166
  aria-hidden="true"
160
167
  xmlns="http://www.w3.org/2000/svg"
168
+ fill="currentColor"
161
169
  viewBox="0 0 448 512"
170
+ class="pf-v5-svg"
162
171
  >
163
172
  <path
164
173
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
165
174
  />
166
175
  </svg>
167
- </a>
176
+ </button>
168
177
  </li>
169
178
  <li class="pf-v5-c-login__main-footer-links-item">
170
- <a
171
- href="#"
172
- class="pf-v5-c-login__main-footer-links-item-link"
179
+ <button
180
+ class="pf-v5-c-button pf-m-plain"
181
+ type="button"
173
182
  aria-label="Log in with Gitlab"
174
183
  >
175
184
  <svg
176
185
  aria-hidden="true"
177
186
  xmlns="http://www.w3.org/2000/svg"
187
+ fill="currentColor"
178
188
  viewBox="0 0 512 512"
189
+ class="pf-v5-svg"
179
190
  >
180
191
  <path
181
192
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
182
193
  />
183
194
  </svg>
184
- </a>
195
+ </button>
185
196
  </li>
186
197
  </ul>
187
198
  <div class="pf-v5-c-login__main-footer-band">
@@ -219,7 +230,7 @@ wrapperTag: div
219
230
  ```html isFullscreen
220
231
  <div
221
232
  class="pf-v5-c-background-image"
222
- style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
233
+ style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
223
234
  ></div>
224
235
  <div class="pf-v5-c-login">
225
236
  <div class="pf-v5-c-login__container">
@@ -228,6 +239,7 @@ wrapperTag: div
228
239
  class="pf-v5-c-brand"
229
240
  src="/assets/images/pf_logo_color.svg"
230
241
  alt="PatternFly Logo"
242
+ style="--pf-v5-c-brand--Height:48px;"
231
243
  />
232
244
  </header>
233
245
  <main class="pf-v5-c-login__main">
@@ -325,89 +337,99 @@ wrapperTag: div
325
337
  <footer class="pf-v5-c-login__main-footer">
326
338
  <ul class="pf-v5-c-login__main-footer-links" role="list">
327
339
  <li class="pf-v5-c-login__main-footer-links-item">
328
- <a
329
- href="#"
330
- class="pf-v5-c-login__main-footer-links-item-link"
340
+ <button
341
+ class="pf-v5-c-button pf-m-plain"
342
+ type="button"
331
343
  aria-label="Log in with Google"
332
344
  >
333
345
  <svg
334
346
  aria-hidden="true"
335
347
  xmlns="http://www.w3.org/2000/svg"
348
+ fill="currentColor"
336
349
  viewBox="0 0 488 512"
350
+ class="pf-v5-svg"
337
351
  >
338
352
  <path
339
353
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
340
354
  />
341
355
  </svg>
342
- </a>
356
+ </button>
343
357
  </li>
344
358
  <li class="pf-v5-c-login__main-footer-links-item">
345
- <a
346
- href="#"
347
- class="pf-v5-c-login__main-footer-links-item-link"
359
+ <button
360
+ class="pf-v5-c-button pf-m-plain"
361
+ type="button"
348
362
  aria-label="Log in with Github"
349
363
  >
350
364
  <svg
351
365
  aria-hidden="true"
352
366
  xmlns="http://www.w3.org/2000/svg"
367
+ fill="currentColor"
353
368
  viewBox="0 0 496 512"
369
+ class="pf-v5-svg"
354
370
  >
355
371
  <path
356
372
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
357
373
  />
358
374
  </svg>
359
- </a>
375
+ </button>
360
376
  </li>
361
377
  <li class="pf-v5-c-login__main-footer-links-item">
362
- <a
363
- href="#"
364
- class="pf-v5-c-login__main-footer-links-item-link"
378
+ <button
379
+ class="pf-v5-c-button pf-m-plain"
380
+ type="button"
365
381
  aria-label="Log in with Dropbox"
366
382
  >
367
383
  <svg
368
384
  aria-hidden="true"
369
385
  xmlns="http://www.w3.org/2000/svg"
386
+ fill="currentColor"
370
387
  viewBox="0 0 528 512"
388
+ class="pf-v5-svg"
371
389
  >
372
390
  <path
373
391
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
374
392
  />
375
393
  </svg>
376
- </a>
394
+ </button>
377
395
  </li>
378
396
  <li class="pf-v5-c-login__main-footer-links-item">
379
- <a
380
- href="#"
381
- class="pf-v5-c-login__main-footer-links-item-link"
397
+ <button
398
+ class="pf-v5-c-button pf-m-plain"
399
+ type="button"
382
400
  aria-label="Log in with Facebook"
383
401
  >
384
402
  <svg
385
403
  aria-hidden="true"
386
404
  xmlns="http://www.w3.org/2000/svg"
405
+ fill="currentColor"
387
406
  viewBox="0 0 448 512"
407
+ class="pf-v5-svg"
388
408
  >
389
409
  <path
390
410
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
391
411
  />
392
412
  </svg>
393
- </a>
413
+ </button>
394
414
  </li>
395
415
  <li class="pf-v5-c-login__main-footer-links-item">
396
- <a
397
- href="#"
398
- class="pf-v5-c-login__main-footer-links-item-link"
416
+ <button
417
+ class="pf-v5-c-button pf-m-plain"
418
+ type="button"
399
419
  aria-label="Log in with Gitlab"
400
420
  >
401
421
  <svg
402
422
  aria-hidden="true"
403
423
  xmlns="http://www.w3.org/2000/svg"
424
+ fill="currentColor"
404
425
  viewBox="0 0 512 512"
426
+ class="pf-v5-svg"
405
427
  >
406
428
  <path
407
429
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
408
430
  />
409
431
  </svg>
410
- </a>
432
+ </button>
411
433
  </li>
412
434
  </ul>
413
435
  <div class="pf-v5-c-login__main-footer-band">
@@ -445,7 +467,7 @@ wrapperTag: div
445
467
  ```html isFullscreen
446
468
  <div
447
469
  class="pf-v5-c-background-image"
448
- style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
470
+ style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
449
471
  ></div>
450
472
  <div class="pf-v5-c-login">
451
473
  <div class="pf-v5-c-login__container">
@@ -454,6 +476,7 @@ wrapperTag: div
454
476
  class="pf-v5-c-brand"
455
477
  src="/assets/images/pf_logo_color.svg"
456
478
  alt="PatternFly Logo"
479
+ style="--pf-v5-c-brand--Height:48px;"
457
480
  />
458
481
  </header>
459
482
  <main class="pf-v5-c-login__main">
@@ -544,89 +567,99 @@ wrapperTag: div
544
567
  <footer class="pf-v5-c-login__main-footer">
545
568
  <ul class="pf-v5-c-login__main-footer-links" role="list">
546
569
  <li class="pf-v5-c-login__main-footer-links-item">
547
- <a
548
- href="#"
549
- class="pf-v5-c-login__main-footer-links-item-link"
570
+ <button
571
+ class="pf-v5-c-button pf-m-plain"
572
+ type="button"
550
573
  aria-label="Log in with Google"
551
574
  >
552
575
  <svg
553
576
  aria-hidden="true"
554
577
  xmlns="http://www.w3.org/2000/svg"
578
+ fill="currentColor"
555
579
  viewBox="0 0 488 512"
580
+ class="pf-v5-svg"
556
581
  >
557
582
  <path
558
583
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
559
584
  />
560
585
  </svg>
561
- </a>
586
+ </button>
562
587
  </li>
563
588
  <li class="pf-v5-c-login__main-footer-links-item">
564
- <a
565
- href="#"
566
- class="pf-v5-c-login__main-footer-links-item-link"
589
+ <button
590
+ class="pf-v5-c-button pf-m-plain"
591
+ type="button"
567
592
  aria-label="Log in with Github"
568
593
  >
569
594
  <svg
570
595
  aria-hidden="true"
571
596
  xmlns="http://www.w3.org/2000/svg"
597
+ fill="currentColor"
572
598
  viewBox="0 0 496 512"
599
+ class="pf-v5-svg"
573
600
  >
574
601
  <path
575
602
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
576
603
  />
577
604
  </svg>
578
- </a>
605
+ </button>
579
606
  </li>
580
607
  <li class="pf-v5-c-login__main-footer-links-item">
581
- <a
582
- href="#"
583
- class="pf-v5-c-login__main-footer-links-item-link"
608
+ <button
609
+ class="pf-v5-c-button pf-m-plain"
610
+ type="button"
584
611
  aria-label="Log in with Dropbox"
585
612
  >
586
613
  <svg
587
614
  aria-hidden="true"
588
615
  xmlns="http://www.w3.org/2000/svg"
616
+ fill="currentColor"
589
617
  viewBox="0 0 528 512"
618
+ class="pf-v5-svg"
590
619
  >
591
620
  <path
592
621
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
593
622
  />
594
623
  </svg>
595
- </a>
624
+ </button>
596
625
  </li>
597
626
  <li class="pf-v5-c-login__main-footer-links-item">
598
- <a
599
- href="#"
600
- class="pf-v5-c-login__main-footer-links-item-link"
627
+ <button
628
+ class="pf-v5-c-button pf-m-plain"
629
+ type="button"
601
630
  aria-label="Log in with Facebook"
602
631
  >
603
632
  <svg
604
633
  aria-hidden="true"
605
634
  xmlns="http://www.w3.org/2000/svg"
635
+ fill="currentColor"
606
636
  viewBox="0 0 448 512"
637
+ class="pf-v5-svg"
607
638
  >
608
639
  <path
609
640
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
610
641
  />
611
642
  </svg>
612
- </a>
643
+ </button>
613
644
  </li>
614
645
  <li class="pf-v5-c-login__main-footer-links-item">
615
- <a
616
- href="#"
617
- class="pf-v5-c-login__main-footer-links-item-link"
646
+ <button
647
+ class="pf-v5-c-button pf-m-plain"
648
+ type="button"
618
649
  aria-label="Log in with Gitlab"
619
650
  >
620
651
  <svg
621
652
  aria-hidden="true"
622
653
  xmlns="http://www.w3.org/2000/svg"
654
+ fill="currentColor"
623
655
  viewBox="0 0 512 512"
656
+ class="pf-v5-svg"
624
657
  >
625
658
  <path
626
659
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
627
660
  />
628
661
  </svg>
629
- </a>
662
+ </button>
630
663
  </li>
631
664
  </ul>
632
665
  <div class="pf-v5-c-login__main-footer-band">
@@ -664,7 +697,7 @@ wrapperTag: div
664
697
  ```html isFullscreen
665
698
  <div
666
699
  class="pf-v5-c-background-image"
667
- style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
700
+ style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
668
701
  ></div>
669
702
  <div class="pf-v5-c-login">
670
703
  <div class="pf-v5-c-login__container">
@@ -673,6 +706,7 @@ wrapperTag: div
673
706
  class="pf-v5-c-brand"
674
707
  src="/assets/images/pf_logo_color.svg"
675
708
  alt="PatternFly Logo"
709
+ style="--pf-v5-c-brand--Height:48px;"
676
710
  />
677
711
  </header>
678
712
  <main class="pf-v5-c-login__main">
@@ -770,89 +804,99 @@ wrapperTag: div
770
804
  <footer class="pf-v5-c-login__main-footer">
771
805
  <ul class="pf-v5-c-login__main-footer-links" role="list">
772
806
  <li class="pf-v5-c-login__main-footer-links-item">
773
- <a
774
- href="#"
775
- class="pf-v5-c-login__main-footer-links-item-link"
807
+ <button
808
+ class="pf-v5-c-button pf-m-plain"
809
+ type="button"
776
810
  aria-label="Log in with Google"
777
811
  >
778
812
  <svg
779
813
  aria-hidden="true"
780
814
  xmlns="http://www.w3.org/2000/svg"
815
+ fill="currentColor"
781
816
  viewBox="0 0 488 512"
817
+ class="pf-v5-svg"
782
818
  >
783
819
  <path
784
820
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
785
821
  />
786
822
  </svg>
787
- </a>
823
+ </button>
788
824
  </li>
789
825
  <li class="pf-v5-c-login__main-footer-links-item">
790
- <a
791
- href="#"
792
- class="pf-v5-c-login__main-footer-links-item-link"
826
+ <button
827
+ class="pf-v5-c-button pf-m-plain"
828
+ type="button"
793
829
  aria-label="Log in with Github"
794
830
  >
795
831
  <svg
796
832
  aria-hidden="true"
797
833
  xmlns="http://www.w3.org/2000/svg"
834
+ fill="currentColor"
798
835
  viewBox="0 0 496 512"
836
+ class="pf-v5-svg"
799
837
  >
800
838
  <path
801
839
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
802
840
  />
803
841
  </svg>
804
- </a>
842
+ </button>
805
843
  </li>
806
844
  <li class="pf-v5-c-login__main-footer-links-item">
807
- <a
808
- href="#"
809
- class="pf-v5-c-login__main-footer-links-item-link"
845
+ <button
846
+ class="pf-v5-c-button pf-m-plain"
847
+ type="button"
810
848
  aria-label="Log in with Dropbox"
811
849
  >
812
850
  <svg
813
851
  aria-hidden="true"
814
852
  xmlns="http://www.w3.org/2000/svg"
853
+ fill="currentColor"
815
854
  viewBox="0 0 528 512"
855
+ class="pf-v5-svg"
816
856
  >
817
857
  <path
818
858
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
819
859
  />
820
860
  </svg>
821
- </a>
861
+ </button>
822
862
  </li>
823
863
  <li class="pf-v5-c-login__main-footer-links-item">
824
- <a
825
- href="#"
826
- class="pf-v5-c-login__main-footer-links-item-link"
864
+ <button
865
+ class="pf-v5-c-button pf-m-plain"
866
+ type="button"
827
867
  aria-label="Log in with Facebook"
828
868
  >
829
869
  <svg
830
870
  aria-hidden="true"
831
871
  xmlns="http://www.w3.org/2000/svg"
872
+ fill="currentColor"
832
873
  viewBox="0 0 448 512"
874
+ class="pf-v5-svg"
833
875
  >
834
876
  <path
835
877
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
836
878
  />
837
879
  </svg>
838
- </a>
880
+ </button>
839
881
  </li>
840
882
  <li class="pf-v5-c-login__main-footer-links-item">
841
- <a
842
- href="#"
843
- class="pf-v5-c-login__main-footer-links-item-link"
883
+ <button
884
+ class="pf-v5-c-button pf-m-plain"
885
+ type="button"
844
886
  aria-label="Log in with Gitlab"
845
887
  >
846
888
  <svg
847
889
  aria-hidden="true"
848
890
  xmlns="http://www.w3.org/2000/svg"
891
+ fill="currentColor"
849
892
  viewBox="0 0 512 512"
893
+ class="pf-v5-svg"
850
894
  >
851
895
  <path
852
896
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
853
897
  />
854
898
  </svg>
855
- </a>
899
+ </button>
856
900
  </li>
857
901
  </ul>
858
902
  <div class="pf-v5-c-login__main-footer-band">
@@ -890,7 +934,7 @@ wrapperTag: div
890
934
  ```html isFullscreen
891
935
  <div
892
936
  class="pf-v5-c-background-image"
893
- style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
937
+ style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
894
938
  ></div>
895
939
  <div class="pf-v5-c-login">
896
940
  <div class="pf-v5-c-login__container">
@@ -899,6 +943,7 @@ wrapperTag: div
899
943
  class="pf-v5-c-brand"
900
944
  src="/assets/images/pf_logo_color.svg"
901
945
  alt="PatternFly Logo"
946
+ style="--pf-v5-c-brand--Height:48px;"
902
947
  />
903
948
  </header>
904
949
  <main class="pf-v5-c-login__main">
@@ -1024,89 +1069,99 @@ wrapperTag: div
1024
1069
  <footer class="pf-v5-c-login__main-footer">
1025
1070
  <ul class="pf-v5-c-login__main-footer-links" role="list">
1026
1071
  <li class="pf-v5-c-login__main-footer-links-item">
1027
- <a
1028
- href="#"
1029
- class="pf-v5-c-login__main-footer-links-item-link"
1072
+ <button
1073
+ class="pf-v5-c-button pf-m-plain"
1074
+ type="button"
1030
1075
  aria-label="Log in with Google"
1031
1076
  >
1032
1077
  <svg
1033
1078
  aria-hidden="true"
1034
1079
  xmlns="http://www.w3.org/2000/svg"
1080
+ fill="currentColor"
1035
1081
  viewBox="0 0 488 512"
1082
+ class="pf-v5-svg"
1036
1083
  >
1037
1084
  <path
1038
1085
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
1039
1086
  />
1040
1087
  </svg>
1041
- </a>
1088
+ </button>
1042
1089
  </li>
1043
1090
  <li class="pf-v5-c-login__main-footer-links-item">
1044
- <a
1045
- href="#"
1046
- class="pf-v5-c-login__main-footer-links-item-link"
1091
+ <button
1092
+ class="pf-v5-c-button pf-m-plain"
1093
+ type="button"
1047
1094
  aria-label="Log in with Github"
1048
1095
  >
1049
1096
  <svg
1050
1097
  aria-hidden="true"
1051
1098
  xmlns="http://www.w3.org/2000/svg"
1099
+ fill="currentColor"
1052
1100
  viewBox="0 0 496 512"
1101
+ class="pf-v5-svg"
1053
1102
  >
1054
1103
  <path
1055
1104
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
1056
1105
  />
1057
1106
  </svg>
1058
- </a>
1107
+ </button>
1059
1108
  </li>
1060
1109
  <li class="pf-v5-c-login__main-footer-links-item">
1061
- <a
1062
- href="#"
1063
- class="pf-v5-c-login__main-footer-links-item-link"
1110
+ <button
1111
+ class="pf-v5-c-button pf-m-plain"
1112
+ type="button"
1064
1113
  aria-label="Log in with Dropbox"
1065
1114
  >
1066
1115
  <svg
1067
1116
  aria-hidden="true"
1068
1117
  xmlns="http://www.w3.org/2000/svg"
1118
+ fill="currentColor"
1069
1119
  viewBox="0 0 528 512"
1120
+ class="pf-v5-svg"
1070
1121
  >
1071
1122
  <path
1072
1123
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
1073
1124
  />
1074
1125
  </svg>
1075
- </a>
1126
+ </button>
1076
1127
  </li>
1077
1128
  <li class="pf-v5-c-login__main-footer-links-item">
1078
- <a
1079
- href="#"
1080
- class="pf-v5-c-login__main-footer-links-item-link"
1129
+ <button
1130
+ class="pf-v5-c-button pf-m-plain"
1131
+ type="button"
1081
1132
  aria-label="Log in with Facebook"
1082
1133
  >
1083
1134
  <svg
1084
1135
  aria-hidden="true"
1085
1136
  xmlns="http://www.w3.org/2000/svg"
1137
+ fill="currentColor"
1086
1138
  viewBox="0 0 448 512"
1139
+ class="pf-v5-svg"
1087
1140
  >
1088
1141
  <path
1089
1142
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
1090
1143
  />
1091
1144
  </svg>
1092
- </a>
1145
+ </button>
1093
1146
  </li>
1094
1147
  <li class="pf-v5-c-login__main-footer-links-item">
1095
- <a
1096
- href="#"
1097
- class="pf-v5-c-login__main-footer-links-item-link"
1148
+ <button
1149
+ class="pf-v5-c-button pf-m-plain"
1150
+ type="button"
1098
1151
  aria-label="Log in with Gitlab"
1099
1152
  >
1100
1153
  <svg
1101
1154
  aria-hidden="true"
1102
1155
  xmlns="http://www.w3.org/2000/svg"
1156
+ fill="currentColor"
1103
1157
  viewBox="0 0 512 512"
1158
+ class="pf-v5-svg"
1104
1159
  >
1105
1160
  <path
1106
1161
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
1107
1162
  />
1108
1163
  </svg>
1109
- </a>
1164
+ </button>
1110
1165
  </li>
1111
1166
  </ul>
1112
1167
  <div class="pf-v5-c-login__main-footer-band">