@patternfly/patternfly 6.0.0-alpha.169 → 6.0.0-alpha.170

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 (27) hide show
  1. package/components/Card/card.css +3 -3
  2. package/components/Card/card.scss +3 -3
  3. package/components/_index.css +3 -3
  4. package/docs/components/InputGroup/examples/InputGroup.md +11 -53
  5. package/docs/components/Login/examples/Login.md +11 -42
  6. package/docs/demos/Card/examples/Card.md +64 -324
  7. package/docs/demos/CardView/examples/CardView.md +11 -103
  8. package/docs/demos/Dashboard/examples/Dashboard.md +22 -128
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +105 -794
  10. package/docs/demos/Table/examples/Table.md +141 -1320
  11. package/docs/demos/Tabs/examples/Tabs.md +11 -103
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +3 -3
  14. package/patternfly.css +3 -3
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  18. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  19. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  20. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -907
  21. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  22. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  23. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  24. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  25. package/docs/components/Select/deprecated/Select.css +0 -56
  26. package/docs/components/Select/deprecated/Select.md +0 -3609
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1781
package/docs/demos/ContextSelector/examples/ContextSelector.md DELETED
@@ -1,1781 +0,0 @@
1
- ---
2
- id: 'Context selector'
3
- section: components
4
- subsection: menus
5
- deprecated: true
6
- ---## Examples
7
-
8
- ### Context selector in masthead
9
-
10
- ```html isFullscreen
11
- <div class="pf-v6-c-page" id="context-selector-in-masthead">
12
- <div class="pf-v6-c-skip-to-content">
13
- <a
14
- class="pf-v6-c-button pf-m-primary"
15
- href="#main-content-context-selector-in-masthead"
16
- >
17
- <span class="pf-v6-c-button__text">Skip to content</span>
18
- </a>
19
- </div>
20
- <header class="pf-v6-c-masthead" id="context-selector-in-masthead-masthead">
21
- <span class="pf-v6-c-masthead__toggle">
22
- <button
23
- class="pf-v6-c-button pf-m-plain"
24
- type="button"
25
- aria-label="Global navigation"
26
- >
27
- <span class="pf-v6-c-button__text">
28
- <i class="fas fa-bars" aria-hidden="true"></i>
29
- </span>
30
- </button>
31
- </span>
32
- <div class="pf-v6-c-masthead__main">
33
- <a class="pf-v6-c-masthead__brand" href="#">
34
- <svg height="37px" viewBox="0 0 679 158">
35
- <title>PF-HorizontalLogo-Color</title>
36
- <defs>
37
- <linearGradient
38
- x1="68%"
39
- y1="2.25860997e-13%"
40
- x2="32%"
41
- y2="100%"
42
- id="linearGradient-context-selector-in-masthead-masthead"
43
- >
44
- <stop stop-color="#2B9AF3" offset="0%" />
45
- <stop
46
- stop-color="#73BCF7"
47
- stop-opacity="0.502212631"
48
- offset="100%"
49
- />
50
- </linearGradient>
51
- </defs>
52
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
53
- <g
54
- transform="translate(206.000000, 45.750000)"
55
- fill="var(--pf-t--global--text--color--regular)"
56
- fill-rule="nonzero"
57
- >
58
- <path
59
- 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"
60
- />
61
- <path
62
- 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"
63
- />
64
- <path
65
- 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"
66
- />
67
- <path
68
- 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"
69
- />
70
- <path
71
- 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"
72
- />
73
- <path
74
- 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"
75
- />
76
- <path
77
- 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"
78
- />
79
- <polygon
80
- 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"
81
- />
82
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
83
- <path
84
- 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"
85
- />
86
- </g>
87
- <g transform="translate(0.000000, 0.000000)">
88
- <path
89
- 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"
90
- fill="#0066CC"
91
- />
92
- <path
93
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
94
- fill="url(#linearGradient-context-selector-in-masthead-masthead)"
95
- />
96
- <path
97
- 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"
98
- fill="url(#linearGradient-context-selector-in-masthead-masthead)"
99
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
100
- />
101
- </g>
102
- </g>
103
- </svg>
104
- </a>
105
- </div>
106
- <div class="pf-v6-c-masthead__content">
107
- <div
108
- class="pf-v6-c-toolbar pf-m-static"
109
- id="context-selector-in-masthead-masthead-toolbar"
110
- >
111
- <div class="pf-v6-c-toolbar__content">
112
- <div class="pf-v6-c-toolbar__content-section">
113
- <div class="pf-v6-c-toolbar__item">
114
- <button
115
- class="pf-v6-c-menu-toggle pf-m-full-height"
116
- type="button"
117
- aria-expanded="false"
118
- >
119
- <span class="pf-v6-c-menu-toggle__text">Context selector</span>
120
- <span class="pf-v6-c-menu-toggle__controls">
121
- <span class="pf-v6-c-menu-toggle__toggle-icon">
122
- <i class="fas fa-caret-down" aria-hidden="true"></i>
123
- </span>
124
- </span>
125
- </button>
126
- </div>
127
- </div>
128
- </div>
129
- </div>
130
- </div>
131
- </header>
132
- <div class="pf-v6-c-page__sidebar">
133
- <div class="pf-v6-c-page__sidebar-body">
134
- <nav
135
- class="pf-v6-c-nav"
136
- id="context-selector-in-masthead-primary-nav"
137
- aria-label="Global"
138
- >
139
- <ul class="pf-v6-c-nav__list" role="list">
140
- <li class="pf-v6-c-nav__item">
141
- <a href="#" class="pf-v6-c-nav__link">
142
- <span class="pf-v6-c-nav__link-text">System panel</span>
143
- </a>
144
- </li>
145
- <li class="pf-v6-c-nav__item">
146
- <a
147
- href="#"
148
- class="pf-v6-c-nav__link pf-m-current"
149
- aria-current="page"
150
- >
151
- <span class="pf-v6-c-nav__link-text">Policy</span>
152
- </a>
153
- </li>
154
- <li class="pf-v6-c-nav__item">
155
- <a href="#" class="pf-v6-c-nav__link">
156
- <span class="pf-v6-c-nav__link-text">Authentication</span>
157
- </a>
158
- </li>
159
- <li class="pf-v6-c-nav__item">
160
- <a href="#" class="pf-v6-c-nav__link">
161
- <span class="pf-v6-c-nav__link-text">Network services</span>
162
- </a>
163
- </li>
164
- <li class="pf-v6-c-nav__item">
165
- <a href="#" class="pf-v6-c-nav__link">
166
- <span class="pf-v6-c-nav__link-text">Server</span>
167
- </a>
168
- </li>
169
- </ul>
170
- </nav>
171
- </div>
172
- </div>
173
- <div class="pf-v6-c-page__main-container" tabindex="-1">
174
- <main
175
- class="pf-v6-c-page__main"
176
- tabindex="-1"
177
- id="main-content-context-selector-in-masthead"
178
- >
179
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
180
- <div class="pf-v6-c-page__main-body">
181
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
182
- <ol class="pf-v6-c-breadcrumb__list" role="list">
183
- <li class="pf-v6-c-breadcrumb__item">
184
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
185
- </li>
186
- <li class="pf-v6-c-breadcrumb__item">
187
- <span class="pf-v6-c-breadcrumb__item-divider">
188
- <i class="fas fa-angle-right" aria-hidden="true"></i>
189
- </span>
190
-
191
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
192
- </li>
193
- <li class="pf-v6-c-breadcrumb__item">
194
- <span class="pf-v6-c-breadcrumb__item-divider">
195
- <i class="fas fa-angle-right" aria-hidden="true"></i>
196
- </span>
197
-
198
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
199
- </li>
200
- <li class="pf-v6-c-breadcrumb__item">
201
- <span class="pf-v6-c-breadcrumb__item-divider">
202
- <i class="fas fa-angle-right" aria-hidden="true"></i>
203
- </span>
204
-
205
- <a
206
- href="#"
207
- class="pf-v6-c-breadcrumb__link pf-m-current"
208
- aria-current="page"
209
- >Section landing</a>
210
- </li>
211
- </ol>
212
- </nav>
213
- </div>
214
- </section>
215
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
216
- <div class="pf-v6-c-page__main-body">
217
- <div class="pf-v6-c-content">
218
- <h1>Main title</h1>
219
- <p>This is a full page demo.</p>
220
- </div>
221
- </div>
222
- </section>
223
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
224
- <div class="pf-v6-c-page__main-body">
225
- <div class="pf-v6-l-gallery pf-m-gutter">
226
- <div class="pf-v6-c-card">
227
- <div class="pf-v6-c-card__body">This is a card</div>
228
- </div>
229
- <div class="pf-v6-c-card">
230
- <div class="pf-v6-c-card__body">This is a card</div>
231
- </div>
232
- <div class="pf-v6-c-card">
233
- <div class="pf-v6-c-card__body">This is a card</div>
234
- </div>
235
- <div class="pf-v6-c-card">
236
- <div class="pf-v6-c-card__body">This is a card</div>
237
- </div>
238
- <div class="pf-v6-c-card">
239
- <div class="pf-v6-c-card__body">This is a card</div>
240
- </div>
241
- <div class="pf-v6-c-card">
242
- <div class="pf-v6-c-card__body">This is a card</div>
243
- </div>
244
- <div class="pf-v6-c-card">
245
- <div class="pf-v6-c-card__body">This is a card</div>
246
- </div>
247
- <div class="pf-v6-c-card">
248
- <div class="pf-v6-c-card__body">This is a card</div>
249
- </div>
250
- <div class="pf-v6-c-card">
251
- <div class="pf-v6-c-card__body">This is a card</div>
252
- </div>
253
- <div class="pf-v6-c-card">
254
- <div class="pf-v6-c-card__body">This is a card</div>
255
- </div>
256
- </div>
257
- </div>
258
- </section>
259
- </main>
260
- </div>
261
- </div>
262
-
263
- ```
264
-
265
- ### Context selector in sidebar
266
-
267
- ```html isFullscreen
268
- <div class="pf-v6-c-page" id="context-selector-in-sidebar-example">
269
- <div class="pf-v6-c-skip-to-content">
270
- <a
271
- class="pf-v6-c-button pf-m-primary"
272
- href="#main-content-context-selector-in-sidebar-example"
273
- >
274
- <span class="pf-v6-c-button__text">Skip to content</span>
275
- </a>
276
- </div>
277
- <header
278
- class="pf-v6-c-masthead"
279
- id="context-selector-in-sidebar-example-masthead"
280
- >
281
- <span class="pf-v6-c-masthead__toggle">
282
- <button
283
- class="pf-v6-c-button pf-m-plain"
284
- type="button"
285
- aria-label="Global navigation"
286
- >
287
- <span class="pf-v6-c-button__text">
288
- <i class="fas fa-bars" aria-hidden="true"></i>
289
- </span>
290
- </button>
291
- </span>
292
- <div class="pf-v6-c-masthead__main">
293
- <a class="pf-v6-c-masthead__brand" href="#">
294
- <svg height="37px" viewBox="0 0 679 158">
295
- <title>PF-HorizontalLogo-Color</title>
296
- <defs>
297
- <linearGradient
298
- x1="68%"
299
- y1="2.25860997e-13%"
300
- x2="32%"
301
- y2="100%"
302
- id="linearGradient-context-selector-in-sidebar-example-masthead"
303
- >
304
- <stop stop-color="#2B9AF3" offset="0%" />
305
- <stop
306
- stop-color="#73BCF7"
307
- stop-opacity="0.502212631"
308
- offset="100%"
309
- />
310
- </linearGradient>
311
- </defs>
312
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
313
- <g
314
- transform="translate(206.000000, 45.750000)"
315
- fill="var(--pf-t--global--text--color--regular)"
316
- fill-rule="nonzero"
317
- >
318
- <path
319
- 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"
320
- />
321
- <path
322
- 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"
323
- />
324
- <path
325
- 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"
326
- />
327
- <path
328
- 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"
329
- />
330
- <path
331
- 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"
332
- />
333
- <path
334
- 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"
335
- />
336
- <path
337
- 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"
338
- />
339
- <polygon
340
- 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"
341
- />
342
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
343
- <path
344
- 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"
345
- />
346
- </g>
347
- <g transform="translate(0.000000, 0.000000)">
348
- <path
349
- 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"
350
- fill="#0066CC"
351
- />
352
- <path
353
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
354
- fill="url(#linearGradient-context-selector-in-sidebar-example-masthead)"
355
- />
356
- <path
357
- 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"
358
- fill="url(#linearGradient-context-selector-in-sidebar-example-masthead)"
359
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
360
- />
361
- </g>
362
- </g>
363
- </svg>
364
- </a>
365
- </div>
366
- <div class="pf-v6-c-masthead__content">
367
- <div
368
- class="pf-v6-c-toolbar pf-m-static"
369
- id="context-selector-in-sidebar-example-masthead-toolbar"
370
- >
371
- <div class="pf-v6-c-toolbar__content">
372
- <div class="pf-v6-c-toolbar__content-section">
373
- <div class="pf-v6-c-toolbar__item">
374
- <button
375
- class="pf-v6-c-menu-toggle"
376
- type="button"
377
- aria-expanded="false"
378
- >
379
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
380
- <span class="pf-v6-c-menu-toggle__controls">
381
- <span class="pf-v6-c-menu-toggle__toggle-icon">
382
- <i class="fas fa-caret-down" aria-hidden="true"></i>
383
- </span>
384
- </span>
385
- </button>
386
- </div>
387
-
388
- <div class="pf-v6-c-toolbar__item">
389
- <button
390
- class="pf-v6-c-menu-toggle"
391
- type="button"
392
- aria-expanded="false"
393
- >
394
- <span class="pf-v6-c-menu-toggle__text">Services</span>
395
- <span class="pf-v6-c-menu-toggle__controls">
396
- <span class="pf-v6-c-menu-toggle__toggle-icon">
397
- <i class="fas fa-caret-down" aria-hidden="true"></i>
398
- </span>
399
- </span>
400
- </button>
401
- </div>
402
-
403
- <div
404
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
405
- >
406
- <div
407
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
408
- >
409
- <div class="pf-v6-c-toolbar__item">
410
- <button
411
- class="pf-v6-c-menu-toggle pf-m-plain"
412
- type="button"
413
- aria-expanded="false"
414
- aria-label="Application launcher"
415
- >
416
- <span class="pf-v6-c-menu-toggle__icon">
417
- <i class="fas fa-th" aria-hidden="true"></i>
418
- </span>
419
- </button>
420
- </div>
421
- <div class="pf-v6-c-toolbar__item">
422
- <button
423
- class="pf-v6-c-menu-toggle pf-m-plain"
424
- type="button"
425
- aria-expanded="false"
426
- aria-label="Settings"
427
- >
428
- <span class="pf-v6-c-menu-toggle__icon">
429
- <i class="fas fa-cog" aria-hidden="true"></i>
430
- </span>
431
- </button>
432
- </div>
433
- <div class="pf-v6-c-toolbar__item">
434
- <button
435
- class="pf-v6-c-menu-toggle pf-m-plain"
436
- type="button"
437
- aria-expanded="false"
438
- aria-label="Help"
439
- >
440
- <span class="pf-v6-c-menu-toggle__icon">
441
- <i class="fas fa-question-circle" aria-hidden="true"></i>
442
- </span>
443
- </button>
444
- </div>
445
- </div>
446
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
447
- <button
448
- class="pf-v6-c-menu-toggle pf-m-plain"
449
- type="button"
450
- aria-expanded="false"
451
- aria-label="Actions"
452
- >
453
- <span class="pf-v6-c-menu-toggle__icon">
454
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
455
- </span>
456
- </button>
457
- </div>
458
- </div>
459
- </div>
460
- </div>
461
- </div>
462
- </div>
463
- </header>
464
- <div class="pf-v6-c-page__sidebar">
465
- <div class="pf-v6-c-page__sidebar-body pf-m-menu">
466
- <div class="pf-v6-c-context-selector pf-m-page-insets pf-m-large">
467
- <span
468
- id="context-selector-collapsed-example-label"
469
- hidden
470
- >Selected project:</span>
471
- <button
472
- class="pf-v6-c-context-selector__toggle"
473
- aria-expanded="false"
474
- id="context-selector-collapsed-example-toggle"
475
- aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
476
- >
477
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
478
- <span class="pf-v6-c-context-selector__toggle-icon">
479
- <i class="fas fa-caret-down" aria-hidden="true"></i>
480
- </span>
481
- </button>
482
- <div class="pf-v6-c-context-selector__menu" hidden>
483
- <div class="pf-v6-c-context-selector__menu-search">
484
- <div class="pf-v6-c-text-input-group">
485
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
486
- <span class="pf-v6-c-text-input-group__text">
487
- <span class="pf-v6-c-text-input-group__icon">
488
- <i class="fas fa-fw fa-search"></i>
489
- </span>
490
- <input
491
- class="pf-v6-c-text-input-group__text-input"
492
- type="text"
493
- placeholder="Search"
494
- value
495
- aria-label="Search input"
496
- />
497
- </span>
498
- </div>
499
- </div>
500
- </div>
501
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
502
- <li role="none">
503
- <a
504
- class="pf-v6-c-context-selector__menu-list-item"
505
- href="#"
506
- role="menuitem"
507
- >Link</a>
508
- </li>
509
- <li role="none">
510
- <button
511
- class="pf-v6-c-context-selector__menu-list-item"
512
- type="button"
513
- role="menuitem"
514
- >Action</button>
515
- </li>
516
- <li role="none">
517
- <a
518
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
519
- href="#"
520
- aria-disabled="true"
521
- tabindex="-1"
522
- role="menuitem"
523
- >Disabled link</a>
524
- </li>
525
- <li role="none">
526
- <button
527
- class="pf-v6-c-context-selector__menu-list-item"
528
- type="button"
529
- disabled
530
- role="menuitem"
531
- >Disabled action</button>
532
- </li>
533
- <li role="none">
534
- <button
535
- class="pf-v6-c-context-selector__menu-list-item"
536
- type="button"
537
- role="menuitem"
538
- >My project</button>
539
- </li>
540
- <li role="none">
541
- <button
542
- class="pf-v6-c-context-selector__menu-list-item"
543
- type="button"
544
- role="menuitem"
545
- >OpenShift cluster</button>
546
- </li>
547
- <li role="none">
548
- <button
549
- class="pf-v6-c-context-selector__menu-list-item"
550
- type="button"
551
- role="menuitem"
552
- >Production Ansible</button>
553
- </li>
554
- <li role="none">
555
- <button
556
- class="pf-v6-c-context-selector__menu-list-item"
557
- type="button"
558
- role="menuitem"
559
- >AWS</button>
560
- </li>
561
- <li role="none">
562
- <button
563
- class="pf-v6-c-context-selector__menu-list-item"
564
- type="button"
565
- role="menuitem"
566
- >Azure</button>
567
- </li>
568
- <li role="none">
569
- <button
570
- class="pf-v6-c-context-selector__menu-list-item"
571
- type="button"
572
- role="menuitem"
573
- >My project</button>
574
- </li>
575
- <li role="none">
576
- <button
577
- class="pf-v6-c-context-selector__menu-list-item"
578
- type="button"
579
- role="menuitem"
580
- >OpenShift cluster</button>
581
- </li>
582
- <li role="none">
583
- <button
584
- class="pf-v6-c-context-selector__menu-list-item"
585
- type="button"
586
- role="menuitem"
587
- >Production Ansible</button>
588
- </li>
589
- <li role="none">
590
- <button
591
- class="pf-v6-c-context-selector__menu-list-item"
592
- type="button"
593
- role="menuitem"
594
- >AWS</button>
595
- </li>
596
- <li role="none">
597
- <button
598
- class="pf-v6-c-context-selector__menu-list-item"
599
- type="button"
600
- role="menuitem"
601
- >Azure</button>
602
- </li>
603
- </ul>
604
- </div>
605
- </div>
606
- </div>
607
- <div class="pf-v6-c-page__sidebar-body">
608
- <nav
609
- class="pf-v6-c-nav"
610
- id="context-selector-in-sidebar-example-primary-nav"
611
- aria-label="Global"
612
- >
613
- <ul class="pf-v6-c-nav__list" role="list">
614
- <li class="pf-v6-c-nav__item">
615
- <a href="#" class="pf-v6-c-nav__link">
616
- <span class="pf-v6-c-nav__link-text">System panel</span>
617
- </a>
618
- </li>
619
- <li class="pf-v6-c-nav__item">
620
- <a
621
- href="#"
622
- class="pf-v6-c-nav__link pf-m-current"
623
- aria-current="page"
624
- >
625
- <span class="pf-v6-c-nav__link-text">Policy</span>
626
- </a>
627
- </li>
628
- <li class="pf-v6-c-nav__item">
629
- <a href="#" class="pf-v6-c-nav__link">
630
- <span class="pf-v6-c-nav__link-text">Authentication</span>
631
- </a>
632
- </li>
633
- <li class="pf-v6-c-nav__item">
634
- <a href="#" class="pf-v6-c-nav__link">
635
- <span class="pf-v6-c-nav__link-text">Network services</span>
636
- </a>
637
- </li>
638
- <li class="pf-v6-c-nav__item">
639
- <a href="#" class="pf-v6-c-nav__link">
640
- <span class="pf-v6-c-nav__link-text">Server</span>
641
- </a>
642
- </li>
643
- </ul>
644
- </nav>
645
- </div>
646
- </div>
647
- <div class="pf-v6-c-page__main-container" tabindex="-1">
648
- <main
649
- class="pf-v6-c-page__main"
650
- tabindex="-1"
651
- id="main-content-context-selector-in-sidebar-example"
652
- >
653
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
654
- <div class="pf-v6-c-page__main-body">
655
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
656
- <ol class="pf-v6-c-breadcrumb__list" role="list">
657
- <li class="pf-v6-c-breadcrumb__item">
658
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
659
- </li>
660
- <li class="pf-v6-c-breadcrumb__item">
661
- <span class="pf-v6-c-breadcrumb__item-divider">
662
- <i class="fas fa-angle-right" aria-hidden="true"></i>
663
- </span>
664
-
665
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
666
- </li>
667
- <li class="pf-v6-c-breadcrumb__item">
668
- <span class="pf-v6-c-breadcrumb__item-divider">
669
- <i class="fas fa-angle-right" aria-hidden="true"></i>
670
- </span>
671
-
672
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
673
- </li>
674
- <li class="pf-v6-c-breadcrumb__item">
675
- <span class="pf-v6-c-breadcrumb__item-divider">
676
- <i class="fas fa-angle-right" aria-hidden="true"></i>
677
- </span>
678
-
679
- <a
680
- href="#"
681
- class="pf-v6-c-breadcrumb__link pf-m-current"
682
- aria-current="page"
683
- >Section landing</a>
684
- </li>
685
- </ol>
686
- </nav>
687
- </div>
688
- </section>
689
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
690
- <div class="pf-v6-c-page__main-body">
691
- <div class="pf-v6-c-content">
692
- <h1>Main title</h1>
693
- <p>This is a full page demo.</p>
694
- </div>
695
- </div>
696
- </section>
697
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
698
- <div class="pf-v6-c-page__main-body">
699
- <div class="pf-v6-l-gallery pf-m-gutter">
700
- <div class="pf-v6-c-card">
701
- <div class="pf-v6-c-card__body">This is a card</div>
702
- </div>
703
- <div class="pf-v6-c-card">
704
- <div class="pf-v6-c-card__body">This is a card</div>
705
- </div>
706
- <div class="pf-v6-c-card">
707
- <div class="pf-v6-c-card__body">This is a card</div>
708
- </div>
709
- <div class="pf-v6-c-card">
710
- <div class="pf-v6-c-card__body">This is a card</div>
711
- </div>
712
- <div class="pf-v6-c-card">
713
- <div class="pf-v6-c-card__body">This is a card</div>
714
- </div>
715
- <div class="pf-v6-c-card">
716
- <div class="pf-v6-c-card__body">This is a card</div>
717
- </div>
718
- <div class="pf-v6-c-card">
719
- <div class="pf-v6-c-card__body">This is a card</div>
720
- </div>
721
- <div class="pf-v6-c-card">
722
- <div class="pf-v6-c-card__body">This is a card</div>
723
- </div>
724
- <div class="pf-v6-c-card">
725
- <div class="pf-v6-c-card__body">This is a card</div>
726
- </div>
727
- <div class="pf-v6-c-card">
728
- <div class="pf-v6-c-card__body">This is a card</div>
729
- </div>
730
- </div>
731
- </div>
732
- </section>
733
- </main>
734
- </div>
735
- </div>
736
-
737
- ```
738
-
739
- ### Context selector in sidebar expanded
740
-
741
- ```html isFullscreen
742
- <div class="pf-v6-c-page" id="context-selector-in-sidebar-expanded-example">
743
- <div class="pf-v6-c-skip-to-content">
744
- <a
745
- class="pf-v6-c-button pf-m-primary"
746
- href="#main-content-context-selector-in-sidebar-expanded-example"
747
- >
748
- <span class="pf-v6-c-button__text">Skip to content</span>
749
- </a>
750
- </div>
751
- <header
752
- class="pf-v6-c-masthead"
753
- id="context-selector-in-sidebar-expanded-example-masthead"
754
- >
755
- <span class="pf-v6-c-masthead__toggle">
756
- <button
757
- class="pf-v6-c-button pf-m-plain"
758
- type="button"
759
- aria-label="Global navigation"
760
- >
761
- <span class="pf-v6-c-button__text">
762
- <i class="fas fa-bars" aria-hidden="true"></i>
763
- </span>
764
- </button>
765
- </span>
766
- <div class="pf-v6-c-masthead__main">
767
- <a class="pf-v6-c-masthead__brand" href="#">
768
- <svg height="37px" viewBox="0 0 679 158">
769
- <title>PF-HorizontalLogo-Color</title>
770
- <defs>
771
- <linearGradient
772
- x1="68%"
773
- y1="2.25860997e-13%"
774
- x2="32%"
775
- y2="100%"
776
- id="linearGradient-context-selector-in-sidebar-expanded-example-masthead"
777
- >
778
- <stop stop-color="#2B9AF3" offset="0%" />
779
- <stop
780
- stop-color="#73BCF7"
781
- stop-opacity="0.502212631"
782
- offset="100%"
783
- />
784
- </linearGradient>
785
- </defs>
786
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
787
- <g
788
- transform="translate(206.000000, 45.750000)"
789
- fill="var(--pf-t--global--text--color--regular)"
790
- fill-rule="nonzero"
791
- >
792
- <path
793
- 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"
794
- />
795
- <path
796
- 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"
797
- />
798
- <path
799
- 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"
800
- />
801
- <path
802
- 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"
803
- />
804
- <path
805
- 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"
806
- />
807
- <path
808
- 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"
809
- />
810
- <path
811
- 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"
812
- />
813
- <polygon
814
- 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"
815
- />
816
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
817
- <path
818
- 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"
819
- />
820
- </g>
821
- <g transform="translate(0.000000, 0.000000)">
822
- <path
823
- 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"
824
- fill="#0066CC"
825
- />
826
- <path
827
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
828
- fill="url(#linearGradient-context-selector-in-sidebar-expanded-example-masthead)"
829
- />
830
- <path
831
- 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"
832
- fill="url(#linearGradient-context-selector-in-sidebar-expanded-example-masthead)"
833
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
834
- />
835
- </g>
836
- </g>
837
- </svg>
838
- </a>
839
- </div>
840
- <div class="pf-v6-c-masthead__content">
841
- <div
842
- class="pf-v6-c-toolbar pf-m-static"
843
- id="context-selector-in-sidebar-expanded-example-masthead-toolbar"
844
- >
845
- <div class="pf-v6-c-toolbar__content">
846
- <div class="pf-v6-c-toolbar__content-section">
847
- <div class="pf-v6-c-toolbar__item">
848
- <button
849
- class="pf-v6-c-menu-toggle"
850
- type="button"
851
- aria-expanded="false"
852
- >
853
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
854
- <span class="pf-v6-c-menu-toggle__controls">
855
- <span class="pf-v6-c-menu-toggle__toggle-icon">
856
- <i class="fas fa-caret-down" aria-hidden="true"></i>
857
- </span>
858
- </span>
859
- </button>
860
- </div>
861
-
862
- <div class="pf-v6-c-toolbar__item">
863
- <button
864
- class="pf-v6-c-menu-toggle"
865
- type="button"
866
- aria-expanded="false"
867
- >
868
- <span class="pf-v6-c-menu-toggle__text">Services</span>
869
- <span class="pf-v6-c-menu-toggle__controls">
870
- <span class="pf-v6-c-menu-toggle__toggle-icon">
871
- <i class="fas fa-caret-down" aria-hidden="true"></i>
872
- </span>
873
- </span>
874
- </button>
875
- </div>
876
-
877
- <div
878
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
879
- >
880
- <div
881
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
882
- >
883
- <div class="pf-v6-c-toolbar__item">
884
- <button
885
- class="pf-v6-c-menu-toggle pf-m-plain"
886
- type="button"
887
- aria-expanded="false"
888
- aria-label="Application launcher"
889
- >
890
- <span class="pf-v6-c-menu-toggle__icon">
891
- <i class="fas fa-th" aria-hidden="true"></i>
892
- </span>
893
- </button>
894
- </div>
895
- <div class="pf-v6-c-toolbar__item">
896
- <button
897
- class="pf-v6-c-menu-toggle pf-m-plain"
898
- type="button"
899
- aria-expanded="false"
900
- aria-label="Settings"
901
- >
902
- <span class="pf-v6-c-menu-toggle__icon">
903
- <i class="fas fa-cog" aria-hidden="true"></i>
904
- </span>
905
- </button>
906
- </div>
907
- <div class="pf-v6-c-toolbar__item">
908
- <button
909
- class="pf-v6-c-menu-toggle pf-m-plain"
910
- type="button"
911
- aria-expanded="false"
912
- aria-label="Help"
913
- >
914
- <span class="pf-v6-c-menu-toggle__icon">
915
- <i class="fas fa-question-circle" aria-hidden="true"></i>
916
- </span>
917
- </button>
918
- </div>
919
- </div>
920
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
921
- <button
922
- class="pf-v6-c-menu-toggle pf-m-plain"
923
- type="button"
924
- aria-expanded="false"
925
- aria-label="Actions"
926
- >
927
- <span class="pf-v6-c-menu-toggle__icon">
928
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
929
- </span>
930
- </button>
931
- </div>
932
- </div>
933
- </div>
934
- </div>
935
- </div>
936
- </div>
937
- </header>
938
- <div class="pf-v6-c-page__sidebar">
939
- <div class="pf-v6-c-page__sidebar-body pf-m-menu">
940
- <div
941
- class="pf-v6-c-context-selector pf-m-expanded pf-m-page-insets pf-m-large"
942
- >
943
- <span
944
- id="context-selector-collapsed-example-label"
945
- hidden
946
- >Selected project:</span>
947
- <button
948
- class="pf-v6-c-context-selector__toggle"
949
- aria-expanded="true"
950
- id="context-selector-collapsed-example-toggle"
951
- aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
952
- >
953
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
954
- <span class="pf-v6-c-context-selector__toggle-icon">
955
- <i class="fas fa-caret-down" aria-hidden="true"></i>
956
- </span>
957
- </button>
958
- <div class="pf-v6-c-context-selector__menu">
959
- <div class="pf-v6-c-context-selector__menu-search">
960
- <div class="pf-v6-c-text-input-group">
961
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
962
- <span class="pf-v6-c-text-input-group__text">
963
- <span class="pf-v6-c-text-input-group__icon">
964
- <i class="fas fa-fw fa-search"></i>
965
- </span>
966
- <input
967
- class="pf-v6-c-text-input-group__text-input"
968
- type="text"
969
- placeholder="Search"
970
- value
971
- aria-label="Search input"
972
- />
973
- </span>
974
- </div>
975
- </div>
976
- </div>
977
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
978
- <li role="none">
979
- <a
980
- class="pf-v6-c-context-selector__menu-list-item"
981
- href="#"
982
- role="menuitem"
983
- >Link</a>
984
- </li>
985
- <li role="none">
986
- <button
987
- class="pf-v6-c-context-selector__menu-list-item"
988
- type="button"
989
- role="menuitem"
990
- >Action</button>
991
- </li>
992
- <li role="none">
993
- <a
994
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
995
- href="#"
996
- aria-disabled="true"
997
- tabindex="-1"
998
- role="menuitem"
999
- >Disabled link</a>
1000
- </li>
1001
- <li role="none">
1002
- <button
1003
- class="pf-v6-c-context-selector__menu-list-item"
1004
- type="button"
1005
- disabled
1006
- role="menuitem"
1007
- >Disabled action</button>
1008
- </li>
1009
- <li role="none">
1010
- <button
1011
- class="pf-v6-c-context-selector__menu-list-item"
1012
- type="button"
1013
- role="menuitem"
1014
- >My project</button>
1015
- </li>
1016
- <li role="none">
1017
- <button
1018
- class="pf-v6-c-context-selector__menu-list-item"
1019
- type="button"
1020
- role="menuitem"
1021
- >OpenShift cluster</button>
1022
- </li>
1023
- <li role="none">
1024
- <button
1025
- class="pf-v6-c-context-selector__menu-list-item"
1026
- type="button"
1027
- role="menuitem"
1028
- >Production Ansible</button>
1029
- </li>
1030
- <li role="none">
1031
- <button
1032
- class="pf-v6-c-context-selector__menu-list-item"
1033
- type="button"
1034
- role="menuitem"
1035
- >AWS</button>
1036
- </li>
1037
- <li role="none">
1038
- <button
1039
- class="pf-v6-c-context-selector__menu-list-item"
1040
- type="button"
1041
- role="menuitem"
1042
- >Azure</button>
1043
- </li>
1044
- <li role="none">
1045
- <button
1046
- class="pf-v6-c-context-selector__menu-list-item"
1047
- type="button"
1048
- role="menuitem"
1049
- >My project</button>
1050
- </li>
1051
- <li role="none">
1052
- <button
1053
- class="pf-v6-c-context-selector__menu-list-item"
1054
- type="button"
1055
- role="menuitem"
1056
- >OpenShift cluster</button>
1057
- </li>
1058
- <li role="none">
1059
- <button
1060
- class="pf-v6-c-context-selector__menu-list-item"
1061
- type="button"
1062
- role="menuitem"
1063
- >Production Ansible</button>
1064
- </li>
1065
- <li role="none">
1066
- <button
1067
- class="pf-v6-c-context-selector__menu-list-item"
1068
- type="button"
1069
- role="menuitem"
1070
- >AWS</button>
1071
- </li>
1072
- <li role="none">
1073
- <button
1074
- class="pf-v6-c-context-selector__menu-list-item"
1075
- type="button"
1076
- role="menuitem"
1077
- >Azure</button>
1078
- </li>
1079
- </ul>
1080
- </div>
1081
- </div>
1082
- </div>
1083
- <div class="pf-v6-c-page__sidebar-body">
1084
- <nav
1085
- class="pf-v6-c-nav"
1086
- id="context-selector-in-sidebar-expanded-example-primary-nav"
1087
- aria-label="Global"
1088
- >
1089
- <ul class="pf-v6-c-nav__list" role="list">
1090
- <li class="pf-v6-c-nav__item">
1091
- <a href="#" class="pf-v6-c-nav__link">
1092
- <span class="pf-v6-c-nav__link-text">System panel</span>
1093
- </a>
1094
- </li>
1095
- <li class="pf-v6-c-nav__item">
1096
- <a
1097
- href="#"
1098
- class="pf-v6-c-nav__link pf-m-current"
1099
- aria-current="page"
1100
- >
1101
- <span class="pf-v6-c-nav__link-text">Policy</span>
1102
- </a>
1103
- </li>
1104
- <li class="pf-v6-c-nav__item">
1105
- <a href="#" class="pf-v6-c-nav__link">
1106
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1107
- </a>
1108
- </li>
1109
- <li class="pf-v6-c-nav__item">
1110
- <a href="#" class="pf-v6-c-nav__link">
1111
- <span class="pf-v6-c-nav__link-text">Network services</span>
1112
- </a>
1113
- </li>
1114
- <li class="pf-v6-c-nav__item">
1115
- <a href="#" class="pf-v6-c-nav__link">
1116
- <span class="pf-v6-c-nav__link-text">Server</span>
1117
- </a>
1118
- </li>
1119
- </ul>
1120
- </nav>
1121
- </div>
1122
- </div>
1123
- <div class="pf-v6-c-page__main-container" tabindex="-1">
1124
- <main
1125
- class="pf-v6-c-page__main"
1126
- tabindex="-1"
1127
- id="main-content-context-selector-in-sidebar-expanded-example"
1128
- >
1129
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1130
- <div class="pf-v6-c-page__main-body">
1131
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1132
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1133
- <li class="pf-v6-c-breadcrumb__item">
1134
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1135
- </li>
1136
- <li class="pf-v6-c-breadcrumb__item">
1137
- <span class="pf-v6-c-breadcrumb__item-divider">
1138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1139
- </span>
1140
-
1141
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1142
- </li>
1143
- <li class="pf-v6-c-breadcrumb__item">
1144
- <span class="pf-v6-c-breadcrumb__item-divider">
1145
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1146
- </span>
1147
-
1148
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1149
- </li>
1150
- <li class="pf-v6-c-breadcrumb__item">
1151
- <span class="pf-v6-c-breadcrumb__item-divider">
1152
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1153
- </span>
1154
-
1155
- <a
1156
- href="#"
1157
- class="pf-v6-c-breadcrumb__link pf-m-current"
1158
- aria-current="page"
1159
- >Section landing</a>
1160
- </li>
1161
- </ol>
1162
- </nav>
1163
- </div>
1164
- </section>
1165
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1166
- <div class="pf-v6-c-page__main-body">
1167
- <div class="pf-v6-c-content">
1168
- <h1>Main title</h1>
1169
- <p>This is a full page demo.</p>
1170
- </div>
1171
- </div>
1172
- </section>
1173
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1174
- <div class="pf-v6-c-page__main-body">
1175
- <div class="pf-v6-l-gallery pf-m-gutter">
1176
- <div class="pf-v6-c-card">
1177
- <div class="pf-v6-c-card__body">This is a card</div>
1178
- </div>
1179
- <div class="pf-v6-c-card">
1180
- <div class="pf-v6-c-card__body">This is a card</div>
1181
- </div>
1182
- <div class="pf-v6-c-card">
1183
- <div class="pf-v6-c-card__body">This is a card</div>
1184
- </div>
1185
- <div class="pf-v6-c-card">
1186
- <div class="pf-v6-c-card__body">This is a card</div>
1187
- </div>
1188
- <div class="pf-v6-c-card">
1189
- <div class="pf-v6-c-card__body">This is a card</div>
1190
- </div>
1191
- <div class="pf-v6-c-card">
1192
- <div class="pf-v6-c-card__body">This is a card</div>
1193
- </div>
1194
- <div class="pf-v6-c-card">
1195
- <div class="pf-v6-c-card__body">This is a card</div>
1196
- </div>
1197
- <div class="pf-v6-c-card">
1198
- <div class="pf-v6-c-card__body">This is a card</div>
1199
- </div>
1200
- <div class="pf-v6-c-card">
1201
- <div class="pf-v6-c-card__body">This is a card</div>
1202
- </div>
1203
- <div class="pf-v6-c-card">
1204
- <div class="pf-v6-c-card__body">This is a card</div>
1205
- </div>
1206
- </div>
1207
- </div>
1208
- </section>
1209
- </main>
1210
- </div>
1211
- </div>
1212
-
1213
- ```
1214
-
1215
- ### Context selector in page content
1216
-
1217
- ```html isFullscreen
1218
- <div class="pf-v6-c-page" id="context-selector-in-page-content-example">
1219
- <div class="pf-v6-c-skip-to-content">
1220
- <a
1221
- class="pf-v6-c-button pf-m-primary"
1222
- href="#main-content-context-selector-in-page-content-example"
1223
- >
1224
- <span class="pf-v6-c-button__text">Skip to content</span>
1225
- </a>
1226
- </div>
1227
- <header
1228
- class="pf-v6-c-masthead"
1229
- id="context-selector-in-page-content-example-masthead"
1230
- >
1231
- <span class="pf-v6-c-masthead__toggle">
1232
- <button
1233
- class="pf-v6-c-button pf-m-plain"
1234
- type="button"
1235
- aria-label="Global navigation"
1236
- >
1237
- <span class="pf-v6-c-button__text">
1238
- <i class="fas fa-bars" aria-hidden="true"></i>
1239
- </span>
1240
- </button>
1241
- </span>
1242
- <div class="pf-v6-c-masthead__main">
1243
- <a class="pf-v6-c-masthead__brand" href="#">
1244
- <svg height="37px" viewBox="0 0 679 158">
1245
- <title>PF-HorizontalLogo-Color</title>
1246
- <defs>
1247
- <linearGradient
1248
- x1="68%"
1249
- y1="2.25860997e-13%"
1250
- x2="32%"
1251
- y2="100%"
1252
- id="linearGradient-context-selector-in-page-content-example-masthead"
1253
- >
1254
- <stop stop-color="#2B9AF3" offset="0%" />
1255
- <stop
1256
- stop-color="#73BCF7"
1257
- stop-opacity="0.502212631"
1258
- offset="100%"
1259
- />
1260
- </linearGradient>
1261
- </defs>
1262
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1263
- <g
1264
- transform="translate(206.000000, 45.750000)"
1265
- fill="var(--pf-t--global--text--color--regular)"
1266
- fill-rule="nonzero"
1267
- >
1268
- <path
1269
- 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"
1270
- />
1271
- <path
1272
- 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"
1273
- />
1274
- <path
1275
- 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"
1276
- />
1277
- <path
1278
- 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"
1279
- />
1280
- <path
1281
- 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"
1282
- />
1283
- <path
1284
- 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"
1285
- />
1286
- <path
1287
- 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"
1288
- />
1289
- <polygon
1290
- 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"
1291
- />
1292
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1293
- <path
1294
- 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"
1295
- />
1296
- </g>
1297
- <g transform="translate(0.000000, 0.000000)">
1298
- <path
1299
- 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"
1300
- fill="#0066CC"
1301
- />
1302
- <path
1303
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1304
- fill="url(#linearGradient-context-selector-in-page-content-example-masthead)"
1305
- />
1306
- <path
1307
- 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"
1308
- fill="url(#linearGradient-context-selector-in-page-content-example-masthead)"
1309
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1310
- />
1311
- </g>
1312
- </g>
1313
- </svg>
1314
- </a>
1315
- </div>
1316
- <div class="pf-v6-c-masthead__content">
1317
- <div
1318
- class="pf-v6-c-toolbar pf-m-static"
1319
- id="context-selector-in-page-content-example-masthead-toolbar"
1320
- >
1321
- <div class="pf-v6-c-toolbar__content">
1322
- <div class="pf-v6-c-toolbar__content-section">
1323
- <div class="pf-v6-c-toolbar__item">
1324
- <button
1325
- class="pf-v6-c-menu-toggle"
1326
- type="button"
1327
- aria-expanded="false"
1328
- >
1329
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1330
- <span class="pf-v6-c-menu-toggle__controls">
1331
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1332
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1333
- </span>
1334
- </span>
1335
- </button>
1336
- </div>
1337
-
1338
- <div class="pf-v6-c-toolbar__item">
1339
- <button
1340
- class="pf-v6-c-menu-toggle"
1341
- type="button"
1342
- aria-expanded="false"
1343
- >
1344
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1345
- <span class="pf-v6-c-menu-toggle__controls">
1346
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1347
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1348
- </span>
1349
- </span>
1350
- </button>
1351
- </div>
1352
-
1353
- <div
1354
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1355
- >
1356
- <div
1357
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1358
- >
1359
- <div class="pf-v6-c-toolbar__item">
1360
- <button
1361
- class="pf-v6-c-menu-toggle pf-m-plain"
1362
- type="button"
1363
- aria-expanded="false"
1364
- aria-label="Application launcher"
1365
- >
1366
- <span class="pf-v6-c-menu-toggle__icon">
1367
- <i class="fas fa-th" aria-hidden="true"></i>
1368
- </span>
1369
- </button>
1370
- </div>
1371
- <div class="pf-v6-c-toolbar__item">
1372
- <button
1373
- class="pf-v6-c-menu-toggle pf-m-plain"
1374
- type="button"
1375
- aria-expanded="false"
1376
- aria-label="Settings"
1377
- >
1378
- <span class="pf-v6-c-menu-toggle__icon">
1379
- <i class="fas fa-cog" aria-hidden="true"></i>
1380
- </span>
1381
- </button>
1382
- </div>
1383
- <div class="pf-v6-c-toolbar__item">
1384
- <button
1385
- class="pf-v6-c-menu-toggle pf-m-plain"
1386
- type="button"
1387
- aria-expanded="false"
1388
- aria-label="Help"
1389
- >
1390
- <span class="pf-v6-c-menu-toggle__icon">
1391
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1392
- </span>
1393
- </button>
1394
- </div>
1395
- </div>
1396
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1397
- <button
1398
- class="pf-v6-c-menu-toggle pf-m-plain"
1399
- type="button"
1400
- aria-expanded="false"
1401
- aria-label="Actions"
1402
- >
1403
- <span class="pf-v6-c-menu-toggle__icon">
1404
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1405
- </span>
1406
- </button>
1407
- </div>
1408
- </div>
1409
- </div>
1410
- </div>
1411
- </div>
1412
- </div>
1413
- </header>
1414
- <div class="pf-v6-c-page__sidebar">
1415
- <div class="pf-v6-c-page__sidebar-body">
1416
- <nav
1417
- class="pf-v6-c-nav"
1418
- id="context-selector-in-page-content-example-primary-nav"
1419
- aria-label="Global"
1420
- >
1421
- <ul class="pf-v6-c-nav__list" role="list">
1422
- <li class="pf-v6-c-nav__item">
1423
- <a href="#" class="pf-v6-c-nav__link">
1424
- <span class="pf-v6-c-nav__link-text">System panel</span>
1425
- </a>
1426
- </li>
1427
- <li class="pf-v6-c-nav__item">
1428
- <a
1429
- href="#"
1430
- class="pf-v6-c-nav__link pf-m-current"
1431
- aria-current="page"
1432
- >
1433
- <span class="pf-v6-c-nav__link-text">Policy</span>
1434
- </a>
1435
- </li>
1436
- <li class="pf-v6-c-nav__item">
1437
- <a href="#" class="pf-v6-c-nav__link">
1438
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1439
- </a>
1440
- </li>
1441
- <li class="pf-v6-c-nav__item">
1442
- <a href="#" class="pf-v6-c-nav__link">
1443
- <span class="pf-v6-c-nav__link-text">Network services</span>
1444
- </a>
1445
- </li>
1446
- <li class="pf-v6-c-nav__item">
1447
- <a href="#" class="pf-v6-c-nav__link">
1448
- <span class="pf-v6-c-nav__link-text">Server</span>
1449
- </a>
1450
- </li>
1451
- </ul>
1452
- </nav>
1453
- </div>
1454
- </div>
1455
- <div class="pf-v6-c-page__main-container" tabindex="-1">
1456
- <main
1457
- class="pf-v6-c-page__main"
1458
- tabindex="-1"
1459
- id="main-content-context-selector-in-page-content-example"
1460
- >
1461
- <section
1462
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
1463
- >
1464
- <div class="pf-v6-c-page__main-body">
1465
- <div
1466
- class="pf-v6-c-toolbar pf-m-inset-none"
1467
- id="toolbar-simple-example"
1468
- >
1469
- <div class="pf-v6-c-toolbar__content">
1470
- <div class="pf-v6-c-toolbar__content-section">
1471
- <div class="pf-v6-c-toolbar__item">
1472
- <div
1473
- class="pf-v6-c-context-selector pf-m-page-insets pf-m-width-auto"
1474
- style="--pf-v6-c-context-selector--Width: 270px;"
1475
- >
1476
- <span
1477
- id="context-selector-in-page-content-example-context-selector-label"
1478
- hidden
1479
- >Selected project:</span>
1480
- <button
1481
- class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
1482
- aria-expanded="false"
1483
- id="context-selector-in-page-content-example-context-selector-toggle"
1484
- aria-labelledby="context-selector-in-page-content-example-context-selector-label context-selector-in-page-content-example-context-selector-toggle"
1485
- >
1486
- <span
1487
- class="pf-v6-c-context-selector__toggle-text"
1488
- >Project: openshift-apple1</span>
1489
- <span class="pf-v6-c-context-selector__toggle-icon">
1490
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1491
- </span>
1492
- </button>
1493
- <div class="pf-v6-c-context-selector__menu" hidden>
1494
- <div class="pf-v6-c-context-selector__menu-search">
1495
- <div class="pf-v6-c-text-input-group">
1496
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
1497
- <span class="pf-v6-c-text-input-group__text">
1498
- <span class="pf-v6-c-text-input-group__icon">
1499
- <i class="fas fa-fw fa-search"></i>
1500
- </span>
1501
- <input
1502
- class="pf-v6-c-text-input-group__text-input"
1503
- type="text"
1504
- placeholder="Search"
1505
- value
1506
- aria-label="Search input"
1507
- />
1508
- </span>
1509
- </div>
1510
- </div>
1511
- </div>
1512
- <ul
1513
- class="pf-v6-c-context-selector__menu-list"
1514
- role="menu"
1515
- >
1516
- <li role="none">
1517
- <a
1518
- class="pf-v6-c-context-selector__menu-list-item"
1519
- href="#"
1520
- role="menuitem"
1521
- >Link</a>
1522
- </li>
1523
- <li role="none">
1524
- <button
1525
- class="pf-v6-c-context-selector__menu-list-item"
1526
- type="button"
1527
- role="menuitem"
1528
- >Action</button>
1529
- </li>
1530
- <li role="none">
1531
- <a
1532
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
1533
- href="#"
1534
- aria-disabled="true"
1535
- tabindex="-1"
1536
- role="menuitem"
1537
- >Disabled link</a>
1538
- </li>
1539
- <li role="none">
1540
- <button
1541
- class="pf-v6-c-context-selector__menu-list-item"
1542
- type="button"
1543
- disabled
1544
- role="menuitem"
1545
- >Disabled action</button>
1546
- </li>
1547
- <li role="none">
1548
- <button
1549
- class="pf-v6-c-context-selector__menu-list-item"
1550
- type="button"
1551
- role="menuitem"
1552
- >My project</button>
1553
- </li>
1554
- <li role="none">
1555
- <button
1556
- class="pf-v6-c-context-selector__menu-list-item"
1557
- type="button"
1558
- role="menuitem"
1559
- >OpenShift cluster</button>
1560
- </li>
1561
- <li role="none">
1562
- <button
1563
- class="pf-v6-c-context-selector__menu-list-item"
1564
- type="button"
1565
- role="menuitem"
1566
- >Production Ansible</button>
1567
- </li>
1568
- <li role="none">
1569
- <button
1570
- class="pf-v6-c-context-selector__menu-list-item"
1571
- type="button"
1572
- role="menuitem"
1573
- >AWS</button>
1574
- </li>
1575
- <li role="none">
1576
- <button
1577
- class="pf-v6-c-context-selector__menu-list-item"
1578
- type="button"
1579
- role="menuitem"
1580
- >Azure</button>
1581
- </li>
1582
- <li role="none">
1583
- <button
1584
- class="pf-v6-c-context-selector__menu-list-item"
1585
- type="button"
1586
- role="menuitem"
1587
- >My project</button>
1588
- </li>
1589
- <li role="none">
1590
- <button
1591
- class="pf-v6-c-context-selector__menu-list-item"
1592
- type="button"
1593
- role="menuitem"
1594
- >OpenShift cluster</button>
1595
- </li>
1596
- <li role="none">
1597
- <button
1598
- class="pf-v6-c-context-selector__menu-list-item"
1599
- type="button"
1600
- role="menuitem"
1601
- >Production Ansible</button>
1602
- </li>
1603
- <li role="none">
1604
- <button
1605
- class="pf-v6-c-context-selector__menu-list-item"
1606
- type="button"
1607
- role="menuitem"
1608
- >AWS</button>
1609
- </li>
1610
- <li role="none">
1611
- <button
1612
- class="pf-v6-c-context-selector__menu-list-item"
1613
- type="button"
1614
- role="menuitem"
1615
- >Azure</button>
1616
- </li>
1617
- </ul>
1618
- </div>
1619
- </div>
1620
- </div>
1621
- <div class="pf-v6-c-toolbar__item">
1622
- <div class="pf-v6-c-select">
1623
- <span
1624
- id="context-selector-in-page-content-example-select-label"
1625
- hidden
1626
- >Choose one</span>
1627
-
1628
- <button
1629
- class="pf-v6-c-select__toggle pf-m-plain"
1630
- type="button"
1631
- id="context-selector-in-page-content-example-select-toggle"
1632
- aria-haspopup="true"
1633
- aria-expanded="false"
1634
- aria-labelledby="context-selector-in-page-content-example-select-label context-selector-in-page-content-example-select-toggle"
1635
- >
1636
- <div class="pf-v6-c-select__toggle-wrapper">
1637
- <span
1638
- class="pf-v6-c-select__toggle-text"
1639
- >All applications</span>
1640
- </div>
1641
- <span class="pf-v6-c-select__toggle-arrow">
1642
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1643
- </span>
1644
- </button>
1645
-
1646
- <ul
1647
- class="pf-v6-c-select__menu"
1648
- role="listbox"
1649
- aria-labelledby="context-selector-in-page-content-example-select-label"
1650
- hidden
1651
- >
1652
- <li role="presentation">
1653
- <button
1654
- class="pf-v6-c-select__menu-item"
1655
- role="option"
1656
- >Running</button>
1657
- </li>
1658
- <li role="presentation">
1659
- <button
1660
- class="pf-v6-c-select__menu-item pf-m-selected"
1661
- role="option"
1662
- aria-selected="true"
1663
- >
1664
- Stopped
1665
- <span class="pf-v6-c-select__menu-item-icon">
1666
- <i class="fas fa-check" aria-hidden="true"></i>
1667
- </span>
1668
- </button>
1669
- </li>
1670
- <li role="presentation">
1671
- <button
1672
- class="pf-v6-c-select__menu-item"
1673
- role="option"
1674
- >Down</button>
1675
- </li>
1676
- <li role="presentation">
1677
- <button
1678
- class="pf-v6-c-select__menu-item"
1679
- role="option"
1680
- >Degraded</button>
1681
- </li>
1682
- <li role="presentation">
1683
- <button
1684
- class="pf-v6-c-select__menu-item"
1685
- role="option"
1686
- >Needs maintenance</button>
1687
- </li>
1688
- </ul>
1689
- </div>
1690
- </div>
1691
- </div>
1692
- </div>
1693
- </div>
1694
- </div>
1695
- </section>
1696
- <hr class="pf-v6-c-divider" />
1697
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1698
- <div class="pf-v6-c-page__main-body">
1699
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1700
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1701
- <li class="pf-v6-c-breadcrumb__item">
1702
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1703
- </li>
1704
- <li class="pf-v6-c-breadcrumb__item">
1705
- <span class="pf-v6-c-breadcrumb__item-divider">
1706
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1707
- </span>
1708
-
1709
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1710
- </li>
1711
- <li class="pf-v6-c-breadcrumb__item">
1712
- <span class="pf-v6-c-breadcrumb__item-divider">
1713
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1714
- </span>
1715
-
1716
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1717
- </li>
1718
- <li class="pf-v6-c-breadcrumb__item">
1719
- <span class="pf-v6-c-breadcrumb__item-divider">
1720
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1721
- </span>
1722
-
1723
- <a
1724
- href="#"
1725
- class="pf-v6-c-breadcrumb__link pf-m-current"
1726
- aria-current="page"
1727
- >Section landing</a>
1728
- </li>
1729
- </ol>
1730
- </nav>
1731
- </div>
1732
- </section>
1733
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1734
- <div class="pf-v6-c-page__main-body">
1735
- <div class="pf-v6-c-content">
1736
- <h1>Main title</h1>
1737
- <p>This is a full page demo.</p>
1738
- </div>
1739
- </div>
1740
- </section>
1741
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1742
- <div class="pf-v6-c-page__main-body">
1743
- <div class="pf-v6-l-gallery pf-m-gutter">
1744
- <div class="pf-v6-c-card">
1745
- <div class="pf-v6-c-card__body">This is a card</div>
1746
- </div>
1747
- <div class="pf-v6-c-card">
1748
- <div class="pf-v6-c-card__body">This is a card</div>
1749
- </div>
1750
- <div class="pf-v6-c-card">
1751
- <div class="pf-v6-c-card__body">This is a card</div>
1752
- </div>
1753
- <div class="pf-v6-c-card">
1754
- <div class="pf-v6-c-card__body">This is a card</div>
1755
- </div>
1756
- <div class="pf-v6-c-card">
1757
- <div class="pf-v6-c-card__body">This is a card</div>
1758
- </div>
1759
- <div class="pf-v6-c-card">
1760
- <div class="pf-v6-c-card__body">This is a card</div>
1761
- </div>
1762
- <div class="pf-v6-c-card">
1763
- <div class="pf-v6-c-card__body">This is a card</div>
1764
- </div>
1765
- <div class="pf-v6-c-card">
1766
- <div class="pf-v6-c-card__body">This is a card</div>
1767
- </div>
1768
- <div class="pf-v6-c-card">
1769
- <div class="pf-v6-c-card__body">This is a card</div>
1770
- </div>
1771
- <div class="pf-v6-c-card">
1772
- <div class="pf-v6-c-card__body">This is a card</div>
1773
- </div>
1774
- </div>
1775
- </div>
1776
- </section>
1777
- </main>
1778
- </div>
1779
- </div>
1780
-
1781
- ```