@patternfly/patternfly 6.5.0-prerelease.47 → 6.5.0-prerelease.48
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/Alert/alert.css +2 -1
- package/components/Alert/alert.scss +2 -1
- package/components/_index.css +2 -1
- package/docs/components/Alert/examples/Alert.md +494 -38
- package/docs/demos/Alert/examples/Alert.md +65 -5
- package/docs/demos/Card/examples/Card.md +12 -3
- package/package.json +1 -1
- package/patternfly-no-globals.css +2 -1
- package/patternfly.css +2 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -9,7 +9,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="pf-v6-c-alert pf-m-custom" aria-label="Custom alert">
|
|
11
11
|
<div class="pf-v6-c-alert__icon">
|
|
12
|
-
<
|
|
12
|
+
<svg
|
|
13
|
+
class="pf-v6-svg"
|
|
14
|
+
viewBox="0 0 32 32"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
aria-hidden="true"
|
|
17
|
+
role="img"
|
|
18
|
+
width="1em"
|
|
19
|
+
height="1em"
|
|
20
|
+
>
|
|
21
|
+
<path
|
|
22
|
+
d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
|
|
23
|
+
/>
|
|
24
|
+
</svg>
|
|
13
25
|
</div>
|
|
14
26
|
<p class="pf-v6-c-alert__title">
|
|
15
27
|
<span class="pf-v6-screen-reader">Custom alert:</span>
|
|
@@ -19,7 +31,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
19
31
|
<br />
|
|
20
32
|
<div class="pf-v6-c-alert pf-m-info" aria-label="Information alert">
|
|
21
33
|
<div class="pf-v6-c-alert__icon">
|
|
22
|
-
<
|
|
34
|
+
<svg
|
|
35
|
+
class="pf-v6-svg"
|
|
36
|
+
viewBox="0 0 32 32"
|
|
37
|
+
fill="currentColor"
|
|
38
|
+
aria-hidden="true"
|
|
39
|
+
role="img"
|
|
40
|
+
width="1em"
|
|
41
|
+
height="1em"
|
|
42
|
+
>
|
|
43
|
+
<path
|
|
44
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
|
|
45
|
+
/>
|
|
46
|
+
</svg>
|
|
23
47
|
</div>
|
|
24
48
|
<p class="pf-v6-c-alert__title">
|
|
25
49
|
<span class="pf-v6-screen-reader">Info alert:</span>
|
|
@@ -29,7 +53,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
29
53
|
<br />
|
|
30
54
|
<div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
|
|
31
55
|
<div class="pf-v6-c-alert__icon">
|
|
32
|
-
<
|
|
56
|
+
<svg
|
|
57
|
+
class="pf-v6-svg"
|
|
58
|
+
viewBox="0 0 32 32"
|
|
59
|
+
fill="currentColor"
|
|
60
|
+
aria-hidden="true"
|
|
61
|
+
role="img"
|
|
62
|
+
width="1em"
|
|
63
|
+
height="1em"
|
|
64
|
+
>
|
|
65
|
+
<path
|
|
66
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
67
|
+
/>
|
|
68
|
+
</svg>
|
|
33
69
|
</div>
|
|
34
70
|
<p class="pf-v6-c-alert__title">
|
|
35
71
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -39,7 +75,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
39
75
|
<br />
|
|
40
76
|
<div class="pf-v6-c-alert pf-m-warning" aria-label="Warning alert">
|
|
41
77
|
<div class="pf-v6-c-alert__icon">
|
|
42
|
-
<
|
|
78
|
+
<svg
|
|
79
|
+
class="pf-v6-svg"
|
|
80
|
+
viewBox="0 0 32 32"
|
|
81
|
+
fill="currentColor"
|
|
82
|
+
aria-hidden="true"
|
|
83
|
+
role="img"
|
|
84
|
+
width="1em"
|
|
85
|
+
height="1em"
|
|
86
|
+
>
|
|
87
|
+
<path
|
|
88
|
+
d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
|
|
89
|
+
/>
|
|
90
|
+
</svg>
|
|
43
91
|
</div>
|
|
44
92
|
<p class="pf-v6-c-alert__title">
|
|
45
93
|
<span class="pf-v6-screen-reader">Warning alert:</span>
|
|
@@ -49,7 +97,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
49
97
|
<br />
|
|
50
98
|
<div class="pf-v6-c-alert pf-m-danger" aria-label="Danger alert">
|
|
51
99
|
<div class="pf-v6-c-alert__icon">
|
|
52
|
-
<
|
|
100
|
+
<svg
|
|
101
|
+
class="pf-v6-svg"
|
|
102
|
+
viewBox="0 0 32 32"
|
|
103
|
+
fill="currentColor"
|
|
104
|
+
aria-hidden="true"
|
|
105
|
+
role="img"
|
|
106
|
+
width="1em"
|
|
107
|
+
height="1em"
|
|
108
|
+
>
|
|
109
|
+
<path
|
|
110
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
|
|
111
|
+
/>
|
|
112
|
+
</svg>
|
|
53
113
|
</div>
|
|
54
114
|
<p class="pf-v6-c-alert__title">
|
|
55
115
|
<span class="pf-v6-screen-reader">Danger alert:</span>
|
|
@@ -64,7 +124,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
64
124
|
```html
|
|
65
125
|
<div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
|
|
66
126
|
<div class="pf-v6-c-alert__icon">
|
|
67
|
-
<
|
|
127
|
+
<svg
|
|
128
|
+
class="pf-v6-svg"
|
|
129
|
+
viewBox="0 0 32 32"
|
|
130
|
+
fill="currentColor"
|
|
131
|
+
aria-hidden="true"
|
|
132
|
+
role="img"
|
|
133
|
+
width="1em"
|
|
134
|
+
height="1em"
|
|
135
|
+
>
|
|
136
|
+
<path
|
|
137
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
138
|
+
/>
|
|
139
|
+
</svg>
|
|
68
140
|
</div>
|
|
69
141
|
<p class="pf-v6-c-alert__title">
|
|
70
142
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -108,7 +180,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
108
180
|
<br />
|
|
109
181
|
<div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
|
|
110
182
|
<div class="pf-v6-c-alert__icon">
|
|
111
|
-
<
|
|
183
|
+
<svg
|
|
184
|
+
class="pf-v6-svg"
|
|
185
|
+
viewBox="0 0 32 32"
|
|
186
|
+
fill="currentColor"
|
|
187
|
+
aria-hidden="true"
|
|
188
|
+
role="img"
|
|
189
|
+
width="1em"
|
|
190
|
+
height="1em"
|
|
191
|
+
>
|
|
192
|
+
<path
|
|
193
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
194
|
+
/>
|
|
195
|
+
</svg>
|
|
112
196
|
</div>
|
|
113
197
|
<p class="pf-v6-c-alert__title">
|
|
114
198
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -147,7 +231,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
147
231
|
<br />
|
|
148
232
|
<div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
|
|
149
233
|
<div class="pf-v6-c-alert__icon">
|
|
150
|
-
<
|
|
234
|
+
<svg
|
|
235
|
+
class="pf-v6-svg"
|
|
236
|
+
viewBox="0 0 32 32"
|
|
237
|
+
fill="currentColor"
|
|
238
|
+
aria-hidden="true"
|
|
239
|
+
role="img"
|
|
240
|
+
width="1em"
|
|
241
|
+
height="1em"
|
|
242
|
+
>
|
|
243
|
+
<path
|
|
244
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
245
|
+
/>
|
|
246
|
+
</svg>
|
|
151
247
|
</div>
|
|
152
248
|
<p class="pf-v6-c-alert__title">
|
|
153
249
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -188,7 +284,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
188
284
|
<br />
|
|
189
285
|
<div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
|
|
190
286
|
<div class="pf-v6-c-alert__icon">
|
|
191
|
-
<
|
|
287
|
+
<svg
|
|
288
|
+
class="pf-v6-svg"
|
|
289
|
+
viewBox="0 0 32 32"
|
|
290
|
+
fill="currentColor"
|
|
291
|
+
aria-hidden="true"
|
|
292
|
+
role="img"
|
|
293
|
+
width="1em"
|
|
294
|
+
height="1em"
|
|
295
|
+
>
|
|
296
|
+
<path
|
|
297
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
298
|
+
/>
|
|
299
|
+
</svg>
|
|
192
300
|
</div>
|
|
193
301
|
<p class="pf-v6-c-alert__title">
|
|
194
302
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -221,7 +329,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
221
329
|
<br />
|
|
222
330
|
<div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
|
|
223
331
|
<div class="pf-v6-c-alert__icon">
|
|
224
|
-
<
|
|
332
|
+
<svg
|
|
333
|
+
class="pf-v6-svg"
|
|
334
|
+
viewBox="0 0 32 32"
|
|
335
|
+
fill="currentColor"
|
|
336
|
+
aria-hidden="true"
|
|
337
|
+
role="img"
|
|
338
|
+
width="1em"
|
|
339
|
+
height="1em"
|
|
340
|
+
>
|
|
341
|
+
<path
|
|
342
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
343
|
+
/>
|
|
344
|
+
</svg>
|
|
225
345
|
</div>
|
|
226
346
|
<p class="pf-v6-c-alert__title">
|
|
227
347
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -234,7 +354,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
234
354
|
aria-label="Success alert with title truncation"
|
|
235
355
|
>
|
|
236
356
|
<div class="pf-v6-c-alert__icon">
|
|
237
|
-
<
|
|
357
|
+
<svg
|
|
358
|
+
class="pf-v6-svg"
|
|
359
|
+
viewBox="0 0 32 32"
|
|
360
|
+
fill="currentColor"
|
|
361
|
+
aria-hidden="true"
|
|
362
|
+
role="img"
|
|
363
|
+
width="1em"
|
|
364
|
+
height="1em"
|
|
365
|
+
>
|
|
366
|
+
<path
|
|
367
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
368
|
+
/>
|
|
369
|
+
</svg>
|
|
238
370
|
</div>
|
|
239
371
|
<p class="pf-v6-c-alert__title pf-m-truncate">
|
|
240
372
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -250,7 +382,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
250
382
|
aria-label="Success alert with title truncation at 2 lines"
|
|
251
383
|
>
|
|
252
384
|
<div class="pf-v6-c-alert__icon">
|
|
253
|
-
<
|
|
385
|
+
<svg
|
|
386
|
+
class="pf-v6-svg"
|
|
387
|
+
viewBox="0 0 32 32"
|
|
388
|
+
fill="currentColor"
|
|
389
|
+
aria-hidden="true"
|
|
390
|
+
role="img"
|
|
391
|
+
width="1em"
|
|
392
|
+
height="1em"
|
|
393
|
+
>
|
|
394
|
+
<path
|
|
395
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
396
|
+
/>
|
|
397
|
+
</svg>
|
|
254
398
|
</div>
|
|
255
399
|
<p
|
|
256
400
|
class="pf-v6-c-alert__title pf-m-truncate"
|
|
@@ -274,7 +418,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
274
418
|
aria-label="Inline custom alert"
|
|
275
419
|
>
|
|
276
420
|
<div class="pf-v6-c-alert__icon">
|
|
277
|
-
<
|
|
421
|
+
<svg
|
|
422
|
+
class="pf-v6-svg"
|
|
423
|
+
viewBox="0 0 32 32"
|
|
424
|
+
fill="currentColor"
|
|
425
|
+
aria-hidden="true"
|
|
426
|
+
role="img"
|
|
427
|
+
width="1em"
|
|
428
|
+
height="1em"
|
|
429
|
+
>
|
|
430
|
+
<path
|
|
431
|
+
d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
|
|
432
|
+
/>
|
|
433
|
+
</svg>
|
|
278
434
|
</div>
|
|
279
435
|
<p class="pf-v6-c-alert__title">
|
|
280
436
|
<span class="pf-v6-screen-reader">Custom inline alert:</span>
|
|
@@ -287,7 +443,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
287
443
|
aria-label="Inline information alert"
|
|
288
444
|
>
|
|
289
445
|
<div class="pf-v6-c-alert__icon">
|
|
290
|
-
<
|
|
446
|
+
<svg
|
|
447
|
+
class="pf-v6-svg"
|
|
448
|
+
viewBox="0 0 32 32"
|
|
449
|
+
fill="currentColor"
|
|
450
|
+
aria-hidden="true"
|
|
451
|
+
role="img"
|
|
452
|
+
width="1em"
|
|
453
|
+
height="1em"
|
|
454
|
+
>
|
|
455
|
+
<path
|
|
456
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
|
|
457
|
+
/>
|
|
458
|
+
</svg>
|
|
291
459
|
</div>
|
|
292
460
|
<p class="pf-v6-c-alert__title">
|
|
293
461
|
<span class="pf-v6-screen-reader">Info alert:</span>
|
|
@@ -300,7 +468,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
300
468
|
aria-label="Inline success alert"
|
|
301
469
|
>
|
|
302
470
|
<div class="pf-v6-c-alert__icon">
|
|
303
|
-
<
|
|
471
|
+
<svg
|
|
472
|
+
class="pf-v6-svg"
|
|
473
|
+
viewBox="0 0 32 32"
|
|
474
|
+
fill="currentColor"
|
|
475
|
+
aria-hidden="true"
|
|
476
|
+
role="img"
|
|
477
|
+
width="1em"
|
|
478
|
+
height="1em"
|
|
479
|
+
>
|
|
480
|
+
<path
|
|
481
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
482
|
+
/>
|
|
483
|
+
</svg>
|
|
304
484
|
</div>
|
|
305
485
|
<p class="pf-v6-c-alert__title">
|
|
306
486
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -313,7 +493,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
313
493
|
aria-label="Inline warning alert"
|
|
314
494
|
>
|
|
315
495
|
<div class="pf-v6-c-alert__icon">
|
|
316
|
-
<
|
|
496
|
+
<svg
|
|
497
|
+
class="pf-v6-svg"
|
|
498
|
+
viewBox="0 0 32 32"
|
|
499
|
+
fill="currentColor"
|
|
500
|
+
aria-hidden="true"
|
|
501
|
+
role="img"
|
|
502
|
+
width="1em"
|
|
503
|
+
height="1em"
|
|
504
|
+
>
|
|
505
|
+
<path
|
|
506
|
+
d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
|
|
507
|
+
/>
|
|
508
|
+
</svg>
|
|
317
509
|
</div>
|
|
318
510
|
<p class="pf-v6-c-alert__title">
|
|
319
511
|
<span class="pf-v6-screen-reader">Warning alert:</span>
|
|
@@ -326,7 +518,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
326
518
|
aria-label="Inline danger alert"
|
|
327
519
|
>
|
|
328
520
|
<div class="pf-v6-c-alert__icon">
|
|
329
|
-
<
|
|
521
|
+
<svg
|
|
522
|
+
class="pf-v6-svg"
|
|
523
|
+
viewBox="0 0 32 32"
|
|
524
|
+
fill="currentColor"
|
|
525
|
+
aria-hidden="true"
|
|
526
|
+
role="img"
|
|
527
|
+
width="1em"
|
|
528
|
+
height="1em"
|
|
529
|
+
>
|
|
530
|
+
<path
|
|
531
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
|
|
532
|
+
/>
|
|
533
|
+
</svg>
|
|
330
534
|
</div>
|
|
331
535
|
<p class="pf-v6-c-alert__title">
|
|
332
536
|
<span class="pf-v6-screen-reader">Danger alert:</span>
|
|
@@ -341,7 +545,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
341
545
|
```html
|
|
342
546
|
<div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
|
|
343
547
|
<div class="pf-v6-c-alert__icon">
|
|
344
|
-
<
|
|
548
|
+
<svg
|
|
549
|
+
class="pf-v6-svg"
|
|
550
|
+
viewBox="0 0 32 32"
|
|
551
|
+
fill="currentColor"
|
|
552
|
+
aria-hidden="true"
|
|
553
|
+
role="img"
|
|
554
|
+
width="1em"
|
|
555
|
+
height="1em"
|
|
556
|
+
>
|
|
557
|
+
<path
|
|
558
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
559
|
+
/>
|
|
560
|
+
</svg>
|
|
345
561
|
</div>
|
|
346
562
|
<p class="pf-v6-c-alert__title">
|
|
347
563
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -385,7 +601,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
385
601
|
<br />
|
|
386
602
|
<div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
|
|
387
603
|
<div class="pf-v6-c-alert__icon">
|
|
388
|
-
<
|
|
604
|
+
<svg
|
|
605
|
+
class="pf-v6-svg"
|
|
606
|
+
viewBox="0 0 32 32"
|
|
607
|
+
fill="currentColor"
|
|
608
|
+
aria-hidden="true"
|
|
609
|
+
role="img"
|
|
610
|
+
width="1em"
|
|
611
|
+
height="1em"
|
|
612
|
+
>
|
|
613
|
+
<path
|
|
614
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
615
|
+
/>
|
|
616
|
+
</svg>
|
|
389
617
|
</div>
|
|
390
618
|
<p class="pf-v6-c-alert__title">
|
|
391
619
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -424,7 +652,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
424
652
|
<br />
|
|
425
653
|
<div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
|
|
426
654
|
<div class="pf-v6-c-alert__icon">
|
|
427
|
-
<
|
|
655
|
+
<svg
|
|
656
|
+
class="pf-v6-svg"
|
|
657
|
+
viewBox="0 0 32 32"
|
|
658
|
+
fill="currentColor"
|
|
659
|
+
aria-hidden="true"
|
|
660
|
+
role="img"
|
|
661
|
+
width="1em"
|
|
662
|
+
height="1em"
|
|
663
|
+
>
|
|
664
|
+
<path
|
|
665
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
666
|
+
/>
|
|
667
|
+
</svg>
|
|
428
668
|
</div>
|
|
429
669
|
<p class="pf-v6-c-alert__title">
|
|
430
670
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -465,7 +705,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
465
705
|
<br />
|
|
466
706
|
<div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
|
|
467
707
|
<div class="pf-v6-c-alert__icon">
|
|
468
|
-
<
|
|
708
|
+
<svg
|
|
709
|
+
class="pf-v6-svg"
|
|
710
|
+
viewBox="0 0 32 32"
|
|
711
|
+
fill="currentColor"
|
|
712
|
+
aria-hidden="true"
|
|
713
|
+
role="img"
|
|
714
|
+
width="1em"
|
|
715
|
+
height="1em"
|
|
716
|
+
>
|
|
717
|
+
<path
|
|
718
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
719
|
+
/>
|
|
720
|
+
</svg>
|
|
469
721
|
</div>
|
|
470
722
|
<p class="pf-v6-c-alert__title">
|
|
471
723
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -480,7 +732,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
480
732
|
```html
|
|
481
733
|
<div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
|
|
482
734
|
<div class="pf-v6-c-alert__icon">
|
|
483
|
-
<
|
|
735
|
+
<svg
|
|
736
|
+
class="pf-v6-svg"
|
|
737
|
+
viewBox="0 0 512 512"
|
|
738
|
+
fill="currentColor"
|
|
739
|
+
aria-hidden="true"
|
|
740
|
+
role="img"
|
|
741
|
+
width="1em"
|
|
742
|
+
height="1em"
|
|
743
|
+
>
|
|
744
|
+
<path
|
|
745
|
+
d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
|
|
746
|
+
/>
|
|
747
|
+
</svg>
|
|
484
748
|
</div>
|
|
485
749
|
<p class="pf-v6-c-alert__title">
|
|
486
750
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -490,7 +754,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
490
754
|
<br />
|
|
491
755
|
<div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
|
|
492
756
|
<div class="pf-v6-c-alert__icon">
|
|
493
|
-
<
|
|
757
|
+
<svg
|
|
758
|
+
class="pf-v6-svg"
|
|
759
|
+
viewBox="0 0 512 512"
|
|
760
|
+
fill="currentColor"
|
|
761
|
+
aria-hidden="true"
|
|
762
|
+
role="img"
|
|
763
|
+
width="1em"
|
|
764
|
+
height="1em"
|
|
765
|
+
>
|
|
766
|
+
<path
|
|
767
|
+
d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
|
|
768
|
+
/>
|
|
769
|
+
</svg>
|
|
494
770
|
</div>
|
|
495
771
|
<p class="pf-v6-c-alert__title">
|
|
496
772
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -508,7 +784,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
508
784
|
aria-label="Success alert"
|
|
509
785
|
>
|
|
510
786
|
<div class="pf-v6-c-alert__icon">
|
|
511
|
-
<
|
|
787
|
+
<svg
|
|
788
|
+
class="pf-v6-svg"
|
|
789
|
+
viewBox="0 0 32 32"
|
|
790
|
+
fill="currentColor"
|
|
791
|
+
aria-hidden="true"
|
|
792
|
+
role="img"
|
|
793
|
+
width="1em"
|
|
794
|
+
height="1em"
|
|
795
|
+
>
|
|
796
|
+
<path
|
|
797
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
798
|
+
/>
|
|
799
|
+
</svg>
|
|
512
800
|
</div>
|
|
513
801
|
<p class="pf-v6-c-alert__title">
|
|
514
802
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -536,13 +824,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
536
824
|
>
|
|
537
825
|
<span class="pf-v6-c-button__icon">
|
|
538
826
|
<span class="pf-v6-c-alert__toggle-icon">
|
|
539
|
-
<
|
|
827
|
+
<svg
|
|
828
|
+
class="pf-v6-svg"
|
|
829
|
+
viewBox="0 0 20 20"
|
|
830
|
+
fill="currentColor"
|
|
831
|
+
aria-hidden="true"
|
|
832
|
+
role="img"
|
|
833
|
+
width="1em"
|
|
834
|
+
height="1em"
|
|
835
|
+
>
|
|
836
|
+
<path
|
|
837
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
838
|
+
/>
|
|
839
|
+
</svg>
|
|
540
840
|
</span>
|
|
541
841
|
</span>
|
|
542
842
|
</button>
|
|
543
843
|
</div>
|
|
544
844
|
<div class="pf-v6-c-alert__icon">
|
|
545
|
-
<
|
|
845
|
+
<svg
|
|
846
|
+
class="pf-v6-svg"
|
|
847
|
+
viewBox="0 0 32 32"
|
|
848
|
+
fill="currentColor"
|
|
849
|
+
aria-hidden="true"
|
|
850
|
+
role="img"
|
|
851
|
+
width="1em"
|
|
852
|
+
height="1em"
|
|
853
|
+
>
|
|
854
|
+
<path
|
|
855
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
856
|
+
/>
|
|
857
|
+
</svg>
|
|
546
858
|
</div>
|
|
547
859
|
<p class="pf-v6-c-alert__title" id="alert-expandable-example-1-title">
|
|
548
860
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -599,13 +911,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
599
911
|
>
|
|
600
912
|
<span class="pf-v6-c-button__icon">
|
|
601
913
|
<span class="pf-v6-c-alert__toggle-icon">
|
|
602
|
-
<
|
|
914
|
+
<svg
|
|
915
|
+
class="pf-v6-svg"
|
|
916
|
+
viewBox="0 0 20 20"
|
|
917
|
+
fill="currentColor"
|
|
918
|
+
aria-hidden="true"
|
|
919
|
+
role="img"
|
|
920
|
+
width="1em"
|
|
921
|
+
height="1em"
|
|
922
|
+
>
|
|
923
|
+
<path
|
|
924
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
925
|
+
/>
|
|
926
|
+
</svg>
|
|
603
927
|
</span>
|
|
604
928
|
</span>
|
|
605
929
|
</button>
|
|
606
930
|
</div>
|
|
607
931
|
<div class="pf-v6-c-alert__icon">
|
|
608
|
-
<
|
|
932
|
+
<svg
|
|
933
|
+
class="pf-v6-svg"
|
|
934
|
+
viewBox="0 0 32 32"
|
|
935
|
+
fill="currentColor"
|
|
936
|
+
aria-hidden="true"
|
|
937
|
+
role="img"
|
|
938
|
+
width="1em"
|
|
939
|
+
height="1em"
|
|
940
|
+
>
|
|
941
|
+
<path
|
|
942
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
943
|
+
/>
|
|
944
|
+
</svg>
|
|
609
945
|
</div>
|
|
610
946
|
<p class="pf-v6-c-alert__title" id="alert-expandable-example-2-title">
|
|
611
947
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -662,13 +998,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
662
998
|
>
|
|
663
999
|
<span class="pf-v6-c-button__icon">
|
|
664
1000
|
<span class="pf-v6-c-alert__toggle-icon">
|
|
665
|
-
<
|
|
1001
|
+
<svg
|
|
1002
|
+
class="pf-v6-svg"
|
|
1003
|
+
viewBox="0 0 20 20"
|
|
1004
|
+
fill="currentColor"
|
|
1005
|
+
aria-hidden="true"
|
|
1006
|
+
role="img"
|
|
1007
|
+
width="1em"
|
|
1008
|
+
height="1em"
|
|
1009
|
+
>
|
|
1010
|
+
<path
|
|
1011
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
1012
|
+
/>
|
|
1013
|
+
</svg>
|
|
666
1014
|
</span>
|
|
667
1015
|
</span>
|
|
668
1016
|
</button>
|
|
669
1017
|
</div>
|
|
670
1018
|
<div class="pf-v6-c-alert__icon">
|
|
671
|
-
<
|
|
1019
|
+
<svg
|
|
1020
|
+
class="pf-v6-svg"
|
|
1021
|
+
viewBox="0 0 32 32"
|
|
1022
|
+
fill="currentColor"
|
|
1023
|
+
aria-hidden="true"
|
|
1024
|
+
role="img"
|
|
1025
|
+
width="1em"
|
|
1026
|
+
height="1em"
|
|
1027
|
+
>
|
|
1028
|
+
<path
|
|
1029
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
1030
|
+
/>
|
|
1031
|
+
</svg>
|
|
672
1032
|
</div>
|
|
673
1033
|
<p class="pf-v6-c-alert__title" id="alert-expandable-example-3-title">
|
|
674
1034
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -725,13 +1085,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
725
1085
|
>
|
|
726
1086
|
<span class="pf-v6-c-button__icon">
|
|
727
1087
|
<span class="pf-v6-c-alert__toggle-icon">
|
|
728
|
-
<
|
|
1088
|
+
<svg
|
|
1089
|
+
class="pf-v6-svg"
|
|
1090
|
+
viewBox="0 0 20 20"
|
|
1091
|
+
fill="currentColor"
|
|
1092
|
+
aria-hidden="true"
|
|
1093
|
+
role="img"
|
|
1094
|
+
width="1em"
|
|
1095
|
+
height="1em"
|
|
1096
|
+
>
|
|
1097
|
+
<path
|
|
1098
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
1099
|
+
/>
|
|
1100
|
+
</svg>
|
|
729
1101
|
</span>
|
|
730
1102
|
</span>
|
|
731
1103
|
</button>
|
|
732
1104
|
</div>
|
|
733
1105
|
<div class="pf-v6-c-alert__icon">
|
|
734
|
-
<
|
|
1106
|
+
<svg
|
|
1107
|
+
class="pf-v6-svg"
|
|
1108
|
+
viewBox="0 0 32 32"
|
|
1109
|
+
fill="currentColor"
|
|
1110
|
+
aria-hidden="true"
|
|
1111
|
+
role="img"
|
|
1112
|
+
width="1em"
|
|
1113
|
+
height="1em"
|
|
1114
|
+
>
|
|
1115
|
+
<path
|
|
1116
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
1117
|
+
/>
|
|
1118
|
+
</svg>
|
|
735
1119
|
</div>
|
|
736
1120
|
<p class="pf-v6-c-alert__title" id="alert-expandable-example-4-title">
|
|
737
1121
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -789,7 +1173,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
|
|
|
789
1173
|
aria-label="Success alert"
|
|
790
1174
|
>
|
|
791
1175
|
<div class="pf-v6-c-alert__icon">
|
|
792
|
-
<
|
|
1176
|
+
<svg
|
|
1177
|
+
class="pf-v6-svg"
|
|
1178
|
+
viewBox="0 0 32 32"
|
|
1179
|
+
fill="currentColor"
|
|
1180
|
+
aria-hidden="true"
|
|
1181
|
+
role="img"
|
|
1182
|
+
width="1em"
|
|
1183
|
+
height="1em"
|
|
1184
|
+
>
|
|
1185
|
+
<path
|
|
1186
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
1187
|
+
/>
|
|
1188
|
+
</svg>
|
|
793
1189
|
</div>
|
|
794
1190
|
<p class="pf-v6-c-alert__title">
|
|
795
1191
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -804,7 +1200,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
|
|
|
804
1200
|
aria-label="Danger alert"
|
|
805
1201
|
>
|
|
806
1202
|
<div class="pf-v6-c-alert__icon">
|
|
807
|
-
<
|
|
1203
|
+
<svg
|
|
1204
|
+
class="pf-v6-svg"
|
|
1205
|
+
viewBox="0 0 32 32"
|
|
1206
|
+
fill="currentColor"
|
|
1207
|
+
aria-hidden="true"
|
|
1208
|
+
role="img"
|
|
1209
|
+
width="1em"
|
|
1210
|
+
height="1em"
|
|
1211
|
+
>
|
|
1212
|
+
<path
|
|
1213
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
|
|
1214
|
+
/>
|
|
1215
|
+
</svg>
|
|
808
1216
|
</div>
|
|
809
1217
|
<p class="pf-v6-c-alert__title">
|
|
810
1218
|
<span class="pf-v6-screen-reader">Danger alert:</span>
|
|
@@ -819,7 +1227,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
|
|
|
819
1227
|
aria-label="Information alert"
|
|
820
1228
|
>
|
|
821
1229
|
<div class="pf-v6-c-alert__icon">
|
|
822
|
-
<
|
|
1230
|
+
<svg
|
|
1231
|
+
class="pf-v6-svg"
|
|
1232
|
+
viewBox="0 0 32 32"
|
|
1233
|
+
fill="currentColor"
|
|
1234
|
+
aria-hidden="true"
|
|
1235
|
+
role="img"
|
|
1236
|
+
width="1em"
|
|
1237
|
+
height="1em"
|
|
1238
|
+
>
|
|
1239
|
+
<path
|
|
1240
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
|
|
1241
|
+
/>
|
|
1242
|
+
</svg>
|
|
823
1243
|
</div>
|
|
824
1244
|
<p class="pf-v6-c-alert__title">
|
|
825
1245
|
<span class="pf-v6-screen-reader">Info alert:</span>
|
|
@@ -855,7 +1275,19 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
855
1275
|
<li class="pf-v6-c-alert-group__item">
|
|
856
1276
|
<div class="pf-v6-c-alert pf-m-success" aria-label="Success toast alert">
|
|
857
1277
|
<div class="pf-v6-c-alert__icon">
|
|
858
|
-
<
|
|
1278
|
+
<svg
|
|
1279
|
+
class="pf-v6-svg"
|
|
1280
|
+
viewBox="0 0 32 32"
|
|
1281
|
+
fill="currentColor"
|
|
1282
|
+
aria-hidden="true"
|
|
1283
|
+
role="img"
|
|
1284
|
+
width="1em"
|
|
1285
|
+
height="1em"
|
|
1286
|
+
>
|
|
1287
|
+
<path
|
|
1288
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
|
|
1289
|
+
/>
|
|
1290
|
+
</svg>
|
|
859
1291
|
</div>
|
|
860
1292
|
<p class="pf-v6-c-alert__title" id="alert_one_title">
|
|
861
1293
|
<span class="pf-v6-screen-reader">Success alert:</span>
|
|
@@ -896,7 +1328,19 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
896
1328
|
<li class="pf-v6-c-alert-group__item">
|
|
897
1329
|
<div class="pf-v6-c-alert pf-m-danger" aria-label="Danger toast alert">
|
|
898
1330
|
<div class="pf-v6-c-alert__icon">
|
|
899
|
-
<
|
|
1331
|
+
<svg
|
|
1332
|
+
class="pf-v6-svg"
|
|
1333
|
+
viewBox="0 0 32 32"
|
|
1334
|
+
fill="currentColor"
|
|
1335
|
+
aria-hidden="true"
|
|
1336
|
+
role="img"
|
|
1337
|
+
width="1em"
|
|
1338
|
+
height="1em"
|
|
1339
|
+
>
|
|
1340
|
+
<path
|
|
1341
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
|
|
1342
|
+
/>
|
|
1343
|
+
</svg>
|
|
900
1344
|
</div>
|
|
901
1345
|
<p class="pf-v6-c-alert__title" id="alert_two_title">
|
|
902
1346
|
<span class="pf-v6-screen-reader">Danger alert:</span>
|
|
@@ -931,7 +1375,19 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
931
1375
|
<li class="pf-v6-c-alert-group__item">
|
|
932
1376
|
<div class="pf-v6-c-alert pf-m-info" aria-label="Information toast alert">
|
|
933
1377
|
<div class="pf-v6-c-alert__icon">
|
|
934
|
-
<
|
|
1378
|
+
<svg
|
|
1379
|
+
class="pf-v6-svg"
|
|
1380
|
+
viewBox="0 0 32 32"
|
|
1381
|
+
fill="currentColor"
|
|
1382
|
+
aria-hidden="true"
|
|
1383
|
+
role="img"
|
|
1384
|
+
width="1em"
|
|
1385
|
+
height="1em"
|
|
1386
|
+
>
|
|
1387
|
+
<path
|
|
1388
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
|
|
1389
|
+
/>
|
|
1390
|
+
</svg>
|
|
935
1391
|
</div>
|
|
936
1392
|
<p class="pf-v6-c-alert__title" id="alert_three_title">
|
|
937
1393
|
<span class="pf-v6-screen-reader">Info alert:</span>
|