@patternfly/patternfly 4.184.2 → 4.185.1
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.
- package/RELEASE-NOTES.md +22 -0
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/pficon/pficon.scss +6 -0
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/components/Masthead/masthead.css +1 -1
- package/components/Masthead/masthead.scss +1 -1
- package/components/Menu/menu.css +1 -0
- package/components/Menu/menu.scss +1 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
- package/docs/demos/Alert/examples/Alert.md +2484 -490
- package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
- package/docs/demos/Banner/examples/Banner.md +2074 -1466
- package/docs/demos/Button/examples/Button.md +33 -21
- package/docs/demos/CardView/examples/CardView.md +1065 -260
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
- package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
- package/docs/demos/DataList/examples/DataList.md +3777 -1553
- package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
- package/docs/demos/Drawer/examples/Drawer.md +2554 -439
- package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
- package/docs/demos/Masthead/examples/Masthead.md +9 -20
- package/docs/demos/Modal/examples/Modal.md +5521 -34
- package/docs/demos/Nav/examples/Nav.md +6453 -1201
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
- package/docs/demos/Page/examples/Page.md +14 -35
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6003 -1512
- package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
- package/docs/demos/Table/examples/Table.md +26 -65
- package/docs/demos/Tabs/examples/Tabs.md +10149 -4897
- package/docs/demos/Toolbar/examples/Toolbar.md +797 -149
- package/docs/demos/Wizard/examples/Wizard.md +3418 -288
- package/docs/pages/icons.md +1 -0
- package/icons/pf-icons.json +1 -0
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +5 -1
- package/patternfly-base.css +5 -1
- package/patternfly-no-reset.css +7 -2
- package/patternfly-theme-dark.css +21 -21
- package/patternfly.css +7 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/themes/dark/_patternfly-theme-dark.scss +1 -0
|
@@ -9,293 +9,830 @@ wrapperTag: div
|
|
|
9
9
|
### Basic
|
|
10
10
|
|
|
11
11
|
```html isFullscreen
|
|
12
|
-
<div class="pf-c-page" id="
|
|
12
|
+
<div class="pf-c-page" id="banner-basic-example">
|
|
13
13
|
<a
|
|
14
14
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
15
|
-
href="#main-content-
|
|
15
|
+
href="#main-content-banner-basic-example"
|
|
16
16
|
>Skip to content</a>
|
|
17
|
-
<header class="pf-c-
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
<header class="pf-c-masthead" id="banner-basic-example-masthead">
|
|
18
|
+
<span class="pf-c-masthead__toggle">
|
|
19
|
+
<button
|
|
20
|
+
class="pf-c-button pf-m-plain"
|
|
21
|
+
type="button"
|
|
22
|
+
aria-label="Global navigation"
|
|
23
|
+
>
|
|
24
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
25
|
+
</button>
|
|
26
|
+
</span>
|
|
27
|
+
<div class="pf-c-masthead__main">
|
|
28
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
29
|
+
<picture
|
|
30
|
+
class="pf-c-brand pf-m-picture"
|
|
31
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
27
32
|
>
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
<source
|
|
34
|
+
media="(min-width: 768px)"
|
|
35
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
36
|
+
/>
|
|
37
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
38
|
+
<img
|
|
39
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
40
|
+
alt="Fallback patternFly default logo"
|
|
41
|
+
/>
|
|
42
|
+
</picture>
|
|
37
43
|
</a>
|
|
38
44
|
</div>
|
|
39
|
-
<div class="pf-c-
|
|
40
|
-
<div
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
>
|
|
49
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
50
|
-
</button>
|
|
51
|
-
</div>
|
|
52
|
-
<div
|
|
53
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
54
|
-
>
|
|
55
|
-
<button
|
|
56
|
-
class="pf-c-button pf-m-plain"
|
|
57
|
-
type="button"
|
|
58
|
-
aria-label="Help"
|
|
59
|
-
>
|
|
60
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
61
|
-
</button>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
<div class="pf-c-page__header-tools-group">
|
|
65
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
66
|
-
<div class="pf-c-dropdown">
|
|
67
|
-
<button
|
|
68
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
69
|
-
id="page-layout-table-simple-dropdown-kebab-1-button"
|
|
70
|
-
aria-expanded="false"
|
|
71
|
-
type="button"
|
|
72
|
-
aria-label="Actions"
|
|
73
|
-
>
|
|
74
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
75
|
-
</button>
|
|
76
|
-
<ul
|
|
77
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
78
|
-
aria-labelledby="page-layout-table-simple-dropdown-kebab-1-button"
|
|
79
|
-
hidden
|
|
45
|
+
<div class="pf-c-masthead__content">
|
|
46
|
+
<div
|
|
47
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
48
|
+
id="banner-basic-example-masthead-toolbar"
|
|
49
|
+
>
|
|
50
|
+
<div class="pf-c-toolbar__content">
|
|
51
|
+
<div class="pf-c-toolbar__content-section">
|
|
52
|
+
<div
|
|
53
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
80
54
|
>
|
|
81
|
-
<
|
|
82
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
83
|
-
</li>
|
|
84
|
-
<li>
|
|
85
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
86
|
-
</li>
|
|
87
|
-
<li>
|
|
88
|
-
<a
|
|
89
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
90
|
-
href="#"
|
|
91
|
-
aria-disabled="true"
|
|
92
|
-
tabindex="-1"
|
|
93
|
-
>Disabled link</a>
|
|
94
|
-
</li>
|
|
95
|
-
<li>
|
|
55
|
+
<div class="pf-c-toolbar__item">
|
|
96
56
|
<button
|
|
97
|
-
class="pf-c-
|
|
57
|
+
class="pf-c-button pf-m-plain"
|
|
98
58
|
type="button"
|
|
99
|
-
|
|
100
|
-
>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
</
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
59
|
+
aria-label="Notifications"
|
|
60
|
+
>
|
|
61
|
+
<span class="pf-c-notification-badge">
|
|
62
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
63
|
+
</span>
|
|
64
|
+
</button>
|
|
65
|
+
</div>
|
|
66
|
+
<div
|
|
67
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
68
|
+
>
|
|
69
|
+
<div class="pf-c-toolbar__item">
|
|
70
|
+
<nav
|
|
71
|
+
class="pf-c-app-launcher"
|
|
72
|
+
aria-label="Application launcher"
|
|
73
|
+
id="banner-basic-example-masthead-icon-group--app-launcher"
|
|
74
|
+
>
|
|
75
|
+
<button
|
|
76
|
+
class="pf-c-app-launcher__toggle"
|
|
77
|
+
type="button"
|
|
78
|
+
id="banner-basic-example-masthead-icon-group--app-launcher-button"
|
|
79
|
+
aria-expanded="false"
|
|
80
|
+
aria-label="Application launcher"
|
|
81
|
+
>
|
|
82
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
83
|
+
</button>
|
|
84
|
+
<div
|
|
85
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
86
|
+
hidden
|
|
87
|
+
>
|
|
88
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
89
|
+
<div class="pf-c-search-input">
|
|
90
|
+
<div class="pf-c-search-input__bar">
|
|
91
|
+
<span class="pf-c-search-input__text">
|
|
92
|
+
<span class="pf-c-search-input__icon">
|
|
93
|
+
<i
|
|
94
|
+
class="fas fa-search fa-fw"
|
|
95
|
+
aria-hidden="true"
|
|
96
|
+
></i>
|
|
97
|
+
</span>
|
|
98
|
+
<input
|
|
99
|
+
class="pf-c-search-input__text-input"
|
|
100
|
+
type="text"
|
|
101
|
+
placeholder="Filter by name"
|
|
102
|
+
aria-label="Filter by name"
|
|
103
|
+
/>
|
|
104
|
+
</span>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<section class="pf-c-app-launcher__group">
|
|
109
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
110
|
+
<ul>
|
|
111
|
+
<li
|
|
112
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
113
|
+
>
|
|
114
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
115
|
+
Link 1
|
|
116
|
+
<span
|
|
117
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
118
|
+
>
|
|
119
|
+
<i
|
|
120
|
+
class="fas fa-external-link-alt"
|
|
121
|
+
aria-hidden="true"
|
|
122
|
+
></i>
|
|
123
|
+
</span>
|
|
124
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
125
|
+
</a>
|
|
126
|
+
<button
|
|
127
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
128
|
+
type="button"
|
|
129
|
+
aria-label="Favorite"
|
|
130
|
+
>
|
|
131
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
132
|
+
</button>
|
|
133
|
+
</li>
|
|
134
|
+
<li
|
|
135
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
136
|
+
>
|
|
137
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
138
|
+
Link 2
|
|
139
|
+
<span
|
|
140
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
141
|
+
>
|
|
142
|
+
<i
|
|
143
|
+
class="fas fa-external-link-alt"
|
|
144
|
+
aria-hidden="true"
|
|
145
|
+
></i>
|
|
146
|
+
</span>
|
|
147
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
148
|
+
</a>
|
|
149
|
+
<button
|
|
150
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
151
|
+
type="button"
|
|
152
|
+
aria-label="Favorite"
|
|
153
|
+
>
|
|
154
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
155
|
+
</button>
|
|
156
|
+
</li>
|
|
157
|
+
</ul>
|
|
158
|
+
</section>
|
|
159
|
+
<hr class="pf-c-divider" />
|
|
160
|
+
<section class="pf-c-app-launcher__group">
|
|
161
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
162
|
+
<ul>
|
|
163
|
+
<li
|
|
164
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
165
|
+
>
|
|
166
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
167
|
+
Link 1
|
|
168
|
+
<span
|
|
169
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
170
|
+
>
|
|
171
|
+
<i
|
|
172
|
+
class="fas fa-external-link-alt"
|
|
173
|
+
aria-hidden="true"
|
|
174
|
+
></i>
|
|
175
|
+
</span>
|
|
176
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
177
|
+
</a>
|
|
178
|
+
<button
|
|
179
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
180
|
+
type="button"
|
|
181
|
+
aria-label="Favorite"
|
|
182
|
+
>
|
|
183
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
184
|
+
</button>
|
|
185
|
+
</li>
|
|
186
|
+
<li
|
|
187
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
188
|
+
>
|
|
189
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
190
|
+
Link 2
|
|
191
|
+
<span
|
|
192
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
193
|
+
>
|
|
194
|
+
<i
|
|
195
|
+
class="fas fa-external-link-alt"
|
|
196
|
+
aria-hidden="true"
|
|
197
|
+
></i>
|
|
198
|
+
</span>
|
|
199
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
200
|
+
</a>
|
|
201
|
+
<button
|
|
202
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
203
|
+
type="button"
|
|
204
|
+
aria-label="Favorite"
|
|
205
|
+
>
|
|
206
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
207
|
+
</button>
|
|
208
|
+
</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</section>
|
|
211
|
+
</div>
|
|
212
|
+
</nav>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="pf-c-toolbar__item">
|
|
215
|
+
<div class="pf-c-dropdown">
|
|
216
|
+
<button
|
|
217
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
218
|
+
id="banner-basic-example-masthead-settings-button"
|
|
219
|
+
aria-expanded="false"
|
|
220
|
+
type="button"
|
|
221
|
+
aria-label="Settings"
|
|
222
|
+
>
|
|
223
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
224
|
+
</button>
|
|
225
|
+
<ul
|
|
226
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
227
|
+
aria-labelledby="banner-basic-example-masthead-settings-button"
|
|
228
|
+
hidden
|
|
229
|
+
>
|
|
230
|
+
<li>
|
|
231
|
+
<button
|
|
232
|
+
class="pf-c-dropdown__menu-item"
|
|
233
|
+
type="button"
|
|
234
|
+
>Settings</button>
|
|
235
|
+
</li>
|
|
236
|
+
<li>
|
|
237
|
+
<button
|
|
238
|
+
class="pf-c-dropdown__menu-item"
|
|
239
|
+
type="button"
|
|
240
|
+
>Use the beta release</button>
|
|
241
|
+
</li>
|
|
242
|
+
</ul>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="pf-c-toolbar__item">
|
|
246
|
+
<div class="pf-c-dropdown">
|
|
247
|
+
<button
|
|
248
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
249
|
+
id="banner-basic-example-masthead-help-button"
|
|
250
|
+
aria-expanded="false"
|
|
251
|
+
type="button"
|
|
252
|
+
aria-label="Help"
|
|
253
|
+
>
|
|
254
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
255
|
+
</button>
|
|
256
|
+
<ul
|
|
257
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
258
|
+
aria-labelledby="banner-basic-example-masthead-help-button"
|
|
259
|
+
hidden
|
|
260
|
+
>
|
|
261
|
+
<li>
|
|
262
|
+
<button
|
|
263
|
+
class="pf-c-dropdown__menu-item"
|
|
264
|
+
type="button"
|
|
265
|
+
>Support options</button>
|
|
266
|
+
</li>
|
|
267
|
+
<li>
|
|
268
|
+
<button
|
|
269
|
+
class="pf-c-dropdown__menu-item"
|
|
270
|
+
type="button"
|
|
271
|
+
>Open support case</button>
|
|
272
|
+
</li>
|
|
273
|
+
<li>
|
|
274
|
+
<button
|
|
275
|
+
class="pf-c-dropdown__menu-item"
|
|
276
|
+
type="button"
|
|
277
|
+
>API documentation</button>
|
|
278
|
+
</li>
|
|
279
|
+
</ul>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
284
|
+
<div class="pf-c-dropdown">
|
|
285
|
+
<button
|
|
286
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
287
|
+
type="button"
|
|
288
|
+
aria-expanded="false"
|
|
289
|
+
aria-label="Actions"
|
|
290
|
+
>
|
|
291
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
292
|
+
</button>
|
|
293
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
294
|
+
<div class="pf-c-menu__content">
|
|
295
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
296
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
297
|
+
<li
|
|
298
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
299
|
+
role="none"
|
|
300
|
+
>
|
|
301
|
+
<button
|
|
302
|
+
class="pf-c-menu__item"
|
|
303
|
+
type="button"
|
|
304
|
+
disabled
|
|
305
|
+
role="menuitem"
|
|
306
|
+
>
|
|
307
|
+
<span class="pf-c-menu__item-description">
|
|
308
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
309
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
310
|
+
</span>
|
|
311
|
+
</button>
|
|
312
|
+
</li>
|
|
313
|
+
<li
|
|
314
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
315
|
+
role="none"
|
|
316
|
+
>
|
|
317
|
+
<button
|
|
318
|
+
class="pf-c-menu__item"
|
|
319
|
+
type="button"
|
|
320
|
+
disabled
|
|
321
|
+
role="menuitem"
|
|
322
|
+
>
|
|
323
|
+
<span class="pf-c-menu__item-description">
|
|
324
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
325
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
326
|
+
</span>
|
|
327
|
+
</button>
|
|
328
|
+
</li>
|
|
329
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
330
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
331
|
+
<button
|
|
332
|
+
class="pf-c-menu__item"
|
|
333
|
+
type="button"
|
|
334
|
+
role="menuitem"
|
|
335
|
+
>
|
|
336
|
+
<span class="pf-c-menu__item-main">
|
|
337
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
338
|
+
</span>
|
|
339
|
+
</button>
|
|
340
|
+
</li>
|
|
341
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
342
|
+
<button
|
|
343
|
+
class="pf-c-menu__item"
|
|
344
|
+
type="button"
|
|
345
|
+
role="menuitem"
|
|
346
|
+
>
|
|
347
|
+
<span class="pf-c-menu__item-main">
|
|
348
|
+
<span
|
|
349
|
+
class="pf-c-menu__item-text"
|
|
350
|
+
>User management</span>
|
|
351
|
+
</span>
|
|
352
|
+
</button>
|
|
353
|
+
</li>
|
|
354
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
355
|
+
<button
|
|
356
|
+
class="pf-c-menu__item"
|
|
357
|
+
type="button"
|
|
358
|
+
role="menuitem"
|
|
359
|
+
>
|
|
360
|
+
<span class="pf-c-menu__item-main">
|
|
361
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
362
|
+
</span>
|
|
363
|
+
</button>
|
|
364
|
+
</li>
|
|
365
|
+
</ul>
|
|
366
|
+
</section>
|
|
367
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
368
|
+
<section class="pf-c-menu__group">
|
|
369
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
370
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
371
|
+
<button
|
|
372
|
+
class="pf-c-menu__item"
|
|
373
|
+
type="button"
|
|
374
|
+
role="menuitem"
|
|
375
|
+
aria-expanded="false"
|
|
376
|
+
>
|
|
377
|
+
<span class="pf-c-menu__item-main">
|
|
378
|
+
<span class="pf-c-menu__item-icon">
|
|
379
|
+
<i
|
|
380
|
+
class="fas fa-fw fa-cog"
|
|
381
|
+
aria-hidden="true"
|
|
382
|
+
></i>
|
|
383
|
+
</span>
|
|
384
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
385
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
386
|
+
<i class="fas fa-angle-right"></i>
|
|
387
|
+
</span>
|
|
388
|
+
</span>
|
|
389
|
+
</button>
|
|
390
|
+
<div class="pf-c-menu" hidden>
|
|
391
|
+
<div class="pf-c-menu__content">
|
|
392
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
393
|
+
<li
|
|
394
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
395
|
+
role="none"
|
|
396
|
+
>
|
|
397
|
+
<button
|
|
398
|
+
class="pf-c-menu__item"
|
|
399
|
+
type="button"
|
|
400
|
+
role="menuitem"
|
|
401
|
+
>
|
|
402
|
+
<span class="pf-c-menu__item-main">
|
|
403
|
+
<span
|
|
404
|
+
class="pf-c-menu__item-toggle-icon"
|
|
405
|
+
>
|
|
406
|
+
<i class="fas fa-angle-left"></i>
|
|
407
|
+
</span>
|
|
408
|
+
<span class="pf-c-menu__item-icon">
|
|
409
|
+
<i
|
|
410
|
+
class="fas fa-fw fa-cog"
|
|
411
|
+
aria-hidden="true"
|
|
412
|
+
></i>
|
|
413
|
+
</span>
|
|
414
|
+
<span
|
|
415
|
+
class="pf-c-menu__item-text"
|
|
416
|
+
>Settings</span>
|
|
417
|
+
</span>
|
|
418
|
+
</button>
|
|
419
|
+
</li>
|
|
420
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
421
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
422
|
+
<a
|
|
423
|
+
class="pf-c-menu__item"
|
|
424
|
+
href="#"
|
|
425
|
+
role="menuitem"
|
|
426
|
+
>
|
|
427
|
+
<span class="pf-c-menu__item-main">
|
|
428
|
+
<span
|
|
429
|
+
class="pf-c-menu__item-text"
|
|
430
|
+
>Customer support</span>
|
|
431
|
+
</span>
|
|
432
|
+
</a>
|
|
433
|
+
</li>
|
|
434
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
435
|
+
<a
|
|
436
|
+
class="pf-c-menu__item"
|
|
437
|
+
href="#"
|
|
438
|
+
role="menuitem"
|
|
439
|
+
>
|
|
440
|
+
<span class="pf-c-menu__item-main">
|
|
441
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
442
|
+
</span>
|
|
443
|
+
</a>
|
|
444
|
+
</li>
|
|
445
|
+
</ul>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
</li>
|
|
449
|
+
|
|
450
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
451
|
+
<button
|
|
452
|
+
class="pf-c-menu__item"
|
|
453
|
+
type="button"
|
|
454
|
+
role="menuitem"
|
|
455
|
+
aria-expanded="false"
|
|
456
|
+
>
|
|
457
|
+
<span class="pf-c-menu__item-main">
|
|
458
|
+
<span class="pf-c-menu__item-icon">
|
|
459
|
+
<i
|
|
460
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
461
|
+
aria-hidden="true"
|
|
462
|
+
></i>
|
|
463
|
+
</span>
|
|
464
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
465
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
466
|
+
<i class="fas fa-angle-right"></i>
|
|
467
|
+
</span>
|
|
468
|
+
</span>
|
|
469
|
+
</button>
|
|
470
|
+
<div class="pf-c-menu" hidden>
|
|
471
|
+
<div class="pf-c-menu__content">
|
|
472
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
473
|
+
<li
|
|
474
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
475
|
+
role="none"
|
|
476
|
+
>
|
|
477
|
+
<button
|
|
478
|
+
class="pf-c-menu__item"
|
|
479
|
+
type="button"
|
|
480
|
+
role="menuitem"
|
|
481
|
+
>
|
|
482
|
+
<span class="pf-c-menu__item-main">
|
|
483
|
+
<span
|
|
484
|
+
class="pf-c-menu__item-toggle-icon"
|
|
485
|
+
>
|
|
486
|
+
<i class="fas fa-angle-left"></i>
|
|
487
|
+
</span>
|
|
488
|
+
<span class="pf-c-menu__item-icon">
|
|
489
|
+
<i
|
|
490
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
491
|
+
aria-hidden="true"
|
|
492
|
+
></i>
|
|
493
|
+
</span>
|
|
494
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
495
|
+
</span>
|
|
496
|
+
</button>
|
|
497
|
+
</li>
|
|
498
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
499
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
500
|
+
<a
|
|
501
|
+
class="pf-c-menu__item"
|
|
502
|
+
href="#"
|
|
503
|
+
role="menuitem"
|
|
504
|
+
>
|
|
505
|
+
<span class="pf-c-menu__item-main">
|
|
506
|
+
<span
|
|
507
|
+
class="pf-c-menu__item-text"
|
|
508
|
+
>Support options</span>
|
|
509
|
+
</span>
|
|
510
|
+
</a>
|
|
511
|
+
</li>
|
|
512
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
513
|
+
<a
|
|
514
|
+
class="pf-c-menu__item"
|
|
515
|
+
href="#"
|
|
516
|
+
role="menuitem"
|
|
517
|
+
>
|
|
518
|
+
<span class="pf-c-menu__item-main">
|
|
519
|
+
<span
|
|
520
|
+
class="pf-c-menu__item-text"
|
|
521
|
+
>Open support case</span>
|
|
522
|
+
</span>
|
|
523
|
+
</a>
|
|
524
|
+
</li>
|
|
525
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
526
|
+
<a
|
|
527
|
+
class="pf-c-menu__item"
|
|
528
|
+
href="#"
|
|
529
|
+
role="menuitem"
|
|
530
|
+
>
|
|
531
|
+
<span class="pf-c-menu__item-main">
|
|
532
|
+
<span
|
|
533
|
+
class="pf-c-menu__item-text"
|
|
534
|
+
>API documentation</span>
|
|
535
|
+
</span>
|
|
536
|
+
</a>
|
|
537
|
+
</li>
|
|
538
|
+
</ul>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
</li>
|
|
542
|
+
|
|
543
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
544
|
+
<button
|
|
545
|
+
class="pf-c-menu__item"
|
|
546
|
+
type="button"
|
|
547
|
+
role="menuitem"
|
|
548
|
+
>
|
|
549
|
+
<span class="pf-c-menu__item-main">
|
|
550
|
+
<span class="pf-c-menu__item-icon">
|
|
551
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
552
|
+
</span>
|
|
553
|
+
<span
|
|
554
|
+
class="pf-c-menu__item-text"
|
|
555
|
+
>Application launcher</span>
|
|
556
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
557
|
+
<i class="fas fa-angle-right"></i>
|
|
558
|
+
</span>
|
|
559
|
+
</span>
|
|
560
|
+
</button>
|
|
561
|
+
<div class="pf-c-menu" hidden>
|
|
562
|
+
<div class="pf-c-menu__header">
|
|
563
|
+
<button
|
|
564
|
+
class="pf-c-menu__item"
|
|
565
|
+
type="button"
|
|
566
|
+
role="menuitem"
|
|
567
|
+
>
|
|
568
|
+
<span class="pf-c-menu__item-main">
|
|
569
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
570
|
+
<i class="fas fa-angle-left"></i>
|
|
571
|
+
</span>
|
|
572
|
+
<span class="pf-c-menu__item-icon">
|
|
573
|
+
<i
|
|
574
|
+
class="fas fa-fw fa-th"
|
|
575
|
+
aria-hidden="true"
|
|
576
|
+
></i>
|
|
577
|
+
</span>
|
|
578
|
+
<span
|
|
579
|
+
class="pf-c-menu__item-text"
|
|
580
|
+
>Application launcher</span>
|
|
581
|
+
</span>
|
|
582
|
+
</button>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="pf-c-menu__search">
|
|
585
|
+
<div class="pf-c-menu__search-input">
|
|
586
|
+
<div class="pf-c-search-input">
|
|
587
|
+
<div class="pf-c-search-input__bar">
|
|
588
|
+
<span class="pf-c-search-input__text">
|
|
589
|
+
<span class="pf-c-search-input__icon">
|
|
590
|
+
<i
|
|
591
|
+
class="fas fa-search fa-fw"
|
|
592
|
+
aria-hidden="true"
|
|
593
|
+
></i>
|
|
594
|
+
</span>
|
|
595
|
+
<input
|
|
596
|
+
class="pf-c-search-input__text-input"
|
|
597
|
+
type="text"
|
|
598
|
+
placeholder="Search"
|
|
599
|
+
aria-label="Search"
|
|
600
|
+
/>
|
|
601
|
+
</span>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
</div>
|
|
605
|
+
</div>
|
|
606
|
+
<hr class="pf-c-divider" />
|
|
607
|
+
<section class="pf-c-menu__group">
|
|
608
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
609
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
610
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
611
|
+
<a
|
|
612
|
+
class="pf-c-menu__item"
|
|
613
|
+
href="#"
|
|
614
|
+
role="menuitem"
|
|
615
|
+
>
|
|
616
|
+
<span class="pf-c-menu__item-main">
|
|
617
|
+
<span
|
|
618
|
+
class="pf-c-menu__item-text"
|
|
619
|
+
>Link 1</span>
|
|
620
|
+
</span>
|
|
621
|
+
</a>
|
|
622
|
+
<button
|
|
623
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
624
|
+
type="button"
|
|
625
|
+
aria-label="Starred"
|
|
626
|
+
>
|
|
627
|
+
<span class="pf-c-menu__item-action-icon">
|
|
628
|
+
<i
|
|
629
|
+
class="fas fa-star"
|
|
630
|
+
aria-hidden="true"
|
|
631
|
+
></i>
|
|
632
|
+
</span>
|
|
633
|
+
</button>
|
|
634
|
+
</li>
|
|
635
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
636
|
+
<a
|
|
637
|
+
class="pf-c-menu__item"
|
|
638
|
+
href="#"
|
|
639
|
+
role="menuitem"
|
|
640
|
+
target="_blank"
|
|
641
|
+
>
|
|
642
|
+
<span class="pf-c-menu__item-main">
|
|
643
|
+
<span
|
|
644
|
+
class="pf-c-menu__item-text"
|
|
645
|
+
>Link 2</span>
|
|
646
|
+
<span
|
|
647
|
+
class="pf-c-menu__item-external-icon"
|
|
648
|
+
>
|
|
649
|
+
<i
|
|
650
|
+
class="fas fa-external-link-alt"
|
|
651
|
+
aria-hidden="true"
|
|
652
|
+
></i>
|
|
653
|
+
</span>
|
|
654
|
+
<span
|
|
655
|
+
class="pf-screen-reader"
|
|
656
|
+
>(opens new window)</span>
|
|
657
|
+
</span>
|
|
658
|
+
</a>
|
|
659
|
+
<button
|
|
660
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
661
|
+
type="button"
|
|
662
|
+
aria-label="Not starred"
|
|
663
|
+
>
|
|
664
|
+
<span class="pf-c-menu__item-action-icon">
|
|
665
|
+
<i
|
|
666
|
+
class="fas fa-star"
|
|
667
|
+
aria-hidden="true"
|
|
668
|
+
></i>
|
|
669
|
+
</span>
|
|
670
|
+
</button>
|
|
671
|
+
</li>
|
|
672
|
+
</ul>
|
|
673
|
+
</section>
|
|
674
|
+
<hr class="pf-c-divider" />
|
|
675
|
+
<section class="pf-c-menu__group">
|
|
676
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
677
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
678
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
679
|
+
<a
|
|
680
|
+
class="pf-c-menu__item"
|
|
681
|
+
href="#"
|
|
682
|
+
role="menuitem"
|
|
683
|
+
>
|
|
684
|
+
<span class="pf-c-menu__item-main">
|
|
685
|
+
<span
|
|
686
|
+
class="pf-c-menu__item-text"
|
|
687
|
+
>Link 1</span>
|
|
688
|
+
</span>
|
|
689
|
+
</a>
|
|
690
|
+
<button
|
|
691
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
692
|
+
type="button"
|
|
693
|
+
aria-label="Not starred"
|
|
694
|
+
>
|
|
695
|
+
<span class="pf-c-menu__item-action-icon">
|
|
696
|
+
<i
|
|
697
|
+
class="fas fa-star"
|
|
698
|
+
aria-hidden="true"
|
|
699
|
+
></i>
|
|
700
|
+
</span>
|
|
701
|
+
</button>
|
|
702
|
+
</li>
|
|
703
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
704
|
+
<a
|
|
705
|
+
class="pf-c-menu__item"
|
|
706
|
+
href="#"
|
|
707
|
+
role="menuitem"
|
|
708
|
+
target="_blank"
|
|
709
|
+
>
|
|
710
|
+
<span class="pf-c-menu__item-main">
|
|
711
|
+
<span
|
|
712
|
+
class="pf-c-menu__item-text"
|
|
713
|
+
>Link 2</span>
|
|
714
|
+
<span
|
|
715
|
+
class="pf-c-menu__item-external-icon"
|
|
716
|
+
>
|
|
717
|
+
<i
|
|
718
|
+
class="fas fa-external-link-alt"
|
|
719
|
+
aria-hidden="true"
|
|
720
|
+
></i>
|
|
721
|
+
</span>
|
|
722
|
+
<span
|
|
723
|
+
class="pf-screen-reader"
|
|
724
|
+
>(opens new window)</span>
|
|
725
|
+
</span>
|
|
726
|
+
</a>
|
|
727
|
+
<button
|
|
728
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
729
|
+
type="button"
|
|
730
|
+
aria-label="Starred"
|
|
731
|
+
>
|
|
732
|
+
<span class="pf-c-menu__item-action-icon">
|
|
733
|
+
<i
|
|
734
|
+
class="fas fa-star"
|
|
735
|
+
aria-hidden="true"
|
|
736
|
+
></i>
|
|
737
|
+
</span>
|
|
738
|
+
</button>
|
|
739
|
+
</li>
|
|
740
|
+
</ul>
|
|
741
|
+
</section>
|
|
742
|
+
</div>
|
|
743
|
+
</li>
|
|
744
|
+
</ul>
|
|
745
|
+
</section>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
</div>
|
|
749
|
+
</div>
|
|
750
|
+
</div>
|
|
751
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
752
|
+
<div
|
|
753
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
754
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
755
|
+
>
|
|
144
756
|
<button
|
|
145
|
-
class="pf-c-
|
|
757
|
+
class="pf-c-dropdown__toggle"
|
|
758
|
+
id="banner-basic-example-masthead-profile-button"
|
|
759
|
+
aria-expanded="false"
|
|
146
760
|
type="button"
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
761
|
+
>
|
|
762
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
763
|
+
<img
|
|
764
|
+
class="pf-c-avatar"
|
|
765
|
+
src="/assets/images/img_avatar.svg"
|
|
766
|
+
alt="Avatar image"
|
|
767
|
+
/>
|
|
768
|
+
</span>
|
|
769
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
770
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
771
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
772
|
+
</span>
|
|
773
|
+
</button>
|
|
774
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
775
|
+
<section class="pf-c-dropdown__group">
|
|
776
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
777
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
778
|
+
<div>123456789</div>
|
|
779
|
+
</div>
|
|
780
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
781
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
782
|
+
<div>mshaksho@redhat.com</div>
|
|
783
|
+
</div>
|
|
784
|
+
</section>
|
|
785
|
+
<hr class="pf-c-divider" />
|
|
786
|
+
<section class="pf-c-dropdown__group">
|
|
787
|
+
<ul>
|
|
788
|
+
<li>
|
|
789
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
790
|
+
</li>
|
|
791
|
+
<li>
|
|
792
|
+
<a
|
|
793
|
+
class="pf-c-dropdown__menu-item"
|
|
794
|
+
href="#"
|
|
795
|
+
>User management</a>
|
|
796
|
+
</li>
|
|
797
|
+
<li>
|
|
798
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
799
|
+
</li>
|
|
800
|
+
</ul>
|
|
801
|
+
</section>
|
|
802
|
+
</div>
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
155
805
|
</div>
|
|
156
806
|
</div>
|
|
157
807
|
</div>
|
|
158
|
-
<img
|
|
159
|
-
class="pf-c-avatar"
|
|
160
|
-
src="/assets/images/img_avatar.svg"
|
|
161
|
-
alt="Avatar image"
|
|
162
|
-
/>
|
|
163
808
|
</div>
|
|
164
809
|
</header>
|
|
165
810
|
<div class="pf-c-page__sidebar">
|
|
166
811
|
<div class="pf-c-page__sidebar-body">
|
|
167
812
|
<nav
|
|
168
813
|
class="pf-c-nav"
|
|
169
|
-
id="
|
|
814
|
+
id="banner-basic-example-primary-nav"
|
|
170
815
|
aria-label="Global"
|
|
171
816
|
>
|
|
172
817
|
<ul class="pf-c-nav__list">
|
|
173
|
-
<li class="pf-c-nav__item
|
|
174
|
-
<
|
|
175
|
-
Components
|
|
176
|
-
<span class="pf-c-nav__toggle">
|
|
177
|
-
<span class="pf-c-nav__toggle-icon">
|
|
178
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
179
|
-
</span>
|
|
180
|
-
</span>
|
|
181
|
-
</button>
|
|
182
|
-
<section
|
|
183
|
-
class="pf-c-nav__subnav"
|
|
184
|
-
aria-labelledby="page-layout-table-simple-subnav-title1"
|
|
185
|
-
>
|
|
186
|
-
<h2
|
|
187
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
188
|
-
id="page-layout-table-simple-subnav-title1"
|
|
189
|
-
>First nav item</h2>
|
|
190
|
-
<ul class="pf-c-nav__list">
|
|
191
|
-
<li class="pf-c-nav__item">
|
|
192
|
-
<a href="#" class="pf-c-nav__link">Forms</a>
|
|
193
|
-
</li>
|
|
194
|
-
<li class="pf-c-nav__item">
|
|
195
|
-
<a href="#" class="pf-c-nav__link">Table</a>
|
|
196
|
-
</li>
|
|
197
|
-
<li class="pf-c-nav__item">
|
|
198
|
-
<a
|
|
199
|
-
href="#"
|
|
200
|
-
class="pf-c-nav__link pf-m-current"
|
|
201
|
-
aria-current="page"
|
|
202
|
-
>Data list</a>
|
|
203
|
-
</li>
|
|
204
|
-
<li class="pf-c-nav__item">
|
|
205
|
-
<a href="#" class="pf-c-nav__link">Icons</a>
|
|
206
|
-
</li>
|
|
207
|
-
<li class="pf-c-nav__item">
|
|
208
|
-
<a href="#" class="pf-c-nav__link">Layouts</a>
|
|
209
|
-
</li>
|
|
210
|
-
<li class="pf-c-nav__item">
|
|
211
|
-
<a href="#" class="pf-c-nav__link">List</a>
|
|
212
|
-
</li>
|
|
213
|
-
</ul>
|
|
214
|
-
</section>
|
|
818
|
+
<li class="pf-c-nav__item">
|
|
819
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
215
820
|
</li>
|
|
216
|
-
<li class="pf-c-nav__item
|
|
217
|
-
<
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
</span>
|
|
223
|
-
</span>
|
|
224
|
-
</button>
|
|
225
|
-
<section
|
|
226
|
-
class="pf-c-nav__subnav"
|
|
227
|
-
aria-labelledby="page-layout-table-simple-subnav-title2"
|
|
228
|
-
hidden
|
|
229
|
-
>
|
|
230
|
-
<h2
|
|
231
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
232
|
-
id="page-layout-table-simple-subnav-title2"
|
|
233
|
-
>Second nav item</h2>
|
|
234
|
-
<ul class="pf-c-nav__list"></ul>
|
|
235
|
-
</section>
|
|
821
|
+
<li class="pf-c-nav__item">
|
|
822
|
+
<a
|
|
823
|
+
href="#"
|
|
824
|
+
class="pf-c-nav__link pf-m-current"
|
|
825
|
+
aria-current="page"
|
|
826
|
+
>Policy</a>
|
|
236
827
|
</li>
|
|
237
|
-
<li class="pf-c-nav__item
|
|
238
|
-
<
|
|
239
|
-
Typography
|
|
240
|
-
<span class="pf-c-nav__toggle">
|
|
241
|
-
<span class="pf-c-nav__toggle-icon">
|
|
242
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
243
|
-
</span>
|
|
244
|
-
</span>
|
|
245
|
-
</button>
|
|
246
|
-
<section
|
|
247
|
-
class="pf-c-nav__subnav"
|
|
248
|
-
aria-labelledby="page-layout-table-simple-subnav-title3"
|
|
249
|
-
hidden
|
|
250
|
-
>
|
|
251
|
-
<h2
|
|
252
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
253
|
-
id="page-layout-table-simple-subnav-title3"
|
|
254
|
-
>Third nav item</h2>
|
|
255
|
-
<ul class="pf-c-nav__list"></ul>
|
|
256
|
-
</section>
|
|
828
|
+
<li class="pf-c-nav__item">
|
|
829
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
257
830
|
</li>
|
|
258
|
-
<li class="pf-c-nav__item
|
|
259
|
-
<
|
|
260
|
-
Icons
|
|
261
|
-
<span class="pf-c-nav__toggle">
|
|
262
|
-
<span class="pf-c-nav__toggle-icon">
|
|
263
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
264
|
-
</span>
|
|
265
|
-
</span>
|
|
266
|
-
</button>
|
|
267
|
-
<section
|
|
268
|
-
class="pf-c-nav__subnav"
|
|
269
|
-
aria-labelledby="page-layout-table-simple-subnav-title4"
|
|
270
|
-
hidden
|
|
271
|
-
>
|
|
272
|
-
<h2
|
|
273
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
274
|
-
id="page-layout-table-simple-subnav-title4"
|
|
275
|
-
>Second nav item</h2>
|
|
276
|
-
<ul class="pf-c-nav__list"></ul>
|
|
277
|
-
</section>
|
|
831
|
+
<li class="pf-c-nav__item">
|
|
832
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
278
833
|
</li>
|
|
279
|
-
<li class="pf-c-nav__item
|
|
280
|
-
<
|
|
281
|
-
Colors
|
|
282
|
-
<span class="pf-c-nav__toggle">
|
|
283
|
-
<span class="pf-c-nav__toggle-icon">
|
|
284
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
285
|
-
</span>
|
|
286
|
-
</span>
|
|
287
|
-
</button>
|
|
288
|
-
<section
|
|
289
|
-
class="pf-c-nav__subnav"
|
|
290
|
-
aria-labelledby="page-layout-table-simple-subnav-title5"
|
|
291
|
-
hidden
|
|
292
|
-
>
|
|
293
|
-
<h2
|
|
294
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
295
|
-
id="page-layout-table-simple-subnav-title5"
|
|
296
|
-
>Second nav item</h2>
|
|
297
|
-
<ul class="pf-c-nav__list"></ul>
|
|
298
|
-
</section>
|
|
834
|
+
<li class="pf-c-nav__item">
|
|
835
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
299
836
|
</li>
|
|
300
837
|
</ul>
|
|
301
838
|
</nav>
|
|
@@ -304,7 +841,7 @@ wrapperTag: div
|
|
|
304
841
|
<main
|
|
305
842
|
class="pf-c-page__main"
|
|
306
843
|
tabindex="-1"
|
|
307
|
-
id="main-content-
|
|
844
|
+
id="main-content-banner-basic-example"
|
|
308
845
|
>
|
|
309
846
|
<div class="pf-c-banner pf-m-sticky">
|
|
310
847
|
<div
|
|
@@ -320,462 +857,204 @@ wrapperTag: div
|
|
|
320
857
|
<div class="pf-u-display-none pf-u-display-block-on-lg">Ned Username</div>
|
|
321
858
|
</div>
|
|
322
859
|
</div>
|
|
323
|
-
<section class="pf-c-page__main-
|
|
324
|
-
<div class="pf-c-
|
|
325
|
-
<
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
aria-label="This is a table with checkboxes"
|
|
335
|
-
id="page-layout-table-simple-table"
|
|
336
|
-
>
|
|
337
|
-
<thead>
|
|
338
|
-
<tr role="row">
|
|
339
|
-
<td class="pf-c-table__check" role="cell">
|
|
340
|
-
<input
|
|
341
|
-
type="checkbox"
|
|
342
|
-
name="check-all"
|
|
343
|
-
aria-label="Select all rows"
|
|
344
|
-
/>
|
|
345
|
-
</td>
|
|
346
|
-
<th role="columnheader" scope="col">Repositories</th>
|
|
347
|
-
<th role="columnheader" scope="col">Branches</th>
|
|
348
|
-
<th role="columnheader" scope="col">Pull requests</th>
|
|
349
|
-
<th role="columnheader" scope="col">Workspaces</th>
|
|
350
|
-
<th role="columnheader" scope="col">Last commit</th>
|
|
351
|
-
<td role="cell"></td>
|
|
352
|
-
|
|
353
|
-
<td role="cell"></td>
|
|
354
|
-
</tr>
|
|
355
|
-
</thead>
|
|
356
|
-
|
|
357
|
-
<tbody role="rowgroup">
|
|
358
|
-
<tr role="row">
|
|
359
|
-
<td class="pf-c-table__check" role="cell">
|
|
360
|
-
<input
|
|
361
|
-
type="checkbox"
|
|
362
|
-
name="checkrow1"
|
|
363
|
-
aria-labelledby="page-layout-table-simple-table-node1"
|
|
364
|
-
/>
|
|
365
|
-
</td>
|
|
366
|
-
<th role="columnheader" data-label="Repository name">
|
|
367
|
-
<div>
|
|
368
|
-
<div id="page-layout-table-simple-table-node1">Node 1</div>
|
|
369
|
-
<a href="#">siemur/test-space</a>
|
|
370
|
-
</div>
|
|
371
|
-
</th>
|
|
372
|
-
<td role="cell" data-label="Branches">
|
|
373
|
-
<span>
|
|
374
|
-
<i class="fas fa-code-branch"></i> 10
|
|
375
|
-
</span>
|
|
376
|
-
</td>
|
|
377
|
-
<td role="cell" data-label="Pull requests">
|
|
378
|
-
<span>
|
|
379
|
-
<i class="fas fa-code"></i> 25
|
|
380
|
-
</span>
|
|
381
|
-
</td>
|
|
382
|
-
<td role="cell" data-label="Workspaces">
|
|
383
|
-
<span>
|
|
384
|
-
<i class="fas fa-cube"></i> 5
|
|
385
|
-
</span>
|
|
386
|
-
</td>
|
|
387
|
-
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
388
|
-
<td role="cell" data-label="Action">
|
|
389
|
-
<a href="#">Action link</a>
|
|
390
|
-
</td>
|
|
391
|
-
<td class="pf-c-table__action" role="cell">
|
|
392
|
-
<div class="pf-c-dropdown pf-m-expanded">
|
|
393
|
-
<button
|
|
394
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
395
|
-
id="page-layout-table-simple-table-dropdown-kebab-1-button"
|
|
396
|
-
aria-expanded="true"
|
|
397
|
-
type="button"
|
|
398
|
-
aria-label="Actions"
|
|
399
|
-
>
|
|
400
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
401
|
-
</button>
|
|
402
|
-
<ul
|
|
403
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
404
|
-
aria-labelledby="page-layout-table-simple-table-dropdown-kebab-1-button"
|
|
405
|
-
>
|
|
406
|
-
<li>
|
|
407
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
408
|
-
</li>
|
|
409
|
-
<li>
|
|
410
|
-
<button
|
|
411
|
-
class="pf-c-dropdown__menu-item"
|
|
412
|
-
type="button"
|
|
413
|
-
>Action</button>
|
|
414
|
-
</li>
|
|
415
|
-
<li>
|
|
416
|
-
<a
|
|
417
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
418
|
-
href="#"
|
|
419
|
-
aria-disabled="true"
|
|
420
|
-
tabindex="-1"
|
|
421
|
-
>Disabled link</a>
|
|
422
|
-
</li>
|
|
423
|
-
<li>
|
|
424
|
-
<button
|
|
425
|
-
class="pf-c-dropdown__menu-item"
|
|
426
|
-
type="button"
|
|
427
|
-
disabled
|
|
428
|
-
>Disabled action</button>
|
|
429
|
-
</li>
|
|
430
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
431
|
-
<li>
|
|
432
|
-
<a
|
|
433
|
-
class="pf-c-dropdown__menu-item"
|
|
434
|
-
href="#"
|
|
435
|
-
>Separated link</a>
|
|
436
|
-
</li>
|
|
437
|
-
</ul>
|
|
438
|
-
</div>
|
|
439
|
-
</td>
|
|
440
|
-
</tr>
|
|
441
|
-
|
|
442
|
-
<tr role="row">
|
|
443
|
-
<td class="pf-c-table__check" role="cell">
|
|
444
|
-
<input
|
|
445
|
-
type="checkbox"
|
|
446
|
-
name="checkrow2"
|
|
447
|
-
aria-labelledby="page-layout-table-simple-table-node2"
|
|
448
|
-
/>
|
|
449
|
-
</td>
|
|
450
|
-
<th role="columnheader" data-label="Repository name">
|
|
451
|
-
<div>
|
|
452
|
-
<div id="page-layout-table-simple-table-node2">Node 2</div>
|
|
453
|
-
<a href="#">siemur/test-space</a>
|
|
454
|
-
</div>
|
|
455
|
-
</th>
|
|
456
|
-
<td role="cell" data-label="Branches">
|
|
457
|
-
<span>
|
|
458
|
-
<i class="fas fa-code-branch"></i> 8
|
|
459
|
-
</span>
|
|
460
|
-
</td>
|
|
461
|
-
<td role="cell" data-label="Pull requests">
|
|
462
|
-
<span>
|
|
463
|
-
<i class="fas fa-code"></i> 30
|
|
464
|
-
</span>
|
|
465
|
-
</td>
|
|
466
|
-
<td role="cell" data-label="Workspaces">
|
|
467
|
-
<span>
|
|
468
|
-
<i class="fas fa-cube"></i> 2
|
|
469
|
-
</span>
|
|
470
|
-
</td>
|
|
471
|
-
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
472
|
-
<td role="cell" data-label="Action">
|
|
473
|
-
<a href="#">Action link</a>
|
|
474
|
-
</td>
|
|
475
|
-
<td class="pf-c-table__action" role="cell">
|
|
476
|
-
<div class="pf-c-dropdown pf-m-expanded">
|
|
477
|
-
<button
|
|
478
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
479
|
-
id="page-layout-table-simple-table-dropdown-kebab-2-button"
|
|
480
|
-
aria-expanded="true"
|
|
481
|
-
type="button"
|
|
482
|
-
aria-label="Actions"
|
|
483
|
-
>
|
|
484
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
485
|
-
</button>
|
|
486
|
-
<ul
|
|
487
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
488
|
-
aria-labelledby="page-layout-table-simple-table-dropdown-kebab-2-button"
|
|
489
|
-
>
|
|
490
|
-
<li>
|
|
491
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
492
|
-
</li>
|
|
493
|
-
<li>
|
|
494
|
-
<button
|
|
495
|
-
class="pf-c-dropdown__menu-item"
|
|
496
|
-
type="button"
|
|
497
|
-
>Action</button>
|
|
498
|
-
</li>
|
|
499
|
-
<li>
|
|
500
|
-
<a
|
|
501
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
502
|
-
href="#"
|
|
503
|
-
aria-disabled="true"
|
|
504
|
-
tabindex="-1"
|
|
505
|
-
>Disabled link</a>
|
|
506
|
-
</li>
|
|
507
|
-
<li>
|
|
508
|
-
<button
|
|
509
|
-
class="pf-c-dropdown__menu-item"
|
|
510
|
-
type="button"
|
|
511
|
-
disabled
|
|
512
|
-
>Disabled action</button>
|
|
513
|
-
</li>
|
|
514
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
515
|
-
<li>
|
|
516
|
-
<a
|
|
517
|
-
class="pf-c-dropdown__menu-item"
|
|
518
|
-
href="#"
|
|
519
|
-
>Separated link</a>
|
|
520
|
-
</li>
|
|
521
|
-
</ul>
|
|
522
|
-
</div>
|
|
523
|
-
</td>
|
|
524
|
-
</tr>
|
|
860
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
861
|
+
<div class="pf-c-page__main-body">
|
|
862
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
863
|
+
<ol class="pf-c-breadcrumb__list">
|
|
864
|
+
<li class="pf-c-breadcrumb__item">
|
|
865
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
866
|
+
</li>
|
|
867
|
+
<li class="pf-c-breadcrumb__item">
|
|
868
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
869
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
870
|
+
</span>
|
|
525
871
|
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
/>
|
|
533
|
-
</td>
|
|
534
|
-
<th role="columnheader" data-label="Repository name">
|
|
535
|
-
<div>
|
|
536
|
-
<div id="page-layout-table-simple-table-node3">Node 3</div>
|
|
537
|
-
<a href="#">siemur/test-space</a>
|
|
538
|
-
</div>
|
|
539
|
-
</th>
|
|
540
|
-
<td role="cell" data-label="Branches">
|
|
541
|
-
<span>
|
|
542
|
-
<i class="fas fa-code-branch"></i> 12
|
|
543
|
-
</span>
|
|
544
|
-
</td>
|
|
545
|
-
<td role="cell" data-label="Pull requests">
|
|
546
|
-
<span>
|
|
547
|
-
<i class="fas fa-code"></i> 48
|
|
548
|
-
</span>
|
|
549
|
-
</td>
|
|
550
|
-
<td role="cell" data-label="Workspaces">
|
|
551
|
-
<span>
|
|
552
|
-
<i class="fas fa-cube"></i> 13
|
|
553
|
-
</span>
|
|
554
|
-
</td>
|
|
555
|
-
<td role="cell" data-label="Last commit">30 days ago</td>
|
|
556
|
-
<td role="cell" data-label="Action">
|
|
557
|
-
<a href="#">Action link</a>
|
|
558
|
-
</td>
|
|
559
|
-
<td class="pf-c-table__action" role="cell">
|
|
560
|
-
<div class="pf-c-dropdown pf-m-expanded">
|
|
561
|
-
<button
|
|
562
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
563
|
-
id="page-layout-table-simple-table-dropdown-kebab-3-button"
|
|
564
|
-
aria-expanded="true"
|
|
565
|
-
type="button"
|
|
566
|
-
aria-label="Actions"
|
|
567
|
-
>
|
|
568
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
569
|
-
</button>
|
|
570
|
-
<ul
|
|
571
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
572
|
-
aria-labelledby="page-layout-table-simple-table-dropdown-kebab-3-button"
|
|
573
|
-
>
|
|
574
|
-
<li>
|
|
575
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
576
|
-
</li>
|
|
577
|
-
<li>
|
|
578
|
-
<button
|
|
579
|
-
class="pf-c-dropdown__menu-item"
|
|
580
|
-
type="button"
|
|
581
|
-
>Action</button>
|
|
582
|
-
</li>
|
|
583
|
-
<li>
|
|
584
|
-
<a
|
|
585
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
586
|
-
href="#"
|
|
587
|
-
aria-disabled="true"
|
|
588
|
-
tabindex="-1"
|
|
589
|
-
>Disabled link</a>
|
|
590
|
-
</li>
|
|
591
|
-
<li>
|
|
592
|
-
<button
|
|
593
|
-
class="pf-c-dropdown__menu-item"
|
|
594
|
-
type="button"
|
|
595
|
-
disabled
|
|
596
|
-
>Disabled action</button>
|
|
597
|
-
</li>
|
|
598
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
599
|
-
<li>
|
|
600
|
-
<a
|
|
601
|
-
class="pf-c-dropdown__menu-item"
|
|
602
|
-
href="#"
|
|
603
|
-
>Separated link</a>
|
|
604
|
-
</li>
|
|
605
|
-
</ul>
|
|
606
|
-
</div>
|
|
607
|
-
</td>
|
|
608
|
-
</tr>
|
|
872
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
873
|
+
</li>
|
|
874
|
+
<li class="pf-c-breadcrumb__item">
|
|
875
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
876
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
877
|
+
</span>
|
|
609
878
|
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
/>
|
|
617
|
-
</td>
|
|
618
|
-
<th role="columnheader" data-label="Repository name">
|
|
619
|
-
<div>
|
|
620
|
-
<div id="page-layout-table-simple-table-node4">Node 4</div>
|
|
621
|
-
<a href="#">siemur/test-space</a>
|
|
622
|
-
</div>
|
|
623
|
-
</th>
|
|
624
|
-
<td role="cell" data-label="Branches">
|
|
625
|
-
<span>
|
|
626
|
-
<i class="fas fa-code-branch"></i> 3
|
|
627
|
-
</span>
|
|
628
|
-
</td>
|
|
629
|
-
<td role="cell" data-label="Pull requests">
|
|
630
|
-
<span>
|
|
631
|
-
<i class="fas fa-code"></i> 8
|
|
632
|
-
</span>
|
|
633
|
-
</td>
|
|
634
|
-
<td role="cell" data-label="Workspaces">
|
|
635
|
-
<span>
|
|
636
|
-
<i class="fas fa-cube"></i> 20
|
|
637
|
-
</span>
|
|
638
|
-
</td>
|
|
639
|
-
<td role="cell" data-label="Last commit">8 days ago</td>
|
|
640
|
-
<td role="cell" data-label="Action">
|
|
641
|
-
<a href="#">Action link</a>
|
|
642
|
-
</td>
|
|
643
|
-
<td class="pf-c-table__action" role="cell">
|
|
644
|
-
<div class="pf-c-dropdown pf-m-expanded">
|
|
645
|
-
<button
|
|
646
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
647
|
-
id="page-layout-table-simple-table-dropdown-kebab-4-button"
|
|
648
|
-
aria-expanded="true"
|
|
649
|
-
type="button"
|
|
650
|
-
aria-label="Actions"
|
|
651
|
-
>
|
|
652
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
653
|
-
</button>
|
|
654
|
-
<ul
|
|
655
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
656
|
-
aria-labelledby="page-layout-table-simple-table-dropdown-kebab-4-button"
|
|
657
|
-
>
|
|
658
|
-
<li>
|
|
659
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
660
|
-
</li>
|
|
661
|
-
<li>
|
|
662
|
-
<button
|
|
663
|
-
class="pf-c-dropdown__menu-item"
|
|
664
|
-
type="button"
|
|
665
|
-
>Action</button>
|
|
666
|
-
</li>
|
|
667
|
-
<li>
|
|
668
|
-
<a
|
|
669
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
670
|
-
href="#"
|
|
671
|
-
aria-disabled="true"
|
|
672
|
-
tabindex="-1"
|
|
673
|
-
>Disabled link</a>
|
|
674
|
-
</li>
|
|
675
|
-
<li>
|
|
676
|
-
<button
|
|
677
|
-
class="pf-c-dropdown__menu-item"
|
|
678
|
-
type="button"
|
|
679
|
-
disabled
|
|
680
|
-
>Disabled action</button>
|
|
681
|
-
</li>
|
|
682
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
683
|
-
<li>
|
|
684
|
-
<a
|
|
685
|
-
class="pf-c-dropdown__menu-item"
|
|
686
|
-
href="#"
|
|
687
|
-
>Separated link</a>
|
|
688
|
-
</li>
|
|
689
|
-
</ul>
|
|
690
|
-
</div>
|
|
691
|
-
</td>
|
|
692
|
-
</tr>
|
|
879
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
880
|
+
</li>
|
|
881
|
+
<li class="pf-c-breadcrumb__item">
|
|
882
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
883
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
884
|
+
</span>
|
|
693
885
|
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
</
|
|
777
|
-
</
|
|
778
|
-
|
|
886
|
+
<a
|
|
887
|
+
href="#"
|
|
888
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
889
|
+
aria-current="page"
|
|
890
|
+
>Section landing</a>
|
|
891
|
+
</li>
|
|
892
|
+
</ol>
|
|
893
|
+
</nav>
|
|
894
|
+
</div>
|
|
895
|
+
</section>
|
|
896
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
897
|
+
<div class="pf-c-page__main-body">
|
|
898
|
+
<div class="pf-c-content">
|
|
899
|
+
<h1>Main title</h1>
|
|
900
|
+
<p>This is a full page demo.</p>
|
|
901
|
+
</div>
|
|
902
|
+
</div>
|
|
903
|
+
</section>
|
|
904
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
|
|
905
|
+
<div class="pf-c-page__main-body">
|
|
906
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
907
|
+
<div class="pf-c-card">
|
|
908
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
909
|
+
</div>
|
|
910
|
+
<div class="pf-c-card">
|
|
911
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
912
|
+
</div>
|
|
913
|
+
<div class="pf-c-card">
|
|
914
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
915
|
+
</div>
|
|
916
|
+
<div class="pf-c-card">
|
|
917
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
918
|
+
</div>
|
|
919
|
+
<div class="pf-c-card">
|
|
920
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
921
|
+
</div>
|
|
922
|
+
<div class="pf-c-card">
|
|
923
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
924
|
+
</div>
|
|
925
|
+
<div class="pf-c-card">
|
|
926
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
927
|
+
</div>
|
|
928
|
+
<div class="pf-c-card">
|
|
929
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
930
|
+
</div>
|
|
931
|
+
<div class="pf-c-card">
|
|
932
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
933
|
+
</div>
|
|
934
|
+
<div class="pf-c-card">
|
|
935
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
936
|
+
</div>
|
|
937
|
+
<div class="pf-c-card">
|
|
938
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
939
|
+
</div>
|
|
940
|
+
<div class="pf-c-card">
|
|
941
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
942
|
+
</div>
|
|
943
|
+
<div class="pf-c-card">
|
|
944
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
945
|
+
</div>
|
|
946
|
+
<div class="pf-c-card">
|
|
947
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
948
|
+
</div>
|
|
949
|
+
<div class="pf-c-card">
|
|
950
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
951
|
+
</div>
|
|
952
|
+
<div class="pf-c-card">
|
|
953
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
954
|
+
</div>
|
|
955
|
+
<div class="pf-c-card">
|
|
956
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
957
|
+
</div>
|
|
958
|
+
<div class="pf-c-card">
|
|
959
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
960
|
+
</div>
|
|
961
|
+
<div class="pf-c-card">
|
|
962
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
963
|
+
</div>
|
|
964
|
+
<div class="pf-c-card">
|
|
965
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
966
|
+
</div>
|
|
967
|
+
<div class="pf-c-card">
|
|
968
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
969
|
+
</div>
|
|
970
|
+
<div class="pf-c-card">
|
|
971
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
972
|
+
</div>
|
|
973
|
+
<div class="pf-c-card">
|
|
974
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
975
|
+
</div>
|
|
976
|
+
<div class="pf-c-card">
|
|
977
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
978
|
+
</div>
|
|
979
|
+
<div class="pf-c-card">
|
|
980
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
981
|
+
</div>
|
|
982
|
+
<div class="pf-c-card">
|
|
983
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
984
|
+
</div>
|
|
985
|
+
<div class="pf-c-card">
|
|
986
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
987
|
+
</div>
|
|
988
|
+
<div class="pf-c-card">
|
|
989
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
990
|
+
</div>
|
|
991
|
+
<div class="pf-c-card">
|
|
992
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
993
|
+
</div>
|
|
994
|
+
<div class="pf-c-card">
|
|
995
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
996
|
+
</div>
|
|
997
|
+
<div class="pf-c-card">
|
|
998
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
999
|
+
</div>
|
|
1000
|
+
<div class="pf-c-card">
|
|
1001
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1002
|
+
</div>
|
|
1003
|
+
<div class="pf-c-card">
|
|
1004
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1005
|
+
</div>
|
|
1006
|
+
<div class="pf-c-card">
|
|
1007
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1008
|
+
</div>
|
|
1009
|
+
<div class="pf-c-card">
|
|
1010
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1011
|
+
</div>
|
|
1012
|
+
<div class="pf-c-card">
|
|
1013
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1014
|
+
</div>
|
|
1015
|
+
<div class="pf-c-card">
|
|
1016
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1017
|
+
</div>
|
|
1018
|
+
<div class="pf-c-card">
|
|
1019
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1020
|
+
</div>
|
|
1021
|
+
<div class="pf-c-card">
|
|
1022
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1023
|
+
</div>
|
|
1024
|
+
<div class="pf-c-card">
|
|
1025
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1026
|
+
</div>
|
|
1027
|
+
<div class="pf-c-card">
|
|
1028
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1029
|
+
</div>
|
|
1030
|
+
<div class="pf-c-card">
|
|
1031
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
<div class="pf-c-card">
|
|
1034
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1035
|
+
</div>
|
|
1036
|
+
<div class="pf-c-card">
|
|
1037
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1038
|
+
</div>
|
|
1039
|
+
<div class="pf-c-card">
|
|
1040
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1041
|
+
</div>
|
|
1042
|
+
<div class="pf-c-card">
|
|
1043
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1044
|
+
</div>
|
|
1045
|
+
<div class="pf-c-card">
|
|
1046
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1047
|
+
</div>
|
|
1048
|
+
<div class="pf-c-card">
|
|
1049
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1050
|
+
</div>
|
|
1051
|
+
<div class="pf-c-card">
|
|
1052
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1053
|
+
</div>
|
|
1054
|
+
<div class="pf-c-card">
|
|
1055
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1056
|
+
</div>
|
|
1057
|
+
</div>
|
|
779
1058
|
</div>
|
|
780
1059
|
</section>
|
|
781
1060
|
</main>
|
|
@@ -790,319 +1069,910 @@ wrapperTag: div
|
|
|
790
1069
|
class="pf-l-flex pf-m-column pf-m-nowrap pf-m-space-items-none"
|
|
791
1070
|
style="height: 100%;"
|
|
792
1071
|
>
|
|
793
|
-
<div class="pf-
|
|
794
|
-
<div
|
|
1072
|
+
<div class="pf-c-banner pf-m-sticky">
|
|
1073
|
+
<div
|
|
1074
|
+
class="pf-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
|
|
1075
|
+
style="height: 100%;"
|
|
1076
|
+
>
|
|
1077
|
+
<div class="pf-u-display-none pf-u-display-block-on-lg">Localhost</div>
|
|
795
1078
|
<div
|
|
796
|
-
class="pf-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
>This message is sticky to the top or bottom of the page.</div>
|
|
803
|
-
<div
|
|
804
|
-
class="pf-u-display-none-on-lg"
|
|
805
|
-
>Drop some text on mobile, truncate if needed.</div>
|
|
806
|
-
<div class="pf-u-display-none pf-u-display-block-on-lg">Ned Username</div>
|
|
807
|
-
</div>
|
|
1079
|
+
class="pf-u-display-none pf-u-display-block-on-lg"
|
|
1080
|
+
>This message is sticky to the top or bottom of the page.</div>
|
|
1081
|
+
<div
|
|
1082
|
+
class="pf-u-display-none-on-lg"
|
|
1083
|
+
>Drop some text on mobile, truncate if needed.</div>
|
|
1084
|
+
<div class="pf-u-display-none pf-u-display-block-on-lg">Ned Username</div>
|
|
808
1085
|
</div>
|
|
809
1086
|
</div>
|
|
810
1087
|
<div class="pf-l-flex__item pf-m-grow" style="min-height: 0;">
|
|
811
|
-
<div class="pf-c-page" id="
|
|
1088
|
+
<div class="pf-c-page" id="banner-top-bottom-example">
|
|
812
1089
|
<a
|
|
813
1090
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
814
|
-
href="#main-content-
|
|
1091
|
+
href="#main-content-banner-top-bottom-example"
|
|
815
1092
|
>Skip to content</a>
|
|
816
|
-
<header class="pf-c-
|
|
817
|
-
<
|
|
818
|
-
<
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
1093
|
+
<header class="pf-c-masthead" id="banner-top-bottom-example-masthead">
|
|
1094
|
+
<span class="pf-c-masthead__toggle">
|
|
1095
|
+
<button
|
|
1096
|
+
class="pf-c-button pf-m-plain"
|
|
1097
|
+
type="button"
|
|
1098
|
+
aria-label="Global navigation"
|
|
1099
|
+
>
|
|
1100
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1101
|
+
</button>
|
|
1102
|
+
</span>
|
|
1103
|
+
<div class="pf-c-masthead__main">
|
|
1104
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1105
|
+
<picture
|
|
1106
|
+
class="pf-c-brand pf-m-picture"
|
|
1107
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
826
1108
|
>
|
|
827
|
-
<
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
1109
|
+
<source
|
|
1110
|
+
media="(min-width: 768px)"
|
|
1111
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1112
|
+
/>
|
|
1113
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1114
|
+
<img
|
|
1115
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1116
|
+
alt="Fallback patternFly default logo"
|
|
1117
|
+
/>
|
|
1118
|
+
</picture>
|
|
836
1119
|
</a>
|
|
837
1120
|
</div>
|
|
838
|
-
<div class="pf-c-
|
|
839
|
-
<div
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
>
|
|
848
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
849
|
-
</button>
|
|
850
|
-
</div>
|
|
851
|
-
<div
|
|
852
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
853
|
-
>
|
|
854
|
-
<button
|
|
855
|
-
class="pf-c-button pf-m-plain"
|
|
856
|
-
type="button"
|
|
857
|
-
aria-label="Help"
|
|
858
|
-
>
|
|
859
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
860
|
-
</button>
|
|
861
|
-
</div>
|
|
862
|
-
</div>
|
|
863
|
-
<div class="pf-c-page__header-tools-group">
|
|
864
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
865
|
-
<div class="pf-c-dropdown">
|
|
866
|
-
<button
|
|
867
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
868
|
-
id="page-layout-table-top-bottom-dropdown-kebab-1-button"
|
|
869
|
-
aria-expanded="false"
|
|
870
|
-
type="button"
|
|
871
|
-
aria-label="Actions"
|
|
872
|
-
>
|
|
873
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
874
|
-
</button>
|
|
875
|
-
<ul
|
|
876
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
877
|
-
aria-labelledby="page-layout-table-top-bottom-dropdown-kebab-1-button"
|
|
878
|
-
hidden
|
|
879
|
-
>
|
|
880
|
-
<li>
|
|
881
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
882
|
-
</li>
|
|
883
|
-
<li>
|
|
884
|
-
<button
|
|
885
|
-
class="pf-c-dropdown__menu-item"
|
|
886
|
-
type="button"
|
|
887
|
-
>Action</button>
|
|
888
|
-
</li>
|
|
889
|
-
<li>
|
|
890
|
-
<a
|
|
891
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
892
|
-
href="#"
|
|
893
|
-
aria-disabled="true"
|
|
894
|
-
tabindex="-1"
|
|
895
|
-
>Disabled link</a>
|
|
896
|
-
</li>
|
|
897
|
-
<li>
|
|
898
|
-
<button
|
|
899
|
-
class="pf-c-dropdown__menu-item"
|
|
900
|
-
type="button"
|
|
901
|
-
disabled
|
|
902
|
-
>Disabled action</button>
|
|
903
|
-
</li>
|
|
904
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
905
|
-
<li>
|
|
906
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
907
|
-
</li>
|
|
908
|
-
</ul>
|
|
909
|
-
</div>
|
|
910
|
-
</div>
|
|
911
|
-
<div
|
|
912
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
913
|
-
>
|
|
914
|
-
<div class="pf-c-dropdown">
|
|
915
|
-
<button
|
|
916
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
917
|
-
id="page-layout-table-top-bottom-dropdown-kebab-2-button"
|
|
918
|
-
aria-expanded="false"
|
|
919
|
-
type="button"
|
|
920
|
-
>
|
|
921
|
-
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
922
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
923
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
924
|
-
</span>
|
|
925
|
-
</button>
|
|
926
|
-
<ul
|
|
927
|
-
class="pf-c-dropdown__menu"
|
|
928
|
-
aria-labelledby="page-layout-table-top-bottom-dropdown-kebab-2-button"
|
|
929
|
-
hidden
|
|
1121
|
+
<div class="pf-c-masthead__content">
|
|
1122
|
+
<div
|
|
1123
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1124
|
+
id="banner-top-bottom-example-masthead-toolbar"
|
|
1125
|
+
>
|
|
1126
|
+
<div class="pf-c-toolbar__content">
|
|
1127
|
+
<div class="pf-c-toolbar__content-section">
|
|
1128
|
+
<div
|
|
1129
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
930
1130
|
>
|
|
931
|
-
<
|
|
932
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
933
|
-
</li>
|
|
934
|
-
<li>
|
|
1131
|
+
<div class="pf-c-toolbar__item">
|
|
935
1132
|
<button
|
|
936
|
-
class="pf-c-
|
|
1133
|
+
class="pf-c-button pf-m-plain"
|
|
937
1134
|
type="button"
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
1135
|
+
aria-label="Notifications"
|
|
1136
|
+
>
|
|
1137
|
+
<span class="pf-c-notification-badge">
|
|
1138
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
1139
|
+
</span>
|
|
1140
|
+
</button>
|
|
1141
|
+
</div>
|
|
1142
|
+
<div
|
|
1143
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1144
|
+
>
|
|
1145
|
+
<div class="pf-c-toolbar__item">
|
|
1146
|
+
<nav
|
|
1147
|
+
class="pf-c-app-launcher"
|
|
1148
|
+
aria-label="Application launcher"
|
|
1149
|
+
id="banner-top-bottom-example-masthead-icon-group--app-launcher"
|
|
1150
|
+
>
|
|
1151
|
+
<button
|
|
1152
|
+
class="pf-c-app-launcher__toggle"
|
|
1153
|
+
type="button"
|
|
1154
|
+
id="banner-top-bottom-example-masthead-icon-group--app-launcher-button"
|
|
1155
|
+
aria-expanded="false"
|
|
1156
|
+
aria-label="Application launcher"
|
|
1157
|
+
>
|
|
1158
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1159
|
+
</button>
|
|
1160
|
+
<div
|
|
1161
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1162
|
+
hidden
|
|
1163
|
+
>
|
|
1164
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1165
|
+
<div class="pf-c-search-input">
|
|
1166
|
+
<div class="pf-c-search-input__bar">
|
|
1167
|
+
<span class="pf-c-search-input__text">
|
|
1168
|
+
<span class="pf-c-search-input__icon">
|
|
1169
|
+
<i
|
|
1170
|
+
class="fas fa-search fa-fw"
|
|
1171
|
+
aria-hidden="true"
|
|
1172
|
+
></i>
|
|
1173
|
+
</span>
|
|
1174
|
+
<input
|
|
1175
|
+
class="pf-c-search-input__text-input"
|
|
1176
|
+
type="text"
|
|
1177
|
+
placeholder="Filter by name"
|
|
1178
|
+
aria-label="Filter by name"
|
|
1179
|
+
/>
|
|
1180
|
+
</span>
|
|
1181
|
+
</div>
|
|
1182
|
+
</div>
|
|
1183
|
+
</div>
|
|
1184
|
+
<section class="pf-c-app-launcher__group">
|
|
1185
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1186
|
+
<ul>
|
|
1187
|
+
<li
|
|
1188
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1189
|
+
>
|
|
1190
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1191
|
+
Link 1
|
|
1192
|
+
<span
|
|
1193
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1194
|
+
>
|
|
1195
|
+
<i
|
|
1196
|
+
class="fas fa-external-link-alt"
|
|
1197
|
+
aria-hidden="true"
|
|
1198
|
+
></i>
|
|
1199
|
+
</span>
|
|
1200
|
+
<span
|
|
1201
|
+
class="pf-screen-reader"
|
|
1202
|
+
>(opens new window)</span>
|
|
1203
|
+
</a>
|
|
1204
|
+
<button
|
|
1205
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1206
|
+
type="button"
|
|
1207
|
+
aria-label="Favorite"
|
|
1208
|
+
>
|
|
1209
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1210
|
+
</button>
|
|
1211
|
+
</li>
|
|
1212
|
+
<li
|
|
1213
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1214
|
+
>
|
|
1215
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1216
|
+
Link 2
|
|
1217
|
+
<span
|
|
1218
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1219
|
+
>
|
|
1220
|
+
<i
|
|
1221
|
+
class="fas fa-external-link-alt"
|
|
1222
|
+
aria-hidden="true"
|
|
1223
|
+
></i>
|
|
1224
|
+
</span>
|
|
1225
|
+
<span
|
|
1226
|
+
class="pf-screen-reader"
|
|
1227
|
+
>(opens new window)</span>
|
|
1228
|
+
</a>
|
|
1229
|
+
<button
|
|
1230
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1231
|
+
type="button"
|
|
1232
|
+
aria-label="Favorite"
|
|
1233
|
+
>
|
|
1234
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1235
|
+
</button>
|
|
1236
|
+
</li>
|
|
1237
|
+
</ul>
|
|
1238
|
+
</section>
|
|
1239
|
+
<hr class="pf-c-divider" />
|
|
1240
|
+
<section class="pf-c-app-launcher__group">
|
|
1241
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1242
|
+
<ul>
|
|
1243
|
+
<li
|
|
1244
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1245
|
+
>
|
|
1246
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1247
|
+
Link 1
|
|
1248
|
+
<span
|
|
1249
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1250
|
+
>
|
|
1251
|
+
<i
|
|
1252
|
+
class="fas fa-external-link-alt"
|
|
1253
|
+
aria-hidden="true"
|
|
1254
|
+
></i>
|
|
1255
|
+
</span>
|
|
1256
|
+
<span
|
|
1257
|
+
class="pf-screen-reader"
|
|
1258
|
+
>(opens new window)</span>
|
|
1259
|
+
</a>
|
|
1260
|
+
<button
|
|
1261
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1262
|
+
type="button"
|
|
1263
|
+
aria-label="Favorite"
|
|
1264
|
+
>
|
|
1265
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1266
|
+
</button>
|
|
1267
|
+
</li>
|
|
1268
|
+
<li
|
|
1269
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1270
|
+
>
|
|
1271
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1272
|
+
Link 2
|
|
1273
|
+
<span
|
|
1274
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1275
|
+
>
|
|
1276
|
+
<i
|
|
1277
|
+
class="fas fa-external-link-alt"
|
|
1278
|
+
aria-hidden="true"
|
|
1279
|
+
></i>
|
|
1280
|
+
</span>
|
|
1281
|
+
<span
|
|
1282
|
+
class="pf-screen-reader"
|
|
1283
|
+
>(opens new window)</span>
|
|
1284
|
+
</a>
|
|
1285
|
+
<button
|
|
1286
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1287
|
+
type="button"
|
|
1288
|
+
aria-label="Favorite"
|
|
1289
|
+
>
|
|
1290
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1291
|
+
</button>
|
|
1292
|
+
</li>
|
|
1293
|
+
</ul>
|
|
1294
|
+
</section>
|
|
1295
|
+
</div>
|
|
1296
|
+
</nav>
|
|
1297
|
+
</div>
|
|
1298
|
+
<div class="pf-c-toolbar__item">
|
|
1299
|
+
<div class="pf-c-dropdown">
|
|
1300
|
+
<button
|
|
1301
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1302
|
+
id="banner-top-bottom-example-masthead-settings-button"
|
|
1303
|
+
aria-expanded="false"
|
|
1304
|
+
type="button"
|
|
1305
|
+
aria-label="Settings"
|
|
1306
|
+
>
|
|
1307
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1308
|
+
</button>
|
|
1309
|
+
<ul
|
|
1310
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1311
|
+
aria-labelledby="banner-top-bottom-example-masthead-settings-button"
|
|
1312
|
+
hidden
|
|
1313
|
+
>
|
|
1314
|
+
<li>
|
|
1315
|
+
<button
|
|
1316
|
+
class="pf-c-dropdown__menu-item"
|
|
1317
|
+
type="button"
|
|
1318
|
+
>Settings</button>
|
|
1319
|
+
</li>
|
|
1320
|
+
<li>
|
|
1321
|
+
<button
|
|
1322
|
+
class="pf-c-dropdown__menu-item"
|
|
1323
|
+
type="button"
|
|
1324
|
+
>Use the beta release</button>
|
|
1325
|
+
</li>
|
|
1326
|
+
</ul>
|
|
1327
|
+
</div>
|
|
1328
|
+
</div>
|
|
1329
|
+
<div class="pf-c-toolbar__item">
|
|
1330
|
+
<div class="pf-c-dropdown">
|
|
1331
|
+
<button
|
|
1332
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1333
|
+
id="banner-top-bottom-example-masthead-help-button"
|
|
1334
|
+
aria-expanded="false"
|
|
1335
|
+
type="button"
|
|
1336
|
+
aria-label="Help"
|
|
1337
|
+
>
|
|
1338
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1339
|
+
</button>
|
|
1340
|
+
<ul
|
|
1341
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1342
|
+
aria-labelledby="banner-top-bottom-example-masthead-help-button"
|
|
1343
|
+
hidden
|
|
1344
|
+
>
|
|
1345
|
+
<li>
|
|
1346
|
+
<button
|
|
1347
|
+
class="pf-c-dropdown__menu-item"
|
|
1348
|
+
type="button"
|
|
1349
|
+
>Support options</button>
|
|
1350
|
+
</li>
|
|
1351
|
+
<li>
|
|
1352
|
+
<button
|
|
1353
|
+
class="pf-c-dropdown__menu-item"
|
|
1354
|
+
type="button"
|
|
1355
|
+
>Open support case</button>
|
|
1356
|
+
</li>
|
|
1357
|
+
<li>
|
|
1358
|
+
<button
|
|
1359
|
+
class="pf-c-dropdown__menu-item"
|
|
1360
|
+
type="button"
|
|
1361
|
+
>API documentation</button>
|
|
1362
|
+
</li>
|
|
1363
|
+
</ul>
|
|
1364
|
+
</div>
|
|
1365
|
+
</div>
|
|
1366
|
+
</div>
|
|
1367
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1368
|
+
<div class="pf-c-dropdown">
|
|
1369
|
+
<button
|
|
1370
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1371
|
+
type="button"
|
|
1372
|
+
aria-expanded="false"
|
|
1373
|
+
aria-label="Actions"
|
|
1374
|
+
>
|
|
1375
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1376
|
+
</button>
|
|
1377
|
+
<div
|
|
1378
|
+
class="pf-c-menu pf-m-drilldown pf-m-align-right"
|
|
1379
|
+
hidden
|
|
1380
|
+
>
|
|
1381
|
+
<div class="pf-c-menu__content">
|
|
1382
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1383
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1384
|
+
<li
|
|
1385
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1386
|
+
role="none"
|
|
1387
|
+
>
|
|
1388
|
+
<button
|
|
1389
|
+
class="pf-c-menu__item"
|
|
1390
|
+
type="button"
|
|
1391
|
+
disabled
|
|
1392
|
+
role="menuitem"
|
|
1393
|
+
>
|
|
1394
|
+
<span class="pf-c-menu__item-description">
|
|
1395
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1396
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
1397
|
+
</span>
|
|
1398
|
+
</button>
|
|
1399
|
+
</li>
|
|
1400
|
+
<li
|
|
1401
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1402
|
+
role="none"
|
|
1403
|
+
>
|
|
1404
|
+
<button
|
|
1405
|
+
class="pf-c-menu__item"
|
|
1406
|
+
type="button"
|
|
1407
|
+
disabled
|
|
1408
|
+
role="menuitem"
|
|
1409
|
+
>
|
|
1410
|
+
<span class="pf-c-menu__item-description">
|
|
1411
|
+
<div
|
|
1412
|
+
class="pf-u-font-size-sm"
|
|
1413
|
+
>Account number:</div>
|
|
1414
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1415
|
+
</span>
|
|
1416
|
+
</button>
|
|
1417
|
+
</li>
|
|
1418
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1419
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1420
|
+
<button
|
|
1421
|
+
class="pf-c-menu__item"
|
|
1422
|
+
type="button"
|
|
1423
|
+
role="menuitem"
|
|
1424
|
+
>
|
|
1425
|
+
<span class="pf-c-menu__item-main">
|
|
1426
|
+
<span
|
|
1427
|
+
class="pf-c-menu__item-text"
|
|
1428
|
+
>My profile</span>
|
|
1429
|
+
</span>
|
|
1430
|
+
</button>
|
|
1431
|
+
</li>
|
|
1432
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1433
|
+
<button
|
|
1434
|
+
class="pf-c-menu__item"
|
|
1435
|
+
type="button"
|
|
1436
|
+
role="menuitem"
|
|
1437
|
+
>
|
|
1438
|
+
<span class="pf-c-menu__item-main">
|
|
1439
|
+
<span
|
|
1440
|
+
class="pf-c-menu__item-text"
|
|
1441
|
+
>User management</span>
|
|
1442
|
+
</span>
|
|
1443
|
+
</button>
|
|
1444
|
+
</li>
|
|
1445
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1446
|
+
<button
|
|
1447
|
+
class="pf-c-menu__item"
|
|
1448
|
+
type="button"
|
|
1449
|
+
role="menuitem"
|
|
1450
|
+
>
|
|
1451
|
+
<span class="pf-c-menu__item-main">
|
|
1452
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1453
|
+
</span>
|
|
1454
|
+
</button>
|
|
1455
|
+
</li>
|
|
1456
|
+
</ul>
|
|
1457
|
+
</section>
|
|
1458
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1459
|
+
<section class="pf-c-menu__group">
|
|
1460
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1461
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1462
|
+
<button
|
|
1463
|
+
class="pf-c-menu__item"
|
|
1464
|
+
type="button"
|
|
1465
|
+
role="menuitem"
|
|
1466
|
+
aria-expanded="false"
|
|
1467
|
+
>
|
|
1468
|
+
<span class="pf-c-menu__item-main">
|
|
1469
|
+
<span class="pf-c-menu__item-icon">
|
|
1470
|
+
<i
|
|
1471
|
+
class="fas fa-fw fa-cog"
|
|
1472
|
+
aria-hidden="true"
|
|
1473
|
+
></i>
|
|
1474
|
+
</span>
|
|
1475
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1476
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1477
|
+
<i class="fas fa-angle-right"></i>
|
|
1478
|
+
</span>
|
|
1479
|
+
</span>
|
|
1480
|
+
</button>
|
|
1481
|
+
<div class="pf-c-menu" hidden>
|
|
1482
|
+
<div class="pf-c-menu__content">
|
|
1483
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1484
|
+
<li
|
|
1485
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1486
|
+
role="none"
|
|
1487
|
+
>
|
|
1488
|
+
<button
|
|
1489
|
+
class="pf-c-menu__item"
|
|
1490
|
+
type="button"
|
|
1491
|
+
role="menuitem"
|
|
1492
|
+
>
|
|
1493
|
+
<span class="pf-c-menu__item-main">
|
|
1494
|
+
<span
|
|
1495
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1496
|
+
>
|
|
1497
|
+
<i class="fas fa-angle-left"></i>
|
|
1498
|
+
</span>
|
|
1499
|
+
<span class="pf-c-menu__item-icon">
|
|
1500
|
+
<i
|
|
1501
|
+
class="fas fa-fw fa-cog"
|
|
1502
|
+
aria-hidden="true"
|
|
1503
|
+
></i>
|
|
1504
|
+
</span>
|
|
1505
|
+
<span
|
|
1506
|
+
class="pf-c-menu__item-text"
|
|
1507
|
+
>Settings</span>
|
|
1508
|
+
</span>
|
|
1509
|
+
</button>
|
|
1510
|
+
</li>
|
|
1511
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1512
|
+
<li
|
|
1513
|
+
class="pf-c-menu__list-item"
|
|
1514
|
+
role="none"
|
|
1515
|
+
>
|
|
1516
|
+
<a
|
|
1517
|
+
class="pf-c-menu__item"
|
|
1518
|
+
href="#"
|
|
1519
|
+
role="menuitem"
|
|
1520
|
+
>
|
|
1521
|
+
<span class="pf-c-menu__item-main">
|
|
1522
|
+
<span
|
|
1523
|
+
class="pf-c-menu__item-text"
|
|
1524
|
+
>Customer support</span>
|
|
1525
|
+
</span>
|
|
1526
|
+
</a>
|
|
1527
|
+
</li>
|
|
1528
|
+
<li
|
|
1529
|
+
class="pf-c-menu__list-item"
|
|
1530
|
+
role="none"
|
|
1531
|
+
>
|
|
1532
|
+
<a
|
|
1533
|
+
class="pf-c-menu__item"
|
|
1534
|
+
href="#"
|
|
1535
|
+
role="menuitem"
|
|
1536
|
+
>
|
|
1537
|
+
<span class="pf-c-menu__item-main">
|
|
1538
|
+
<span
|
|
1539
|
+
class="pf-c-menu__item-text"
|
|
1540
|
+
>About</span>
|
|
1541
|
+
</span>
|
|
1542
|
+
</a>
|
|
1543
|
+
</li>
|
|
1544
|
+
</ul>
|
|
1545
|
+
</div>
|
|
1546
|
+
</div>
|
|
1547
|
+
</li>
|
|
1548
|
+
|
|
1549
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1550
|
+
<button
|
|
1551
|
+
class="pf-c-menu__item"
|
|
1552
|
+
type="button"
|
|
1553
|
+
role="menuitem"
|
|
1554
|
+
aria-expanded="false"
|
|
1555
|
+
>
|
|
1556
|
+
<span class="pf-c-menu__item-main">
|
|
1557
|
+
<span class="pf-c-menu__item-icon">
|
|
1558
|
+
<i
|
|
1559
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1560
|
+
aria-hidden="true"
|
|
1561
|
+
></i>
|
|
1562
|
+
</span>
|
|
1563
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1564
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1565
|
+
<i class="fas fa-angle-right"></i>
|
|
1566
|
+
</span>
|
|
1567
|
+
</span>
|
|
1568
|
+
</button>
|
|
1569
|
+
<div class="pf-c-menu" hidden>
|
|
1570
|
+
<div class="pf-c-menu__content">
|
|
1571
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1572
|
+
<li
|
|
1573
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1574
|
+
role="none"
|
|
1575
|
+
>
|
|
1576
|
+
<button
|
|
1577
|
+
class="pf-c-menu__item"
|
|
1578
|
+
type="button"
|
|
1579
|
+
role="menuitem"
|
|
1580
|
+
>
|
|
1581
|
+
<span class="pf-c-menu__item-main">
|
|
1582
|
+
<span
|
|
1583
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1584
|
+
>
|
|
1585
|
+
<i class="fas fa-angle-left"></i>
|
|
1586
|
+
</span>
|
|
1587
|
+
<span class="pf-c-menu__item-icon">
|
|
1588
|
+
<i
|
|
1589
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1590
|
+
aria-hidden="true"
|
|
1591
|
+
></i>
|
|
1592
|
+
</span>
|
|
1593
|
+
<span
|
|
1594
|
+
class="pf-c-menu__item-text"
|
|
1595
|
+
>Help</span>
|
|
1596
|
+
</span>
|
|
1597
|
+
</button>
|
|
1598
|
+
</li>
|
|
1599
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1600
|
+
<li
|
|
1601
|
+
class="pf-c-menu__list-item"
|
|
1602
|
+
role="none"
|
|
1603
|
+
>
|
|
1604
|
+
<a
|
|
1605
|
+
class="pf-c-menu__item"
|
|
1606
|
+
href="#"
|
|
1607
|
+
role="menuitem"
|
|
1608
|
+
>
|
|
1609
|
+
<span class="pf-c-menu__item-main">
|
|
1610
|
+
<span
|
|
1611
|
+
class="pf-c-menu__item-text"
|
|
1612
|
+
>Support options</span>
|
|
1613
|
+
</span>
|
|
1614
|
+
</a>
|
|
1615
|
+
</li>
|
|
1616
|
+
<li
|
|
1617
|
+
class="pf-c-menu__list-item"
|
|
1618
|
+
role="none"
|
|
1619
|
+
>
|
|
1620
|
+
<a
|
|
1621
|
+
class="pf-c-menu__item"
|
|
1622
|
+
href="#"
|
|
1623
|
+
role="menuitem"
|
|
1624
|
+
>
|
|
1625
|
+
<span class="pf-c-menu__item-main">
|
|
1626
|
+
<span
|
|
1627
|
+
class="pf-c-menu__item-text"
|
|
1628
|
+
>Open support case</span>
|
|
1629
|
+
</span>
|
|
1630
|
+
</a>
|
|
1631
|
+
</li>
|
|
1632
|
+
<li
|
|
1633
|
+
class="pf-c-menu__list-item"
|
|
1634
|
+
role="none"
|
|
1635
|
+
>
|
|
1636
|
+
<a
|
|
1637
|
+
class="pf-c-menu__item"
|
|
1638
|
+
href="#"
|
|
1639
|
+
role="menuitem"
|
|
1640
|
+
>
|
|
1641
|
+
<span class="pf-c-menu__item-main">
|
|
1642
|
+
<span
|
|
1643
|
+
class="pf-c-menu__item-text"
|
|
1644
|
+
>API documentation</span>
|
|
1645
|
+
</span>
|
|
1646
|
+
</a>
|
|
1647
|
+
</li>
|
|
1648
|
+
</ul>
|
|
1649
|
+
</div>
|
|
1650
|
+
</div>
|
|
1651
|
+
</li>
|
|
1652
|
+
|
|
1653
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1654
|
+
<button
|
|
1655
|
+
class="pf-c-menu__item"
|
|
1656
|
+
type="button"
|
|
1657
|
+
role="menuitem"
|
|
1658
|
+
>
|
|
1659
|
+
<span class="pf-c-menu__item-main">
|
|
1660
|
+
<span class="pf-c-menu__item-icon">
|
|
1661
|
+
<i
|
|
1662
|
+
class="fas fa-fw fa-th"
|
|
1663
|
+
aria-hidden="true"
|
|
1664
|
+
></i>
|
|
1665
|
+
</span>
|
|
1666
|
+
<span
|
|
1667
|
+
class="pf-c-menu__item-text"
|
|
1668
|
+
>Application launcher</span>
|
|
1669
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1670
|
+
<i class="fas fa-angle-right"></i>
|
|
1671
|
+
</span>
|
|
1672
|
+
</span>
|
|
1673
|
+
</button>
|
|
1674
|
+
<div class="pf-c-menu" hidden>
|
|
1675
|
+
<div class="pf-c-menu__header">
|
|
1676
|
+
<button
|
|
1677
|
+
class="pf-c-menu__item"
|
|
1678
|
+
type="button"
|
|
1679
|
+
role="menuitem"
|
|
1680
|
+
>
|
|
1681
|
+
<span class="pf-c-menu__item-main">
|
|
1682
|
+
<span
|
|
1683
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1684
|
+
>
|
|
1685
|
+
<i class="fas fa-angle-left"></i>
|
|
1686
|
+
</span>
|
|
1687
|
+
<span class="pf-c-menu__item-icon">
|
|
1688
|
+
<i
|
|
1689
|
+
class="fas fa-fw fa-th"
|
|
1690
|
+
aria-hidden="true"
|
|
1691
|
+
></i>
|
|
1692
|
+
</span>
|
|
1693
|
+
<span
|
|
1694
|
+
class="pf-c-menu__item-text"
|
|
1695
|
+
>Application launcher</span>
|
|
1696
|
+
</span>
|
|
1697
|
+
</button>
|
|
1698
|
+
</div>
|
|
1699
|
+
<div class="pf-c-menu__search">
|
|
1700
|
+
<div class="pf-c-menu__search-input">
|
|
1701
|
+
<div class="pf-c-search-input">
|
|
1702
|
+
<div class="pf-c-search-input__bar">
|
|
1703
|
+
<span class="pf-c-search-input__text">
|
|
1704
|
+
<span
|
|
1705
|
+
class="pf-c-search-input__icon"
|
|
1706
|
+
>
|
|
1707
|
+
<i
|
|
1708
|
+
class="fas fa-search fa-fw"
|
|
1709
|
+
aria-hidden="true"
|
|
1710
|
+
></i>
|
|
1711
|
+
</span>
|
|
1712
|
+
<input
|
|
1713
|
+
class="pf-c-search-input__text-input"
|
|
1714
|
+
type="text"
|
|
1715
|
+
placeholder="Search"
|
|
1716
|
+
aria-label="Search"
|
|
1717
|
+
/>
|
|
1718
|
+
</span>
|
|
1719
|
+
</div>
|
|
1720
|
+
</div>
|
|
1721
|
+
</div>
|
|
1722
|
+
</div>
|
|
1723
|
+
<hr class="pf-c-divider" />
|
|
1724
|
+
<section class="pf-c-menu__group">
|
|
1725
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1726
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1727
|
+
<li
|
|
1728
|
+
class="pf-c-menu__list-item"
|
|
1729
|
+
role="none"
|
|
1730
|
+
>
|
|
1731
|
+
<a
|
|
1732
|
+
class="pf-c-menu__item"
|
|
1733
|
+
href="#"
|
|
1734
|
+
role="menuitem"
|
|
1735
|
+
>
|
|
1736
|
+
<span class="pf-c-menu__item-main">
|
|
1737
|
+
<span
|
|
1738
|
+
class="pf-c-menu__item-text"
|
|
1739
|
+
>Link 1</span>
|
|
1740
|
+
</span>
|
|
1741
|
+
</a>
|
|
1742
|
+
<button
|
|
1743
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1744
|
+
type="button"
|
|
1745
|
+
aria-label="Starred"
|
|
1746
|
+
>
|
|
1747
|
+
<span
|
|
1748
|
+
class="pf-c-menu__item-action-icon"
|
|
1749
|
+
>
|
|
1750
|
+
<i
|
|
1751
|
+
class="fas fa-star"
|
|
1752
|
+
aria-hidden="true"
|
|
1753
|
+
></i>
|
|
1754
|
+
</span>
|
|
1755
|
+
</button>
|
|
1756
|
+
</li>
|
|
1757
|
+
<li
|
|
1758
|
+
class="pf-c-menu__list-item"
|
|
1759
|
+
role="none"
|
|
1760
|
+
>
|
|
1761
|
+
<a
|
|
1762
|
+
class="pf-c-menu__item"
|
|
1763
|
+
href="#"
|
|
1764
|
+
role="menuitem"
|
|
1765
|
+
target="_blank"
|
|
1766
|
+
>
|
|
1767
|
+
<span class="pf-c-menu__item-main">
|
|
1768
|
+
<span
|
|
1769
|
+
class="pf-c-menu__item-text"
|
|
1770
|
+
>Link 2</span>
|
|
1771
|
+
<span
|
|
1772
|
+
class="pf-c-menu__item-external-icon"
|
|
1773
|
+
>
|
|
1774
|
+
<i
|
|
1775
|
+
class="fas fa-external-link-alt"
|
|
1776
|
+
aria-hidden="true"
|
|
1777
|
+
></i>
|
|
1778
|
+
</span>
|
|
1779
|
+
<span
|
|
1780
|
+
class="pf-screen-reader"
|
|
1781
|
+
>(opens new window)</span>
|
|
1782
|
+
</span>
|
|
1783
|
+
</a>
|
|
1784
|
+
<button
|
|
1785
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1786
|
+
type="button"
|
|
1787
|
+
aria-label="Not starred"
|
|
1788
|
+
>
|
|
1789
|
+
<span
|
|
1790
|
+
class="pf-c-menu__item-action-icon"
|
|
1791
|
+
>
|
|
1792
|
+
<i
|
|
1793
|
+
class="fas fa-star"
|
|
1794
|
+
aria-hidden="true"
|
|
1795
|
+
></i>
|
|
1796
|
+
</span>
|
|
1797
|
+
</button>
|
|
1798
|
+
</li>
|
|
1799
|
+
</ul>
|
|
1800
|
+
</section>
|
|
1801
|
+
<hr class="pf-c-divider" />
|
|
1802
|
+
<section class="pf-c-menu__group">
|
|
1803
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1804
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1805
|
+
<li
|
|
1806
|
+
class="pf-c-menu__list-item"
|
|
1807
|
+
role="none"
|
|
1808
|
+
>
|
|
1809
|
+
<a
|
|
1810
|
+
class="pf-c-menu__item"
|
|
1811
|
+
href="#"
|
|
1812
|
+
role="menuitem"
|
|
1813
|
+
>
|
|
1814
|
+
<span class="pf-c-menu__item-main">
|
|
1815
|
+
<span
|
|
1816
|
+
class="pf-c-menu__item-text"
|
|
1817
|
+
>Link 1</span>
|
|
1818
|
+
</span>
|
|
1819
|
+
</a>
|
|
1820
|
+
<button
|
|
1821
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1822
|
+
type="button"
|
|
1823
|
+
aria-label="Not starred"
|
|
1824
|
+
>
|
|
1825
|
+
<span
|
|
1826
|
+
class="pf-c-menu__item-action-icon"
|
|
1827
|
+
>
|
|
1828
|
+
<i
|
|
1829
|
+
class="fas fa-star"
|
|
1830
|
+
aria-hidden="true"
|
|
1831
|
+
></i>
|
|
1832
|
+
</span>
|
|
1833
|
+
</button>
|
|
1834
|
+
</li>
|
|
1835
|
+
<li
|
|
1836
|
+
class="pf-c-menu__list-item"
|
|
1837
|
+
role="none"
|
|
1838
|
+
>
|
|
1839
|
+
<a
|
|
1840
|
+
class="pf-c-menu__item"
|
|
1841
|
+
href="#"
|
|
1842
|
+
role="menuitem"
|
|
1843
|
+
target="_blank"
|
|
1844
|
+
>
|
|
1845
|
+
<span class="pf-c-menu__item-main">
|
|
1846
|
+
<span
|
|
1847
|
+
class="pf-c-menu__item-text"
|
|
1848
|
+
>Link 2</span>
|
|
1849
|
+
<span
|
|
1850
|
+
class="pf-c-menu__item-external-icon"
|
|
1851
|
+
>
|
|
1852
|
+
<i
|
|
1853
|
+
class="fas fa-external-link-alt"
|
|
1854
|
+
aria-hidden="true"
|
|
1855
|
+
></i>
|
|
1856
|
+
</span>
|
|
1857
|
+
<span
|
|
1858
|
+
class="pf-screen-reader"
|
|
1859
|
+
>(opens new window)</span>
|
|
1860
|
+
</span>
|
|
1861
|
+
</a>
|
|
1862
|
+
<button
|
|
1863
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1864
|
+
type="button"
|
|
1865
|
+
aria-label="Starred"
|
|
1866
|
+
>
|
|
1867
|
+
<span
|
|
1868
|
+
class="pf-c-menu__item-action-icon"
|
|
1869
|
+
>
|
|
1870
|
+
<i
|
|
1871
|
+
class="fas fa-star"
|
|
1872
|
+
aria-hidden="true"
|
|
1873
|
+
></i>
|
|
1874
|
+
</span>
|
|
1875
|
+
</button>
|
|
1876
|
+
</li>
|
|
1877
|
+
</ul>
|
|
1878
|
+
</section>
|
|
1879
|
+
</div>
|
|
1880
|
+
</li>
|
|
1881
|
+
</ul>
|
|
1882
|
+
</section>
|
|
1883
|
+
</div>
|
|
1884
|
+
</div>
|
|
1885
|
+
</div>
|
|
1886
|
+
</div>
|
|
1887
|
+
</div>
|
|
1888
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1889
|
+
<div
|
|
1890
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1891
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1892
|
+
>
|
|
949
1893
|
<button
|
|
950
|
-
class="pf-c-
|
|
1894
|
+
class="pf-c-dropdown__toggle"
|
|
1895
|
+
id="banner-top-bottom-example-masthead-profile-button"
|
|
1896
|
+
aria-expanded="false"
|
|
951
1897
|
type="button"
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
1898
|
+
>
|
|
1899
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1900
|
+
<img
|
|
1901
|
+
class="pf-c-avatar"
|
|
1902
|
+
src="/assets/images/img_avatar.svg"
|
|
1903
|
+
alt="Avatar image"
|
|
1904
|
+
/>
|
|
1905
|
+
</span>
|
|
1906
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1907
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1908
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1909
|
+
</span>
|
|
1910
|
+
</button>
|
|
1911
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1912
|
+
<section class="pf-c-dropdown__group">
|
|
1913
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1914
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1915
|
+
<div>123456789</div>
|
|
1916
|
+
</div>
|
|
1917
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1918
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1919
|
+
<div>mshaksho@redhat.com</div>
|
|
1920
|
+
</div>
|
|
1921
|
+
</section>
|
|
1922
|
+
<hr class="pf-c-divider" />
|
|
1923
|
+
<section class="pf-c-dropdown__group">
|
|
1924
|
+
<ul>
|
|
1925
|
+
<li>
|
|
1926
|
+
<a
|
|
1927
|
+
class="pf-c-dropdown__menu-item"
|
|
1928
|
+
href="#"
|
|
1929
|
+
>My profile</a>
|
|
1930
|
+
</li>
|
|
1931
|
+
<li>
|
|
1932
|
+
<a
|
|
1933
|
+
class="pf-c-dropdown__menu-item"
|
|
1934
|
+
href="#"
|
|
1935
|
+
>User management</a>
|
|
1936
|
+
</li>
|
|
1937
|
+
<li>
|
|
1938
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1939
|
+
</li>
|
|
1940
|
+
</ul>
|
|
1941
|
+
</section>
|
|
1942
|
+
</div>
|
|
1943
|
+
</div>
|
|
1944
|
+
</div>
|
|
960
1945
|
</div>
|
|
961
1946
|
</div>
|
|
962
1947
|
</div>
|
|
963
|
-
<img
|
|
964
|
-
class="pf-c-avatar"
|
|
965
|
-
src="/assets/images/img_avatar.svg"
|
|
966
|
-
alt="Avatar image"
|
|
967
|
-
/>
|
|
968
1948
|
</div>
|
|
969
1949
|
</header>
|
|
970
1950
|
<div class="pf-c-page__sidebar">
|
|
971
1951
|
<div class="pf-c-page__sidebar-body">
|
|
972
1952
|
<nav
|
|
973
1953
|
class="pf-c-nav"
|
|
974
|
-
id="
|
|
1954
|
+
id="banner-top-bottom-example-primary-nav"
|
|
975
1955
|
aria-label="Global"
|
|
976
1956
|
>
|
|
977
1957
|
<ul class="pf-c-nav__list">
|
|
978
|
-
<li
|
|
979
|
-
class="pf-c-
|
|
980
|
-
>
|
|
981
|
-
<button class="pf-c-nav__link" aria-expanded="true">
|
|
982
|
-
Components
|
|
983
|
-
<span class="pf-c-nav__toggle">
|
|
984
|
-
<span class="pf-c-nav__toggle-icon">
|
|
985
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
986
|
-
</span>
|
|
987
|
-
</span>
|
|
988
|
-
</button>
|
|
989
|
-
<section
|
|
990
|
-
class="pf-c-nav__subnav"
|
|
991
|
-
aria-labelledby="page-layout-table-top-bottom-subnav-title1"
|
|
992
|
-
>
|
|
993
|
-
<h2
|
|
994
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
995
|
-
id="page-layout-table-top-bottom-subnav-title1"
|
|
996
|
-
>First nav item</h2>
|
|
997
|
-
<ul class="pf-c-nav__list">
|
|
998
|
-
<li class="pf-c-nav__item">
|
|
999
|
-
<a href="#" class="pf-c-nav__link">Forms</a>
|
|
1000
|
-
</li>
|
|
1001
|
-
<li class="pf-c-nav__item">
|
|
1002
|
-
<a href="#" class="pf-c-nav__link">Table</a>
|
|
1003
|
-
</li>
|
|
1004
|
-
<li class="pf-c-nav__item">
|
|
1005
|
-
<a
|
|
1006
|
-
href="#"
|
|
1007
|
-
class="pf-c-nav__link pf-m-current"
|
|
1008
|
-
aria-current="page"
|
|
1009
|
-
>Data list</a>
|
|
1010
|
-
</li>
|
|
1011
|
-
<li class="pf-c-nav__item">
|
|
1012
|
-
<a href="#" class="pf-c-nav__link">Icons</a>
|
|
1013
|
-
</li>
|
|
1014
|
-
<li class="pf-c-nav__item">
|
|
1015
|
-
<a href="#" class="pf-c-nav__link">Layouts</a>
|
|
1016
|
-
</li>
|
|
1017
|
-
<li class="pf-c-nav__item">
|
|
1018
|
-
<a href="#" class="pf-c-nav__link">List</a>
|
|
1019
|
-
</li>
|
|
1020
|
-
</ul>
|
|
1021
|
-
</section>
|
|
1958
|
+
<li class="pf-c-nav__item">
|
|
1959
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1022
1960
|
</li>
|
|
1023
|
-
<li class="pf-c-nav__item
|
|
1024
|
-
<
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
</span>
|
|
1030
|
-
</span>
|
|
1031
|
-
</button>
|
|
1032
|
-
<section
|
|
1033
|
-
class="pf-c-nav__subnav"
|
|
1034
|
-
aria-labelledby="page-layout-table-top-bottom-subnav-title2"
|
|
1035
|
-
hidden
|
|
1036
|
-
>
|
|
1037
|
-
<h2
|
|
1038
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1039
|
-
id="page-layout-table-top-bottom-subnav-title2"
|
|
1040
|
-
>Second nav item</h2>
|
|
1041
|
-
<ul class="pf-c-nav__list"></ul>
|
|
1042
|
-
</section>
|
|
1961
|
+
<li class="pf-c-nav__item">
|
|
1962
|
+
<a
|
|
1963
|
+
href="#"
|
|
1964
|
+
class="pf-c-nav__link pf-m-current"
|
|
1965
|
+
aria-current="page"
|
|
1966
|
+
>Policy</a>
|
|
1043
1967
|
</li>
|
|
1044
|
-
<li class="pf-c-nav__item
|
|
1045
|
-
<
|
|
1046
|
-
Typography
|
|
1047
|
-
<span class="pf-c-nav__toggle">
|
|
1048
|
-
<span class="pf-c-nav__toggle-icon">
|
|
1049
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1050
|
-
</span>
|
|
1051
|
-
</span>
|
|
1052
|
-
</button>
|
|
1053
|
-
<section
|
|
1054
|
-
class="pf-c-nav__subnav"
|
|
1055
|
-
aria-labelledby="page-layout-table-top-bottom-subnav-title3"
|
|
1056
|
-
hidden
|
|
1057
|
-
>
|
|
1058
|
-
<h2
|
|
1059
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1060
|
-
id="page-layout-table-top-bottom-subnav-title3"
|
|
1061
|
-
>Third nav item</h2>
|
|
1062
|
-
<ul class="pf-c-nav__list"></ul>
|
|
1063
|
-
</section>
|
|
1968
|
+
<li class="pf-c-nav__item">
|
|
1969
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1064
1970
|
</li>
|
|
1065
|
-
<li class="pf-c-nav__item
|
|
1066
|
-
<
|
|
1067
|
-
Icons
|
|
1068
|
-
<span class="pf-c-nav__toggle">
|
|
1069
|
-
<span class="pf-c-nav__toggle-icon">
|
|
1070
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1071
|
-
</span>
|
|
1072
|
-
</span>
|
|
1073
|
-
</button>
|
|
1074
|
-
<section
|
|
1075
|
-
class="pf-c-nav__subnav"
|
|
1076
|
-
aria-labelledby="page-layout-table-top-bottom-subnav-title4"
|
|
1077
|
-
hidden
|
|
1078
|
-
>
|
|
1079
|
-
<h2
|
|
1080
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1081
|
-
id="page-layout-table-top-bottom-subnav-title4"
|
|
1082
|
-
>Second nav item</h2>
|
|
1083
|
-
<ul class="pf-c-nav__list"></ul>
|
|
1084
|
-
</section>
|
|
1971
|
+
<li class="pf-c-nav__item">
|
|
1972
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1085
1973
|
</li>
|
|
1086
|
-
<li class="pf-c-nav__item
|
|
1087
|
-
<
|
|
1088
|
-
Colors
|
|
1089
|
-
<span class="pf-c-nav__toggle">
|
|
1090
|
-
<span class="pf-c-nav__toggle-icon">
|
|
1091
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1092
|
-
</span>
|
|
1093
|
-
</span>
|
|
1094
|
-
</button>
|
|
1095
|
-
<section
|
|
1096
|
-
class="pf-c-nav__subnav"
|
|
1097
|
-
aria-labelledby="page-layout-table-top-bottom-subnav-title5"
|
|
1098
|
-
hidden
|
|
1099
|
-
>
|
|
1100
|
-
<h2
|
|
1101
|
-
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1102
|
-
id="page-layout-table-top-bottom-subnav-title5"
|
|
1103
|
-
>Second nav item</h2>
|
|
1104
|
-
<ul class="pf-c-nav__list"></ul>
|
|
1105
|
-
</section>
|
|
1974
|
+
<li class="pf-c-nav__item">
|
|
1975
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1106
1976
|
</li>
|
|
1107
1977
|
</ul>
|
|
1108
1978
|
</nav>
|
|
@@ -1111,486 +1981,224 @@ wrapperTag: div
|
|
|
1111
1981
|
<main
|
|
1112
1982
|
class="pf-c-page__main"
|
|
1113
1983
|
tabindex="-1"
|
|
1114
|
-
id="main-content-
|
|
1984
|
+
id="main-content-banner-top-bottom-example"
|
|
1115
1985
|
>
|
|
1116
|
-
<section class="pf-c-page__main-
|
|
1117
|
-
<div class="pf-c-
|
|
1118
|
-
<
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
class="pf-c-table pf-m-grid-xl"
|
|
1128
|
-
role="grid"
|
|
1129
|
-
aria-label="This is a table with checkboxes"
|
|
1130
|
-
id="page-layout-table-top-bottom-table"
|
|
1131
|
-
>
|
|
1132
|
-
<thead>
|
|
1133
|
-
<tr role="row">
|
|
1134
|
-
<td class="pf-c-table__check" role="cell">
|
|
1135
|
-
<input
|
|
1136
|
-
type="checkbox"
|
|
1137
|
-
name="check-all"
|
|
1138
|
-
aria-label="Select all rows"
|
|
1139
|
-
/>
|
|
1140
|
-
</td>
|
|
1141
|
-
<th role="columnheader" scope="col">Repositories</th>
|
|
1142
|
-
<th role="columnheader" scope="col">Branches</th>
|
|
1143
|
-
<th role="columnheader" scope="col">Pull requests</th>
|
|
1144
|
-
<th role="columnheader" scope="col">Workspaces</th>
|
|
1145
|
-
<th role="columnheader" scope="col">Last commit</th>
|
|
1146
|
-
<td role="cell"></td>
|
|
1147
|
-
|
|
1148
|
-
<td role="cell"></td>
|
|
1149
|
-
</tr>
|
|
1150
|
-
</thead>
|
|
1151
|
-
|
|
1152
|
-
<tbody role="rowgroup">
|
|
1153
|
-
<tr role="row">
|
|
1154
|
-
<td class="pf-c-table__check" role="cell">
|
|
1155
|
-
<input
|
|
1156
|
-
type="checkbox"
|
|
1157
|
-
name="checkrow1"
|
|
1158
|
-
aria-labelledby="page-layout-table-top-bottom-table-node1"
|
|
1159
|
-
/>
|
|
1160
|
-
</td>
|
|
1161
|
-
<th role="columnheader" data-label="Repository name">
|
|
1162
|
-
<div>
|
|
1163
|
-
<div id="page-layout-table-top-bottom-table-node1">Node 1</div>
|
|
1164
|
-
<a href="#">siemur/test-space</a>
|
|
1165
|
-
</div>
|
|
1166
|
-
</th>
|
|
1167
|
-
<td role="cell" data-label="Branches">
|
|
1168
|
-
<span>
|
|
1169
|
-
<i class="fas fa-code-branch"></i> 10
|
|
1170
|
-
</span>
|
|
1171
|
-
</td>
|
|
1172
|
-
<td role="cell" data-label="Pull requests">
|
|
1173
|
-
<span>
|
|
1174
|
-
<i class="fas fa-code"></i> 25
|
|
1175
|
-
</span>
|
|
1176
|
-
</td>
|
|
1177
|
-
<td role="cell" data-label="Workspaces">
|
|
1178
|
-
<span>
|
|
1179
|
-
<i class="fas fa-cube"></i> 5
|
|
1180
|
-
</span>
|
|
1181
|
-
</td>
|
|
1182
|
-
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1183
|
-
<td role="cell" data-label="Action">
|
|
1184
|
-
<a href="#">Action link</a>
|
|
1185
|
-
</td>
|
|
1186
|
-
<td class="pf-c-table__action" role="cell">
|
|
1187
|
-
<div class="pf-c-dropdown pf-m-expanded">
|
|
1188
|
-
<button
|
|
1189
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1190
|
-
id="page-layout-table-top-bottom-table-dropdown-kebab-1-button"
|
|
1191
|
-
aria-expanded="true"
|
|
1192
|
-
type="button"
|
|
1193
|
-
aria-label="Actions"
|
|
1194
|
-
>
|
|
1195
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1196
|
-
</button>
|
|
1197
|
-
<ul
|
|
1198
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1199
|
-
aria-labelledby="page-layout-table-top-bottom-table-dropdown-kebab-1-button"
|
|
1200
|
-
>
|
|
1201
|
-
<li>
|
|
1202
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1203
|
-
</li>
|
|
1204
|
-
<li>
|
|
1205
|
-
<button
|
|
1206
|
-
class="pf-c-dropdown__menu-item"
|
|
1207
|
-
type="button"
|
|
1208
|
-
>Action</button>
|
|
1209
|
-
</li>
|
|
1210
|
-
<li>
|
|
1211
|
-
<a
|
|
1212
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1213
|
-
href="#"
|
|
1214
|
-
aria-disabled="true"
|
|
1215
|
-
tabindex="-1"
|
|
1216
|
-
>Disabled link</a>
|
|
1217
|
-
</li>
|
|
1218
|
-
<li>
|
|
1219
|
-
<button
|
|
1220
|
-
class="pf-c-dropdown__menu-item"
|
|
1221
|
-
type="button"
|
|
1222
|
-
disabled
|
|
1223
|
-
>Disabled action</button>
|
|
1224
|
-
</li>
|
|
1225
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1226
|
-
<li>
|
|
1227
|
-
<a
|
|
1228
|
-
class="pf-c-dropdown__menu-item"
|
|
1229
|
-
href="#"
|
|
1230
|
-
>Separated link</a>
|
|
1231
|
-
</li>
|
|
1232
|
-
</ul>
|
|
1233
|
-
</div>
|
|
1234
|
-
</td>
|
|
1235
|
-
</tr>
|
|
1236
|
-
|
|
1237
|
-
<tr role="row">
|
|
1238
|
-
<td class="pf-c-table__check" role="cell">
|
|
1239
|
-
<input
|
|
1240
|
-
type="checkbox"
|
|
1241
|
-
name="checkrow2"
|
|
1242
|
-
aria-labelledby="page-layout-table-top-bottom-table-node2"
|
|
1243
|
-
/>
|
|
1244
|
-
</td>
|
|
1245
|
-
<th role="columnheader" data-label="Repository name">
|
|
1246
|
-
<div>
|
|
1247
|
-
<div id="page-layout-table-top-bottom-table-node2">Node 2</div>
|
|
1248
|
-
<a href="#">siemur/test-space</a>
|
|
1249
|
-
</div>
|
|
1250
|
-
</th>
|
|
1251
|
-
<td role="cell" data-label="Branches">
|
|
1252
|
-
<span>
|
|
1253
|
-
<i class="fas fa-code-branch"></i> 8
|
|
1254
|
-
</span>
|
|
1255
|
-
</td>
|
|
1256
|
-
<td role="cell" data-label="Pull requests">
|
|
1257
|
-
<span>
|
|
1258
|
-
<i class="fas fa-code"></i> 30
|
|
1259
|
-
</span>
|
|
1260
|
-
</td>
|
|
1261
|
-
<td role="cell" data-label="Workspaces">
|
|
1262
|
-
<span>
|
|
1263
|
-
<i class="fas fa-cube"></i> 2
|
|
1264
|
-
</span>
|
|
1265
|
-
</td>
|
|
1266
|
-
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1267
|
-
<td role="cell" data-label="Action">
|
|
1268
|
-
<a href="#">Action link</a>
|
|
1269
|
-
</td>
|
|
1270
|
-
<td class="pf-c-table__action" role="cell">
|
|
1271
|
-
<div class="pf-c-dropdown pf-m-expanded">
|
|
1272
|
-
<button
|
|
1273
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1274
|
-
id="page-layout-table-top-bottom-table-dropdown-kebab-2-button"
|
|
1275
|
-
aria-expanded="true"
|
|
1276
|
-
type="button"
|
|
1277
|
-
aria-label="Actions"
|
|
1278
|
-
>
|
|
1279
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1280
|
-
</button>
|
|
1281
|
-
<ul
|
|
1282
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1283
|
-
aria-labelledby="page-layout-table-top-bottom-table-dropdown-kebab-2-button"
|
|
1284
|
-
>
|
|
1285
|
-
<li>
|
|
1286
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1287
|
-
</li>
|
|
1288
|
-
<li>
|
|
1289
|
-
<button
|
|
1290
|
-
class="pf-c-dropdown__menu-item"
|
|
1291
|
-
type="button"
|
|
1292
|
-
>Action</button>
|
|
1293
|
-
</li>
|
|
1294
|
-
<li>
|
|
1295
|
-
<a
|
|
1296
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1297
|
-
href="#"
|
|
1298
|
-
aria-disabled="true"
|
|
1299
|
-
tabindex="-1"
|
|
1300
|
-
>Disabled link</a>
|
|
1301
|
-
</li>
|
|
1302
|
-
<li>
|
|
1303
|
-
<button
|
|
1304
|
-
class="pf-c-dropdown__menu-item"
|
|
1305
|
-
type="button"
|
|
1306
|
-
disabled
|
|
1307
|
-
>Disabled action</button>
|
|
1308
|
-
</li>
|
|
1309
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1310
|
-
<li>
|
|
1311
|
-
<a
|
|
1312
|
-
class="pf-c-dropdown__menu-item"
|
|
1313
|
-
href="#"
|
|
1314
|
-
>Separated link</a>
|
|
1315
|
-
</li>
|
|
1316
|
-
</ul>
|
|
1317
|
-
</div>
|
|
1318
|
-
</td>
|
|
1319
|
-
</tr>
|
|
1986
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1987
|
+
<div class="pf-c-page__main-body">
|
|
1988
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1989
|
+
<ol class="pf-c-breadcrumb__list">
|
|
1990
|
+
<li class="pf-c-breadcrumb__item">
|
|
1991
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1992
|
+
</li>
|
|
1993
|
+
<li class="pf-c-breadcrumb__item">
|
|
1994
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1995
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1996
|
+
</span>
|
|
1320
1997
|
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
/>
|
|
1328
|
-
</td>
|
|
1329
|
-
<th role="columnheader" data-label="Repository name">
|
|
1330
|
-
<div>
|
|
1331
|
-
<div id="page-layout-table-top-bottom-table-node3">Node 3</div>
|
|
1332
|
-
<a href="#">siemur/test-space</a>
|
|
1333
|
-
</div>
|
|
1334
|
-
</th>
|
|
1335
|
-
<td role="cell" data-label="Branches">
|
|
1336
|
-
<span>
|
|
1337
|
-
<i class="fas fa-code-branch"></i> 12
|
|
1338
|
-
</span>
|
|
1339
|
-
</td>
|
|
1340
|
-
<td role="cell" data-label="Pull requests">
|
|
1341
|
-
<span>
|
|
1342
|
-
<i class="fas fa-code"></i> 48
|
|
1343
|
-
</span>
|
|
1344
|
-
</td>
|
|
1345
|
-
<td role="cell" data-label="Workspaces">
|
|
1346
|
-
<span>
|
|
1347
|
-
<i class="fas fa-cube"></i> 13
|
|
1348
|
-
</span>
|
|
1349
|
-
</td>
|
|
1350
|
-
<td role="cell" data-label="Last commit">30 days ago</td>
|
|
1351
|
-
<td role="cell" data-label="Action">
|
|
1352
|
-
<a href="#">Action link</a>
|
|
1353
|
-
</td>
|
|
1354
|
-
<td class="pf-c-table__action" role="cell">
|
|
1355
|
-
<div class="pf-c-dropdown pf-m-expanded">
|
|
1356
|
-
<button
|
|
1357
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1358
|
-
id="page-layout-table-top-bottom-table-dropdown-kebab-3-button"
|
|
1359
|
-
aria-expanded="true"
|
|
1360
|
-
type="button"
|
|
1361
|
-
aria-label="Actions"
|
|
1362
|
-
>
|
|
1363
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1364
|
-
</button>
|
|
1365
|
-
<ul
|
|
1366
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1367
|
-
aria-labelledby="page-layout-table-top-bottom-table-dropdown-kebab-3-button"
|
|
1368
|
-
>
|
|
1369
|
-
<li>
|
|
1370
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1371
|
-
</li>
|
|
1372
|
-
<li>
|
|
1373
|
-
<button
|
|
1374
|
-
class="pf-c-dropdown__menu-item"
|
|
1375
|
-
type="button"
|
|
1376
|
-
>Action</button>
|
|
1377
|
-
</li>
|
|
1378
|
-
<li>
|
|
1379
|
-
<a
|
|
1380
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1381
|
-
href="#"
|
|
1382
|
-
aria-disabled="true"
|
|
1383
|
-
tabindex="-1"
|
|
1384
|
-
>Disabled link</a>
|
|
1385
|
-
</li>
|
|
1386
|
-
<li>
|
|
1387
|
-
<button
|
|
1388
|
-
class="pf-c-dropdown__menu-item"
|
|
1389
|
-
type="button"
|
|
1390
|
-
disabled
|
|
1391
|
-
>Disabled action</button>
|
|
1392
|
-
</li>
|
|
1393
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1394
|
-
<li>
|
|
1395
|
-
<a
|
|
1396
|
-
class="pf-c-dropdown__menu-item"
|
|
1397
|
-
href="#"
|
|
1398
|
-
>Separated link</a>
|
|
1399
|
-
</li>
|
|
1400
|
-
</ul>
|
|
1401
|
-
</div>
|
|
1402
|
-
</td>
|
|
1403
|
-
</tr>
|
|
1998
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1999
|
+
</li>
|
|
2000
|
+
<li class="pf-c-breadcrumb__item">
|
|
2001
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2002
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2003
|
+
</span>
|
|
1404
2004
|
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
/>
|
|
1412
|
-
</td>
|
|
1413
|
-
<th role="columnheader" data-label="Repository name">
|
|
1414
|
-
<div>
|
|
1415
|
-
<div id="page-layout-table-top-bottom-table-node4">Node 4</div>
|
|
1416
|
-
<a href="#">siemur/test-space</a>
|
|
1417
|
-
</div>
|
|
1418
|
-
</th>
|
|
1419
|
-
<td role="cell" data-label="Branches">
|
|
1420
|
-
<span>
|
|
1421
|
-
<i class="fas fa-code-branch"></i> 3
|
|
1422
|
-
</span>
|
|
1423
|
-
</td>
|
|
1424
|
-
<td role="cell" data-label="Pull requests">
|
|
1425
|
-
<span>
|
|
1426
|
-
<i class="fas fa-code"></i> 8
|
|
1427
|
-
</span>
|
|
1428
|
-
</td>
|
|
1429
|
-
<td role="cell" data-label="Workspaces">
|
|
1430
|
-
<span>
|
|
1431
|
-
<i class="fas fa-cube"></i> 20
|
|
1432
|
-
</span>
|
|
1433
|
-
</td>
|
|
1434
|
-
<td role="cell" data-label="Last commit">8 days ago</td>
|
|
1435
|
-
<td role="cell" data-label="Action">
|
|
1436
|
-
<a href="#">Action link</a>
|
|
1437
|
-
</td>
|
|
1438
|
-
<td class="pf-c-table__action" role="cell">
|
|
1439
|
-
<div class="pf-c-dropdown pf-m-expanded">
|
|
1440
|
-
<button
|
|
1441
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1442
|
-
id="page-layout-table-top-bottom-table-dropdown-kebab-4-button"
|
|
1443
|
-
aria-expanded="true"
|
|
1444
|
-
type="button"
|
|
1445
|
-
aria-label="Actions"
|
|
1446
|
-
>
|
|
1447
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1448
|
-
</button>
|
|
1449
|
-
<ul
|
|
1450
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1451
|
-
aria-labelledby="page-layout-table-top-bottom-table-dropdown-kebab-4-button"
|
|
1452
|
-
>
|
|
1453
|
-
<li>
|
|
1454
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1455
|
-
</li>
|
|
1456
|
-
<li>
|
|
1457
|
-
<button
|
|
1458
|
-
class="pf-c-dropdown__menu-item"
|
|
1459
|
-
type="button"
|
|
1460
|
-
>Action</button>
|
|
1461
|
-
</li>
|
|
1462
|
-
<li>
|
|
1463
|
-
<a
|
|
1464
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1465
|
-
href="#"
|
|
1466
|
-
aria-disabled="true"
|
|
1467
|
-
tabindex="-1"
|
|
1468
|
-
>Disabled link</a>
|
|
1469
|
-
</li>
|
|
1470
|
-
<li>
|
|
1471
|
-
<button
|
|
1472
|
-
class="pf-c-dropdown__menu-item"
|
|
1473
|
-
type="button"
|
|
1474
|
-
disabled
|
|
1475
|
-
>Disabled action</button>
|
|
1476
|
-
</li>
|
|
1477
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1478
|
-
<li>
|
|
1479
|
-
<a
|
|
1480
|
-
class="pf-c-dropdown__menu-item"
|
|
1481
|
-
href="#"
|
|
1482
|
-
>Separated link</a>
|
|
1483
|
-
</li>
|
|
1484
|
-
</ul>
|
|
1485
|
-
</div>
|
|
1486
|
-
</td>
|
|
1487
|
-
</tr>
|
|
2005
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2006
|
+
</li>
|
|
2007
|
+
<li class="pf-c-breadcrumb__item">
|
|
2008
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2009
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2010
|
+
</span>
|
|
1488
2011
|
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
</
|
|
1572
|
-
</
|
|
1573
|
-
|
|
2012
|
+
<a
|
|
2013
|
+
href="#"
|
|
2014
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
2015
|
+
aria-current="page"
|
|
2016
|
+
>Section landing</a>
|
|
2017
|
+
</li>
|
|
2018
|
+
</ol>
|
|
2019
|
+
</nav>
|
|
2020
|
+
</div>
|
|
2021
|
+
</section>
|
|
2022
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2023
|
+
<div class="pf-c-page__main-body">
|
|
2024
|
+
<div class="pf-c-content">
|
|
2025
|
+
<h1>Main title</h1>
|
|
2026
|
+
<p>This is a full page demo.</p>
|
|
2027
|
+
</div>
|
|
2028
|
+
</div>
|
|
2029
|
+
</section>
|
|
2030
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
|
|
2031
|
+
<div class="pf-c-page__main-body">
|
|
2032
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
2033
|
+
<div class="pf-c-card">
|
|
2034
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2035
|
+
</div>
|
|
2036
|
+
<div class="pf-c-card">
|
|
2037
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2038
|
+
</div>
|
|
2039
|
+
<div class="pf-c-card">
|
|
2040
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2041
|
+
</div>
|
|
2042
|
+
<div class="pf-c-card">
|
|
2043
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2044
|
+
</div>
|
|
2045
|
+
<div class="pf-c-card">
|
|
2046
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2047
|
+
</div>
|
|
2048
|
+
<div class="pf-c-card">
|
|
2049
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2050
|
+
</div>
|
|
2051
|
+
<div class="pf-c-card">
|
|
2052
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2053
|
+
</div>
|
|
2054
|
+
<div class="pf-c-card">
|
|
2055
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2056
|
+
</div>
|
|
2057
|
+
<div class="pf-c-card">
|
|
2058
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2059
|
+
</div>
|
|
2060
|
+
<div class="pf-c-card">
|
|
2061
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2062
|
+
</div>
|
|
2063
|
+
<div class="pf-c-card">
|
|
2064
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2065
|
+
</div>
|
|
2066
|
+
<div class="pf-c-card">
|
|
2067
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2068
|
+
</div>
|
|
2069
|
+
<div class="pf-c-card">
|
|
2070
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2071
|
+
</div>
|
|
2072
|
+
<div class="pf-c-card">
|
|
2073
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2074
|
+
</div>
|
|
2075
|
+
<div class="pf-c-card">
|
|
2076
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2077
|
+
</div>
|
|
2078
|
+
<div class="pf-c-card">
|
|
2079
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2080
|
+
</div>
|
|
2081
|
+
<div class="pf-c-card">
|
|
2082
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2083
|
+
</div>
|
|
2084
|
+
<div class="pf-c-card">
|
|
2085
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2086
|
+
</div>
|
|
2087
|
+
<div class="pf-c-card">
|
|
2088
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2089
|
+
</div>
|
|
2090
|
+
<div class="pf-c-card">
|
|
2091
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2092
|
+
</div>
|
|
2093
|
+
<div class="pf-c-card">
|
|
2094
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2095
|
+
</div>
|
|
2096
|
+
<div class="pf-c-card">
|
|
2097
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2098
|
+
</div>
|
|
2099
|
+
<div class="pf-c-card">
|
|
2100
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2101
|
+
</div>
|
|
2102
|
+
<div class="pf-c-card">
|
|
2103
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2104
|
+
</div>
|
|
2105
|
+
<div class="pf-c-card">
|
|
2106
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2107
|
+
</div>
|
|
2108
|
+
<div class="pf-c-card">
|
|
2109
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2110
|
+
</div>
|
|
2111
|
+
<div class="pf-c-card">
|
|
2112
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2113
|
+
</div>
|
|
2114
|
+
<div class="pf-c-card">
|
|
2115
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2116
|
+
</div>
|
|
2117
|
+
<div class="pf-c-card">
|
|
2118
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2119
|
+
</div>
|
|
2120
|
+
<div class="pf-c-card">
|
|
2121
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2122
|
+
</div>
|
|
2123
|
+
<div class="pf-c-card">
|
|
2124
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2125
|
+
</div>
|
|
2126
|
+
<div class="pf-c-card">
|
|
2127
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2128
|
+
</div>
|
|
2129
|
+
<div class="pf-c-card">
|
|
2130
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2131
|
+
</div>
|
|
2132
|
+
<div class="pf-c-card">
|
|
2133
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2134
|
+
</div>
|
|
2135
|
+
<div class="pf-c-card">
|
|
2136
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2137
|
+
</div>
|
|
2138
|
+
<div class="pf-c-card">
|
|
2139
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2140
|
+
</div>
|
|
2141
|
+
<div class="pf-c-card">
|
|
2142
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2143
|
+
</div>
|
|
2144
|
+
<div class="pf-c-card">
|
|
2145
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2146
|
+
</div>
|
|
2147
|
+
<div class="pf-c-card">
|
|
2148
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2149
|
+
</div>
|
|
2150
|
+
<div class="pf-c-card">
|
|
2151
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2152
|
+
</div>
|
|
2153
|
+
<div class="pf-c-card">
|
|
2154
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2155
|
+
</div>
|
|
2156
|
+
<div class="pf-c-card">
|
|
2157
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2158
|
+
</div>
|
|
2159
|
+
<div class="pf-c-card">
|
|
2160
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2161
|
+
</div>
|
|
2162
|
+
<div class="pf-c-card">
|
|
2163
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2164
|
+
</div>
|
|
2165
|
+
<div class="pf-c-card">
|
|
2166
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2167
|
+
</div>
|
|
2168
|
+
<div class="pf-c-card">
|
|
2169
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2170
|
+
</div>
|
|
2171
|
+
<div class="pf-c-card">
|
|
2172
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2173
|
+
</div>
|
|
2174
|
+
<div class="pf-c-card">
|
|
2175
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2176
|
+
</div>
|
|
2177
|
+
<div class="pf-c-card">
|
|
2178
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2179
|
+
</div>
|
|
2180
|
+
<div class="pf-c-card">
|
|
2181
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2182
|
+
</div>
|
|
2183
|
+
</div>
|
|
1574
2184
|
</div>
|
|
1575
2185
|
</section>
|
|
1576
2186
|
</main>
|
|
1577
2187
|
</div>
|
|
1578
2188
|
</div>
|
|
1579
|
-
<div class="pf-
|
|
1580
|
-
<div
|
|
2189
|
+
<div class="pf-c-banner pf-m-sticky">
|
|
2190
|
+
<div
|
|
2191
|
+
class="pf-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
|
|
2192
|
+
style="height: 100%;"
|
|
2193
|
+
>
|
|
2194
|
+
<div class="pf-u-display-none pf-u-display-block-on-lg">Localhost</div>
|
|
1581
2195
|
<div
|
|
1582
|
-
class="pf-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
>This message is sticky to the top or bottom of the page.</div>
|
|
1589
|
-
<div
|
|
1590
|
-
class="pf-u-display-none-on-lg"
|
|
1591
|
-
>Drop some text on mobile, truncate if needed.</div>
|
|
1592
|
-
<div class="pf-u-display-none pf-u-display-block-on-lg">Ned Username</div>
|
|
1593
|
-
</div>
|
|
2196
|
+
class="pf-u-display-none pf-u-display-block-on-lg"
|
|
2197
|
+
>This message is sticky to the top or bottom of the page.</div>
|
|
2198
|
+
<div
|
|
2199
|
+
class="pf-u-display-none-on-lg"
|
|
2200
|
+
>Drop some text on mobile, truncate if needed.</div>
|
|
2201
|
+
<div class="pf-u-display-none pf-u-display-block-on-lg">Ned Username</div>
|
|
1594
2202
|
</div>
|
|
1595
2203
|
</div>
|
|
1596
2204
|
</div>
|