@patternfly/patternfly 6.0.0-alpha.197 → 6.0.0-alpha.199

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 (30) hide show
  1. package/components/MenuToggle/menu-toggle.css +6 -0
  2. package/components/MenuToggle/menu-toggle.scss +7 -0
  3. package/components/_index.css +6 -0
  4. package/docs/components/MenuToggle/examples/MenuToggle.md +94 -1
  5. package/docs/demos/AboutModal/examples/AboutModal.md +358 -3
  6. package/docs/demos/Alert/examples/Alert.md +1351 -64
  7. package/docs/demos/BackToTop/examples/BackToTop.md +426 -6
  8. package/docs/demos/Banner/examples/Banner.md +895 -14
  9. package/docs/demos/CardView/examples/CardView.md +1092 -23
  10. package/docs/demos/Dashboard/examples/Dashboard.md +1597 -32
  11. package/docs/demos/DataList/examples/DataList.md +4031 -64
  12. package/docs/demos/DescriptionList/examples/DescriptionList.md +1523 -471
  13. package/docs/demos/Drawer/examples/Drawer.md +1849 -35
  14. package/docs/demos/JumpLinks/examples/JumpLinks.md +2326 -86
  15. package/docs/demos/Masthead/examples/Masthead.md +608 -8
  16. package/docs/demos/Modal/examples/Modal.md +2126 -196
  17. package/docs/demos/Nav/examples/Nav.md +1988 -22
  18. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4415 -35
  19. package/docs/demos/Page/examples/Page.md +4112 -104
  20. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6303 -269
  21. package/docs/demos/Skeleton/examples/Skeleton.md +412 -15
  22. package/docs/demos/Table/examples/Table.md +15873 -416
  23. package/docs/demos/Tabs/examples/Tabs.md +3635 -518
  24. package/docs/demos/Toolbar/examples/Toolbar.md +1812 -92
  25. package/docs/demos/Wizard/examples/Wizard.md +5289 -666
  26. package/package.json +1 -1
  27. package/patternfly-no-globals.css +6 -0
  28. package/patternfly.css +6 -0
  29. package/patternfly.min.css +1 -1
  30. package/patternfly.min.css.map +1 -1
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -5,542 +5,3659 @@ section: components
5
5
 
6
6
  ### Open tabs
7
7
 
8
- ```hbs isFullscreen
9
- {{> page-template page-template--id="tabs-tables-and-tabs-example"}}
10
-
11
- {{#* inline "page-template-section"}}
12
- {{#> tabs-template tabs-template--id=(concat page-template--id "-tabs")}}
13
-
14
- {{#> page-main-tabs page-main-tabs--IsLimitWidth="true"}}
15
- {{> tabs-template-pod-tab-list tabs-template-pod-tab-list--modifier="pf-m-page-insets"}}
16
- {{/page-main-tabs}}
17
-
18
- {{#> page-main-section page-main-section--IsLimitWidth="true" page-main-section--modifier="pf-m-light"}}
19
- {{#> tabs-template-pod-tab-content}}
20
- {{#> l-flex l-flex--modifier="pf-m-column"}}
21
- {{#> l-flex-item l-flex-item--modifier="pf-m-spacer-lg"}}
22
- {{> title titleType="h2" title--modifier="pf-m-lg pf-v6-u-mt-sm" title--text="Pod details" title--attribute=(concat 'id="' tabs-template-pod-tab-content--id '-details-title"')}}
23
- {{/l-flex-item}}
24
- {{#> l-flex-item}}
25
- {{#> description-list description-list--modifier="pf-m-2-col-on-lg" description-list--attribute=(concat 'aria-labelledby="' tabs-template-pod-tab-content--id '-details-title"')}}
26
- {{#> description-list-group}}
27
- {{#> description-list-term}}
28
- Name
29
- {{/description-list-term}}
30
- {{#> description-list-description}}
31
- 3scale-control-fccb6ddb9-phyqv9
32
- {{/description-list-description}}
33
- {{/description-list-group}}
34
- {{#> description-list-group}}
35
- {{#> description-list-term}}
36
- Status
37
- {{/description-list-term}}
38
- {{#> description-list-description}}
39
- {{#> l-flex l-flex--modifier="pf-m-space-items-sm"}}
40
- {{#> l-flex-item}}
41
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
42
- {{/l-flex-item}}
43
- {{#> l-flex-item}}
44
- Running
45
- {{/l-flex-item}}
46
- {{/l-flex}}
47
- {{/description-list-description}}
48
- {{/description-list-group}}
49
- {{#> description-list-group}}
50
- {{#> description-list-term}}
51
- Namespace
52
- {{/description-list-term}}
53
- {{#> description-list-description}}
54
- {{#> l-flex l-flex--modifier="pf-m-space-items-sm"}}
55
- {{#> l-flex-item}}
56
- {{> label label--id="teal-icon" label--color="teal" label-text--value="NS"}}
57
- {{/l-flex-item}}
58
- {{#> l-flex-item}}
59
- <a href="#">knative-serving-ingress</a>
60
- {{/l-flex-item}}
61
- {{/l-flex}}
62
- {{/description-list-description}}
63
- {{/description-list-group}}
64
- {{#> description-list-group}}
65
- {{#> description-list-term}}
66
- Restart policy
67
- {{/description-list-term}}
68
- {{#> description-list-description}}
69
- Always restart
70
- {{/description-list-description}}
71
- {{/description-list-group}}
72
- {{#> description-list-group}}
73
- {{#> description-list-term}}
74
- Labels
75
- {{/description-list-term}}
76
- {{#> description-list-description}}
77
- {{#> label-group label-group--id="label-group-basic"}}
78
- {{#> label-group-main}}
79
- {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
80
- {{#> label-group-list-item}}
81
- {{> label label--IsOutlined=true label-text--value="app=3scale-gateway"}}
82
- {{/label-group-list-item}}
83
- {{#> label-group-list-item}}
84
- {{> label label--IsOutlined=true label-text--value="pod-template-has=6747686899"}}
85
- {{/label-group-list-item}}
86
- {{/label-group-list}}
87
- {{/label-group-main}}
88
- {{/label-group}}
89
- {{/description-list-description}}
90
- {{/description-list-group}}
91
- {{#> description-list-group}}
92
- {{#> description-list-term}}
93
- Active deadline seconds
94
- {{/description-list-term}}
95
- {{#> description-list-description}}
96
- Not configured
97
- {{/description-list-description}}
98
- {{/description-list-group}}
99
- {{#> description-list-group}}
100
- {{#> description-list-term}}
101
- Tolerations
102
- {{/description-list-term}}
103
- {{#> description-list-description}}
104
- stuff
105
- {{/description-list-description}}
106
- {{/description-list-group}}
107
- {{#> description-list-group}}
108
- {{#> description-list-term}}
109
- Pod IP
110
- {{/description-list-term}}
111
- {{#> description-list-description}}
112
- 10.345.2.197
113
- {{/description-list-description}}
114
- {{/description-list-group}}
115
- {{#> description-list-group}}
116
- {{#> description-list-term}}
117
- Annotations
118
- {{/description-list-term}}
119
- {{#> description-list-description}}
120
- stuff
121
- {{/description-list-description}}
122
- {{/description-list-group}}
123
- {{#> description-list-group}}
124
- {{#> description-list-term}}
125
- Node
126
- {{/description-list-term}}
127
- {{#> description-list-description}}
128
- {{#> l-flex l-flex--modifier="pf-m-space-items-sm"}}
129
- {{#> l-flex-item}}
130
- {{> label label--id="purple-icon" label--color="purple" label-text--value="N"}}
131
- {{/l-flex-item}}
132
- {{#> l-flex-item}}
133
- ip-10-0-233-118.us-east-2.computer.external
134
- {{/l-flex-item}}
135
- {{/l-flex}}
136
- {{/description-list-description}}
137
- {{/description-list-group}}
138
- {{#> description-list-group}}
139
- {{#> description-list-term}}
140
- Created at
141
- {{/description-list-term}}
142
- {{#> description-list-description}}
143
- <time>Oct 15, 1:51 pm</time>
144
- {{/description-list-description}}
145
- {{/description-list-group}}
146
- {{/description-list}}
147
- {{/l-flex-item}}
148
- {{/l-flex}}
149
- {{/tabs-template-pod-tab-content}}
150
- {{/page-main-section}}
151
- {{/tabs-template}}
152
- {{/inline}}
8
+ ```html isFullscreen
9
+ <div class="pf-v6-c-page" id="tabs-tables-and-tabs-example">
10
+ <div class="pf-v6-c-skip-to-content">
11
+ <a
12
+ class="pf-v6-c-button pf-m-primary"
13
+ href="#main-content-tabs-tables-and-tabs-example"
14
+ >
15
+ <span class="pf-v6-c-button__text">Skip to content</span>
16
+ </a>
17
+ </div>
18
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-masthead">
19
+ <span class="pf-v6-c-masthead__toggle">
20
+ <button
21
+ class="pf-v6-c-button pf-m-plain"
22
+ type="button"
23
+ aria-label="Global navigation"
24
+ >
25
+ <span class="pf-v6-c-button__icon">
26
+ <i class="fas fa-bars" aria-hidden="true"></i>
27
+ </span>
28
+ </button>
29
+ </span>
30
+ <div class="pf-v6-c-masthead__main">
31
+ <a class="pf-v6-c-masthead__brand" href="#">
32
+ <svg height="37px" viewBox="0 0 679 158">
33
+ <title>PF-HorizontalLogo-Color</title>
34
+ <defs>
35
+ <linearGradient
36
+ x1="68%"
37
+ y1="2.25860997e-13%"
38
+ x2="32%"
39
+ y2="100%"
40
+ id="linearGradient-tabs-tables-and-tabs-example-masthead"
41
+ >
42
+ <stop stop-color="#2B9AF3" offset="0%" />
43
+ <stop
44
+ stop-color="#73BCF7"
45
+ stop-opacity="0.502212631"
46
+ offset="100%"
47
+ />
48
+ </linearGradient>
49
+ </defs>
50
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
51
+ <g
52
+ transform="translate(206.000000, 45.750000)"
53
+ fill="var(--pf-t--global--text--color--regular)"
54
+ fill-rule="nonzero"
55
+ >
56
+ <path
57
+ 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"
58
+ />
59
+ <path
60
+ 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"
61
+ />
62
+ <path
63
+ 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"
64
+ />
65
+ <path
66
+ 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"
67
+ />
68
+ <path
69
+ 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"
70
+ />
71
+ <path
72
+ 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"
73
+ />
74
+ <path
75
+ 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"
76
+ />
77
+ <polygon
78
+ 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"
79
+ />
80
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
81
+ <path
82
+ 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"
83
+ />
84
+ </g>
85
+ <g transform="translate(0.000000, 0.000000)">
86
+ <path
87
+ 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"
88
+ fill="#0066CC"
89
+ />
90
+ <path
91
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
92
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
93
+ />
94
+ <path
95
+ 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"
96
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
97
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
98
+ />
99
+ </g>
100
+ </g>
101
+ </svg>
102
+ </a>
103
+ </div>
104
+ <div class="pf-v6-c-masthead__content">
105
+ <div
106
+ class="pf-v6-c-toolbar pf-m-static"
107
+ id="tabs-tables-and-tabs-example-masthead-toolbar"
108
+ >
109
+ <div class="pf-v6-c-toolbar__content">
110
+ <div class="pf-v6-c-toolbar__content-section">
111
+ <div
112
+ 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"
113
+ >
114
+ <div
115
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
116
+ >
117
+ <div class="pf-v6-c-toolbar__item">
118
+ <button
119
+ class="pf-v6-c-menu-toggle pf-m-plain"
120
+ type="button"
121
+ aria-expanded="false"
122
+ aria-label="Application launcher"
123
+ >
124
+ <span class="pf-v6-c-menu-toggle__icon">
125
+ <i class="fas fa-th" aria-hidden="true"></i>
126
+ </span>
127
+ </button>
128
+ </div>
129
+ <div class="pf-v6-c-toolbar__item">
130
+ <button
131
+ class="pf-v6-c-menu-toggle pf-m-plain"
132
+ type="button"
133
+ aria-expanded="false"
134
+ aria-label="Settings"
135
+ >
136
+ <span class="pf-v6-c-menu-toggle__icon">
137
+ <i class="fas fa-cog" aria-hidden="true"></i>
138
+ </span>
139
+ </button>
140
+ </div>
141
+ <div class="pf-v6-c-toolbar__item">
142
+ <button
143
+ class="pf-v6-c-menu-toggle pf-m-plain"
144
+ type="button"
145
+ aria-expanded="false"
146
+ aria-label="Help"
147
+ >
148
+ <span class="pf-v6-c-menu-toggle__icon">
149
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
150
+ </span>
151
+ </button>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
156
+ <button
157
+ class="pf-v6-c-menu-toggle pf-m-plain"
158
+ type="button"
159
+ aria-expanded="false"
160
+ aria-label="Actions"
161
+ >
162
+ <span class="pf-v6-c-menu-toggle__icon">
163
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
164
+ </span>
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </header>
173
+ <div class="pf-v6-c-page__sidebar">
174
+ <div class="pf-v6-c-page__sidebar-body">
175
+ <nav
176
+ class="pf-v6-c-nav"
177
+ id="tabs-tables-and-tabs-example-primary-nav"
178
+ aria-label="Global"
179
+ >
180
+ <ul class="pf-v6-c-nav__list" role="list">
181
+ <li class="pf-v6-c-nav__item">
182
+ <a href="#" class="pf-v6-c-nav__link">
183
+ <span class="pf-v6-c-nav__link-text">System panel</span>
184
+ </a>
185
+ </li>
186
+ <li class="pf-v6-c-nav__item">
187
+ <a
188
+ href="#"
189
+ class="pf-v6-c-nav__link pf-m-current"
190
+ aria-current="page"
191
+ >
192
+ <span class="pf-v6-c-nav__link-text">Policy</span>
193
+ </a>
194
+ </li>
195
+ <li class="pf-v6-c-nav__item">
196
+ <a href="#" class="pf-v6-c-nav__link">
197
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
198
+ </a>
199
+ </li>
200
+ <li class="pf-v6-c-nav__item">
201
+ <a href="#" class="pf-v6-c-nav__link">
202
+ <span class="pf-v6-c-nav__link-text">Network services</span>
203
+ </a>
204
+ </li>
205
+ <li class="pf-v6-c-nav__item">
206
+ <a href="#" class="pf-v6-c-nav__link">
207
+ <span class="pf-v6-c-nav__link-text">Server</span>
208
+ </a>
209
+ </li>
210
+ </ul>
211
+ </nav>
212
+ </div>
213
+ </div>
214
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
215
+ <main
216
+ class="pf-v6-c-page__main"
217
+ tabindex="-1"
218
+ id="main-content-tabs-tables-and-tabs-example"
219
+ >
220
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
221
+ <div class="pf-v6-c-page__main-body">
222
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
223
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
224
+ <li class="pf-v6-c-breadcrumb__item">
225
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
226
+ </li>
227
+ <li class="pf-v6-c-breadcrumb__item">
228
+ <span class="pf-v6-c-breadcrumb__item-divider">
229
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
230
+ </span>
231
+
232
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
233
+ </li>
234
+ <li class="pf-v6-c-breadcrumb__item">
235
+ <span class="pf-v6-c-breadcrumb__item-divider">
236
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
237
+ </span>
238
+
239
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
240
+ </li>
241
+ <li class="pf-v6-c-breadcrumb__item">
242
+ <span class="pf-v6-c-breadcrumb__item-divider">
243
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
244
+ </span>
245
+
246
+ <a
247
+ href="#"
248
+ class="pf-v6-c-breadcrumb__link pf-m-current"
249
+ aria-current="page"
250
+ >Section landing</a>
251
+ </li>
252
+ </ol>
253
+ </nav>
254
+ </div>
255
+ </section>
256
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
257
+ <div class="pf-v6-c-page__main-body">
258
+ <div class="pf-v6-c-content">
259
+ <h1>Main title</h1>
260
+ <p>This is a full page demo.</p>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
266
+ <div class="pf-v6-c-page__main-body">
267
+ <div
268
+ class="pf-v6-c-tabs pf-m-page-insets"
269
+ role="region"
270
+ id="tabs-tables-and-tabs-example-tabs"
271
+ >
272
+ <ul class="pf-v6-c-tabs__list" role="tablist">
273
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
274
+ <button
275
+ type="button"
276
+ class="pf-v6-c-tabs__link"
277
+ role="tab"
278
+ aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
279
+ id="tabs-tables-and-tabs-example-tabs-details-link"
280
+ >
281
+ <span class="pf-v6-c-tabs__item-text">Details</span>
282
+ </button>
283
+ </li>
284
+ <li class="pf-v6-c-tabs__item" role="presentation">
285
+ <button
286
+ type="button"
287
+ class="pf-v6-c-tabs__link"
288
+ role="tab"
289
+ aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
290
+ id="tabs-tables-and-tabs-example-tabs-yaml-link"
291
+ >
292
+ <span class="pf-v6-c-tabs__item-text">YAML</span>
293
+ </button>
294
+ </li>
295
+ <li class="pf-v6-c-tabs__item" role="presentation">
296
+ <button
297
+ type="button"
298
+ class="pf-v6-c-tabs__link"
299
+ role="tab"
300
+ aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
301
+ id="tabs-tables-and-tabs-example-tabs-environment-link"
302
+ >
303
+ <span class="pf-v6-c-tabs__item-text">Environment</span>
304
+ </button>
305
+ </li>
306
+ <li class="pf-v6-c-tabs__item" role="presentation">
307
+ <button
308
+ type="button"
309
+ class="pf-v6-c-tabs__link"
310
+ role="tab"
311
+ aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
312
+ id="tabs-tables-and-tabs-example-tabs-logs-link"
313
+ >
314
+ <span class="pf-v6-c-tabs__item-text">Logs</span>
315
+ </button>
316
+ </li>
317
+ <li class="pf-v6-c-tabs__item" role="presentation">
318
+ <button
319
+ type="button"
320
+ class="pf-v6-c-tabs__link"
321
+ role="tab"
322
+ aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
323
+ id="tabs-tables-and-tabs-example-tabs-events-link"
324
+ >
325
+ <span class="pf-v6-c-tabs__item-text">Events</span>
326
+ </button>
327
+ </li>
328
+ <li class="pf-v6-c-tabs__item" role="presentation">
329
+ <button
330
+ type="button"
331
+ class="pf-v6-c-tabs__link"
332
+ role="tab"
333
+ aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
334
+ id="tabs-tables-and-tabs-example-tabs-terminal-link"
335
+ >
336
+ <span class="pf-v6-c-tabs__item-text">Terminal</span>
337
+ </button>
338
+ </li>
339
+ </ul>
340
+ </div>
341
+ </div>
342
+ </section>
343
+
344
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
345
+ <div class="pf-v6-c-page__main-body">
346
+ <section
347
+ class="pf-v6-c-tab-content"
348
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
349
+ id="tabs-tables-and-tabs-example-tabs-details-panel"
350
+ role="tabpanel"
351
+ tabindex="0"
352
+ >
353
+ <div class="pf-v6-c-tab-content__body">
354
+ <div class="pf-v6-l-flex pf-m-column">
355
+ <div class="pf-v6-l-flex__item pf-m-spacer-lg">
356
+ <h2
357
+ class="pf-v6-c-title pf-m-lg pf-v6-u-mt-sm"
358
+ id="-details-title"
359
+ >Pod details</h2>
360
+ </div>
361
+ <div class="pf-v6-l-flex__item">
362
+ <dl
363
+ class="pf-v6-c-description-list pf-m-2-col-on-lg"
364
+ aria-labelledby="-details-title"
365
+ >
366
+ <div class="pf-v6-c-description-list__group">
367
+ <dt class="pf-v6-c-description-list__term">Name</dt>
368
+ <dd class="pf-v6-c-description-list__description">
369
+ <div
370
+ class="pf-v6-c-description-list__text"
371
+ >3scale-control-fccb6ddb9-phyqv9</div>
372
+ </dd>
373
+ </div>
374
+ <div class="pf-v6-c-description-list__group">
375
+ <dt class="pf-v6-c-description-list__term">Status</dt>
376
+ <dd class="pf-v6-c-description-list__description">
377
+ <div class="pf-v6-c-description-list__text">
378
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
379
+ <div class="pf-v6-l-flex__item">
380
+ <i
381
+ class="fas fa-fw fa-check-circle"
382
+ aria-hidden="true"
383
+ ></i>
384
+ </div>
385
+ <div class="pf-v6-l-flex__item">Running</div>
386
+ </div>
387
+ </div>
388
+ </dd>
389
+ </div>
390
+ <div class="pf-v6-c-description-list__group">
391
+ <dt class="pf-v6-c-description-list__term">Namespace</dt>
392
+ <dd class="pf-v6-c-description-list__description">
393
+ <div class="pf-v6-c-description-list__text">
394
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
395
+ <div class="pf-v6-l-flex__item">
396
+ <span class="pf-v6-c-label pf-m-teal">
397
+ <span class="pf-v6-c-label__content">
398
+ <span class="pf-v6-c-label__text">NS</span>
399
+ </span>
400
+ </span>
401
+ </div>
402
+ <div class="pf-v6-l-flex__item">
403
+ <a href="#">knative-serving-ingress</a>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </dd>
408
+ </div>
409
+ <div class="pf-v6-c-description-list__group">
410
+ <dt class="pf-v6-c-description-list__term">Restart policy</dt>
411
+ <dd class="pf-v6-c-description-list__description">
412
+ <div
413
+ class="pf-v6-c-description-list__text"
414
+ >Always restart</div>
415
+ </dd>
416
+ </div>
417
+ <div class="pf-v6-c-description-list__group">
418
+ <dt class="pf-v6-c-description-list__term">Labels</dt>
419
+ <dd class="pf-v6-c-description-list__description">
420
+ <div class="pf-v6-c-description-list__text">
421
+ <div class="pf-v6-c-label-group">
422
+ <div class="pf-v6-c-label-group__main">
423
+ <ul
424
+ class="pf-v6-c-label-group__list"
425
+ role="list"
426
+ aria-label="Group of labels"
427
+ >
428
+ <li class="pf-v6-c-label-group__list-item">
429
+ <span class="pf-v6-c-label pf-m-outline">
430
+ <span class="pf-v6-c-label__content">
431
+ <span
432
+ class="pf-v6-c-label__text"
433
+ >app=3scale-gateway</span>
434
+ </span>
435
+ </span>
436
+ </li>
437
+ <li class="pf-v6-c-label-group__list-item">
438
+ <span class="pf-v6-c-label pf-m-outline">
439
+ <span class="pf-v6-c-label__content">
440
+ <span
441
+ class="pf-v6-c-label__text"
442
+ >pod-template-has=6747686899</span>
443
+ </span>
444
+ </span>
445
+ </li>
446
+ </ul>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </dd>
451
+ </div>
452
+ <div class="pf-v6-c-description-list__group">
453
+ <dt
454
+ class="pf-v6-c-description-list__term"
455
+ >Active deadline seconds</dt>
456
+ <dd class="pf-v6-c-description-list__description">
457
+ <div
458
+ class="pf-v6-c-description-list__text"
459
+ >Not configured</div>
460
+ </dd>
461
+ </div>
462
+ <div class="pf-v6-c-description-list__group">
463
+ <dt class="pf-v6-c-description-list__term">Tolerations</dt>
464
+ <dd class="pf-v6-c-description-list__description">
465
+ <div class="pf-v6-c-description-list__text">stuff</div>
466
+ </dd>
467
+ </div>
468
+ <div class="pf-v6-c-description-list__group">
469
+ <dt class="pf-v6-c-description-list__term">Pod IP</dt>
470
+ <dd class="pf-v6-c-description-list__description">
471
+ <div class="pf-v6-c-description-list__text">10.345.2.197</div>
472
+ </dd>
473
+ </div>
474
+ <div class="pf-v6-c-description-list__group">
475
+ <dt class="pf-v6-c-description-list__term">Annotations</dt>
476
+ <dd class="pf-v6-c-description-list__description">
477
+ <div class="pf-v6-c-description-list__text">stuff</div>
478
+ </dd>
479
+ </div>
480
+ <div class="pf-v6-c-description-list__group">
481
+ <dt class="pf-v6-c-description-list__term">Node</dt>
482
+ <dd class="pf-v6-c-description-list__description">
483
+ <div class="pf-v6-c-description-list__text">
484
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
485
+ <div class="pf-v6-l-flex__item">
486
+ <span class="pf-v6-c-label pf-m-purple">
487
+ <span class="pf-v6-c-label__content">
488
+ <span class="pf-v6-c-label__text">N</span>
489
+ </span>
490
+ </span>
491
+ </div>
492
+ <div
493
+ class="pf-v6-l-flex__item"
494
+ >ip-10-0-233-118.us-east-2.computer.external</div>
495
+ </div>
496
+ </div>
497
+ </dd>
498
+ </div>
499
+ <div class="pf-v6-c-description-list__group">
500
+ <dt class="pf-v6-c-description-list__term">Created at</dt>
501
+ <dd class="pf-v6-c-description-list__description">
502
+ <div class="pf-v6-c-description-list__text">
503
+ <time>Oct 15, 1:51 pm</time>
504
+ </div>
505
+ </dd>
506
+ </div>
507
+ </dl>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </section>
512
+ <section
513
+ class="pf-v6-c-tab-content"
514
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
515
+ id="tabs-tables-and-tabs-example-tabs-yaml-panel"
516
+ role="tabpanel"
517
+ tabindex="0"
518
+ hidden
519
+ >
520
+ <div class="pf-v6-c-tab-content__body">YAML panel</div>
521
+ </section>
522
+ <section
523
+ class="pf-v6-c-tab-content"
524
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
525
+ id="tabs-tables-and-tabs-example-tabs-environment-panel"
526
+ role="tabpanel"
527
+ tabindex="0"
528
+ hidden
529
+ >
530
+ <div class="pf-v6-c-tab-content__body">Environment panel</div>
531
+ </section>
532
+ <section
533
+ class="pf-v6-c-tab-content"
534
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
535
+ id="tabs-tables-and-tabs-example-tabs-logs-panel"
536
+ role="tabpanel"
537
+ tabindex="0"
538
+ hidden
539
+ >
540
+ <div class="pf-v6-c-tab-content__body">Logs panel</div>
541
+ </section>
542
+ <section
543
+ class="pf-v6-c-tab-content"
544
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
545
+ id="tabs-tables-and-tabs-example-tabs-events-panel"
546
+ role="tabpanel"
547
+ tabindex="0"
548
+ hidden
549
+ >
550
+ <div class="pf-v6-c-tab-content__body">Events panel</div>
551
+ </section>
552
+ <section
553
+ class="pf-v6-c-tab-content"
554
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
555
+ id="tabs-tables-and-tabs-example-tabs-terminal-panel"
556
+ role="tabpanel"
557
+ tabindex="0"
558
+ hidden
559
+ >
560
+ <div class="pf-v6-c-tab-content__body">Terminal panel</div>
561
+ </section>
562
+ </div>
563
+ </section>
564
+ </main>
565
+ </div>
566
+ </div>
567
+
153
568
  ```
154
569
 
155
570
  ### Open tabs with secondary tabs
156
571
 
157
- ```hbs isFullscreen
158
- {{> page-template page-template--id="tabs-tables-and-tabs-example"}}
159
-
160
- {{#* inline "page-template-section"}}
161
- {{#> tabs-template tabs-template--id=(concat page-template--id "-tabs")}}
162
- {{#> page-main-tabs page-main-tabs--IsLimitWidth="true"}}
163
- {{> tabs-template-pod-tab-list tabs-template-pod-tab-list--modifier="pf-m-page-insets"}}
164
- {{/page-main-tabs}}
165
- {{#> page-main-section page-main-section--IsLimitWidth="true" page-main-section--modifier="pf-m-light pf-m-no-padding"}}
166
- {{> tabs-template-pod-tab-list tabs-template-pod-tab-list--IsSecondary="true" tabs-template-pod-tab-list--modifier="pf-m-page-insets" tabs--id=(concat tabs-template--id '-secondary') tabs-template-pod-tab-list--modifier=reset}}
167
- {{#> tabs-template-pod-tab-content tab-content-body--modifier="pf-m-padding"}}
168
- {{#> tabs-template-pod-tab-content tab-content-body--modifier=reset tabs--id=(concat tabs-template--id '-secondary') tabs-template-pod-tab-content--IsSecondary="true"}}
169
- {{#> l-flex l-flex--modifier="pf-m-column"}}
170
- {{#> l-flex-item}}
171
- {{#> description-list description-list--modifier="pf-m-2-col-on-lg" description-list--attribute='aria-label="Pod information list"'}}
172
- {{#> description-list-group}}
173
- {{#> description-list-term}}
174
- Name
175
- {{/description-list-term}}
176
- {{#> description-list-description}}
177
- 3scale-control-fccb6ddb9-phyqv9
178
- {{/description-list-description}}
179
- {{/description-list-group}}
180
- {{#> description-list-group}}
181
- {{#> description-list-term}}
182
- Status
183
- {{/description-list-term}}
184
- {{#> description-list-description}}
185
- {{#> l-flex l-flex--modifier="pf-m-space-items-sm"}}
186
- {{#> l-flex-item}}
187
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
188
- {{/l-flex-item}}
189
- {{#> l-flex-item}}
190
- Running
191
- {{/l-flex-item}}
192
- {{/l-flex}}
193
- {{/description-list-description}}
194
- {{/description-list-group}}
195
- {{#> description-list-group}}
196
- {{#> description-list-term}}
197
- Namespace
198
- {{/description-list-term}}
199
- {{#> description-list-description}}
200
- {{#> l-flex l-flex--modifier="pf-m-space-items-sm"}}
201
- {{#> l-flex-item}}
202
- {{> label label--id="teal-icon" label--color="teal" label-text--value="NS"}}
203
- {{/l-flex-item}}
204
- {{#> l-flex-item}}
205
- <a href="#">knative-serving-ingress</a>
206
- {{/l-flex-item}}
207
- {{/l-flex}}
208
- {{/description-list-description}}
209
- {{/description-list-group}}
210
- {{#> description-list-group}}
211
- {{#> description-list-term}}
212
- Restart policy
213
- {{/description-list-term}}
214
- {{#> description-list-description}}
215
- Always restart
216
- {{/description-list-description}}
217
- {{/description-list-group}}
218
- {{#> description-list-group}}
219
- {{#> description-list-term}}
220
- Pod IP
221
- {{/description-list-term}}
222
- {{#> description-list-description}}
223
- 10.345.2.197
224
- {{/description-list-description}}
225
- {{/description-list-group}}
226
- {{#> description-list-group}}
227
- {{#> description-list-term}}
228
- Active deadline seconds
229
- {{/description-list-term}}
230
- {{#> description-list-description}}
231
- Not configured
232
- {{/description-list-description}}
233
- {{/description-list-group}}
234
- {{#> description-list-group}}
235
- {{#> description-list-term}}
236
- Created at
237
- {{/description-list-term}}
238
- {{#> description-list-description}}
239
- <time>Oct 15, 1:51 pm</time>
240
- {{/description-list-description}}
241
- {{/description-list-group}}
242
- {{#> description-list-group}}
243
- {{#> description-list-term}}
244
- Node
245
- {{/description-list-term}}
246
- {{#> description-list-description}}
247
- {{#> l-flex l-flex--modifier="pf-m-space-items-sm"}}
248
- {{#> l-flex-item}}
249
- {{> label label--id="purple-icon" label--color="purple" label-text--value="N"}}
250
- {{/l-flex-item}}
251
- {{#> l-flex-item}}
252
- ip-10-0-233-118.us-east-2.computer.external
253
- {{/l-flex-item}}
254
- {{/l-flex}}
255
- {{/description-list-description}}
256
- {{/description-list-group}}
257
- {{/description-list}}
258
- {{/l-flex-item}}
259
- {{/l-flex}}
260
- {{/tabs-template-pod-tab-content}}
261
- {{/tabs-template-pod-tab-content}}
262
- {{/page-main-section}}
263
- {{/tabs-template}}
264
- {{/inline}}
572
+ ```html isFullscreen
573
+ <div class="pf-v6-c-page" id="tabs-tables-and-tabs-example">
574
+ <div class="pf-v6-c-skip-to-content">
575
+ <a
576
+ class="pf-v6-c-button pf-m-primary"
577
+ href="#main-content-tabs-tables-and-tabs-example"
578
+ >
579
+ <span class="pf-v6-c-button__text">Skip to content</span>
580
+ </a>
581
+ </div>
582
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-masthead">
583
+ <span class="pf-v6-c-masthead__toggle">
584
+ <button
585
+ class="pf-v6-c-button pf-m-plain"
586
+ type="button"
587
+ aria-label="Global navigation"
588
+ >
589
+ <span class="pf-v6-c-button__icon">
590
+ <i class="fas fa-bars" aria-hidden="true"></i>
591
+ </span>
592
+ </button>
593
+ </span>
594
+ <div class="pf-v6-c-masthead__main">
595
+ <a class="pf-v6-c-masthead__brand" href="#">
596
+ <svg height="37px" viewBox="0 0 679 158">
597
+ <title>PF-HorizontalLogo-Color</title>
598
+ <defs>
599
+ <linearGradient
600
+ x1="68%"
601
+ y1="2.25860997e-13%"
602
+ x2="32%"
603
+ y2="100%"
604
+ id="linearGradient-tabs-tables-and-tabs-example-masthead"
605
+ >
606
+ <stop stop-color="#2B9AF3" offset="0%" />
607
+ <stop
608
+ stop-color="#73BCF7"
609
+ stop-opacity="0.502212631"
610
+ offset="100%"
611
+ />
612
+ </linearGradient>
613
+ </defs>
614
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
615
+ <g
616
+ transform="translate(206.000000, 45.750000)"
617
+ fill="var(--pf-t--global--text--color--regular)"
618
+ fill-rule="nonzero"
619
+ >
620
+ <path
621
+ 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"
622
+ />
623
+ <path
624
+ 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"
625
+ />
626
+ <path
627
+ 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"
628
+ />
629
+ <path
630
+ 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"
631
+ />
632
+ <path
633
+ 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"
634
+ />
635
+ <path
636
+ 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"
637
+ />
638
+ <path
639
+ 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"
640
+ />
641
+ <polygon
642
+ 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"
643
+ />
644
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
645
+ <path
646
+ 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"
647
+ />
648
+ </g>
649
+ <g transform="translate(0.000000, 0.000000)">
650
+ <path
651
+ 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"
652
+ fill="#0066CC"
653
+ />
654
+ <path
655
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
656
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
657
+ />
658
+ <path
659
+ 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"
660
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
661
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
662
+ />
663
+ </g>
664
+ </g>
665
+ </svg>
666
+ </a>
667
+ </div>
668
+ <div class="pf-v6-c-masthead__content">
669
+ <div
670
+ class="pf-v6-c-toolbar pf-m-static"
671
+ id="tabs-tables-and-tabs-example-masthead-toolbar"
672
+ >
673
+ <div class="pf-v6-c-toolbar__content">
674
+ <div class="pf-v6-c-toolbar__content-section">
675
+ <div
676
+ 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"
677
+ >
678
+ <div
679
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
680
+ >
681
+ <div class="pf-v6-c-toolbar__item">
682
+ <button
683
+ class="pf-v6-c-menu-toggle pf-m-plain"
684
+ type="button"
685
+ aria-expanded="false"
686
+ aria-label="Application launcher"
687
+ >
688
+ <span class="pf-v6-c-menu-toggle__icon">
689
+ <i class="fas fa-th" aria-hidden="true"></i>
690
+ </span>
691
+ </button>
692
+ </div>
693
+ <div class="pf-v6-c-toolbar__item">
694
+ <button
695
+ class="pf-v6-c-menu-toggle pf-m-plain"
696
+ type="button"
697
+ aria-expanded="false"
698
+ aria-label="Settings"
699
+ >
700
+ <span class="pf-v6-c-menu-toggle__icon">
701
+ <i class="fas fa-cog" aria-hidden="true"></i>
702
+ </span>
703
+ </button>
704
+ </div>
705
+ <div class="pf-v6-c-toolbar__item">
706
+ <button
707
+ class="pf-v6-c-menu-toggle pf-m-plain"
708
+ type="button"
709
+ aria-expanded="false"
710
+ aria-label="Help"
711
+ >
712
+ <span class="pf-v6-c-menu-toggle__icon">
713
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
714
+ </span>
715
+ </button>
716
+ </div>
717
+ </div>
718
+
719
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
720
+ <button
721
+ class="pf-v6-c-menu-toggle pf-m-plain"
722
+ type="button"
723
+ aria-expanded="false"
724
+ aria-label="Actions"
725
+ >
726
+ <span class="pf-v6-c-menu-toggle__icon">
727
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
728
+ </span>
729
+ </button>
730
+ </div>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </header>
737
+ <div class="pf-v6-c-page__sidebar">
738
+ <div class="pf-v6-c-page__sidebar-body">
739
+ <nav
740
+ class="pf-v6-c-nav"
741
+ id="tabs-tables-and-tabs-example-primary-nav"
742
+ aria-label="Global"
743
+ >
744
+ <ul class="pf-v6-c-nav__list" role="list">
745
+ <li class="pf-v6-c-nav__item">
746
+ <a href="#" class="pf-v6-c-nav__link">
747
+ <span class="pf-v6-c-nav__link-text">System panel</span>
748
+ </a>
749
+ </li>
750
+ <li class="pf-v6-c-nav__item">
751
+ <a
752
+ href="#"
753
+ class="pf-v6-c-nav__link pf-m-current"
754
+ aria-current="page"
755
+ >
756
+ <span class="pf-v6-c-nav__link-text">Policy</span>
757
+ </a>
758
+ </li>
759
+ <li class="pf-v6-c-nav__item">
760
+ <a href="#" class="pf-v6-c-nav__link">
761
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
762
+ </a>
763
+ </li>
764
+ <li class="pf-v6-c-nav__item">
765
+ <a href="#" class="pf-v6-c-nav__link">
766
+ <span class="pf-v6-c-nav__link-text">Network services</span>
767
+ </a>
768
+ </li>
769
+ <li class="pf-v6-c-nav__item">
770
+ <a href="#" class="pf-v6-c-nav__link">
771
+ <span class="pf-v6-c-nav__link-text">Server</span>
772
+ </a>
773
+ </li>
774
+ </ul>
775
+ </nav>
776
+ </div>
777
+ </div>
778
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
779
+ <main
780
+ class="pf-v6-c-page__main"
781
+ tabindex="-1"
782
+ id="main-content-tabs-tables-and-tabs-example"
783
+ >
784
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
785
+ <div class="pf-v6-c-page__main-body">
786
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
787
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
788
+ <li class="pf-v6-c-breadcrumb__item">
789
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
790
+ </li>
791
+ <li class="pf-v6-c-breadcrumb__item">
792
+ <span class="pf-v6-c-breadcrumb__item-divider">
793
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
794
+ </span>
795
+
796
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
797
+ </li>
798
+ <li class="pf-v6-c-breadcrumb__item">
799
+ <span class="pf-v6-c-breadcrumb__item-divider">
800
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
801
+ </span>
802
+
803
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
804
+ </li>
805
+ <li class="pf-v6-c-breadcrumb__item">
806
+ <span class="pf-v6-c-breadcrumb__item-divider">
807
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
808
+ </span>
809
+
810
+ <a
811
+ href="#"
812
+ class="pf-v6-c-breadcrumb__link pf-m-current"
813
+ aria-current="page"
814
+ >Section landing</a>
815
+ </li>
816
+ </ol>
817
+ </nav>
818
+ </div>
819
+ </section>
820
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
821
+ <div class="pf-v6-c-page__main-body">
822
+ <div class="pf-v6-c-content">
823
+ <h1>Main title</h1>
824
+ <p>This is a full page demo.</p>
825
+ </div>
826
+ </div>
827
+ </section>
828
+ <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
829
+ <div class="pf-v6-c-page__main-body">
830
+ <div
831
+ class="pf-v6-c-tabs pf-m-page-insets"
832
+ role="region"
833
+ id="tabs-tables-and-tabs-example-tabs"
834
+ >
835
+ <ul class="pf-v6-c-tabs__list" role="tablist">
836
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
837
+ <button
838
+ type="button"
839
+ class="pf-v6-c-tabs__link"
840
+ role="tab"
841
+ aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
842
+ id="tabs-tables-and-tabs-example-tabs-details-link"
843
+ >
844
+ <span class="pf-v6-c-tabs__item-text">Details</span>
845
+ </button>
846
+ </li>
847
+ <li class="pf-v6-c-tabs__item" role="presentation">
848
+ <button
849
+ type="button"
850
+ class="pf-v6-c-tabs__link"
851
+ role="tab"
852
+ aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
853
+ id="tabs-tables-and-tabs-example-tabs-yaml-link"
854
+ >
855
+ <span class="pf-v6-c-tabs__item-text">YAML</span>
856
+ </button>
857
+ </li>
858
+ <li class="pf-v6-c-tabs__item" role="presentation">
859
+ <button
860
+ type="button"
861
+ class="pf-v6-c-tabs__link"
862
+ role="tab"
863
+ aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
864
+ id="tabs-tables-and-tabs-example-tabs-environment-link"
865
+ >
866
+ <span class="pf-v6-c-tabs__item-text">Environment</span>
867
+ </button>
868
+ </li>
869
+ <li class="pf-v6-c-tabs__item" role="presentation">
870
+ <button
871
+ type="button"
872
+ class="pf-v6-c-tabs__link"
873
+ role="tab"
874
+ aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
875
+ id="tabs-tables-and-tabs-example-tabs-logs-link"
876
+ >
877
+ <span class="pf-v6-c-tabs__item-text">Logs</span>
878
+ </button>
879
+ </li>
880
+ <li class="pf-v6-c-tabs__item" role="presentation">
881
+ <button
882
+ type="button"
883
+ class="pf-v6-c-tabs__link"
884
+ role="tab"
885
+ aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
886
+ id="tabs-tables-and-tabs-example-tabs-events-link"
887
+ >
888
+ <span class="pf-v6-c-tabs__item-text">Events</span>
889
+ </button>
890
+ </li>
891
+ <li class="pf-v6-c-tabs__item" role="presentation">
892
+ <button
893
+ type="button"
894
+ class="pf-v6-c-tabs__link"
895
+ role="tab"
896
+ aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
897
+ id="tabs-tables-and-tabs-example-tabs-terminal-link"
898
+ >
899
+ <span class="pf-v6-c-tabs__item-text">Terminal</span>
900
+ </button>
901
+ </li>
902
+ </ul>
903
+ </div>
904
+ </div>
905
+ </section>
906
+ <section
907
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
908
+ >
909
+ <div class="pf-v6-c-page__main-body">
910
+ <div
911
+ class="pf-v6-c-tabs pf-m-secondary pf-m-page-insets"
912
+ role="region"
913
+ id="tabs-tables-and-tabs-example-tabs-secondary"
914
+ >
915
+ <ul class="pf-v6-c-tabs__list" role="tablist">
916
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
917
+ <button
918
+ type="button"
919
+ class="pf-v6-c-tabs__link"
920
+ role="tab"
921
+ aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
922
+ id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
923
+ >
924
+ <span class="pf-v6-c-tabs__item-text">Pod information</span>
925
+ </button>
926
+ </li>
927
+ <li class="pf-v6-c-tabs__item" role="presentation">
928
+ <button
929
+ type="button"
930
+ class="pf-v6-c-tabs__link"
931
+ role="tab"
932
+ aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
933
+ id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
934
+ >
935
+ <span class="pf-v6-c-tabs__item-text">Editable Aspects</span>
936
+ </button>
937
+ </li>
938
+ </ul>
939
+ </div>
940
+ <section
941
+ class="pf-v6-c-tab-content"
942
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
943
+ id="tabs-tables-and-tabs-example-tabs-details-panel"
944
+ role="tabpanel"
945
+ tabindex="0"
946
+ >
947
+ <div class="pf-v6-c-tab-content__body pf-m-padding">
948
+ <section
949
+ class="pf-v6-c-tab-content"
950
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
951
+ id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
952
+ role="tabpanel"
953
+ tabindex="0"
954
+ >
955
+ <div class="pf-v6-c-tab-content__body">
956
+ <div class="pf-v6-l-flex pf-m-column">
957
+ <div class="pf-v6-l-flex__item">
958
+ <dl
959
+ class="pf-v6-c-description-list pf-m-2-col-on-lg"
960
+ aria-label="Pod information list"
961
+ >
962
+ <div class="pf-v6-c-description-list__group">
963
+ <dt class="pf-v6-c-description-list__term">Name</dt>
964
+ <dd class="pf-v6-c-description-list__description">
965
+ <div
966
+ class="pf-v6-c-description-list__text"
967
+ >3scale-control-fccb6ddb9-phyqv9</div>
968
+ </dd>
969
+ </div>
970
+ <div class="pf-v6-c-description-list__group">
971
+ <dt class="pf-v6-c-description-list__term">Status</dt>
972
+ <dd class="pf-v6-c-description-list__description">
973
+ <div class="pf-v6-c-description-list__text">
974
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
975
+ <div class="pf-v6-l-flex__item">
976
+ <i
977
+ class="fas fa-fw fa-check-circle"
978
+ aria-hidden="true"
979
+ ></i>
980
+ </div>
981
+ <div class="pf-v6-l-flex__item">Running</div>
982
+ </div>
983
+ </div>
984
+ </dd>
985
+ </div>
986
+ <div class="pf-v6-c-description-list__group">
987
+ <dt class="pf-v6-c-description-list__term">Namespace</dt>
988
+ <dd class="pf-v6-c-description-list__description">
989
+ <div class="pf-v6-c-description-list__text">
990
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
991
+ <div class="pf-v6-l-flex__item">
992
+ <span class="pf-v6-c-label pf-m-teal">
993
+ <span class="pf-v6-c-label__content">
994
+ <span class="pf-v6-c-label__text">NS</span>
995
+ </span>
996
+ </span>
997
+ </div>
998
+ <div class="pf-v6-l-flex__item">
999
+ <a href="#">knative-serving-ingress</a>
1000
+ </div>
1001
+ </div>
1002
+ </div>
1003
+ </dd>
1004
+ </div>
1005
+ <div class="pf-v6-c-description-list__group">
1006
+ <dt
1007
+ class="pf-v6-c-description-list__term"
1008
+ >Restart policy</dt>
1009
+ <dd class="pf-v6-c-description-list__description">
1010
+ <div
1011
+ class="pf-v6-c-description-list__text"
1012
+ >Always restart</div>
1013
+ </dd>
1014
+ </div>
1015
+ <div class="pf-v6-c-description-list__group">
1016
+ <dt class="pf-v6-c-description-list__term">Pod IP</dt>
1017
+ <dd class="pf-v6-c-description-list__description">
1018
+ <div
1019
+ class="pf-v6-c-description-list__text"
1020
+ >10.345.2.197</div>
1021
+ </dd>
1022
+ </div>
1023
+ <div class="pf-v6-c-description-list__group">
1024
+ <dt
1025
+ class="pf-v6-c-description-list__term"
1026
+ >Active deadline seconds</dt>
1027
+ <dd class="pf-v6-c-description-list__description">
1028
+ <div
1029
+ class="pf-v6-c-description-list__text"
1030
+ >Not configured</div>
1031
+ </dd>
1032
+ </div>
1033
+ <div class="pf-v6-c-description-list__group">
1034
+ <dt class="pf-v6-c-description-list__term">Created at</dt>
1035
+ <dd class="pf-v6-c-description-list__description">
1036
+ <div class="pf-v6-c-description-list__text">
1037
+ <time>Oct 15, 1:51 pm</time>
1038
+ </div>
1039
+ </dd>
1040
+ </div>
1041
+ <div class="pf-v6-c-description-list__group">
1042
+ <dt class="pf-v6-c-description-list__term">Node</dt>
1043
+ <dd class="pf-v6-c-description-list__description">
1044
+ <div class="pf-v6-c-description-list__text">
1045
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1046
+ <div class="pf-v6-l-flex__item">
1047
+ <span class="pf-v6-c-label pf-m-purple">
1048
+ <span class="pf-v6-c-label__content">
1049
+ <span class="pf-v6-c-label__text">N</span>
1050
+ </span>
1051
+ </span>
1052
+ </div>
1053
+ <div
1054
+ class="pf-v6-l-flex__item"
1055
+ >ip-10-0-233-118.us-east-2.computer.external</div>
1056
+ </div>
1057
+ </div>
1058
+ </dd>
1059
+ </div>
1060
+ </dl>
1061
+ </div>
1062
+ </div>
1063
+ </div>
1064
+ </section>
1065
+ <section
1066
+ class="pf-v6-c-tab-content"
1067
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
1068
+ id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
1069
+ role="tabpanel"
1070
+ tabindex="0"
1071
+ hidden
1072
+ >
1073
+ <div class="pf-v6-c-tab-content__body">Editable aspects panel</div>
1074
+ </section>
1075
+ </div>
1076
+ </section>
1077
+ <section
1078
+ class="pf-v6-c-tab-content"
1079
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
1080
+ id="tabs-tables-and-tabs-example-tabs-yaml-panel"
1081
+ role="tabpanel"
1082
+ tabindex="0"
1083
+ hidden
1084
+ >
1085
+ <div class="pf-v6-c-tab-content__body pf-m-padding">YAML panel</div>
1086
+ </section>
1087
+ <section
1088
+ class="pf-v6-c-tab-content"
1089
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
1090
+ id="tabs-tables-and-tabs-example-tabs-environment-panel"
1091
+ role="tabpanel"
1092
+ tabindex="0"
1093
+ hidden
1094
+ >
1095
+ <div
1096
+ class="pf-v6-c-tab-content__body pf-m-padding"
1097
+ >Environment panel</div>
1098
+ </section>
1099
+ <section
1100
+ class="pf-v6-c-tab-content"
1101
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
1102
+ id="tabs-tables-and-tabs-example-tabs-logs-panel"
1103
+ role="tabpanel"
1104
+ tabindex="0"
1105
+ hidden
1106
+ >
1107
+ <div class="pf-v6-c-tab-content__body pf-m-padding">Logs panel</div>
1108
+ </section>
1109
+ <section
1110
+ class="pf-v6-c-tab-content"
1111
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
1112
+ id="tabs-tables-and-tabs-example-tabs-events-panel"
1113
+ role="tabpanel"
1114
+ tabindex="0"
1115
+ hidden
1116
+ >
1117
+ <div class="pf-v6-c-tab-content__body pf-m-padding">Events panel</div>
1118
+ </section>
1119
+ <section
1120
+ class="pf-v6-c-tab-content"
1121
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
1122
+ id="tabs-tables-and-tabs-example-tabs-terminal-panel"
1123
+ role="tabpanel"
1124
+ tabindex="0"
1125
+ hidden
1126
+ >
1127
+ <div class="pf-v6-c-tab-content__body pf-m-padding">Terminal panel</div>
1128
+ </section>
1129
+ </div>
1130
+ </section>
1131
+ </main>
1132
+ </div>
1133
+ </div>
1134
+
265
1135
  ```
266
1136
 
267
1137
  ### Nested tabs
268
1138
 
269
- ```hbs isFullscreen
270
- {{> page-template page-template--id="nested-tabs-example"}}
271
-
272
- {{#* inline "page-template-section"}}
273
- {{#> tabs-template tabs-template--id=(concat page-template--id "-tabs")}}
274
- {{#> page-main-tabs page-main-tabs--IsLimitWidth="true"}}
275
- {{#> tabs tabs--id=(concat tabs-template--id '-tabs') tabs--modifier="pf-m-page-insets"}}
276
- {{#> tabs-list}}
277
- {{> __tabs-item
278
- __tabs-item--current="true"
279
- __tabs-item--id="cluster-1"
280
- __tabs-item--aria-label="Cluster 1"
281
- __tabs-item--text="Cluster 1"
282
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-cluster-1-panel"')}}
283
- {{> __tabs-item
284
- __tabs-item--id="cluster-2"
285
- __tabs-item--aria-label="Cluster 2"
286
- __tabs-item--text="Cluster 2"
287
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-cluster-2-panel"')}}
288
- {{/tabs-list}}
289
- {{/tabs}}
290
- {{/page-main-tabs}}
291
- {{#> page-main-section page-main-section--IsLimitWidth="true" tab-content--id=(concat tabs-template--id '-tabs')}}
292
- {{#> tab-content tab-content--IsActive="true" tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-cluster-1-link" id="' tab-content--id '-cluster-1-panel"')}}
293
- {{> tabs--page-grid-view tabs--page-grid-view--id=(concat tabs-template--id '-tabs')}}
294
- {{/tab-content}}
295
- {{#> tab-content tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-cluster-2-link" id="' tab-content--id '-cluster-2-panel"')}}
296
- {{#> content}}
297
- <p>Cluster 2 content</p>
298
- {{/content}}
299
- {{/tab-content}}
300
- {{/page-main-section}}
301
- {{/tabs-template}}
302
- {{/inline}}
1139
+ ```html isFullscreen
1140
+ <div class="pf-v6-c-page" id="nested-tabs-example">
1141
+ <div class="pf-v6-c-skip-to-content">
1142
+ <a
1143
+ class="pf-v6-c-button pf-m-primary"
1144
+ href="#main-content-nested-tabs-example"
1145
+ >
1146
+ <span class="pf-v6-c-button__text">Skip to content</span>
1147
+ </a>
1148
+ </div>
1149
+ <header class="pf-v6-c-masthead" id="nested-tabs-example-masthead">
1150
+ <span class="pf-v6-c-masthead__toggle">
1151
+ <button
1152
+ class="pf-v6-c-button pf-m-plain"
1153
+ type="button"
1154
+ aria-label="Global navigation"
1155
+ >
1156
+ <span class="pf-v6-c-button__icon">
1157
+ <i class="fas fa-bars" aria-hidden="true"></i>
1158
+ </span>
1159
+ </button>
1160
+ </span>
1161
+ <div class="pf-v6-c-masthead__main">
1162
+ <a class="pf-v6-c-masthead__brand" href="#">
1163
+ <svg height="37px" viewBox="0 0 679 158">
1164
+ <title>PF-HorizontalLogo-Color</title>
1165
+ <defs>
1166
+ <linearGradient
1167
+ x1="68%"
1168
+ y1="2.25860997e-13%"
1169
+ x2="32%"
1170
+ y2="100%"
1171
+ id="linearGradient-nested-tabs-example-masthead"
1172
+ >
1173
+ <stop stop-color="#2B9AF3" offset="0%" />
1174
+ <stop
1175
+ stop-color="#73BCF7"
1176
+ stop-opacity="0.502212631"
1177
+ offset="100%"
1178
+ />
1179
+ </linearGradient>
1180
+ </defs>
1181
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1182
+ <g
1183
+ transform="translate(206.000000, 45.750000)"
1184
+ fill="var(--pf-t--global--text--color--regular)"
1185
+ fill-rule="nonzero"
1186
+ >
1187
+ <path
1188
+ 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"
1189
+ />
1190
+ <path
1191
+ 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"
1192
+ />
1193
+ <path
1194
+ 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"
1195
+ />
1196
+ <path
1197
+ 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"
1198
+ />
1199
+ <path
1200
+ 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"
1201
+ />
1202
+ <path
1203
+ 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"
1204
+ />
1205
+ <path
1206
+ 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"
1207
+ />
1208
+ <polygon
1209
+ 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"
1210
+ />
1211
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1212
+ <path
1213
+ 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"
1214
+ />
1215
+ </g>
1216
+ <g transform="translate(0.000000, 0.000000)">
1217
+ <path
1218
+ 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"
1219
+ fill="#0066CC"
1220
+ />
1221
+ <path
1222
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1223
+ fill="url(#linearGradient-nested-tabs-example-masthead)"
1224
+ />
1225
+ <path
1226
+ 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"
1227
+ fill="url(#linearGradient-nested-tabs-example-masthead)"
1228
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1229
+ />
1230
+ </g>
1231
+ </g>
1232
+ </svg>
1233
+ </a>
1234
+ </div>
1235
+ <div class="pf-v6-c-masthead__content">
1236
+ <div
1237
+ class="pf-v6-c-toolbar pf-m-static"
1238
+ id="nested-tabs-example-masthead-toolbar"
1239
+ >
1240
+ <div class="pf-v6-c-toolbar__content">
1241
+ <div class="pf-v6-c-toolbar__content-section">
1242
+ <div
1243
+ 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"
1244
+ >
1245
+ <div
1246
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1247
+ >
1248
+ <div class="pf-v6-c-toolbar__item">
1249
+ <button
1250
+ class="pf-v6-c-menu-toggle pf-m-plain"
1251
+ type="button"
1252
+ aria-expanded="false"
1253
+ aria-label="Application launcher"
1254
+ >
1255
+ <span class="pf-v6-c-menu-toggle__icon">
1256
+ <i class="fas fa-th" aria-hidden="true"></i>
1257
+ </span>
1258
+ </button>
1259
+ </div>
1260
+ <div class="pf-v6-c-toolbar__item">
1261
+ <button
1262
+ class="pf-v6-c-menu-toggle pf-m-plain"
1263
+ type="button"
1264
+ aria-expanded="false"
1265
+ aria-label="Settings"
1266
+ >
1267
+ <span class="pf-v6-c-menu-toggle__icon">
1268
+ <i class="fas fa-cog" aria-hidden="true"></i>
1269
+ </span>
1270
+ </button>
1271
+ </div>
1272
+ <div class="pf-v6-c-toolbar__item">
1273
+ <button
1274
+ class="pf-v6-c-menu-toggle pf-m-plain"
1275
+ type="button"
1276
+ aria-expanded="false"
1277
+ aria-label="Help"
1278
+ >
1279
+ <span class="pf-v6-c-menu-toggle__icon">
1280
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1281
+ </span>
1282
+ </button>
1283
+ </div>
1284
+ </div>
1285
+
1286
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1287
+ <button
1288
+ class="pf-v6-c-menu-toggle pf-m-plain"
1289
+ type="button"
1290
+ aria-expanded="false"
1291
+ aria-label="Actions"
1292
+ >
1293
+ <span class="pf-v6-c-menu-toggle__icon">
1294
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1295
+ </span>
1296
+ </button>
1297
+ </div>
1298
+ </div>
1299
+ </div>
1300
+ </div>
1301
+ </div>
1302
+ </div>
1303
+ </header>
1304
+ <div class="pf-v6-c-page__sidebar">
1305
+ <div class="pf-v6-c-page__sidebar-body">
1306
+ <nav
1307
+ class="pf-v6-c-nav"
1308
+ id="nested-tabs-example-primary-nav"
1309
+ aria-label="Global"
1310
+ >
1311
+ <ul class="pf-v6-c-nav__list" role="list">
1312
+ <li class="pf-v6-c-nav__item">
1313
+ <a href="#" class="pf-v6-c-nav__link">
1314
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1315
+ </a>
1316
+ </li>
1317
+ <li class="pf-v6-c-nav__item">
1318
+ <a
1319
+ href="#"
1320
+ class="pf-v6-c-nav__link pf-m-current"
1321
+ aria-current="page"
1322
+ >
1323
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1324
+ </a>
1325
+ </li>
1326
+ <li class="pf-v6-c-nav__item">
1327
+ <a href="#" class="pf-v6-c-nav__link">
1328
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1329
+ </a>
1330
+ </li>
1331
+ <li class="pf-v6-c-nav__item">
1332
+ <a href="#" class="pf-v6-c-nav__link">
1333
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1334
+ </a>
1335
+ </li>
1336
+ <li class="pf-v6-c-nav__item">
1337
+ <a href="#" class="pf-v6-c-nav__link">
1338
+ <span class="pf-v6-c-nav__link-text">Server</span>
1339
+ </a>
1340
+ </li>
1341
+ </ul>
1342
+ </nav>
1343
+ </div>
1344
+ </div>
1345
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1346
+ <main
1347
+ class="pf-v6-c-page__main"
1348
+ tabindex="-1"
1349
+ id="main-content-nested-tabs-example"
1350
+ >
1351
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1352
+ <div class="pf-v6-c-page__main-body">
1353
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1354
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1355
+ <li class="pf-v6-c-breadcrumb__item">
1356
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1357
+ </li>
1358
+ <li class="pf-v6-c-breadcrumb__item">
1359
+ <span class="pf-v6-c-breadcrumb__item-divider">
1360
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1361
+ </span>
1362
+
1363
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1364
+ </li>
1365
+ <li class="pf-v6-c-breadcrumb__item">
1366
+ <span class="pf-v6-c-breadcrumb__item-divider">
1367
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1368
+ </span>
1369
+
1370
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1371
+ </li>
1372
+ <li class="pf-v6-c-breadcrumb__item">
1373
+ <span class="pf-v6-c-breadcrumb__item-divider">
1374
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1375
+ </span>
1376
+
1377
+ <a
1378
+ href="#"
1379
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1380
+ aria-current="page"
1381
+ >Section landing</a>
1382
+ </li>
1383
+ </ol>
1384
+ </nav>
1385
+ </div>
1386
+ </section>
1387
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1388
+ <div class="pf-v6-c-page__main-body">
1389
+ <div class="pf-v6-c-content">
1390
+ <h1>Main title</h1>
1391
+ <p>This is a full page demo.</p>
1392
+ </div>
1393
+ </div>
1394
+ </section>
1395
+ <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
1396
+ <div class="pf-v6-c-page__main-body">
1397
+ <div
1398
+ class="pf-v6-c-tabs pf-m-page-insets"
1399
+ role="region"
1400
+ id="nested-tabs-example-tabs-tabs"
1401
+ >
1402
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1403
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1404
+ <button
1405
+ type="button"
1406
+ class="pf-v6-c-tabs__link"
1407
+ role="tab"
1408
+ aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1409
+ id="nested-tabs-example-tabs-tabs-cluster-1-link"
1410
+ >
1411
+ <span class="pf-v6-c-tabs__item-text">Cluster 1</span>
1412
+ </button>
1413
+ </li>
1414
+ <li class="pf-v6-c-tabs__item" role="presentation">
1415
+ <button
1416
+ type="button"
1417
+ class="pf-v6-c-tabs__link"
1418
+ role="tab"
1419
+ aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1420
+ id="nested-tabs-example-tabs-tabs-cluster-2-link"
1421
+ >
1422
+ <span class="pf-v6-c-tabs__item-text">Cluster 2</span>
1423
+ </button>
1424
+ </li>
1425
+ </ul>
1426
+ </div>
1427
+ </div>
1428
+ </section>
1429
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1430
+ <div class="pf-v6-c-page__main-body">
1431
+ <section
1432
+ class="pf-v6-c-tab-content"
1433
+ aria-labelledby="nested-tabs-example-tabs-tabs-cluster-1-link"
1434
+ id="nested-tabs-example-tabs-tabs-cluster-1-panel"
1435
+ role="tabpanel"
1436
+ tabindex="0"
1437
+ >
1438
+ <div class="pf-v6-c-tab-content__body">
1439
+ <div class="pf-v6-l-grid pf-m-gutter">
1440
+ <div
1441
+ class="pf-v6-l-grid__item pf-m-6-col-on-md pf-m-8-col-on-xl"
1442
+ >
1443
+ <div class="pf-v6-c-card pf-m-full-height">
1444
+ <div class="pf-v6-c-card__header">
1445
+ <h2 class="pf-v6-c-title pf-m-lg">Status</h2>
1446
+ </div>
1447
+ <div class="pf-v6-c-card__body">
1448
+ <div class="pf-v6-l-flex pf-m-column">
1449
+ <div class="pf-v6-l-flex__item">
1450
+ <div
1451
+ class="pf-v6-c-tabs"
1452
+ role="region"
1453
+ id="nested-tabs-example-tabs-tabs-subtabs"
1454
+ >
1455
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1456
+ <li
1457
+ class="pf-v6-c-tabs__item pf-m-current"
1458
+ role="presentation"
1459
+ >
1460
+ <button
1461
+ type="button"
1462
+ class="pf-v6-c-tabs__link"
1463
+ role="tab"
1464
+ aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1465
+ id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1466
+ >
1467
+ <span class="pf-v6-c-tabs__item-text">Cluster</span>
1468
+ </button>
1469
+ </li>
1470
+ <li
1471
+ class="pf-v6-c-tabs__item"
1472
+ role="presentation"
1473
+ >
1474
+ <button
1475
+ type="button"
1476
+ class="pf-v6-c-tabs__link"
1477
+ role="tab"
1478
+ aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1479
+ id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1480
+ >
1481
+ <span
1482
+ class="pf-v6-c-tabs__item-text"
1483
+ >Control plane</span>
1484
+ </button>
1485
+ </li>
1486
+ <li
1487
+ class="pf-v6-c-tabs__item"
1488
+ role="presentation"
1489
+ >
1490
+ <button
1491
+ type="button"
1492
+ class="pf-v6-c-tabs__link"
1493
+ role="tab"
1494
+ aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1495
+ id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1496
+ >
1497
+ <span
1498
+ class="pf-v6-c-tabs__item-text"
1499
+ >Operators</span>
1500
+ </button>
1501
+ </li>
1502
+ <li
1503
+ class="pf-v6-c-tabs__item"
1504
+ role="presentation"
1505
+ >
1506
+ <button
1507
+ type="button"
1508
+ class="pf-v6-c-tabs__link"
1509
+ role="tab"
1510
+ aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1511
+ id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1512
+ >
1513
+ <span
1514
+ class="pf-v6-c-tabs__item-text"
1515
+ >Virtualization</span>
1516
+ </button>
1517
+ </li>
1518
+ </ul>
1519
+ </div>
1520
+ </div>
1521
+ <div class="pf-v6-l-flex__item">
1522
+ <section
1523
+ class="pf-v6-c-tab-content"
1524
+ aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1525
+ id="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1526
+ role="tabpanel"
1527
+ tabindex="0"
1528
+ >
1529
+ <div class="pf-v6-c-tab-content__body">
1530
+ <div class="pf-v6-c-content">
1531
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in odio porttitor, feugiat risus in, feugiat arcu. Nullam euismod enim eget fringilla condimentum. Maecenas tincidunt et metus id aliquet. Integer et fermentum purus. Nulla tempor velit arcu, vitae semper purus iaculis at. Sed malesuada auctor luctus. Pellentesque et leo urna. Aliquam vitae felis congue lacus mattis fringilla. Nullam et ultricies erat, sed dignissim elit. Cras mattis pulvinar aliquam. In ac est nulla. Pellentesque fermentum nibh ac sapien porta, ut congue orci aliquam. Sed nisl est, tempor eu pharetra eget, ullamcorper ut augue. Vestibulum eleifend libero eu nulla cursus lacinia.</p>
1532
+ </div>
1533
+ </div>
1534
+ </section>
1535
+ <section
1536
+ class="pf-v6-c-tab-content"
1537
+ aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1538
+ id="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1539
+ role="tabpanel"
1540
+ tabindex="0"
1541
+ hidden
1542
+ >
1543
+ <div
1544
+ class="pf-v6-c-tab-content__body"
1545
+ >Control plane content</div>
1546
+ </section>
1547
+ <section
1548
+ class="pf-v6-c-tab-content"
1549
+ aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1550
+ id="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1551
+ role="tabpanel"
1552
+ tabindex="0"
1553
+ hidden
1554
+ >
1555
+ <div
1556
+ class="pf-v6-c-tab-content__body"
1557
+ >Operators content</div>
1558
+ </section>
1559
+ <section
1560
+ class="pf-v6-c-tab-content"
1561
+ aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1562
+ id="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1563
+ role="tabpanel"
1564
+ tabindex="0"
1565
+ hidden
1566
+ >
1567
+ <div
1568
+ class="pf-v6-c-tab-content__body"
1569
+ >Virtualization content</div>
1570
+ </section>
1571
+ </div>
1572
+ </div>
1573
+ </div>
1574
+ </div>
1575
+ </div>
1576
+ <div
1577
+ class="pf-v6-l-grid__item pf-m-6-col-on-md pf-m-4-col-on-xl"
1578
+ >
1579
+ <div class="pf-v6-l-flex pf-m-column pf-v6-u-h-100">
1580
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1581
+ <div class="pf-v6-c-card pf-m-full-height">
1582
+ <div class="pf-v6-c-card__header">
1583
+ <h2 class="pf-v6-c-title pf-m-lg">Title of card</h2>
1584
+ </div>
1585
+ </div>
1586
+ </div>
1587
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1588
+ <div class="pf-v6-c-card pf-m-full-height">
1589
+ <div class="pf-v6-c-card__header">
1590
+ <h2 class="pf-v6-c-title pf-m-lg">Title of card</h2>
1591
+ </div>
1592
+ </div>
1593
+ </div>
1594
+ </div>
1595
+ </div>
1596
+ </div>
1597
+ </div>
1598
+ </section>
1599
+ <section
1600
+ class="pf-v6-c-tab-content"
1601
+ aria-labelledby="nested-tabs-example-tabs-tabs-cluster-2-link"
1602
+ id="nested-tabs-example-tabs-tabs-cluster-2-panel"
1603
+ role="tabpanel"
1604
+ tabindex="0"
1605
+ hidden
1606
+ >
1607
+ <div class="pf-v6-c-tab-content__body">
1608
+ <div class="pf-v6-c-content">
1609
+ <p>Cluster 2 content</p>
1610
+ </div>
1611
+ </div>
1612
+ </section>
1613
+ </div>
1614
+ </section>
1615
+ </main>
1616
+ </div>
1617
+ </div>
1618
+
303
1619
  ```
304
1620
 
305
1621
  ### Tables and tabs
306
1622
 
307
- ```hbs isFullscreen
308
- {{> page-template page-template--id='table-tabs-example'}}
309
-
310
- {{#* inline 'page-template-section'}}
311
- {{#> tabs-template tabs-template--id=(concat page-template--id '-tabs')}}
312
- {{#> page-main-section page-main-section--modifier='pf-m-light' tab-content--id=(concat tabs-template--id '-tabs')}}
313
- {{> toolbar-template
314
- toolbar-template--id=(concat tabs-template--id '-toolbar')
315
- toolbar-template--HasToggleGroup=true
316
- toolbar-template--HasFilter=true
317
- toolbar-template--HasNoPagination=true
318
- toolbar-template--HasSortButton=true
319
- toolbar-template--HasOverflowMenu=true
320
- toolbar-template--HasOverflowMenuSecondButton=true
321
- toolbar-template--OverflowButton1Text='Generate'
322
- toolbar-template--OverflowButton2Text='Deploy'
323
- toolbar-template--filterText='Name'
324
- }}
325
- {{> divider}}
326
- {{#> drawer drawer--id=(concat tabs-template--id '-tabs') primary-detail-template-template--id=(concat tabs-template--id '-tabs') drawer-panel--IsOpen="true" drawer--modifier="pf-m-inline"}}
327
- {{#> drawer-main}}
328
- <!-- Content -->
329
- {{#> drawer-content}}
330
- {{> tabs--table}}
331
- {{/drawer-content}}
332
-
333
- <!-- Panel -->
334
- {{#> drawer-panel drawer-panel--modifier="pf-m-width-33 pf-m-width-33-on-xl"}}
335
- {{> tabs--panel-header tabs--panel-header--title="Node 2" tabs--panel-header--sub-title='<a href="#">siemur/test-space</a>'}}
336
- {{#> drawer-body drawer-body--modifier="pf-m-no-padding"}}
337
- {{> primary-detail-template-panel-tabs primary-detail-template-panel-tabs--modifier="pf-m-box pf-m-fill"}}
338
- {{/drawer-body}}
339
- {{#> drawer-body primary-detail-template-template--id=(concat tabs-template--id '-tabs')}}
340
- {{> primary-detail-template-panel-tab-content progress--modifier="pf-m-sm" primary-detail-template-panel-tab-content--HasLabels="true"}}
341
- {{/drawer-body}}
342
- {{/drawer-panel}}
343
- {{/drawer-main}}
344
- {{/drawer}}
345
- {{/page-main-section}}
346
- {{/tabs-template}}
347
- {{/inline}}
1623
+ ```html isFullscreen
1624
+ <div class="pf-v6-c-page" id="table-tabs-example">
1625
+ <div class="pf-v6-c-skip-to-content">
1626
+ <a
1627
+ class="pf-v6-c-button pf-m-primary"
1628
+ href="#main-content-table-tabs-example"
1629
+ >
1630
+ <span class="pf-v6-c-button__text">Skip to content</span>
1631
+ </a>
1632
+ </div>
1633
+ <header class="pf-v6-c-masthead" id="table-tabs-example-masthead">
1634
+ <span class="pf-v6-c-masthead__toggle">
1635
+ <button
1636
+ class="pf-v6-c-button pf-m-plain"
1637
+ type="button"
1638
+ aria-label="Global navigation"
1639
+ >
1640
+ <span class="pf-v6-c-button__icon">
1641
+ <i class="fas fa-bars" aria-hidden="true"></i>
1642
+ </span>
1643
+ </button>
1644
+ </span>
1645
+ <div class="pf-v6-c-masthead__main">
1646
+ <a class="pf-v6-c-masthead__brand" href="#">
1647
+ <svg height="37px" viewBox="0 0 679 158">
1648
+ <title>PF-HorizontalLogo-Color</title>
1649
+ <defs>
1650
+ <linearGradient
1651
+ x1="68%"
1652
+ y1="2.25860997e-13%"
1653
+ x2="32%"
1654
+ y2="100%"
1655
+ id="linearGradient-table-tabs-example-masthead"
1656
+ >
1657
+ <stop stop-color="#2B9AF3" offset="0%" />
1658
+ <stop
1659
+ stop-color="#73BCF7"
1660
+ stop-opacity="0.502212631"
1661
+ offset="100%"
1662
+ />
1663
+ </linearGradient>
1664
+ </defs>
1665
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1666
+ <g
1667
+ transform="translate(206.000000, 45.750000)"
1668
+ fill="var(--pf-t--global--text--color--regular)"
1669
+ fill-rule="nonzero"
1670
+ >
1671
+ <path
1672
+ 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"
1673
+ />
1674
+ <path
1675
+ 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"
1676
+ />
1677
+ <path
1678
+ 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"
1679
+ />
1680
+ <path
1681
+ 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"
1682
+ />
1683
+ <path
1684
+ 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"
1685
+ />
1686
+ <path
1687
+ 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"
1688
+ />
1689
+ <path
1690
+ 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"
1691
+ />
1692
+ <polygon
1693
+ 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"
1694
+ />
1695
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1696
+ <path
1697
+ 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"
1698
+ />
1699
+ </g>
1700
+ <g transform="translate(0.000000, 0.000000)">
1701
+ <path
1702
+ 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"
1703
+ fill="#0066CC"
1704
+ />
1705
+ <path
1706
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1707
+ fill="url(#linearGradient-table-tabs-example-masthead)"
1708
+ />
1709
+ <path
1710
+ 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"
1711
+ fill="url(#linearGradient-table-tabs-example-masthead)"
1712
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1713
+ />
1714
+ </g>
1715
+ </g>
1716
+ </svg>
1717
+ </a>
1718
+ </div>
1719
+ <div class="pf-v6-c-masthead__content">
1720
+ <div
1721
+ class="pf-v6-c-toolbar pf-m-static"
1722
+ id="table-tabs-example-masthead-toolbar"
1723
+ >
1724
+ <div class="pf-v6-c-toolbar__content">
1725
+ <div class="pf-v6-c-toolbar__content-section">
1726
+ <div
1727
+ 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"
1728
+ >
1729
+ <div
1730
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1731
+ >
1732
+ <div class="pf-v6-c-toolbar__item">
1733
+ <button
1734
+ class="pf-v6-c-menu-toggle pf-m-plain"
1735
+ type="button"
1736
+ aria-expanded="false"
1737
+ aria-label="Application launcher"
1738
+ >
1739
+ <span class="pf-v6-c-menu-toggle__icon">
1740
+ <i class="fas fa-th" aria-hidden="true"></i>
1741
+ </span>
1742
+ </button>
1743
+ </div>
1744
+ <div class="pf-v6-c-toolbar__item">
1745
+ <button
1746
+ class="pf-v6-c-menu-toggle pf-m-plain"
1747
+ type="button"
1748
+ aria-expanded="false"
1749
+ aria-label="Settings"
1750
+ >
1751
+ <span class="pf-v6-c-menu-toggle__icon">
1752
+ <i class="fas fa-cog" aria-hidden="true"></i>
1753
+ </span>
1754
+ </button>
1755
+ </div>
1756
+ <div class="pf-v6-c-toolbar__item">
1757
+ <button
1758
+ class="pf-v6-c-menu-toggle pf-m-plain"
1759
+ type="button"
1760
+ aria-expanded="false"
1761
+ aria-label="Help"
1762
+ >
1763
+ <span class="pf-v6-c-menu-toggle__icon">
1764
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1765
+ </span>
1766
+ </button>
1767
+ </div>
1768
+ </div>
1769
+
1770
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1771
+ <button
1772
+ class="pf-v6-c-menu-toggle pf-m-plain"
1773
+ type="button"
1774
+ aria-expanded="false"
1775
+ aria-label="Actions"
1776
+ >
1777
+ <span class="pf-v6-c-menu-toggle__icon">
1778
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1779
+ </span>
1780
+ </button>
1781
+ </div>
1782
+ </div>
1783
+ </div>
1784
+ </div>
1785
+ </div>
1786
+ </div>
1787
+ </header>
1788
+ <div class="pf-v6-c-page__sidebar">
1789
+ <div class="pf-v6-c-page__sidebar-body">
1790
+ <nav
1791
+ class="pf-v6-c-nav"
1792
+ id="table-tabs-example-primary-nav"
1793
+ aria-label="Global"
1794
+ >
1795
+ <ul class="pf-v6-c-nav__list" role="list">
1796
+ <li class="pf-v6-c-nav__item">
1797
+ <a href="#" class="pf-v6-c-nav__link">
1798
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1799
+ </a>
1800
+ </li>
1801
+ <li class="pf-v6-c-nav__item">
1802
+ <a
1803
+ href="#"
1804
+ class="pf-v6-c-nav__link pf-m-current"
1805
+ aria-current="page"
1806
+ >
1807
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1808
+ </a>
1809
+ </li>
1810
+ <li class="pf-v6-c-nav__item">
1811
+ <a href="#" class="pf-v6-c-nav__link">
1812
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1813
+ </a>
1814
+ </li>
1815
+ <li class="pf-v6-c-nav__item">
1816
+ <a href="#" class="pf-v6-c-nav__link">
1817
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1818
+ </a>
1819
+ </li>
1820
+ <li class="pf-v6-c-nav__item">
1821
+ <a href="#" class="pf-v6-c-nav__link">
1822
+ <span class="pf-v6-c-nav__link-text">Server</span>
1823
+ </a>
1824
+ </li>
1825
+ </ul>
1826
+ </nav>
1827
+ </div>
1828
+ </div>
1829
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1830
+ <main
1831
+ class="pf-v6-c-page__main"
1832
+ tabindex="-1"
1833
+ id="main-content-table-tabs-example"
1834
+ >
1835
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1836
+ <div class="pf-v6-c-page__main-body">
1837
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1838
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1839
+ <li class="pf-v6-c-breadcrumb__item">
1840
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1841
+ </li>
1842
+ <li class="pf-v6-c-breadcrumb__item">
1843
+ <span class="pf-v6-c-breadcrumb__item-divider">
1844
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1845
+ </span>
1846
+
1847
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1848
+ </li>
1849
+ <li class="pf-v6-c-breadcrumb__item">
1850
+ <span class="pf-v6-c-breadcrumb__item-divider">
1851
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1852
+ </span>
1853
+
1854
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1855
+ </li>
1856
+ <li class="pf-v6-c-breadcrumb__item">
1857
+ <span class="pf-v6-c-breadcrumb__item-divider">
1858
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1859
+ </span>
1860
+
1861
+ <a
1862
+ href="#"
1863
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1864
+ aria-current="page"
1865
+ >Section landing</a>
1866
+ </li>
1867
+ </ol>
1868
+ </nav>
1869
+ </div>
1870
+ </section>
1871
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1872
+ <div class="pf-v6-c-page__main-body">
1873
+ <div class="pf-v6-c-content">
1874
+ <h1>Main title</h1>
1875
+ <p>This is a full page demo.</p>
1876
+ </div>
1877
+ </div>
1878
+ </section>
1879
+ <section class="pf-v6-c-page__main-section pf-m-light">
1880
+ <div class="pf-v6-c-page__main-body">
1881
+ <div class="pf-v6-c-toolbar" id="table-tabs-example-tabs-toolbar">
1882
+ <div class="pf-v6-c-toolbar__content">
1883
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
1884
+ <div
1885
+ class="pf-v6-c-toolbar__group pf-m-show-on-xl pf-m-toggle-group"
1886
+ >
1887
+ <div class="pf-v6-c-toolbar__toggle">
1888
+ <button
1889
+ class="pf-v6-c-menu-toggle pf-m-plain"
1890
+ type="button"
1891
+ aria-expanded="false"
1892
+ aria-label="Show filters"
1893
+ aria-controls="table-tabs-example-tabs-toolbar-expandable-content"
1894
+ >
1895
+ <span class="pf-v6-c-menu-toggle__icon">
1896
+ <i class="fas fa-filter" aria-hidden="true"></i>
1897
+ </span>
1898
+ </button>
1899
+ </div>
1900
+
1901
+ <div class="pf-v6-c-toolbar__item">
1902
+ <button
1903
+ class="pf-v6-c-menu-toggle"
1904
+ type="button"
1905
+ aria-expanded="false"
1906
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status"
1907
+ >
1908
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
1909
+ <span class="pf-v6-c-menu-toggle__controls">
1910
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1911
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1912
+ </span>
1913
+ </span>
1914
+ </button>
1915
+ </div>
1916
+ </div>
1917
+
1918
+ <div class="pf-v6-c-toolbar__item">
1919
+ <button
1920
+ class="pf-v6-c-button pf-m-plain"
1921
+ type="button"
1922
+ aria-label="Sort"
1923
+ >
1924
+ <span class="pf-v6-c-button__icon">
1925
+ <i
1926
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1927
+ aria-hidden="true"
1928
+ ></i>
1929
+ </span>
1930
+ </button>
1931
+ </div>
1932
+
1933
+ <div
1934
+ class="pf-v6-c-overflow-menu"
1935
+ id="table-tabs-example-tabs-toolbar-overflow-menu"
1936
+ >
1937
+ <div
1938
+ class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
1939
+ >
1940
+ <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
1941
+ <div class="pf-v6-c-overflow-menu__item">
1942
+ <button
1943
+ class="pf-v6-c-button pf-m-primary"
1944
+ type="button"
1945
+ >
1946
+ <span class="pf-v6-c-button__text">Generate</span>
1947
+ </button>
1948
+ </div>
1949
+
1950
+ <div class="pf-v6-c-overflow-menu__item">
1951
+ <button
1952
+ class="pf-v6-c-button pf-m-secondary"
1953
+ type="button"
1954
+ >
1955
+ <span class="pf-v6-c-button__text">Deploy</span>
1956
+ </button>
1957
+ </div>
1958
+ </div>
1959
+ </div>
1960
+ <div class="pf-v6-c-overflow-menu__control">
1961
+ <button
1962
+ class="pf-v6-c-menu-toggle pf-m-plain"
1963
+ type="button"
1964
+ aria-expanded="false"
1965
+ aria-label="Menu toggle"
1966
+ id="table-tabs-example-tabs-toolbar-overflow-menu-toggle"
1967
+ >
1968
+ <span class="pf-v6-c-menu-toggle__icon">
1969
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1970
+ </span>
1971
+ </button>
1972
+ </div>
1973
+ </div>
1974
+ </div>
1975
+
1976
+ <div
1977
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
1978
+ id="table-tabs-example-tabs-toolbar-expandable-content"
1979
+ hidden
1980
+ ></div>
1981
+ </div>
1982
+ </div>
1983
+ <hr class="pf-v6-c-divider" />
1984
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
1985
+ <div class="pf-v6-c-drawer__main">
1986
+ <!-- Content -->
1987
+ <div class="pf-v6-c-drawer__content">
1988
+ <div class="pf-v6-c-drawer__body">
1989
+ <table
1990
+ class="pf-v6-c-table pf-m-grid-md"
1991
+ role="grid"
1992
+ aria-label="This is a table with checkboxes"
1993
+ id="table-tabs-example-table"
1994
+ >
1995
+ <thead class="pf-v6-c-table__thead">
1996
+ <tr class="pf-v6-c-table__tr" role="row">
1997
+ <td
1998
+ class="pf-v6-c-table__td pf-v6-c-table__check"
1999
+ role="cell"
2000
+ >
2001
+ <label
2002
+ class="pf-v6-c-check pf-m-standalone"
2003
+ id="table-tabs-example-table-checkrow-check"
2004
+ for="table-tabs-example-table-checkrow-check-input"
2005
+ >
2006
+ <input
2007
+ class="pf-v6-c-check__input"
2008
+ type="checkbox"
2009
+ id="table-tabs-example-table-checkrow-check-input"
2010
+ name="table-tabs-example-table-checkrow-check-input"
2011
+ aria-label="Standalone check"
2012
+ />
2013
+ </label>
2014
+ </td>
2015
+
2016
+ <th
2017
+ class="pf-v6-c-table__th"
2018
+ role="columnheader"
2019
+ scope="col"
2020
+ >Repositories</th>
2021
+
2022
+ <th
2023
+ class="pf-v6-c-table__th"
2024
+ role="columnheader"
2025
+ scope="col"
2026
+ >Branches</th>
2027
+
2028
+ <th
2029
+ class="pf-v6-c-table__th"
2030
+ role="columnheader"
2031
+ scope="col"
2032
+ >Pull requests</th>
2033
+
2034
+ <th
2035
+ class="pf-v6-c-table__th"
2036
+ role="columnheader"
2037
+ scope="col"
2038
+ >Workspaces</th>
2039
+
2040
+ <th
2041
+ class="pf-v6-c-table__th"
2042
+ role="columnheader"
2043
+ scope="col"
2044
+ >Last commit</th>
2045
+
2046
+ <td class="pf-v6-c-table__td"></td>
2047
+ </tr>
2048
+ </thead>
2049
+
2050
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
2051
+ <tr class="pf-v6-c-table__tr" role="row">
2052
+ <td
2053
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2054
+ role="cell"
2055
+ >
2056
+ <label
2057
+ class="pf-v6-c-check pf-m-standalone"
2058
+ id="table-tabs-example-table-checkrow-1-check"
2059
+ for="table-tabs-example-table-checkrow-1-check-input"
2060
+ >
2061
+ <input
2062
+ class="pf-v6-c-check__input"
2063
+ type="checkbox"
2064
+ id="table-tabs-example-table-checkrow-1-check-input"
2065
+ name="table-tabs-example-table-checkrow-1-check-input"
2066
+ aria-label="Standalone check"
2067
+ />
2068
+ </label>
2069
+ </td>
2070
+
2071
+ <th
2072
+ class="pf-v6-c-table__th"
2073
+ role="columnheader"
2074
+ data-label="Repository name"
2075
+ >
2076
+ <div>
2077
+ <div id="table-tabs-example-table-node1">Node 1</div>
2078
+ <a href="#">siemur/test-space</a>
2079
+ </div>
2080
+ </th>
2081
+
2082
+ <td
2083
+ class="pf-v6-c-table__td"
2084
+ role="cell"
2085
+ data-label="Branches"
2086
+ >
2087
+ <div
2088
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2089
+ >
2090
+ <div class="pf-v6-l-flex__item">10</div>
2091
+ <div class="pf-v6-l-flex__item">
2092
+ <i class="fas fa-code-branch"></i>
2093
+ </div>
2094
+ </div>
2095
+ </td>
2096
+ <td
2097
+ class="pf-v6-c-table__td"
2098
+ role="cell"
2099
+ data-label="Pull requests"
2100
+ >
2101
+ <div
2102
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2103
+ >
2104
+ <div class="pf-v6-l-flex__item">25</div>
2105
+ <div class="pf-v6-l-flex__item">
2106
+ <i class="fas fa-code"></i>
2107
+ </div>
2108
+ </div>
2109
+ </td>
2110
+ <td
2111
+ class="pf-v6-c-table__td"
2112
+ role="cell"
2113
+ data-label="Workspaces"
2114
+ >
2115
+ <div
2116
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2117
+ >
2118
+ <div class="pf-v6-l-flex__item">5</div>
2119
+ <div class="pf-v6-l-flex__item">
2120
+ <i class="fas fa-cube"></i>
2121
+ </div>
2122
+ </div>
2123
+ </td>
2124
+ <td
2125
+ class="pf-v6-c-table__td"
2126
+ role="cell"
2127
+ data-label="Last commit"
2128
+ >2 days ago</td>
2129
+
2130
+ <td
2131
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2132
+ role="cell"
2133
+ >
2134
+ <button
2135
+ class="pf-v6-c-menu-toggle pf-m-plain"
2136
+ type="button"
2137
+ aria-expanded="false"
2138
+ aria-label="Menu toggle"
2139
+ >
2140
+ <span class="pf-v6-c-menu-toggle__icon">
2141
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2142
+ </span>
2143
+ </button>
2144
+ </td>
2145
+ </tr>
2146
+
2147
+ <tr class="pf-v6-c-table__tr pf-m-selected" role="row">
2148
+ <td
2149
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2150
+ role="cell"
2151
+ >
2152
+ <label
2153
+ class="pf-v6-c-check pf-m-standalone"
2154
+ id="table-tabs-example-table-checkrow-2-check"
2155
+ for="table-tabs-example-table-checkrow-2-check-input"
2156
+ >
2157
+ <input
2158
+ class="pf-v6-c-check__input"
2159
+ type="checkbox"
2160
+ id="table-tabs-example-table-checkrow-2-check-input"
2161
+ name="table-tabs-example-table-checkrow-2-check-input"
2162
+ aria-label="Standalone check"
2163
+ />
2164
+ </label>
2165
+ </td>
2166
+
2167
+ <th
2168
+ class="pf-v6-c-table__th"
2169
+ role="columnheader"
2170
+ data-label="Repository name"
2171
+ >
2172
+ <div>
2173
+ <div id="table-tabs-example-table-node2">Node 2</div>
2174
+ <a href="#">siemur/test-space</a>
2175
+ </div>
2176
+ </th>
2177
+
2178
+ <td
2179
+ class="pf-v6-c-table__td"
2180
+ role="cell"
2181
+ data-label="Branches"
2182
+ >
2183
+ <div
2184
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2185
+ >
2186
+ <div class="pf-v6-l-flex__item">8</div>
2187
+ <div class="pf-v6-l-flex__item">
2188
+ <i class="fas fa-code-branch"></i>
2189
+ </div>
2190
+ </div>
2191
+ </td>
2192
+ <td
2193
+ class="pf-v6-c-table__td"
2194
+ role="cell"
2195
+ data-label="Pull requests"
2196
+ >
2197
+ <div
2198
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2199
+ >
2200
+ <div class="pf-v6-l-flex__item">30</div>
2201
+ <div class="pf-v6-l-flex__item">
2202
+ <i class="fas fa-code"></i>
2203
+ </div>
2204
+ </div>
2205
+ </td>
2206
+ <td
2207
+ class="pf-v6-c-table__td"
2208
+ role="cell"
2209
+ data-label="Workspaces"
2210
+ >
2211
+ <div
2212
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2213
+ >
2214
+ <div class="pf-v6-l-flex__item">2</div>
2215
+ <div class="pf-v6-l-flex__item">
2216
+ <i class="fas fa-cube"></i>
2217
+ </div>
2218
+ </div>
2219
+ </td>
2220
+ <td
2221
+ class="pf-v6-c-table__td"
2222
+ role="cell"
2223
+ data-label="Last commit"
2224
+ >2 days ago</td>
2225
+
2226
+ <td
2227
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2228
+ role="cell"
2229
+ >
2230
+ <button
2231
+ class="pf-v6-c-menu-toggle pf-m-plain"
2232
+ type="button"
2233
+ aria-expanded="false"
2234
+ aria-label="Menu toggle"
2235
+ >
2236
+ <span class="pf-v6-c-menu-toggle__icon">
2237
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2238
+ </span>
2239
+ </button>
2240
+ </td>
2241
+ </tr>
2242
+
2243
+ <tr class="pf-v6-c-table__tr" role="row">
2244
+ <td
2245
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2246
+ role="cell"
2247
+ >
2248
+ <label
2249
+ class="pf-v6-c-check pf-m-standalone"
2250
+ id="table-tabs-example-table-checkrow-3-check"
2251
+ for="table-tabs-example-table-checkrow-3-check-input"
2252
+ >
2253
+ <input
2254
+ class="pf-v6-c-check__input"
2255
+ type="checkbox"
2256
+ id="table-tabs-example-table-checkrow-3-check-input"
2257
+ name="table-tabs-example-table-checkrow-3-check-input"
2258
+ aria-label="Standalone check"
2259
+ />
2260
+ </label>
2261
+ </td>
2262
+
2263
+ <th
2264
+ class="pf-v6-c-table__th"
2265
+ role="columnheader"
2266
+ data-label="Repository name"
2267
+ >
2268
+ <div>
2269
+ <div id="table-tabs-example-table-node3">Node 3</div>
2270
+ <a href="#">siemur/test-space</a>
2271
+ </div>
2272
+ </th>
2273
+
2274
+ <td
2275
+ class="pf-v6-c-table__td"
2276
+ role="cell"
2277
+ data-label="Branches"
2278
+ >
2279
+ <div
2280
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2281
+ >
2282
+ <div class="pf-v6-l-flex__item">12</div>
2283
+ <div class="pf-v6-l-flex__item">
2284
+ <i class="fas fa-code-branch"></i>
2285
+ </div>
2286
+ </div>
2287
+ </td>
2288
+ <td
2289
+ class="pf-v6-c-table__td"
2290
+ role="cell"
2291
+ data-label="Pull requests"
2292
+ >
2293
+ <div
2294
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2295
+ >
2296
+ <div class="pf-v6-l-flex__item">48</div>
2297
+ <div class="pf-v6-l-flex__item">
2298
+ <i class="fas fa-code"></i>
2299
+ </div>
2300
+ </div>
2301
+ </td>
2302
+ <td
2303
+ class="pf-v6-c-table__td"
2304
+ role="cell"
2305
+ data-label="Workspaces"
2306
+ >
2307
+ <div
2308
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2309
+ >
2310
+ <div class="pf-v6-l-flex__item">13</div>
2311
+ <div class="pf-v6-l-flex__item">
2312
+ <i class="fas fa-cube"></i>
2313
+ </div>
2314
+ </div>
2315
+ </td>
2316
+ <td
2317
+ class="pf-v6-c-table__td"
2318
+ role="cell"
2319
+ data-label="Last commit"
2320
+ >30 days ago</td>
2321
+
2322
+ <td
2323
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2324
+ role="cell"
2325
+ >
2326
+ <button
2327
+ class="pf-v6-c-menu-toggle pf-m-plain"
2328
+ type="button"
2329
+ aria-expanded="false"
2330
+ aria-label="Menu toggle"
2331
+ >
2332
+ <span class="pf-v6-c-menu-toggle__icon">
2333
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2334
+ </span>
2335
+ </button>
2336
+ </td>
2337
+ </tr>
2338
+
2339
+ <tr class="pf-v6-c-table__tr" role="row">
2340
+ <td
2341
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2342
+ role="cell"
2343
+ >
2344
+ <label
2345
+ class="pf-v6-c-check pf-m-standalone"
2346
+ id="table-tabs-example-table-checkrow-4-check"
2347
+ for="table-tabs-example-table-checkrow-4-check-input"
2348
+ >
2349
+ <input
2350
+ class="pf-v6-c-check__input"
2351
+ type="checkbox"
2352
+ id="table-tabs-example-table-checkrow-4-check-input"
2353
+ name="table-tabs-example-table-checkrow-4-check-input"
2354
+ aria-label="Standalone check"
2355
+ />
2356
+ </label>
2357
+ </td>
2358
+
2359
+ <th
2360
+ class="pf-v6-c-table__th"
2361
+ role="columnheader"
2362
+ data-label="Repository name"
2363
+ >
2364
+ <div>
2365
+ <div id="table-tabs-example-table-node4">Node 4</div>
2366
+ <a href="#">siemur/test-space</a>
2367
+ </div>
2368
+ </th>
2369
+
2370
+ <td
2371
+ class="pf-v6-c-table__td"
2372
+ role="cell"
2373
+ data-label="Branches"
2374
+ >
2375
+ <div
2376
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2377
+ >
2378
+ <div class="pf-v6-l-flex__item">3</div>
2379
+ <div class="pf-v6-l-flex__item">
2380
+ <i class="fas fa-code-branch"></i>
2381
+ </div>
2382
+ </div>
2383
+ </td>
2384
+ <td
2385
+ class="pf-v6-c-table__td"
2386
+ role="cell"
2387
+ data-label="Pull requests"
2388
+ >
2389
+ <div
2390
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2391
+ >
2392
+ <div class="pf-v6-l-flex__item">8</div>
2393
+ <div class="pf-v6-l-flex__item">
2394
+ <i class="fas fa-code"></i>
2395
+ </div>
2396
+ </div>
2397
+ </td>
2398
+ <td
2399
+ class="pf-v6-c-table__td"
2400
+ role="cell"
2401
+ data-label="Workspaces"
2402
+ >
2403
+ <div
2404
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2405
+ >
2406
+ <div class="pf-v6-l-flex__item">20</div>
2407
+ <div class="pf-v6-l-flex__item">
2408
+ <i class="fas fa-cube"></i>
2409
+ </div>
2410
+ </div>
2411
+ </td>
2412
+ <td
2413
+ class="pf-v6-c-table__td"
2414
+ role="cell"
2415
+ data-label="Last commit"
2416
+ >8 days ago</td>
2417
+
2418
+ <td
2419
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2420
+ role="cell"
2421
+ >
2422
+ <button
2423
+ class="pf-v6-c-menu-toggle pf-m-plain"
2424
+ type="button"
2425
+ aria-expanded="false"
2426
+ aria-label="Menu toggle"
2427
+ >
2428
+ <span class="pf-v6-c-menu-toggle__icon">
2429
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2430
+ </span>
2431
+ </button>
2432
+ </td>
2433
+ </tr>
2434
+
2435
+ <tr class="pf-v6-c-table__tr" role="row">
2436
+ <td
2437
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2438
+ role="cell"
2439
+ >
2440
+ <label
2441
+ class="pf-v6-c-check pf-m-standalone"
2442
+ id="table-tabs-example-table-checkrow-5-check"
2443
+ for="table-tabs-example-table-checkrow-5-check-input"
2444
+ >
2445
+ <input
2446
+ class="pf-v6-c-check__input"
2447
+ type="checkbox"
2448
+ id="table-tabs-example-table-checkrow-5-check-input"
2449
+ name="table-tabs-example-table-checkrow-5-check-input"
2450
+ aria-label="Standalone check"
2451
+ />
2452
+ </label>
2453
+ </td>
2454
+ <td
2455
+ class="pf-v6-c-table__td"
2456
+ role="cell"
2457
+ data-label="Repository name"
2458
+ >
2459
+ <div>
2460
+ <div id="table-tabs-example-table-node5">Node 5</div>
2461
+ <a href="#">siemur/test-space</a>
2462
+ </div>
2463
+ </td>
2464
+ <td
2465
+ class="pf-v6-c-table__td"
2466
+ role="cell"
2467
+ data-label="Branches"
2468
+ >
2469
+ <div
2470
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2471
+ >
2472
+ <div class="pf-v6-l-flex__item">34</div>
2473
+ <div class="pf-v6-l-flex__item">
2474
+ <i class="fas fa-code-branch"></i>
2475
+ </div>
2476
+ </div>
2477
+ </td>
2478
+ <td
2479
+ class="pf-v6-c-table__td"
2480
+ role="cell"
2481
+ data-label="Pull requests"
2482
+ >
2483
+ <div
2484
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2485
+ >
2486
+ <div class="pf-v6-l-flex__item">21</div>
2487
+ <div class="pf-v6-l-flex__item">
2488
+ <i class="fas fa-code"></i>
2489
+ </div>
2490
+ </div>
2491
+ </td>
2492
+ <td
2493
+ class="pf-v6-c-table__td"
2494
+ role="cell"
2495
+ data-label="Workspaces"
2496
+ >
2497
+ <div
2498
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2499
+ >
2500
+ <div class="pf-v6-l-flex__item">26</div>
2501
+ <div class="pf-v6-l-flex__item">
2502
+ <i class="fas fa-cube"></i>
2503
+ </div>
2504
+ </div>
2505
+ </td>
2506
+ <td
2507
+ class="pf-v6-c-table__td"
2508
+ role="cell"
2509
+ data-label="Last commit"
2510
+ >2 days ago</td>
2511
+
2512
+ <td
2513
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2514
+ role="cell"
2515
+ >
2516
+ <button
2517
+ class="pf-v6-c-menu-toggle pf-m-plain"
2518
+ type="button"
2519
+ aria-expanded="false"
2520
+ aria-label="Menu toggle"
2521
+ >
2522
+ <span class="pf-v6-c-menu-toggle__icon">
2523
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2524
+ </span>
2525
+ </button>
2526
+ </td>
2527
+ </tr>
2528
+ </tbody>
2529
+ </table>
2530
+ </div>
2531
+ </div>
2532
+
2533
+ <!-- Panel -->
2534
+ <div
2535
+ class="pf-v6-c-drawer__panel pf-m-width-33 pf-m-width-33-on-xl"
2536
+ >
2537
+ <div class="pf-v6-c-drawer__body">
2538
+ <div class="pf-v6-c-drawer__head">
2539
+ <div class="pf-v6-c-drawer__actions">
2540
+ <div class="pf-v6-c-drawer__close">
2541
+ <button
2542
+ class="pf-v6-c-button pf-m-plain"
2543
+ type="button"
2544
+ aria-label="Close drawer panel"
2545
+ >
2546
+ <span class="pf-v6-c-button__icon">
2547
+ <i class="fas fa-times" aria-hidden="true"></i>
2548
+ </span>
2549
+ </button>
2550
+ </div>
2551
+ </div>
2552
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-sm">
2553
+ <div class="pf-v6-l-flex__item">
2554
+ <h2
2555
+ class="pf-v6-c-title pf-m-lg"
2556
+ id="-drawer-label"
2557
+ >Node 2</h2>
2558
+ </div>
2559
+ <div class="pf-v6-l-flex__item">
2560
+ <a href="#">siemur/test-space</a>
2561
+ </div>
2562
+ </div>
2563
+ </div>
2564
+ </div>
2565
+ <div class="pf-v6-c-drawer__body pf-m-no-padding">
2566
+ <div
2567
+ class="pf-v6-c-tabs pf-m-box pf-m-fill"
2568
+ role="region"
2569
+ id="-tabs"
2570
+ >
2571
+ <div class="pf-v6-c-tabs__scroll-button">
2572
+ <button
2573
+ class="pf-v6-c-button pf-m-plain"
2574
+ type="button"
2575
+ aria-label="Scroll left"
2576
+ >
2577
+ <span class="pf-v6-c-button__icon">
2578
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2579
+ </span>
2580
+ </button>
2581
+ </div>
2582
+ <ul class="pf-v6-c-tabs__list" role="tablist">
2583
+ <li
2584
+ class="pf-v6-c-tabs__item pf-m-current"
2585
+ role="presentation"
2586
+ >
2587
+ <button
2588
+ type="button"
2589
+ class="pf-v6-c-tabs__link"
2590
+ role="tab"
2591
+ aria-controls="-tabs-tab1-panel"
2592
+ id="-tabs-tab1-link"
2593
+ >
2594
+ <span class="pf-v6-c-tabs__item-text">Overview</span>
2595
+ </button>
2596
+ </li>
2597
+ <li class="pf-v6-c-tabs__item" role="presentation">
2598
+ <button
2599
+ type="button"
2600
+ class="pf-v6-c-tabs__link"
2601
+ role="tab"
2602
+ aria-controls="-tabs-tab2-panel"
2603
+ id="-tabs-tab2-link"
2604
+ >
2605
+ <span class="pf-v6-c-tabs__item-text">Activity</span>
2606
+ </button>
2607
+ </li>
2608
+ </ul>
2609
+ <div class="pf-v6-c-tabs__scroll-button">
2610
+ <button
2611
+ class="pf-v6-c-button pf-m-plain"
2612
+ type="button"
2613
+ aria-label="Scroll right"
2614
+ >
2615
+ <span class="pf-v6-c-button__icon">
2616
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2617
+ </span>
2618
+ </button>
2619
+ </div>
2620
+ </div>
2621
+ </div>
2622
+ <div class="pf-v6-c-drawer__body">
2623
+ <section
2624
+ class="pf-v6-c-tab-content"
2625
+ id="-tabs-tab1-panel"
2626
+ aria-labelledby="-tabs-tab1-link"
2627
+ role="tabpanel"
2628
+ tabindex="0"
2629
+ >
2630
+ <div class="pf-v6-c-tab-content__body">
2631
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-lg">
2632
+ <div class="pf-v6-l-flex__item">
2633
+ <p>The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.</p>
2634
+ </div>
2635
+ <div class="pf-v6-l-flex__item">
2636
+ <div
2637
+ class="pf-v6-c-progress pf-m-sm"
2638
+ id="-progress-example1"
2639
+ >
2640
+ <div
2641
+ class="pf-v6-c-progress__description"
2642
+ id="-progress-example1-description"
2643
+ >Capacity</div>
2644
+ <div
2645
+ class="pf-v6-c-progress__status"
2646
+ aria-hidden="true"
2647
+ >
2648
+ <span class="pf-v6-c-progress__measure">33%</span>
2649
+ </div>
2650
+ <div
2651
+ class="pf-v6-c-progress__bar"
2652
+ role="progressbar"
2653
+ aria-valuemin="0"
2654
+ aria-valuemax="100"
2655
+ aria-valuenow="33"
2656
+ aria-labelledby="-progress-example1-description"
2657
+ aria-label="Progress 1"
2658
+ >
2659
+ <div
2660
+ class="pf-v6-c-progress__indicator"
2661
+ style="width:33%;"
2662
+ ></div>
2663
+ </div>
2664
+ </div>
2665
+ </div>
2666
+ <div class="pf-v6-l-flex__item">
2667
+ <div
2668
+ class="pf-v6-c-progress pf-m-sm"
2669
+ id="-progress-example2"
2670
+ >
2671
+ <div
2672
+ class="pf-v6-c-progress__description"
2673
+ id="-progress-example2-description"
2674
+ >Modules</div>
2675
+ <div
2676
+ class="pf-v6-c-progress__status"
2677
+ aria-hidden="true"
2678
+ >
2679
+ <span class="pf-v6-c-progress__measure">66%</span>
2680
+ </div>
2681
+ <div
2682
+ class="pf-v6-c-progress__bar"
2683
+ role="progressbar"
2684
+ aria-valuemin="0"
2685
+ aria-valuemax="100"
2686
+ aria-valuenow="66"
2687
+ aria-labelledby="-progress-example2-description"
2688
+ aria-label="Progress 2"
2689
+ >
2690
+ <div
2691
+ class="pf-v6-c-progress__indicator"
2692
+ style="width:66%;"
2693
+ ></div>
2694
+ </div>
2695
+ </div>
2696
+ </div>
2697
+ <div class="pf-v6-l-flex pf-m-column">
2698
+ <div class="pf-v6-l-flex__item">
2699
+ <h3 class="pf-v6-c-title" id="-title">Tags</h3>
2700
+ </div>
2701
+ <div class="pf-v6-l-flex__item">
2702
+ <div class="pf-v6-c-label-group">
2703
+ <div class="pf-v6-c-label-group__main">
2704
+ <ul
2705
+ class="pf-v6-c-label-group__list"
2706
+ role="list"
2707
+ aria-label="Group of labels"
2708
+ >
2709
+ <li class="pf-v6-c-label-group__list-item">
2710
+ <span class="pf-v6-c-label pf-m-outline">
2711
+ <span class="pf-v6-c-label__content">
2712
+ <span class="pf-v6-c-label__text">Tag 1</span>
2713
+ </span>
2714
+ </span>
2715
+ </li>
2716
+ <li class="pf-v6-c-label-group__list-item">
2717
+ <span class="pf-v6-c-label pf-m-outline">
2718
+ <span class="pf-v6-c-label__content">
2719
+ <span class="pf-v6-c-label__text">Tag 2</span>
2720
+ </span>
2721
+ </span>
2722
+ </li>
2723
+ <li class="pf-v6-c-label-group__list-item">
2724
+ <span class="pf-v6-c-label pf-m-outline">
2725
+ <span class="pf-v6-c-label__content">
2726
+ <span class="pf-v6-c-label__text">Tag 3</span>
2727
+ </span>
2728
+ </span>
2729
+ </li>
2730
+ <li class="pf-v6-c-label-group__list-item">
2731
+ <button
2732
+ class="pf-v6-c-label pf-m-overflow"
2733
+ type="button"
2734
+ >
2735
+ <span class="pf-v6-c-label__content">
2736
+ <span class="pf-v6-c-label__text">2 more</span>
2737
+ </span>
2738
+ </button>
2739
+ </li>
2740
+ </ul>
2741
+ </div>
2742
+ </div>
2743
+ </div>
2744
+ </div>
2745
+ </div>
2746
+ </div>
2747
+ </section>
2748
+ <section
2749
+ class="pf-v6-c-tab-content"
2750
+ id="-tabs-tab2-panel"
2751
+ aria-labelledby="-tabs-tab2-link"
2752
+ role="tabpanel"
2753
+ tabindex="0"
2754
+ hidden
2755
+ >
2756
+ <div class="pf-v6-c-tab-content__body">Panel 2</div>
2757
+ </section>
2758
+ </div>
2759
+ </div>
2760
+ </div>
2761
+ </div>
2762
+ </div>
2763
+ </section>
2764
+ </main>
2765
+ </div>
2766
+ </div>
2767
+
348
2768
  ```
349
2769
 
350
2770
  ### Modal tabs
351
2771
 
352
- ```hbs isFullscreen
353
- {{#> modal-template modal-template--id="modal-tabs-example"}}
354
- {{#> modal-box modal-box--modifier="pf-m-sm" modal-box--attribute=(concat 'aria-labelledby="' modal-template--id '-modal-title" aria-describedby="' modal-template--id '-modal-description"')}}
355
- {{> modal-box-close}}
356
- {{#> modal-box-header}}
357
- {{#> modal-box-title modal-box-title--attribute=(concat 'id="' modal-template--id '-modal-title"')}}
358
- PatternFly
359
- {{/modal-box-title}}
360
- {{/modal-box-header}}
361
- {{#> tabs-template tabs-template--id=(concat page-template--id "-tabs")}}
362
- {{#> modal-box-body modal-box-body--attribute=(concat 'id="' modal-template--id '-modal-description"')}}
363
- {{#> grid grid--modifier="pf-m-gutter"}}
364
- {{#> grid-item}}
365
- {{#> tabs tabs--id=(concat modal-template--id '-tabs') tabs--IsSecondary="true" tabs--modifier="pf-m-inset-none"}}
366
- {{#> tabs-list}}
367
- {{> __tabs-item
368
- __tabs-item--current="true"
369
- __tabs-item--id="details"
370
- __tabs-item--aria-label="Details"
371
- __tabs-item--text="Details"
372
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-details-panel"')}}
373
- {{> __tabs-item
374
- __tabs-item--id="documentation"
375
- __tabs-item--aria-label="documentation"
376
- __tabs-item--text="Documentation"
377
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-documentation-panel"')}}
378
- {{/tabs-list}}
379
- {{/tabs}}
380
- {{/grid-item}}
381
- {{#> grid-item}}
382
- {{#> tab-content tab-content--IsActive="true" tab-content--attribute=(concat 'aria-labelledby="' modal-template--id '-tabs-details-link" id="' modal-template--id '-tabs-details-panel"')}}
383
- <p>PatternFly is a community project that promotes design commonality and improves user experience.</p>
384
- {{/tab-content}}
385
- {{#> tab-content tab-content--attribute=(concat 'aria-labelledby="' modal-template--id '-tabs-documentation-link" id="' modal-template--id '-tabs-documentation-panel"')}}
386
- {{#> list}}
387
- <li class=""><a>Doc link 1</a></li>
388
- <li class=""><a>Doc link 2</a></li>
389
- <li class=""><a>Doc link 3</a></li>
390
- {{/list}}
391
- {{/tab-content}}
392
- {{/grid-item}}
393
- {{/grid}}
394
- {{/modal-box-body}}
395
- {{/tabs-template}}
396
- {{/modal-box}}
397
- {{/modal-template}}
398
-
399
- {{> page-template page-template--id="modal-tabs-example"}}
400
-
401
- {{#* inline "page-template-section"}}
402
- {{#> page-main-section}}
403
- {{#> gallery gallery--modifier="pf-m-gutter"}}
404
- {{#> card card--id=(concat page-template--id '-card-1') card--modifier="pf-m-selectable-raised pf-m-compact"}}
405
- {{> card-title card-title-text--value="PatternFly"}}
406
- {{#> card-body}}
407
- PatternFly is a community project that promotes design commonality and improves user experience.
408
- {{/card-body}}
409
- {{/card}}
410
- {{#> card card--id=(concat page-template--id '-card-2') card--modifier="pf-m-selectable-raised pf-m-compact"}}
411
- {{> card-title card-title-text--value="ActiveMQ"}}
412
- {{#> card-body}}
413
- The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.
414
- {{/card-body}}
415
- {{/card}}
416
- {{#> card card--id=(concat page-template--id '-card-3') card--modifier="pf-m-selectable-raised pf-m-compact"}}
417
- {{> card-title card-title-text--value="Apache Spark"}}
418
- {{#> card-body}}
419
- This documentation page covers the Apache Spark component for the Apache Camel.
420
- {{/card-body}}
421
- {{/card}}
422
- {{/gallery}}
423
- {{/page-main-section}}
424
- {{/inline}}
2772
+ ```html isFullscreen
2773
+ <div class="pf-v6-c-backdrop">
2774
+ <div class="pf-v6-l-bullseye">
2775
+ <div
2776
+ class="pf-v6-c-modal-box pf-m-sm"
2777
+ role="dialog"
2778
+ aria-modal="true"
2779
+ aria-labelledby="modal-tabs-example-modal-title"
2780
+ aria-describedby="modal-tabs-example-modal-description"
2781
+ >
2782
+ <div class="pf-v6-c-modal-box__close">
2783
+ <button
2784
+ class="pf-v6-c-button pf-m-plain"
2785
+ type="button"
2786
+ aria-label="Close"
2787
+ >
2788
+ <span class="pf-v6-c-button__icon">
2789
+ <i class="fas fa-times" aria-hidden="true"></i>
2790
+ </span>
2791
+ </button>
2792
+ </div>
2793
+ <header class="pf-v6-c-modal-box__header">
2794
+ <h1
2795
+ class="pf-v6-c-modal-box__title"
2796
+ id="modal-tabs-example-modal-title"
2797
+ >PatternFly</h1>
2798
+ </header>
2799
+ <div
2800
+ class="pf-v6-c-modal-box__body"
2801
+ id="modal-tabs-example-modal-description"
2802
+ >
2803
+ <div class="pf-v6-l-grid pf-m-gutter">
2804
+ <div class="pf-v6-l-grid__item">
2805
+ <div
2806
+ class="pf-v6-c-tabs pf-m-inset-none"
2807
+ role="region"
2808
+ id="modal-tabs-example-tabs"
2809
+ >
2810
+ <ul class="pf-v6-c-tabs__list" role="tablist">
2811
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2812
+ <button
2813
+ type="button"
2814
+ class="pf-v6-c-tabs__link"
2815
+ role="tab"
2816
+ aria-controls="modal-tabs-example-tabs-details-panel"
2817
+ id="modal-tabs-example-tabs-details-link"
2818
+ >
2819
+ <span class="pf-v6-c-tabs__item-text">Details</span>
2820
+ </button>
2821
+ </li>
2822
+ <li class="pf-v6-c-tabs__item" role="presentation">
2823
+ <button
2824
+ type="button"
2825
+ class="pf-v6-c-tabs__link"
2826
+ role="tab"
2827
+ aria-controls="modal-tabs-example-tabs-documentation-panel"
2828
+ id="modal-tabs-example-tabs-documentation-link"
2829
+ >
2830
+ <span class="pf-v6-c-tabs__item-text">Documentation</span>
2831
+ </button>
2832
+ </li>
2833
+ </ul>
2834
+ </div>
2835
+ </div>
2836
+ <div class="pf-v6-l-grid__item">
2837
+ <section
2838
+ class="pf-v6-c-tab-content"
2839
+ aria-labelledby="modal-tabs-example-tabs-details-link"
2840
+ id="modal-tabs-example-tabs-details-panel"
2841
+ role="tabpanel"
2842
+ tabindex="0"
2843
+ >
2844
+ <div class="pf-v6-c-tab-content__body">
2845
+ <p>PatternFly is a community project that promotes design commonality and improves user experience.</p>
2846
+ </div>
2847
+ </section>
2848
+ <section
2849
+ class="pf-v6-c-tab-content"
2850
+ aria-labelledby="modal-tabs-example-tabs-documentation-link"
2851
+ id="modal-tabs-example-tabs-documentation-panel"
2852
+ role="tabpanel"
2853
+ tabindex="0"
2854
+ hidden
2855
+ >
2856
+ <div class="pf-v6-c-tab-content__body">
2857
+ <ul class="pf-v6-c-list" role="list">
2858
+ <li>
2859
+ <a>Doc link 1</a>
2860
+ </li>
2861
+ <li>
2862
+ <a>Doc link 2</a>
2863
+ </li>
2864
+ <li>
2865
+ <a>Doc link 3</a>
2866
+ </li>
2867
+ </ul>
2868
+ </div>
2869
+ </section>
2870
+ </div>
2871
+ </div>
2872
+ </div>
2873
+ </div>
2874
+ </div>
2875
+ </div>
2876
+
2877
+ <div class="pf-v6-c-page" id="modal-tabs-example">
2878
+ <div class="pf-v6-c-skip-to-content">
2879
+ <a
2880
+ class="pf-v6-c-button pf-m-primary"
2881
+ href="#main-content-modal-tabs-example"
2882
+ >
2883
+ <span class="pf-v6-c-button__text">Skip to content</span>
2884
+ </a>
2885
+ </div>
2886
+ <header class="pf-v6-c-masthead" id="modal-tabs-example-masthead">
2887
+ <span class="pf-v6-c-masthead__toggle">
2888
+ <button
2889
+ class="pf-v6-c-button pf-m-plain"
2890
+ type="button"
2891
+ aria-label="Global navigation"
2892
+ >
2893
+ <span class="pf-v6-c-button__icon">
2894
+ <i class="fas fa-bars" aria-hidden="true"></i>
2895
+ </span>
2896
+ </button>
2897
+ </span>
2898
+ <div class="pf-v6-c-masthead__main">
2899
+ <a class="pf-v6-c-masthead__brand" href="#">
2900
+ <svg height="37px" viewBox="0 0 679 158">
2901
+ <title>PF-HorizontalLogo-Color</title>
2902
+ <defs>
2903
+ <linearGradient
2904
+ x1="68%"
2905
+ y1="2.25860997e-13%"
2906
+ x2="32%"
2907
+ y2="100%"
2908
+ id="linearGradient-modal-tabs-example-masthead"
2909
+ >
2910
+ <stop stop-color="#2B9AF3" offset="0%" />
2911
+ <stop
2912
+ stop-color="#73BCF7"
2913
+ stop-opacity="0.502212631"
2914
+ offset="100%"
2915
+ />
2916
+ </linearGradient>
2917
+ </defs>
2918
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2919
+ <g
2920
+ transform="translate(206.000000, 45.750000)"
2921
+ fill="var(--pf-t--global--text--color--regular)"
2922
+ fill-rule="nonzero"
2923
+ >
2924
+ <path
2925
+ 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"
2926
+ />
2927
+ <path
2928
+ 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"
2929
+ />
2930
+ <path
2931
+ 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"
2932
+ />
2933
+ <path
2934
+ 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"
2935
+ />
2936
+ <path
2937
+ 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"
2938
+ />
2939
+ <path
2940
+ 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"
2941
+ />
2942
+ <path
2943
+ 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"
2944
+ />
2945
+ <polygon
2946
+ 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"
2947
+ />
2948
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2949
+ <path
2950
+ 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"
2951
+ />
2952
+ </g>
2953
+ <g transform="translate(0.000000, 0.000000)">
2954
+ <path
2955
+ 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"
2956
+ fill="#0066CC"
2957
+ />
2958
+ <path
2959
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2960
+ fill="url(#linearGradient-modal-tabs-example-masthead)"
2961
+ />
2962
+ <path
2963
+ 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"
2964
+ fill="url(#linearGradient-modal-tabs-example-masthead)"
2965
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2966
+ />
2967
+ </g>
2968
+ </g>
2969
+ </svg>
2970
+ </a>
2971
+ </div>
2972
+ <div class="pf-v6-c-masthead__content">
2973
+ <div
2974
+ class="pf-v6-c-toolbar pf-m-static"
2975
+ id="modal-tabs-example-masthead-toolbar"
2976
+ >
2977
+ <div class="pf-v6-c-toolbar__content">
2978
+ <div class="pf-v6-c-toolbar__content-section">
2979
+ <div
2980
+ 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"
2981
+ >
2982
+ <div
2983
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
2984
+ >
2985
+ <div class="pf-v6-c-toolbar__item">
2986
+ <button
2987
+ class="pf-v6-c-menu-toggle pf-m-plain"
2988
+ type="button"
2989
+ aria-expanded="false"
2990
+ aria-label="Application launcher"
2991
+ >
2992
+ <span class="pf-v6-c-menu-toggle__icon">
2993
+ <i class="fas fa-th" aria-hidden="true"></i>
2994
+ </span>
2995
+ </button>
2996
+ </div>
2997
+ <div class="pf-v6-c-toolbar__item">
2998
+ <button
2999
+ class="pf-v6-c-menu-toggle pf-m-plain"
3000
+ type="button"
3001
+ aria-expanded="false"
3002
+ aria-label="Settings"
3003
+ >
3004
+ <span class="pf-v6-c-menu-toggle__icon">
3005
+ <i class="fas fa-cog" aria-hidden="true"></i>
3006
+ </span>
3007
+ </button>
3008
+ </div>
3009
+ <div class="pf-v6-c-toolbar__item">
3010
+ <button
3011
+ class="pf-v6-c-menu-toggle pf-m-plain"
3012
+ type="button"
3013
+ aria-expanded="false"
3014
+ aria-label="Help"
3015
+ >
3016
+ <span class="pf-v6-c-menu-toggle__icon">
3017
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3018
+ </span>
3019
+ </button>
3020
+ </div>
3021
+ </div>
3022
+
3023
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
3024
+ <button
3025
+ class="pf-v6-c-menu-toggle pf-m-plain"
3026
+ type="button"
3027
+ aria-expanded="false"
3028
+ aria-label="Actions"
3029
+ >
3030
+ <span class="pf-v6-c-menu-toggle__icon">
3031
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3032
+ </span>
3033
+ </button>
3034
+ </div>
3035
+ </div>
3036
+ </div>
3037
+ </div>
3038
+ </div>
3039
+ </div>
3040
+ </header>
3041
+ <div class="pf-v6-c-page__sidebar">
3042
+ <div class="pf-v6-c-page__sidebar-body">
3043
+ <nav
3044
+ class="pf-v6-c-nav"
3045
+ id="modal-tabs-example-primary-nav"
3046
+ aria-label="Global"
3047
+ >
3048
+ <ul class="pf-v6-c-nav__list" role="list">
3049
+ <li class="pf-v6-c-nav__item">
3050
+ <a href="#" class="pf-v6-c-nav__link">
3051
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3052
+ </a>
3053
+ </li>
3054
+ <li class="pf-v6-c-nav__item">
3055
+ <a
3056
+ href="#"
3057
+ class="pf-v6-c-nav__link pf-m-current"
3058
+ aria-current="page"
3059
+ >
3060
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3061
+ </a>
3062
+ </li>
3063
+ <li class="pf-v6-c-nav__item">
3064
+ <a href="#" class="pf-v6-c-nav__link">
3065
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3066
+ </a>
3067
+ </li>
3068
+ <li class="pf-v6-c-nav__item">
3069
+ <a href="#" class="pf-v6-c-nav__link">
3070
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3071
+ </a>
3072
+ </li>
3073
+ <li class="pf-v6-c-nav__item">
3074
+ <a href="#" class="pf-v6-c-nav__link">
3075
+ <span class="pf-v6-c-nav__link-text">Server</span>
3076
+ </a>
3077
+ </li>
3078
+ </ul>
3079
+ </nav>
3080
+ </div>
3081
+ </div>
3082
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3083
+ <main
3084
+ class="pf-v6-c-page__main"
3085
+ tabindex="-1"
3086
+ id="main-content-modal-tabs-example"
3087
+ >
3088
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3089
+ <div class="pf-v6-c-page__main-body">
3090
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3091
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3092
+ <li class="pf-v6-c-breadcrumb__item">
3093
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3094
+ </li>
3095
+ <li class="pf-v6-c-breadcrumb__item">
3096
+ <span class="pf-v6-c-breadcrumb__item-divider">
3097
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3098
+ </span>
3099
+
3100
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3101
+ </li>
3102
+ <li class="pf-v6-c-breadcrumb__item">
3103
+ <span class="pf-v6-c-breadcrumb__item-divider">
3104
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3105
+ </span>
3106
+
3107
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3108
+ </li>
3109
+ <li class="pf-v6-c-breadcrumb__item">
3110
+ <span class="pf-v6-c-breadcrumb__item-divider">
3111
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3112
+ </span>
3113
+
3114
+ <a
3115
+ href="#"
3116
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3117
+ aria-current="page"
3118
+ >Section landing</a>
3119
+ </li>
3120
+ </ol>
3121
+ </nav>
3122
+ </div>
3123
+ </section>
3124
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3125
+ <div class="pf-v6-c-page__main-body">
3126
+ <div class="pf-v6-c-content">
3127
+ <h1>Main title</h1>
3128
+ <p>This is a full page demo.</p>
3129
+ </div>
3130
+ </div>
3131
+ </section>
3132
+ <section class="pf-v6-c-page__main-section">
3133
+ <div class="pf-v6-c-page__main-body">
3134
+ <div class="pf-v6-l-gallery pf-m-gutter">
3135
+ <div
3136
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3137
+ id="modal-tabs-example-card-1"
3138
+ >
3139
+ <div class="pf-v6-c-card__title">
3140
+ <h2 class="pf-v6-c-card__title-text">PatternFly</h2>
3141
+ </div>
3142
+ <div
3143
+ class="pf-v6-c-card__body"
3144
+ >PatternFly is a community project that promotes design commonality and improves user experience.</div>
3145
+ </div>
3146
+ <div
3147
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3148
+ id="modal-tabs-example-card-2"
3149
+ >
3150
+ <div class="pf-v6-c-card__title">
3151
+ <h2 class="pf-v6-c-card__title-text">ActiveMQ</h2>
3152
+ </div>
3153
+ <div
3154
+ class="pf-v6-c-card__body"
3155
+ >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
3156
+ </div>
3157
+ <div
3158
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3159
+ id="modal-tabs-example-card-3"
3160
+ >
3161
+ <div class="pf-v6-c-card__title">
3162
+ <h2 class="pf-v6-c-card__title-text">Apache Spark</h2>
3163
+ </div>
3164
+ <div
3165
+ class="pf-v6-c-card__body"
3166
+ >This documentation page covers the Apache Spark component for the Apache Camel.</div>
3167
+ </div>
3168
+ </div>
3169
+ </div>
3170
+ </section>
3171
+ </main>
3172
+ </div>
3173
+ </div>
3174
+
425
3175
  ```
426
3176
 
427
3177
  ### Nested, unindented tabs
428
3178
 
429
- ```hbs isFullscreen
430
- {{> page-template page-template--id="gray-tabs-example"}}
431
-
432
- {{#* inline "page-template-section"}}
433
- {{#> tabs-template tabs-template--id=(concat page-template--id "-tabs")}}
434
- {{#> page-main-tabs page-main-tabs--IsLimitWidth="true"}}
435
- {{#> tabs tabs--id=(concat tabs-template--id '-tabs') tabs--modifier="pf-m-page-insets"}}
436
- {{#> tabs-list}}
437
- {{> __tabs-item
438
- __tabs-item--id="new"
439
- __tabs-item--aria-label="What's new"
440
- __tabs-item--text="What's new"
441
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-new-panel"')}}
442
- {{> __tabs-item
443
- __tabs-item--current="true"
444
- __tabs-item--id="get-started"
445
- __tabs-item--aria-label="Get started"
446
- __tabs-item--text="Get started"
447
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-get-started-panel"')}}
448
- {{> __tabs-item
449
- __tabs-item--id="knowledge"
450
- __tabs-item--aria-label="Knowledge"
451
- __tabs-item--text="Knowledge"
452
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-knowledge-panel"')}}
453
- {{> __tabs-item
454
- __tabs-item--id="support"
455
- __tabs-item--aria-label="Support"
456
- __tabs-item--text="Support"
457
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-support-panel"')}}
458
- {{/tabs-list}}
459
- {{/tabs}}
460
- {{/page-main-tabs}}
461
- {{#> page-main-section page-main-section--IsLimitWidth="true" tab-content--id=(concat tabs-template--id '-tabs') page-main-section--modifier="pf-m-light"}}
462
- {{#> tab-content tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-new-link" id="' tab-content--id '-new-panel"')}}
463
- What's new content
464
- {{/tab-content}}
465
- {{#> tab-content tab-content--IsActive="true" tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-get-started-link" id="' tab-content--id '-get-started-panel"')}}
466
- {{#> grid grid--modifier="pf-m-gutter"}}
467
- {{#> grid-item}}
468
- {{#> title title--modifier="pf-m-lg"}}
469
- Get started with Red Hat Enterprise Linux
470
- {{/title}}
471
- {{/grid-item}}
472
- {{#> grid-item}}
473
- {{#> tabs tabs--id=(concat tabs-template--id '-subtabs') tabs--IsSecondary="true" tabs--modifier="pf-m-inset-none"}}
474
- {{#> tabs-list}}
475
- {{> __tabs-item
476
- __tabs-item--current="true"
477
- __tabs-item--id="x86"
478
- __tabs-item--aria-label="x86 architecture"
479
- __tabs-item--text="x86 architecture"
480
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-x86-panel"')}}
481
- {{> __tabs-item
482
- __tabs-item--id="additional-architectures"
483
- __tabs-item--aria-label="Additional Architectures"
484
- __tabs-item--text="Additional Architectures"
485
- __tabs-link--attribute=(concat 'aria-controls="' tabs--id '-additional-architectures-panel"')}}
486
- {{/tabs-list}}
487
- {{/tabs}}
488
- {{/grid-item}}
489
- {{#> grid-item}}
490
- {{#> example-wrapper tab-content--id=(concat tabs-template--id '-subtabs')}}
491
- {{#> tab-content tab-content--IsActive="true" tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-x86-link" id="' tab-content--id '-x86-panel"')}}
492
- {{#> grid grid--modifier="pf-m-gutter"}}
493
- {{#> grid-item}}
494
- {{#> content}}
495
- <p>To perform a standard x86_64 installation using the GUI, you'll need to:</p>
496
- {{/content}}
497
- {{/grid-item}}
498
- {{#> grid grid--modifier="pf-m-all-6-col-on-md pf-m-all-3-col-on-2xl pf-m-gutter" card--modifier="pf-m-flat"}}
499
- {{#> card}}
500
- {{> card-title card-title-text--value="Check system requirements"}}
501
- {{#> card-body}}
502
- <p>
503
- Your physical or virtual machine should meet the <a href="#">system requirement</a>.
504
- </p>
505
- {{/card-body}}
506
- {{/card}}
507
- {{#> card}}
508
- {{> card-title card-title-text--value="Download an installation ISO image"}}
509
- {{#> card-body}}
510
- <p>
511
- <a href="#">Download</a>&nbsp;the binary DVD ISO.
512
- </p>
513
- {{/card-body}}
514
- {{/card}}
515
- {{#> card}}
516
- {{> card-title card-title-text--value="Create a bootable installation media"}}
517
- {{#> card-body}}
518
- <p>
519
- <a href="#">Create</a>&nbsp;a bootable installation media, for example a USB flash drive.
520
- </p>
521
- {{/card-body}}
522
- {{/card}}
523
- {{/grid}}
524
- {{/grid}}
525
- {{/tab-content}}
526
- {{#> tab-content tab-content--IsHidden="true" tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-additional-architectures-link" id="' tab-content--id '-additional-architectures-panel"')}}
527
- <p>Additional architectural content</p>
528
- {{/tab-content}}
529
- {{/example-wrapper}}
530
- {{/grid-item}}
531
- {{/grid}}
532
- {{/tab-content}}
533
- {{#> tab-content tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-knowledge-link" id="' tab-content--id '-knowledge-panel"')}}
534
- {{#> content}}
535
- <p>Knowledge content</p>
536
- {{/content}}
537
- {{/tab-content}}
538
- {{#> tab-content tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-support-link" id="' tab-content--id '-support-panel"')}}
539
- {{#> content}}
540
- <p>Support content</p>
541
- {{/content}}
542
- {{/tab-content}}
543
- {{/page-main-section}}
544
- {{/tabs-template}}
545
- {{/inline}}
3179
+ ```html isFullscreen
3180
+ <div class="pf-v6-c-page" id="gray-tabs-example">
3181
+ <div class="pf-v6-c-skip-to-content">
3182
+ <a
3183
+ class="pf-v6-c-button pf-m-primary"
3184
+ href="#main-content-gray-tabs-example"
3185
+ >
3186
+ <span class="pf-v6-c-button__text">Skip to content</span>
3187
+ </a>
3188
+ </div>
3189
+ <header class="pf-v6-c-masthead" id="gray-tabs-example-masthead">
3190
+ <span class="pf-v6-c-masthead__toggle">
3191
+ <button
3192
+ class="pf-v6-c-button pf-m-plain"
3193
+ type="button"
3194
+ aria-label="Global navigation"
3195
+ >
3196
+ <span class="pf-v6-c-button__icon">
3197
+ <i class="fas fa-bars" aria-hidden="true"></i>
3198
+ </span>
3199
+ </button>
3200
+ </span>
3201
+ <div class="pf-v6-c-masthead__main">
3202
+ <a class="pf-v6-c-masthead__brand" href="#">
3203
+ <svg height="37px" viewBox="0 0 679 158">
3204
+ <title>PF-HorizontalLogo-Color</title>
3205
+ <defs>
3206
+ <linearGradient
3207
+ x1="68%"
3208
+ y1="2.25860997e-13%"
3209
+ x2="32%"
3210
+ y2="100%"
3211
+ id="linearGradient-gray-tabs-example-masthead"
3212
+ >
3213
+ <stop stop-color="#2B9AF3" offset="0%" />
3214
+ <stop
3215
+ stop-color="#73BCF7"
3216
+ stop-opacity="0.502212631"
3217
+ offset="100%"
3218
+ />
3219
+ </linearGradient>
3220
+ </defs>
3221
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3222
+ <g
3223
+ transform="translate(206.000000, 45.750000)"
3224
+ fill="var(--pf-t--global--text--color--regular)"
3225
+ fill-rule="nonzero"
3226
+ >
3227
+ <path
3228
+ 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"
3229
+ />
3230
+ <path
3231
+ 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"
3232
+ />
3233
+ <path
3234
+ 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"
3235
+ />
3236
+ <path
3237
+ 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"
3238
+ />
3239
+ <path
3240
+ 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"
3241
+ />
3242
+ <path
3243
+ 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"
3244
+ />
3245
+ <path
3246
+ 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"
3247
+ />
3248
+ <polygon
3249
+ 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"
3250
+ />
3251
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3252
+ <path
3253
+ 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"
3254
+ />
3255
+ </g>
3256
+ <g transform="translate(0.000000, 0.000000)">
3257
+ <path
3258
+ 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"
3259
+ fill="#0066CC"
3260
+ />
3261
+ <path
3262
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3263
+ fill="url(#linearGradient-gray-tabs-example-masthead)"
3264
+ />
3265
+ <path
3266
+ 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"
3267
+ fill="url(#linearGradient-gray-tabs-example-masthead)"
3268
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3269
+ />
3270
+ </g>
3271
+ </g>
3272
+ </svg>
3273
+ </a>
3274
+ </div>
3275
+ <div class="pf-v6-c-masthead__content">
3276
+ <div
3277
+ class="pf-v6-c-toolbar pf-m-static"
3278
+ id="gray-tabs-example-masthead-toolbar"
3279
+ >
3280
+ <div class="pf-v6-c-toolbar__content">
3281
+ <div class="pf-v6-c-toolbar__content-section">
3282
+ <div
3283
+ 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"
3284
+ >
3285
+ <div
3286
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
3287
+ >
3288
+ <div class="pf-v6-c-toolbar__item">
3289
+ <button
3290
+ class="pf-v6-c-menu-toggle pf-m-plain"
3291
+ type="button"
3292
+ aria-expanded="false"
3293
+ aria-label="Application launcher"
3294
+ >
3295
+ <span class="pf-v6-c-menu-toggle__icon">
3296
+ <i class="fas fa-th" aria-hidden="true"></i>
3297
+ </span>
3298
+ </button>
3299
+ </div>
3300
+ <div class="pf-v6-c-toolbar__item">
3301
+ <button
3302
+ class="pf-v6-c-menu-toggle pf-m-plain"
3303
+ type="button"
3304
+ aria-expanded="false"
3305
+ aria-label="Settings"
3306
+ >
3307
+ <span class="pf-v6-c-menu-toggle__icon">
3308
+ <i class="fas fa-cog" aria-hidden="true"></i>
3309
+ </span>
3310
+ </button>
3311
+ </div>
3312
+ <div class="pf-v6-c-toolbar__item">
3313
+ <button
3314
+ class="pf-v6-c-menu-toggle pf-m-plain"
3315
+ type="button"
3316
+ aria-expanded="false"
3317
+ aria-label="Help"
3318
+ >
3319
+ <span class="pf-v6-c-menu-toggle__icon">
3320
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3321
+ </span>
3322
+ </button>
3323
+ </div>
3324
+ </div>
3325
+
3326
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
3327
+ <button
3328
+ class="pf-v6-c-menu-toggle pf-m-plain"
3329
+ type="button"
3330
+ aria-expanded="false"
3331
+ aria-label="Actions"
3332
+ >
3333
+ <span class="pf-v6-c-menu-toggle__icon">
3334
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3335
+ </span>
3336
+ </button>
3337
+ </div>
3338
+ </div>
3339
+ </div>
3340
+ </div>
3341
+ </div>
3342
+ </div>
3343
+ </header>
3344
+ <div class="pf-v6-c-page__sidebar">
3345
+ <div class="pf-v6-c-page__sidebar-body">
3346
+ <nav
3347
+ class="pf-v6-c-nav"
3348
+ id="gray-tabs-example-primary-nav"
3349
+ aria-label="Global"
3350
+ >
3351
+ <ul class="pf-v6-c-nav__list" role="list">
3352
+ <li class="pf-v6-c-nav__item">
3353
+ <a href="#" class="pf-v6-c-nav__link">
3354
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3355
+ </a>
3356
+ </li>
3357
+ <li class="pf-v6-c-nav__item">
3358
+ <a
3359
+ href="#"
3360
+ class="pf-v6-c-nav__link pf-m-current"
3361
+ aria-current="page"
3362
+ >
3363
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3364
+ </a>
3365
+ </li>
3366
+ <li class="pf-v6-c-nav__item">
3367
+ <a href="#" class="pf-v6-c-nav__link">
3368
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3369
+ </a>
3370
+ </li>
3371
+ <li class="pf-v6-c-nav__item">
3372
+ <a href="#" class="pf-v6-c-nav__link">
3373
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3374
+ </a>
3375
+ </li>
3376
+ <li class="pf-v6-c-nav__item">
3377
+ <a href="#" class="pf-v6-c-nav__link">
3378
+ <span class="pf-v6-c-nav__link-text">Server</span>
3379
+ </a>
3380
+ </li>
3381
+ </ul>
3382
+ </nav>
3383
+ </div>
3384
+ </div>
3385
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3386
+ <main
3387
+ class="pf-v6-c-page__main"
3388
+ tabindex="-1"
3389
+ id="main-content-gray-tabs-example"
3390
+ >
3391
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3392
+ <div class="pf-v6-c-page__main-body">
3393
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3394
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3395
+ <li class="pf-v6-c-breadcrumb__item">
3396
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3397
+ </li>
3398
+ <li class="pf-v6-c-breadcrumb__item">
3399
+ <span class="pf-v6-c-breadcrumb__item-divider">
3400
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3401
+ </span>
3402
+
3403
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3404
+ </li>
3405
+ <li class="pf-v6-c-breadcrumb__item">
3406
+ <span class="pf-v6-c-breadcrumb__item-divider">
3407
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3408
+ </span>
3409
+
3410
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3411
+ </li>
3412
+ <li class="pf-v6-c-breadcrumb__item">
3413
+ <span class="pf-v6-c-breadcrumb__item-divider">
3414
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3415
+ </span>
3416
+
3417
+ <a
3418
+ href="#"
3419
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3420
+ aria-current="page"
3421
+ >Section landing</a>
3422
+ </li>
3423
+ </ol>
3424
+ </nav>
3425
+ </div>
3426
+ </section>
3427
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3428
+ <div class="pf-v6-c-page__main-body">
3429
+ <div class="pf-v6-c-content">
3430
+ <h1>Main title</h1>
3431
+ <p>This is a full page demo.</p>
3432
+ </div>
3433
+ </div>
3434
+ </section>
3435
+ <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
3436
+ <div class="pf-v6-c-page__main-body">
3437
+ <div
3438
+ class="pf-v6-c-tabs pf-m-page-insets"
3439
+ role="region"
3440
+ id="gray-tabs-example-tabs-tabs"
3441
+ >
3442
+ <ul class="pf-v6-c-tabs__list" role="tablist">
3443
+ <li class="pf-v6-c-tabs__item" role="presentation">
3444
+ <button
3445
+ type="button"
3446
+ class="pf-v6-c-tabs__link"
3447
+ role="tab"
3448
+ aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3449
+ id="gray-tabs-example-tabs-tabs-new-link"
3450
+ >
3451
+ <span class="pf-v6-c-tabs__item-text">What's new</span>
3452
+ </button>
3453
+ </li>
3454
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3455
+ <button
3456
+ type="button"
3457
+ class="pf-v6-c-tabs__link"
3458
+ role="tab"
3459
+ aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3460
+ id="gray-tabs-example-tabs-tabs-get-started-link"
3461
+ >
3462
+ <span class="pf-v6-c-tabs__item-text">Get started</span>
3463
+ </button>
3464
+ </li>
3465
+ <li class="pf-v6-c-tabs__item" role="presentation">
3466
+ <button
3467
+ type="button"
3468
+ class="pf-v6-c-tabs__link"
3469
+ role="tab"
3470
+ aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3471
+ id="gray-tabs-example-tabs-tabs-knowledge-link"
3472
+ >
3473
+ <span class="pf-v6-c-tabs__item-text">Knowledge</span>
3474
+ </button>
3475
+ </li>
3476
+ <li class="pf-v6-c-tabs__item" role="presentation">
3477
+ <button
3478
+ type="button"
3479
+ class="pf-v6-c-tabs__link"
3480
+ role="tab"
3481
+ aria-controls="gray-tabs-example-tabs-tabs-support-panel"
3482
+ id="gray-tabs-example-tabs-tabs-support-link"
3483
+ >
3484
+ <span class="pf-v6-c-tabs__item-text">Support</span>
3485
+ </button>
3486
+ </li>
3487
+ </ul>
3488
+ </div>
3489
+ </div>
3490
+ </section>
3491
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3492
+ <div class="pf-v6-c-page__main-body">
3493
+ <section
3494
+ class="pf-v6-c-tab-content"
3495
+ aria-labelledby="gray-tabs-example-tabs-tabs-new-link"
3496
+ id="gray-tabs-example-tabs-tabs-new-panel"
3497
+ role="tabpanel"
3498
+ tabindex="0"
3499
+ hidden
3500
+ >
3501
+ <div class="pf-v6-c-tab-content__body">What's new content</div>
3502
+ </section>
3503
+ <section
3504
+ class="pf-v6-c-tab-content"
3505
+ aria-labelledby="gray-tabs-example-tabs-tabs-get-started-link"
3506
+ id="gray-tabs-example-tabs-tabs-get-started-panel"
3507
+ role="tabpanel"
3508
+ tabindex="0"
3509
+ >
3510
+ <div class="pf-v6-c-tab-content__body">
3511
+ <div class="pf-v6-l-grid pf-m-gutter">
3512
+ <div class="pf-v6-l-grid__item">
3513
+ <h1
3514
+ class="pf-v6-c-title pf-m-lg"
3515
+ >Get started with Red Hat Enterprise Linux</h1>
3516
+ </div>
3517
+ <div class="pf-v6-l-grid__item">
3518
+ <div
3519
+ class="pf-v6-c-tabs pf-m-inset-none"
3520
+ role="region"
3521
+ id="gray-tabs-example-tabs-subtabs"
3522
+ >
3523
+ <ul class="pf-v6-c-tabs__list" role="tablist">
3524
+ <li
3525
+ class="pf-v6-c-tabs__item pf-m-current"
3526
+ role="presentation"
3527
+ >
3528
+ <button
3529
+ type="button"
3530
+ class="pf-v6-c-tabs__link"
3531
+ role="tab"
3532
+ aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
3533
+ id="gray-tabs-example-tabs-subtabs-x86-link"
3534
+ >
3535
+ <span class="pf-v6-c-tabs__item-text">x86 architecture</span>
3536
+ </button>
3537
+ </li>
3538
+ <li class="pf-v6-c-tabs__item" role="presentation">
3539
+ <button
3540
+ type="button"
3541
+ class="pf-v6-c-tabs__link"
3542
+ role="tab"
3543
+ aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3544
+ id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3545
+ >
3546
+ <span
3547
+ class="pf-v6-c-tabs__item-text"
3548
+ >Additional Architectures</span>
3549
+ </button>
3550
+ </li>
3551
+ </ul>
3552
+ </div>
3553
+ </div>
3554
+ <div class="pf-v6-l-grid__item">
3555
+ <section
3556
+ class="pf-v6-c-tab-content"
3557
+ aria-labelledby="gray-tabs-example-tabs-subtabs-x86-link"
3558
+ id="gray-tabs-example-tabs-subtabs-x86-panel"
3559
+ role="tabpanel"
3560
+ tabindex="0"
3561
+ >
3562
+ <div class="pf-v6-c-tab-content__body">
3563
+ <div class="pf-v6-l-grid pf-m-gutter">
3564
+ <div class="pf-v6-l-grid__item">
3565
+ <div class="pf-v6-c-content">
3566
+ <p>To perform a standard x86_64 installation using the GUI, you'll need to:</p>
3567
+ </div>
3568
+ </div>
3569
+ <div
3570
+ class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-all-3-col-on-2xl pf-m-gutter"
3571
+ >
3572
+ <div class="pf-v6-c-card pf-m-flat">
3573
+ <div class="pf-v6-c-card__title">
3574
+ <h2
3575
+ class="pf-v6-c-card__title-text"
3576
+ >Check system requirements</h2>
3577
+ </div>
3578
+ <div class="pf-v6-c-card__body">
3579
+ <p>
3580
+ Your physical or virtual machine should meet the
3581
+ <a href="#">system requirement</a>.
3582
+ </p>
3583
+ </div>
3584
+ </div>
3585
+ <div class="pf-v6-c-card pf-m-flat">
3586
+ <div class="pf-v6-c-card__title">
3587
+ <h2
3588
+ class="pf-v6-c-card__title-text"
3589
+ >Download an installation ISO image</h2>
3590
+ </div>
3591
+ <div class="pf-v6-c-card__body">
3592
+ <p>
3593
+ <a href="#">Download</a>&nbsp;the binary DVD ISO.
3594
+ </p>
3595
+ </div>
3596
+ </div>
3597
+ <div class="pf-v6-c-card pf-m-flat">
3598
+ <div class="pf-v6-c-card__title">
3599
+ <h2
3600
+ class="pf-v6-c-card__title-text"
3601
+ >Create a bootable installation media</h2>
3602
+ </div>
3603
+ <div class="pf-v6-c-card__body">
3604
+ <p>
3605
+ <a href="#">Create</a>&nbsp;a bootable installation media, for example a USB flash drive.
3606
+ </p>
3607
+ </div>
3608
+ </div>
3609
+ </div>
3610
+ </div>
3611
+ </div>
3612
+ </section>
3613
+ <section
3614
+ class="pf-v6-c-tab-content"
3615
+ aria-labelledby="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3616
+ id="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3617
+ role="tabpanel"
3618
+ tabindex="0"
3619
+ hidden
3620
+ >
3621
+ <div class="pf-v6-c-tab-content__body">
3622
+ <p>Additional architectural content</p>
3623
+ </div>
3624
+ </section>
3625
+ </div>
3626
+ </div>
3627
+ </div>
3628
+ </section>
3629
+ <section
3630
+ class="pf-v6-c-tab-content"
3631
+ aria-labelledby="gray-tabs-example-tabs-tabs-knowledge-link"
3632
+ id="gray-tabs-example-tabs-tabs-knowledge-panel"
3633
+ role="tabpanel"
3634
+ tabindex="0"
3635
+ hidden
3636
+ >
3637
+ <div class="pf-v6-c-tab-content__body">
3638
+ <div class="pf-v6-c-content">
3639
+ <p>Knowledge content</p>
3640
+ </div>
3641
+ </div>
3642
+ </section>
3643
+ <section
3644
+ class="pf-v6-c-tab-content"
3645
+ aria-labelledby="gray-tabs-example-tabs-tabs-support-link"
3646
+ id="gray-tabs-example-tabs-tabs-support-panel"
3647
+ role="tabpanel"
3648
+ tabindex="0"
3649
+ hidden
3650
+ >
3651
+ <div class="pf-v6-c-tab-content__body">
3652
+ <div class="pf-v6-c-content">
3653
+ <p>Support content</p>
3654
+ </div>
3655
+ </div>
3656
+ </section>
3657
+ </div>
3658
+ </section>
3659
+ </main>
3660
+ </div>
3661
+ </div>
3662
+
546
3663
  ```