@patternfly/patternfly 4.176.2 → 4.176.3
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/components/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- package/docs/demos/Alert/examples/Alert.md +52 -359
- package/docs/demos/BackToTop/examples/BackToTop.md +5 -505
- package/docs/demos/Card/examples/Card.md +42 -14
- package/docs/demos/ContextSelector/examples/ContextSelector.md +46 -1051
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -1225
- package/docs/demos/Masthead/examples/Masthead.md +2 -2
- package/docs/demos/Nav/examples/Nav.md +9 -301
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +162 -3084
- package/docs/demos/Table/examples/Table.md +183 -18031
- package/docs/demos/Tabs/examples/Tabs.md +686 -7387
- package/docs/demos/Toolbar/examples/Toolbar.md +44 -1027
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +10 -9
- package/patternfly.css +10 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -6,509 +6,9 @@ cssPrefix: pf-d-back-to-top
|
|
|
6
6
|
|
|
7
7
|
### Basic
|
|
8
8
|
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
>Skip to content</a>
|
|
15
|
-
<header class="pf-c-page__header">
|
|
16
|
-
<div class="pf-c-page__header-brand">
|
|
17
|
-
<div class="pf-c-page__header-brand-toggle">
|
|
18
|
-
<button
|
|
19
|
-
class="pf-c-button pf-m-plain"
|
|
20
|
-
type="button"
|
|
21
|
-
id="back-to-top-basic-nav-toggle"
|
|
22
|
-
aria-label="Global navigation"
|
|
23
|
-
aria-expanded="true"
|
|
24
|
-
aria-controls="back-to-top-basic-primary-nav"
|
|
25
|
-
>
|
|
26
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
27
|
-
</button>
|
|
28
|
-
</div>
|
|
29
|
-
<a href="#" class="pf-c-page__header-brand-link">
|
|
30
|
-
<img
|
|
31
|
-
class="pf-c-brand"
|
|
32
|
-
src="/assets/images/PF-Masthead-Logo.svg"
|
|
33
|
-
alt="PatternFly logo"
|
|
34
|
-
/>
|
|
35
|
-
</a>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
<div class="pf-c-page__header-tools">
|
|
39
|
-
<div class="pf-c-page__header-tools-group">
|
|
40
|
-
<div
|
|
41
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
42
|
-
>
|
|
43
|
-
<button
|
|
44
|
-
class="pf-c-button pf-m-plain"
|
|
45
|
-
type="button"
|
|
46
|
-
aria-label="Settings"
|
|
47
|
-
>
|
|
48
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
49
|
-
</button>
|
|
50
|
-
</div>
|
|
51
|
-
<div
|
|
52
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
53
|
-
>
|
|
54
|
-
<button
|
|
55
|
-
class="pf-c-button pf-m-plain"
|
|
56
|
-
type="button"
|
|
57
|
-
aria-label="Help"
|
|
58
|
-
>
|
|
59
|
-
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
60
|
-
</button>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
<div class="pf-c-page__header-tools-group">
|
|
64
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
65
|
-
<div class="pf-c-dropdown">
|
|
66
|
-
<button
|
|
67
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
68
|
-
id="back-to-top-basic-dropdown-kebab-1-button"
|
|
69
|
-
aria-expanded="false"
|
|
70
|
-
type="button"
|
|
71
|
-
aria-label="Actions"
|
|
72
|
-
>
|
|
73
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
74
|
-
</button>
|
|
75
|
-
<ul
|
|
76
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
77
|
-
aria-labelledby="back-to-top-basic-dropdown-kebab-1-button"
|
|
78
|
-
hidden
|
|
79
|
-
>
|
|
80
|
-
<li>
|
|
81
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
82
|
-
</li>
|
|
83
|
-
<li>
|
|
84
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
85
|
-
</li>
|
|
86
|
-
<li>
|
|
87
|
-
<a
|
|
88
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
89
|
-
href="#"
|
|
90
|
-
aria-disabled="true"
|
|
91
|
-
tabindex="-1"
|
|
92
|
-
>Disabled link</a>
|
|
93
|
-
</li>
|
|
94
|
-
<li>
|
|
95
|
-
<button
|
|
96
|
-
class="pf-c-dropdown__menu-item"
|
|
97
|
-
type="button"
|
|
98
|
-
disabled
|
|
99
|
-
>Disabled action</button>
|
|
100
|
-
</li>
|
|
101
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
102
|
-
<li>
|
|
103
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
104
|
-
</li>
|
|
105
|
-
</ul>
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
<div
|
|
109
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
110
|
-
>
|
|
111
|
-
<div class="pf-c-dropdown">
|
|
112
|
-
<button
|
|
113
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
114
|
-
id="back-to-top-basic-dropdown-kebab-2-button"
|
|
115
|
-
aria-expanded="false"
|
|
116
|
-
type="button"
|
|
117
|
-
>
|
|
118
|
-
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
119
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
120
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
121
|
-
</span>
|
|
122
|
-
</button>
|
|
123
|
-
<ul
|
|
124
|
-
class="pf-c-dropdown__menu"
|
|
125
|
-
aria-labelledby="back-to-top-basic-dropdown-kebab-2-button"
|
|
126
|
-
hidden
|
|
127
|
-
>
|
|
128
|
-
<li>
|
|
129
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
130
|
-
</li>
|
|
131
|
-
<li>
|
|
132
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
133
|
-
</li>
|
|
134
|
-
<li>
|
|
135
|
-
<a
|
|
136
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
137
|
-
href="#"
|
|
138
|
-
aria-disabled="true"
|
|
139
|
-
tabindex="-1"
|
|
140
|
-
>Disabled link</a>
|
|
141
|
-
</li>
|
|
142
|
-
<li>
|
|
143
|
-
<button
|
|
144
|
-
class="pf-c-dropdown__menu-item"
|
|
145
|
-
type="button"
|
|
146
|
-
disabled
|
|
147
|
-
>Disabled action</button>
|
|
148
|
-
</li>
|
|
149
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
150
|
-
<li>
|
|
151
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
152
|
-
</li>
|
|
153
|
-
</ul>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
|
-
</div>
|
|
157
|
-
<img
|
|
158
|
-
class="pf-c-avatar"
|
|
159
|
-
src="/assets/images/img_avatar.svg"
|
|
160
|
-
alt="Avatar image"
|
|
161
|
-
/>
|
|
162
|
-
</div>
|
|
163
|
-
</header>
|
|
164
|
-
<div class="pf-c-page__sidebar">
|
|
165
|
-
<div class="pf-c-page__sidebar-body">
|
|
166
|
-
<nav
|
|
167
|
-
class="pf-c-nav"
|
|
168
|
-
id="back-to-top-basic-primary-nav"
|
|
169
|
-
aria-label="Global"
|
|
170
|
-
>
|
|
171
|
-
<ul class="pf-c-nav__list">
|
|
172
|
-
<li class="pf-c-nav__item">
|
|
173
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
174
|
-
</li>
|
|
175
|
-
<li class="pf-c-nav__item">
|
|
176
|
-
<a
|
|
177
|
-
href="#"
|
|
178
|
-
class="pf-c-nav__link pf-m-current"
|
|
179
|
-
aria-current="page"
|
|
180
|
-
>Policy</a>
|
|
181
|
-
</li>
|
|
182
|
-
<li class="pf-c-nav__item">
|
|
183
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
184
|
-
</li>
|
|
185
|
-
<li class="pf-c-nav__item">
|
|
186
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
187
|
-
</li>
|
|
188
|
-
<li class="pf-c-nav__item">
|
|
189
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
190
|
-
</li>
|
|
191
|
-
</ul>
|
|
192
|
-
</nav>
|
|
193
|
-
</div>
|
|
194
|
-
</div>
|
|
195
|
-
<main
|
|
196
|
-
class="pf-c-page__main"
|
|
197
|
-
tabindex="-1"
|
|
198
|
-
id="main-content-back-to-top-basic"
|
|
199
|
-
>
|
|
200
|
-
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
201
|
-
<div class="pf-c-page__main-body">
|
|
202
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
203
|
-
<ol class="pf-c-breadcrumb__list">
|
|
204
|
-
<li class="pf-c-breadcrumb__item">
|
|
205
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
206
|
-
</li>
|
|
207
|
-
<li class="pf-c-breadcrumb__item">
|
|
208
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
209
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
210
|
-
</span>
|
|
211
|
-
|
|
212
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
213
|
-
</li>
|
|
214
|
-
<li class="pf-c-breadcrumb__item">
|
|
215
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
216
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
217
|
-
</span>
|
|
218
|
-
|
|
219
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
220
|
-
</li>
|
|
221
|
-
<li class="pf-c-breadcrumb__item">
|
|
222
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
223
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
224
|
-
</span>
|
|
225
|
-
|
|
226
|
-
<a
|
|
227
|
-
href="#"
|
|
228
|
-
class="pf-c-breadcrumb__link pf-m-current"
|
|
229
|
-
aria-current="page"
|
|
230
|
-
>Section landing</a>
|
|
231
|
-
</li>
|
|
232
|
-
</ol>
|
|
233
|
-
</nav>
|
|
234
|
-
</div>
|
|
235
|
-
</section>
|
|
236
|
-
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
237
|
-
<div class="pf-c-page__main-body">
|
|
238
|
-
<div class="pf-c-content">
|
|
239
|
-
<h1>Main title</h1>
|
|
240
|
-
<p>This is a demo of the page component.</p>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
</section>
|
|
244
|
-
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
245
|
-
<div class="pf-c-page__main-body">
|
|
246
|
-
<div class="pf-l-gallery pf-m-gutter">
|
|
247
|
-
<div class="pf-l-gallery__item">
|
|
248
|
-
<div class="pf-c-card">
|
|
249
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
250
|
-
</div>
|
|
251
|
-
</div>
|
|
252
|
-
<div class="pf-l-gallery__item">
|
|
253
|
-
<div class="pf-c-card">
|
|
254
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
255
|
-
</div>
|
|
256
|
-
</div>
|
|
257
|
-
<div class="pf-l-gallery__item">
|
|
258
|
-
<div class="pf-c-card">
|
|
259
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
260
|
-
</div>
|
|
261
|
-
</div>
|
|
262
|
-
<div class="pf-l-gallery__item">
|
|
263
|
-
<div class="pf-c-card">
|
|
264
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
265
|
-
</div>
|
|
266
|
-
</div>
|
|
267
|
-
<div class="pf-l-gallery__item">
|
|
268
|
-
<div class="pf-c-card">
|
|
269
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
270
|
-
</div>
|
|
271
|
-
</div>
|
|
272
|
-
<div class="pf-l-gallery__item">
|
|
273
|
-
<div class="pf-c-card">
|
|
274
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
275
|
-
</div>
|
|
276
|
-
</div>
|
|
277
|
-
<div class="pf-l-gallery__item">
|
|
278
|
-
<div class="pf-c-card">
|
|
279
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
280
|
-
</div>
|
|
281
|
-
</div>
|
|
282
|
-
<div class="pf-l-gallery__item">
|
|
283
|
-
<div class="pf-c-card">
|
|
284
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
285
|
-
</div>
|
|
286
|
-
</div>
|
|
287
|
-
<div class="pf-l-gallery__item">
|
|
288
|
-
<div class="pf-c-card">
|
|
289
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
290
|
-
</div>
|
|
291
|
-
</div>
|
|
292
|
-
<div class="pf-l-gallery__item">
|
|
293
|
-
<div class="pf-c-card">
|
|
294
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
295
|
-
</div>
|
|
296
|
-
</div>
|
|
297
|
-
<div class="pf-l-gallery__item">
|
|
298
|
-
<div class="pf-c-card">
|
|
299
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
300
|
-
</div>
|
|
301
|
-
</div>
|
|
302
|
-
<div class="pf-l-gallery__item">
|
|
303
|
-
<div class="pf-c-card">
|
|
304
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
305
|
-
</div>
|
|
306
|
-
</div>
|
|
307
|
-
<div class="pf-l-gallery__item">
|
|
308
|
-
<div class="pf-c-card">
|
|
309
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
310
|
-
</div>
|
|
311
|
-
</div>
|
|
312
|
-
<div class="pf-l-gallery__item">
|
|
313
|
-
<div class="pf-c-card">
|
|
314
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
315
|
-
</div>
|
|
316
|
-
</div>
|
|
317
|
-
<div class="pf-l-gallery__item">
|
|
318
|
-
<div class="pf-c-card">
|
|
319
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
320
|
-
</div>
|
|
321
|
-
</div>
|
|
322
|
-
<div class="pf-l-gallery__item">
|
|
323
|
-
<div class="pf-c-card">
|
|
324
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
325
|
-
</div>
|
|
326
|
-
</div>
|
|
327
|
-
<div class="pf-l-gallery__item">
|
|
328
|
-
<div class="pf-c-card">
|
|
329
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
330
|
-
</div>
|
|
331
|
-
</div>
|
|
332
|
-
<div class="pf-l-gallery__item">
|
|
333
|
-
<div class="pf-c-card">
|
|
334
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
335
|
-
</div>
|
|
336
|
-
</div>
|
|
337
|
-
<div class="pf-l-gallery__item">
|
|
338
|
-
<div class="pf-c-card">
|
|
339
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
340
|
-
</div>
|
|
341
|
-
</div>
|
|
342
|
-
<div class="pf-l-gallery__item">
|
|
343
|
-
<div class="pf-c-card">
|
|
344
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
345
|
-
</div>
|
|
346
|
-
</div>
|
|
347
|
-
<div class="pf-l-gallery__item">
|
|
348
|
-
<div class="pf-c-card">
|
|
349
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
350
|
-
</div>
|
|
351
|
-
</div>
|
|
352
|
-
<div class="pf-l-gallery__item">
|
|
353
|
-
<div class="pf-c-card">
|
|
354
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
355
|
-
</div>
|
|
356
|
-
</div>
|
|
357
|
-
<div class="pf-l-gallery__item">
|
|
358
|
-
<div class="pf-c-card">
|
|
359
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
<div class="pf-l-gallery__item">
|
|
363
|
-
<div class="pf-c-card">
|
|
364
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
365
|
-
</div>
|
|
366
|
-
</div>
|
|
367
|
-
<div class="pf-l-gallery__item">
|
|
368
|
-
<div class="pf-c-card">
|
|
369
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
370
|
-
</div>
|
|
371
|
-
</div>
|
|
372
|
-
<div class="pf-l-gallery__item">
|
|
373
|
-
<div class="pf-c-card">
|
|
374
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
375
|
-
</div>
|
|
376
|
-
</div>
|
|
377
|
-
<div class="pf-l-gallery__item">
|
|
378
|
-
<div class="pf-c-card">
|
|
379
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
380
|
-
</div>
|
|
381
|
-
</div>
|
|
382
|
-
<div class="pf-l-gallery__item">
|
|
383
|
-
<div class="pf-c-card">
|
|
384
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
385
|
-
</div>
|
|
386
|
-
</div>
|
|
387
|
-
<div class="pf-l-gallery__item">
|
|
388
|
-
<div class="pf-c-card">
|
|
389
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
390
|
-
</div>
|
|
391
|
-
</div>
|
|
392
|
-
<div class="pf-l-gallery__item">
|
|
393
|
-
<div class="pf-c-card">
|
|
394
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
395
|
-
</div>
|
|
396
|
-
</div>
|
|
397
|
-
<div class="pf-l-gallery__item">
|
|
398
|
-
<div class="pf-c-card">
|
|
399
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
400
|
-
</div>
|
|
401
|
-
</div>
|
|
402
|
-
<div class="pf-l-gallery__item">
|
|
403
|
-
<div class="pf-c-card">
|
|
404
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
405
|
-
</div>
|
|
406
|
-
</div>
|
|
407
|
-
<div class="pf-l-gallery__item">
|
|
408
|
-
<div class="pf-c-card">
|
|
409
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
410
|
-
</div>
|
|
411
|
-
</div>
|
|
412
|
-
<div class="pf-l-gallery__item">
|
|
413
|
-
<div class="pf-c-card">
|
|
414
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
415
|
-
</div>
|
|
416
|
-
</div>
|
|
417
|
-
<div class="pf-l-gallery__item">
|
|
418
|
-
<div class="pf-c-card">
|
|
419
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
420
|
-
</div>
|
|
421
|
-
</div>
|
|
422
|
-
<div class="pf-l-gallery__item">
|
|
423
|
-
<div class="pf-c-card">
|
|
424
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
425
|
-
</div>
|
|
426
|
-
</div>
|
|
427
|
-
<div class="pf-l-gallery__item">
|
|
428
|
-
<div class="pf-c-card">
|
|
429
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
430
|
-
</div>
|
|
431
|
-
</div>
|
|
432
|
-
<div class="pf-l-gallery__item">
|
|
433
|
-
<div class="pf-c-card">
|
|
434
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
435
|
-
</div>
|
|
436
|
-
</div>
|
|
437
|
-
<div class="pf-l-gallery__item">
|
|
438
|
-
<div class="pf-c-card">
|
|
439
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
440
|
-
</div>
|
|
441
|
-
</div>
|
|
442
|
-
<div class="pf-l-gallery__item">
|
|
443
|
-
<div class="pf-c-card">
|
|
444
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
445
|
-
</div>
|
|
446
|
-
</div>
|
|
447
|
-
<div class="pf-l-gallery__item">
|
|
448
|
-
<div class="pf-c-card">
|
|
449
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
450
|
-
</div>
|
|
451
|
-
</div>
|
|
452
|
-
<div class="pf-l-gallery__item">
|
|
453
|
-
<div class="pf-c-card">
|
|
454
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
455
|
-
</div>
|
|
456
|
-
</div>
|
|
457
|
-
<div class="pf-l-gallery__item">
|
|
458
|
-
<div class="pf-c-card">
|
|
459
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
460
|
-
</div>
|
|
461
|
-
</div>
|
|
462
|
-
<div class="pf-l-gallery__item">
|
|
463
|
-
<div class="pf-c-card">
|
|
464
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
465
|
-
</div>
|
|
466
|
-
</div>
|
|
467
|
-
<div class="pf-l-gallery__item">
|
|
468
|
-
<div class="pf-c-card">
|
|
469
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
470
|
-
</div>
|
|
471
|
-
</div>
|
|
472
|
-
<div class="pf-l-gallery__item">
|
|
473
|
-
<div class="pf-c-card">
|
|
474
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
475
|
-
</div>
|
|
476
|
-
</div>
|
|
477
|
-
<div class="pf-l-gallery__item">
|
|
478
|
-
<div class="pf-c-card">
|
|
479
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
480
|
-
</div>
|
|
481
|
-
</div>
|
|
482
|
-
<div class="pf-l-gallery__item">
|
|
483
|
-
<div class="pf-c-card">
|
|
484
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
485
|
-
</div>
|
|
486
|
-
</div>
|
|
487
|
-
<div class="pf-l-gallery__item">
|
|
488
|
-
<div class="pf-c-card">
|
|
489
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
490
|
-
</div>
|
|
491
|
-
</div>
|
|
492
|
-
<div class="pf-l-gallery__item">
|
|
493
|
-
<div class="pf-c-card">
|
|
494
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
495
|
-
</div>
|
|
496
|
-
</div>
|
|
497
|
-
</div>
|
|
498
|
-
</div>
|
|
499
|
-
</section>
|
|
500
|
-
<div class="pf-c-back-to-top">
|
|
501
|
-
<a
|
|
502
|
-
class="pf-c-button pf-m-primary"
|
|
503
|
-
href="#main-content-back-to-top-basic"
|
|
504
|
-
>
|
|
505
|
-
Back to top
|
|
506
|
-
<span class="pf-c-button__icon pf-m-end">
|
|
507
|
-
<i class="fas fa-angle-up" aria-hidden="true"></i>
|
|
508
|
-
</span>
|
|
509
|
-
</a>
|
|
510
|
-
</div>
|
|
511
|
-
</main>
|
|
512
|
-
</div>
|
|
513
|
-
|
|
9
|
+
```hbs isFullscreen
|
|
10
|
+
{{#> page-demo-default page-demo-default--id="back-to-top-basic"}}
|
|
11
|
+
{{> page-template-gallery page-template--gallery--IsLongGallery="true"}}
|
|
12
|
+
{{> back-to-top back-to-top--target="main-content-back-to-top-basic"}}
|
|
13
|
+
{{/page-demo-default}}
|
|
514
14
|
```
|
|
@@ -1793,16 +1793,24 @@ wrapperTag: div
|
|
|
1793
1793
|
### Utilization card 3
|
|
1794
1794
|
|
|
1795
1795
|
```html
|
|
1796
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
1797
|
+
<code>baseline</code> alignment.
|
|
1798
|
+
<br />
|
|
1799
|
+
<br />
|
|
1796
1800
|
<div
|
|
1797
1801
|
class="pf-l-gallery pf-m-gutter"
|
|
1798
1802
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
1799
1803
|
>
|
|
1800
1804
|
<div class="pf-c-card" id="utilization-card-3-example">
|
|
1801
|
-
<div class="pf-c-card__header">
|
|
1802
|
-
<div
|
|
1805
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
1806
|
+
<div
|
|
1807
|
+
class="pf-c-card__title"
|
|
1808
|
+
id="utilization-card-3-example-title1"
|
|
1809
|
+
style="padding-top: 3px;"
|
|
1810
|
+
>
|
|
1803
1811
|
<h2 class="pf-c-title pf-m-lg">Recommendations</h2>
|
|
1804
1812
|
</div>
|
|
1805
|
-
<div class="pf-c-card__actions">
|
|
1813
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
1806
1814
|
<div class="pf-c-select">
|
|
1807
1815
|
<span
|
|
1808
1816
|
id="utilization-card-3-example-select-dropdown-label"
|
|
@@ -1810,7 +1818,7 @@ wrapperTag: div
|
|
|
1810
1818
|
>Choose one</span>
|
|
1811
1819
|
|
|
1812
1820
|
<button
|
|
1813
|
-
class="pf-c-select__toggle"
|
|
1821
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
1814
1822
|
type="button"
|
|
1815
1823
|
id="utilization-card-3-example-select-dropdown-toggle"
|
|
1816
1824
|
aria-haspopup="true"
|
|
@@ -2551,6 +2559,10 @@ wrapperTag: div
|
|
|
2551
2559
|
### Trend card 1
|
|
2552
2560
|
|
|
2553
2561
|
```html
|
|
2562
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2563
|
+
<code>baseline</code> alignment.
|
|
2564
|
+
<br />
|
|
2565
|
+
<br />
|
|
2554
2566
|
<div
|
|
2555
2567
|
class="pf-l-gallery pf-m-gutter"
|
|
2556
2568
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
@@ -2563,7 +2575,7 @@ wrapperTag: div
|
|
|
2563
2575
|
</div>
|
|
2564
2576
|
<span class="pf-u-color-200">Workload</span>
|
|
2565
2577
|
</div>
|
|
2566
|
-
<div class="pf-c-card__actions">
|
|
2578
|
+
<div class="pf-c-card__actions pf-m-no-offset" style="padding-top: 1px;">
|
|
2567
2579
|
<div class="pf-c-select">
|
|
2568
2580
|
<span
|
|
2569
2581
|
id="trend-card-1-example-select-dropdown-label"
|
|
@@ -2571,7 +2583,7 @@ wrapperTag: div
|
|
|
2571
2583
|
>Choose one</span>
|
|
2572
2584
|
|
|
2573
2585
|
<button
|
|
2574
|
-
class="pf-c-select__toggle"
|
|
2586
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2575
2587
|
type="button"
|
|
2576
2588
|
id="trend-card-1-example-select-dropdown-toggle"
|
|
2577
2589
|
aria-haspopup="true"
|
|
@@ -2672,13 +2684,17 @@ wrapperTag: div
|
|
|
2672
2684
|
### Log view
|
|
2673
2685
|
|
|
2674
2686
|
```html
|
|
2687
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2688
|
+
<code>baseline</code> alignment.
|
|
2689
|
+
<br />
|
|
2690
|
+
<br />
|
|
2675
2691
|
<div
|
|
2676
2692
|
class="pf-l-gallery pf-m-gutter"
|
|
2677
2693
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
2678
2694
|
>
|
|
2679
2695
|
<div class="pf-c-card" id="card-log-view-example">
|
|
2680
|
-
<div class="pf-c-card__header">
|
|
2681
|
-
<div class="pf-c-card__actions">
|
|
2696
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
2697
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
2682
2698
|
<div class="pf-c-select">
|
|
2683
2699
|
<span
|
|
2684
2700
|
id="card-log-view-example-select-dropdown-label"
|
|
@@ -2686,7 +2702,7 @@ wrapperTag: div
|
|
|
2686
2702
|
>Choose one</span>
|
|
2687
2703
|
|
|
2688
2704
|
<button
|
|
2689
|
-
class="pf-c-select__toggle"
|
|
2705
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2690
2706
|
type="button"
|
|
2691
2707
|
id="card-log-view-example-select-dropdown-toggle"
|
|
2692
2708
|
aria-haspopup="true"
|
|
@@ -2737,7 +2753,11 @@ wrapperTag: div
|
|
|
2737
2753
|
</ul>
|
|
2738
2754
|
</div>
|
|
2739
2755
|
</div>
|
|
2740
|
-
<div
|
|
2756
|
+
<div
|
|
2757
|
+
class="pf-c-card__title"
|
|
2758
|
+
id="card-log-view-example-title1"
|
|
2759
|
+
style="padding-top: 3px;"
|
|
2760
|
+
>
|
|
2741
2761
|
<h2 class="pf-c-title pf-m-lg">Activity</h2>
|
|
2742
2762
|
</div>
|
|
2743
2763
|
</div>
|
|
@@ -2809,13 +2829,17 @@ wrapperTag: div
|
|
|
2809
2829
|
### Events view
|
|
2810
2830
|
|
|
2811
2831
|
```html
|
|
2832
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2833
|
+
<code>baseline</code> alignment.
|
|
2834
|
+
<br />
|
|
2835
|
+
<br />
|
|
2812
2836
|
<div
|
|
2813
2837
|
class="pf-l-gallery pf-m-gutter"
|
|
2814
2838
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
2815
2839
|
>
|
|
2816
2840
|
<div class="pf-c-card" id="card-events-view-example">
|
|
2817
|
-
<div class="pf-c-card__header">
|
|
2818
|
-
<div class="pf-c-card__actions">
|
|
2841
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
2842
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
2819
2843
|
<div class="pf-c-select">
|
|
2820
2844
|
<span
|
|
2821
2845
|
id="card-events-view-example-select-dropdown-label"
|
|
@@ -2823,7 +2847,7 @@ wrapperTag: div
|
|
|
2823
2847
|
>Choose one</span>
|
|
2824
2848
|
|
|
2825
2849
|
<button
|
|
2826
|
-
class="pf-c-select__toggle"
|
|
2850
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2827
2851
|
type="button"
|
|
2828
2852
|
id="card-events-view-example-select-dropdown-toggle"
|
|
2829
2853
|
aria-haspopup="true"
|
|
@@ -2874,7 +2898,11 @@ wrapperTag: div
|
|
|
2874
2898
|
</ul>
|
|
2875
2899
|
</div>
|
|
2876
2900
|
</div>
|
|
2877
|
-
<div
|
|
2901
|
+
<div
|
|
2902
|
+
class="pf-c-card__title"
|
|
2903
|
+
id="card-events-view-example-title1"
|
|
2904
|
+
style="padding-top: 3px;"
|
|
2905
|
+
>
|
|
2878
2906
|
<h2 class="pf-c-title pf-m-lg">Events</h2>
|
|
2879
2907
|
</div>
|
|
2880
2908
|
</div>
|