@patternfly/patternfly 6.3.0-prerelease.4 → 6.3.0-prerelease.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/components/CodeEditor/code-editor.css +3 -0
  2. package/components/CodeEditor/code-editor.scss +3 -1
  3. package/components/Page/page.css +4 -3
  4. package/components/Page/page.scss +4 -2
  5. package/components/_index.css +7 -3
  6. package/docs/components/Divider/examples/Divider.md +1 -1
  7. package/docs/components/Drawer/examples/Drawer.md +4 -0
  8. package/docs/components/Page/examples/Page.md +1 -0
  9. package/docs/components/Table/examples/Table.md +4 -4
  10. package/docs/demos/Masthead/examples/Masthead.md +1 -1
  11. package/docs/demos/Nav/examples/Nav.md +2 -2
  12. package/docs/demos/Page/examples/Page.md +355 -0
  13. package/docs/demos/Table/examples/Table.md +41 -21
  14. package/package.json +3 -3
  15. package/patternfly-no-globals.css +7 -3
  16. package/patternfly.css +7 -3
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/CodeEditor/code-editor.css CHANGED
@@ -148,6 +148,9 @@
148
148
  .pf-v6-c-code-editor__main .monaco-editor {
149
149
  background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
150
150
  }
151
+ .pf-v6-c-code-editor__main a.label-name {
152
+ text-decoration-line: none;
153
+ }
151
154
 
152
155
  .pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
153
156
  border-block-start-width: 0;
package/components/CodeEditor/code-editor.scss CHANGED
@@ -157,7 +157,7 @@
157
157
  }
158
158
 
159
159
  .#{$code-editor}__main {
160
- position: relative;
160
+ position: relative;
161
161
  flex-grow: 1;
162
162
  color: var(--#{$code-editor}__main--Color, inherit);
163
163
  background-color: var(--#{$code-editor}__main--BackgroundColor);
@@ -175,6 +175,8 @@
175
175
  .monaco-editor {
176
176
  background-color: var(--#{$code-editor}__main--BackgroundColor);
177
177
  }
178
+
179
+ a.label-name { text-decoration-line: none; } // revert normalize.scss
178
180
  // stylelint-enable selector-class-pattern
179
181
  }
180
182
 
package/components/Page/page.css CHANGED
@@ -3,8 +3,9 @@
3
3
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
4
4
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
5
5
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
6
- --pf-v6-c-page__sidebar--Width: 18.125rem;
7
- --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
6
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
7
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
8
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
8
9
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
10
  --pf-v6-c-page__sidebar--BoxShadow: none;
10
11
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -432,7 +433,7 @@
432
433
  -webkit-overflow-scrolling: touch;
433
434
  }
434
435
  @media screen and (min-width: 75rem) {
435
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
436
+ .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
436
437
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
437
438
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
438
439
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
package/components/Page/page.scss CHANGED
@@ -14,8 +14,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
14
14
 
15
15
  // Sidebar
16
16
  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
17
- --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
18
- --#{$page}__sidebar--xl--Width: #{pf-size-prem(290px)}; // TODO Can remove at breaking change
17
+ --#{$page}__sidebar--Width--base: #{pf-size-prem(290px)};
18
+ --#{$page}__sidebar--Width: var(--#{$page}__sidebar--Width--base);
19
+ --#{$page}__sidebar--xl--Width: var(--#{$page}__sidebar--Width--base);
19
20
  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20
21
  --#{$page}__sidebar--BoxShadow: none;
21
22
 
@@ -352,6 +353,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
352
353
  -webkit-overflow-scrolling: touch;
353
354
 
354
355
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
356
+ @at-root .#{$page}.pf-m-no-sidebar,
355
357
  .#{$masthead} + &,
356
358
  .#{$page}__sidebar.pf-m-collapsed + & {
357
359
  --#{$page}__main-container--GridArea: var(--#{$page}--masthead--main-container--GridArea);
package/components/_index.css CHANGED
@@ -3051,6 +3051,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3051
3051
  .pf-v6-c-code-editor__main .monaco-editor {
3052
3052
  background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
3053
3053
  }
3054
+ .pf-v6-c-code-editor__main a.label-name {
3055
+ text-decoration-line: none;
3056
+ }
3054
3057
 
3055
3058
  .pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
3056
3059
  border-block-start-width: 0;
@@ -11762,8 +11765,9 @@ ul.pf-v6-c-list {
11762
11765
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
11763
11766
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11764
11767
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11765
- --pf-v6-c-page__sidebar--Width: 18.125rem;
11766
- --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
11768
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
11769
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
11770
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
11767
11771
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11768
11772
  --pf-v6-c-page__sidebar--BoxShadow: none;
11769
11773
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -12191,7 +12195,7 @@ ul.pf-v6-c-list {
12191
12195
  -webkit-overflow-scrolling: touch;
12192
12196
  }
12193
12197
  @media screen and (min-width: 75rem) {
12194
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12198
+ .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12195
12199
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
12196
12200
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
12197
12201
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
package/docs/components/Divider/examples/Divider.md CHANGED
@@ -18,7 +18,7 @@ cssPrefix: pf-v6-c-divider
18
18
  ```html
19
19
  <ul role="list">
20
20
  <li>List item one</li>
21
- <li class="pf-v6-c-divider" role="separator"></li>
21
+ <li class="pf-v6-c-divider" role="presentation"></li>
22
22
  <li>List item two</li>
23
23
  </ul>
24
24
 
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -550,6 +550,7 @@ cssPrefix: pf-v6-c-drawer
550
550
  class="pf-v6-c-drawer__splitter pf-m-vertical"
551
551
  role="separator"
552
552
  tabindex="0"
553
+ aria-valuenow="50"
553
554
  aria-orientation="vertical"
554
555
  >
555
556
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -597,6 +598,7 @@ cssPrefix: pf-v6-c-drawer
597
598
  class="pf-v6-c-drawer__splitter pf-m-vertical"
598
599
  role="separator"
599
600
  tabindex="0"
601
+ aria-valuenow="50"
600
602
  aria-orientation="vertical"
601
603
  >
602
604
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -647,6 +649,7 @@ cssPrefix: pf-v6-c-drawer
647
649
  class="pf-v6-c-drawer__splitter"
648
650
  role="separator"
649
651
  tabindex="0"
652
+ aria-valuenow="50"
650
653
  aria-orientation="horizontal"
651
654
  >
652
655
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -694,6 +697,7 @@ cssPrefix: pf-v6-c-drawer
694
697
  class="pf-v6-c-drawer__splitter pf-m-vertical"
695
698
  role="separator"
696
699
  tabindex="0"
700
+ aria-valuenow="50"
697
701
  aria-orientation="vertical"
698
702
  >
699
703
  <div class="pf-v6-c-drawer__splitter-handle"></div>
package/docs/components/Page/examples/Page.md CHANGED
@@ -412,6 +412,7 @@ This component provides the basic chrome for a page, including sidebar and main
412
412
  | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
413
413
  | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
414
414
  | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
415
+ | `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
415
416
  | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
416
417
  | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
417
418
  | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
package/docs/components/Table/examples/Table.md CHANGED
@@ -1150,7 +1150,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
1150
1150
  class="pf-v6-c-button pf-m-plain"
1151
1151
  id="table-expandable-expandable-toggle-thead"
1152
1152
  type="button"
1153
- aria-controls="table-expandable-content-thead"
1153
+ aria-controls="table-expandable-content-1 table-expandable-content-2 table-expandable-content-3 table-expandable-content-4"
1154
1154
  aria-labelledby="table-expandable-node-thead"
1155
1155
  aria-label="Toggle all rows"
1156
1156
  >
@@ -1620,7 +1620,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
1620
1620
  id="expandable-set-width-columns-example-expandable-toggle-thead"
1621
1621
  type="button"
1622
1622
  aria-expanded="true"
1623
- aria-controls="expandable-set-width-columns-example-content-thead"
1623
+ aria-controls="expandable-set-width-columns-example-content-1 expandable-set-width-columns-example-content-2 expandable-set-width-columns-example-content-3 expandable-set-width-columns-example-content-4"
1624
1624
  aria-labelledby="expandable-set-width-columns-example-node-thead"
1625
1625
  aria-label="Toggle all rows"
1626
1626
  aria-describedby="true"
@@ -2096,7 +2096,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
2096
2096
  class="pf-v6-c-button pf-m-plain"
2097
2097
  id="table-expandable-nested-table-expandable-toggle-thead"
2098
2098
  type="button"
2099
- aria-controls="table-expandable-nested-table-content-thead"
2099
+ aria-controls="table-expandable-nested-table-content-1 table-expandable-nested-table-content-2 table-expandable-nested-table-content-3 table-expandable-nested-table-content-4"
2100
2100
  aria-labelledby="table-expandable-nested-table-node-thead"
2101
2101
  aria-label="Toggle all rows"
2102
2102
  >
@@ -5285,7 +5285,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
5285
5285
  class="pf-v6-c-button pf-m-small pf-m-plain"
5286
5286
  id="table-compact-expandable-expandable-toggle-thead"
5287
5287
  type="button"
5288
- aria-controls="table-compact-expandable-content-thead"
5288
+ aria-controls="table-compact-expandable-content-1 table-compact-expandable-content-2 table-compact-expandable-content-3 table-compact-expandable-content-4"
5289
5289
  aria-labelledby="table-compact-expandable-node-thead"
5290
5290
  aria-label="Toggle all rows"
5291
5291
  >
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -2066,7 +2066,7 @@ wrapperTag: div
2066
2066
  ### Horizontal nav
2067
2067
 
2068
2068
  ```html isFullscreen
2069
- <div class="pf-v6-c-page" id="masthead-horizontal-nav">
2069
+ <div class="pf-v6-c-page pf-m-no-sidebar" id="masthead-horizontal-nav">
2070
2070
  <div class="pf-v6-c-skip-to-content">
2071
2071
  <a
2072
2072
  class="pf-v6-c-button pf-m-primary"
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -1036,7 +1036,7 @@ section: components
1036
1036
  ### Horizontal nav
1037
1037
 
1038
1038
  ```html isFullscreen
1039
- <div class="pf-v6-c-page" id="nav-horizontal-example">
1039
+ <div class="pf-v6-c-page pf-m-no-sidebar" id="nav-horizontal-example">
1040
1040
  <div class="pf-v6-c-skip-to-content">
1041
1041
  <a
1042
1042
  class="pf-v6-c-button pf-m-primary"
@@ -1678,7 +1678,7 @@ section: components
1678
1678
  ### Horizontal nav with horizontal subnav
1679
1679
 
1680
1680
  ```html isFullscreen
1681
- <div class="pf-v6-c-page" id="nav-horizontal-example">
1681
+ <div class="pf-v6-c-page pf-m-no-sidebar" id="nav-horizontal-example">
1682
1682
  <div class="pf-v6-c-skip-to-content">
1683
1683
  <a
1684
1684
  class="pf-v6-c-button pf-m-primary"
package/docs/demos/Page/examples/Page.md CHANGED
@@ -4793,3 +4793,358 @@ wrapperTag: div
4793
4793
  </div>
4794
4794
 
4795
4795
  ```
4796
+
4797
+ ### No sidebar
4798
+
4799
+ ```html isFullscreen
4800
+ <div class="pf-v6-c-page pf-m-no-sidebar" id="page-demo-no-sidebar">
4801
+ <div class="pf-v6-c-skip-to-content">
4802
+ <a
4803
+ class="pf-v6-c-button pf-m-primary"
4804
+ href="#main-content-page-demo-no-sidebar"
4805
+ >
4806
+ <span class="pf-v6-c-button__text">Skip to content</span>
4807
+ </a>
4808
+ </div>
4809
+ <header class="pf-v6-c-masthead" id="page-demo-no-sidebar-masthead">
4810
+ <div class="pf-v6-c-masthead__main">
4811
+ <span class="pf-v6-c-masthead__toggle">
4812
+ <button
4813
+ class="pf-v6-c-button pf-m-plain"
4814
+ type="button"
4815
+ aria-label="Global navigation"
4816
+ >
4817
+ <span class="pf-v6-c-button__icon">
4818
+ <i class="fas fa-bars" aria-hidden="true"></i>
4819
+ </span>
4820
+ </button>
4821
+ </span>
4822
+ <div class="pf-v6-c-masthead__brand">
4823
+ <a class="pf-v6-c-masthead__logo" href="#">
4824
+ <svg height="37px" viewBox="0 0 679 158">
4825
+ <title>PF-HorizontalLogo-Color</title>
4826
+ <defs>
4827
+ <linearGradient
4828
+ x1="68%"
4829
+ y1="2.25860997e-13%"
4830
+ x2="32%"
4831
+ y2="100%"
4832
+ id="linearGradient-page-demo-no-sidebar-masthead"
4833
+ >
4834
+ <stop stop-color="#2B9AF3" offset="0%" />
4835
+ <stop
4836
+ stop-color="#73BCF7"
4837
+ stop-opacity="0.502212631"
4838
+ offset="100%"
4839
+ />
4840
+ </linearGradient>
4841
+ </defs>
4842
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4843
+ <g
4844
+ transform="translate(206.000000, 45.750000)"
4845
+ fill="var(--pf-t--global--text--color--regular)"
4846
+ fill-rule="nonzero"
4847
+ >
4848
+ <path
4849
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
4850
+ />
4851
+ <path
4852
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
4853
+ />
4854
+ <path
4855
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
4856
+ />
4857
+ <path
4858
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
4859
+ />
4860
+ <path
4861
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
4862
+ />
4863
+ <path
4864
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
4865
+ />
4866
+ <path
4867
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
4868
+ />
4869
+ <polygon
4870
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
4871
+ />
4872
+ <polygon
4873
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4874
+ />
4875
+ <path
4876
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
4877
+ />
4878
+ </g>
4879
+ <g transform="translate(0.000000, 0.000000)">
4880
+ <path
4881
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
4882
+ fill="#0066CC"
4883
+ />
4884
+ <path
4885
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4886
+ fill="url(#linearGradient-page-demo-no-sidebar-masthead)"
4887
+ />
4888
+ <path
4889
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4890
+ fill="url(#linearGradient-page-demo-no-sidebar-masthead)"
4891
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4892
+ />
4893
+ </g>
4894
+ </g>
4895
+ </svg>
4896
+ </a>
4897
+ </div>
4898
+ </div>
4899
+ <div class="pf-v6-c-masthead__content">
4900
+ <div
4901
+ class="pf-v6-c-toolbar pf-m-static"
4902
+ id="page-demo-no-sidebar-masthead-toolbar"
4903
+ >
4904
+ <div class="pf-v6-c-toolbar__content">
4905
+ <div class="pf-v6-c-toolbar__content-section">
4906
+ <div
4907
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
4908
+ >
4909
+ <div
4910
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
4911
+ >
4912
+ <div class="pf-v6-c-toolbar__item">
4913
+ <button
4914
+ class="pf-v6-c-menu-toggle pf-m-plain"
4915
+ type="button"
4916
+ aria-expanded="false"
4917
+ aria-label="Application launcher"
4918
+ >
4919
+ <span class="pf-v6-c-menu-toggle__icon">
4920
+ <i class="fas fa-th" aria-hidden="true"></i>
4921
+ </span>
4922
+ </button>
4923
+ </div>
4924
+ <div class="pf-v6-c-toolbar__item">
4925
+ <button
4926
+ class="pf-v6-c-menu-toggle pf-m-plain"
4927
+ type="button"
4928
+ aria-expanded="false"
4929
+ aria-label="Settings"
4930
+ >
4931
+ <span class="pf-v6-c-menu-toggle__icon">
4932
+ <i class="fas fa-cog" aria-hidden="true"></i>
4933
+ </span>
4934
+ </button>
4935
+ </div>
4936
+ <div class="pf-v6-c-toolbar__item">
4937
+ <button
4938
+ class="pf-v6-c-menu-toggle pf-m-plain"
4939
+ type="button"
4940
+ aria-expanded="false"
4941
+ aria-label="Help"
4942
+ >
4943
+ <span class="pf-v6-c-menu-toggle__icon">
4944
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
4945
+ </span>
4946
+ </button>
4947
+ </div>
4948
+ </div>
4949
+
4950
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
4951
+ <button
4952
+ class="pf-v6-c-menu-toggle pf-m-plain"
4953
+ type="button"
4954
+ aria-expanded="false"
4955
+ aria-label="Actions"
4956
+ >
4957
+ <span class="pf-v6-c-menu-toggle__icon">
4958
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4959
+ </span>
4960
+ </button>
4961
+ </div>
4962
+ </div>
4963
+ </div>
4964
+ </div>
4965
+ </div>
4966
+ </div>
4967
+ </header>
4968
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4969
+ <main
4970
+ class="pf-v6-c-page__main"
4971
+ tabindex="-1"
4972
+ id="main-content-page-demo-no-sidebar"
4973
+ >
4974
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4975
+ <div class="pf-v6-c-page__main-body">
4976
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4977
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4978
+ <li class="pf-v6-c-breadcrumb__item">
4979
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4980
+ </li>
4981
+ <li class="pf-v6-c-breadcrumb__item">
4982
+ <span class="pf-v6-c-breadcrumb__item-divider">
4983
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4984
+ </span>
4985
+
4986
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4987
+ </li>
4988
+ <li class="pf-v6-c-breadcrumb__item">
4989
+ <span class="pf-v6-c-breadcrumb__item-divider">
4990
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4991
+ </span>
4992
+
4993
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4994
+ </li>
4995
+ <li class="pf-v6-c-breadcrumb__item">
4996
+ <span class="pf-v6-c-breadcrumb__item-divider">
4997
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4998
+ </span>
4999
+
5000
+ <a
5001
+ href="#"
5002
+ class="pf-v6-c-breadcrumb__link pf-m-current"
5003
+ aria-current="page"
5004
+ >Section landing</a>
5005
+ </li>
5006
+ </ol>
5007
+ </nav>
5008
+ </div>
5009
+ </section>
5010
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
5011
+ <div class="pf-v6-c-page__main-body">
5012
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5013
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
5014
+ </div>
5015
+ </section>
5016
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
5017
+ <div class="pf-v6-c-page__main-body">
5018
+ <div class="pf-v6-l-gallery pf-m-gutter">
5019
+ <div class="pf-v6-c-card">
5020
+ <div class="pf-v6-c-card__body">This is a card</div>
5021
+ </div>
5022
+ <div class="pf-v6-c-card">
5023
+ <div class="pf-v6-c-card__body">This is a card</div>
5024
+ </div>
5025
+ <div class="pf-v6-c-card">
5026
+ <div class="pf-v6-c-card__body">This is a card</div>
5027
+ </div>
5028
+ <div class="pf-v6-c-card">
5029
+ <div class="pf-v6-c-card__body">This is a card</div>
5030
+ </div>
5031
+ <div class="pf-v6-c-card">
5032
+ <div class="pf-v6-c-card__body">This is a card</div>
5033
+ </div>
5034
+ <div class="pf-v6-c-card">
5035
+ <div class="pf-v6-c-card__body">This is a card</div>
5036
+ </div>
5037
+ <div class="pf-v6-c-card">
5038
+ <div class="pf-v6-c-card__body">This is a card</div>
5039
+ </div>
5040
+ <div class="pf-v6-c-card">
5041
+ <div class="pf-v6-c-card__body">This is a card</div>
5042
+ </div>
5043
+ <div class="pf-v6-c-card">
5044
+ <div class="pf-v6-c-card__body">This is a card</div>
5045
+ </div>
5046
+ <div class="pf-v6-c-card">
5047
+ <div class="pf-v6-c-card__body">This is a card</div>
5048
+ </div>
5049
+ </div>
5050
+ </div>
5051
+ </section>
5052
+ </main>
5053
+ </div>
5054
+ </div>
5055
+
5056
+ ```
5057
+
5058
+ ### No sidebar or masthead
5059
+
5060
+ ```html isFullscreen
5061
+ <div class="pf-v6-c-page pf-m-no-sidebar" id="page-demo-no-sidebar-masthead">
5062
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
5063
+ <main
5064
+ class="pf-v6-c-page__main"
5065
+ tabindex="-1"
5066
+ id="main-content-page-demo-no-sidebar-masthead"
5067
+ >
5068
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
5069
+ <div class="pf-v6-c-page__main-body">
5070
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
5071
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
5072
+ <li class="pf-v6-c-breadcrumb__item">
5073
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
5074
+ </li>
5075
+ <li class="pf-v6-c-breadcrumb__item">
5076
+ <span class="pf-v6-c-breadcrumb__item-divider">
5077
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5078
+ </span>
5079
+
5080
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5081
+ </li>
5082
+ <li class="pf-v6-c-breadcrumb__item">
5083
+ <span class="pf-v6-c-breadcrumb__item-divider">
5084
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5085
+ </span>
5086
+
5087
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5088
+ </li>
5089
+ <li class="pf-v6-c-breadcrumb__item">
5090
+ <span class="pf-v6-c-breadcrumb__item-divider">
5091
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5092
+ </span>
5093
+
5094
+ <a
5095
+ href="#"
5096
+ class="pf-v6-c-breadcrumb__link pf-m-current"
5097
+ aria-current="page"
5098
+ >Section landing</a>
5099
+ </li>
5100
+ </ol>
5101
+ </nav>
5102
+ </div>
5103
+ </section>
5104
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
5105
+ <div class="pf-v6-c-page__main-body">
5106
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5107
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
5108
+ </div>
5109
+ </section>
5110
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
5111
+ <div class="pf-v6-c-page__main-body">
5112
+ <div class="pf-v6-l-gallery pf-m-gutter">
5113
+ <div class="pf-v6-c-card">
5114
+ <div class="pf-v6-c-card__body">This is a card</div>
5115
+ </div>
5116
+ <div class="pf-v6-c-card">
5117
+ <div class="pf-v6-c-card__body">This is a card</div>
5118
+ </div>
5119
+ <div class="pf-v6-c-card">
5120
+ <div class="pf-v6-c-card__body">This is a card</div>
5121
+ </div>
5122
+ <div class="pf-v6-c-card">
5123
+ <div class="pf-v6-c-card__body">This is a card</div>
5124
+ </div>
5125
+ <div class="pf-v6-c-card">
5126
+ <div class="pf-v6-c-card__body">This is a card</div>
5127
+ </div>
5128
+ <div class="pf-v6-c-card">
5129
+ <div class="pf-v6-c-card__body">This is a card</div>
5130
+ </div>
5131
+ <div class="pf-v6-c-card">
5132
+ <div class="pf-v6-c-card__body">This is a card</div>
5133
+ </div>
5134
+ <div class="pf-v6-c-card">
5135
+ <div class="pf-v6-c-card__body">This is a card</div>
5136
+ </div>
5137
+ <div class="pf-v6-c-card">
5138
+ <div class="pf-v6-c-card__body">This is a card</div>
5139
+ </div>
5140
+ <div class="pf-v6-c-card">
5141
+ <div class="pf-v6-c-card__body">This is a card</div>
5142
+ </div>
5143
+ </div>
5144
+ </div>
5145
+ </section>
5146
+ </main>
5147
+ </div>
5148
+ </div>
5149
+
5150
+ ```