@patternfly/patternfly 6.6.0-prerelease.8 → 6.6.0-prerelease.9
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/assets/images/pf-logo-avatar.jpg +0 -0
- package/components/Avatar/avatar.css +54 -51
- package/components/Avatar/avatar.scss +82 -81
- package/components/_index.css +54 -51
- package/docs/components/Avatar/examples/Avatar.css +6 -0
- package/docs/components/Avatar/examples/Avatar.md +182 -121
- package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
- package/docs/demos/Compass/examples/Compass.md +75 -19
- package/package.json +2 -2
- package/patternfly-no-globals.css +54 -51
- package/patternfly.css +54 -51
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -2,105 +2,96 @@
|
|
|
2
2
|
id: Avatar
|
|
3
3
|
section: components
|
|
4
4
|
cssPrefix: pf-v6-c-avatar
|
|
5
|
-
|
|
5
|
+
---import './Avatar.css'
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Examples
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
<img class="pf-v6-c-avatar" alt src="/assets/images/img_avatar-light.svg" />
|
|
11
|
-
<img class="pf-v6-c-avatar" alt src="/assets/images/img_avatar-rhds.svg" />
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
### Bordered
|
|
16
|
-
|
|
17
|
-
```html
|
|
18
|
-
<img
|
|
19
|
-
class="pf-v6-c-avatar pf-m-bordered"
|
|
20
|
-
alt="Avatar image bordered"
|
|
21
|
-
src="/assets/images/img_avatar-light.svg"
|
|
22
|
-
/>
|
|
23
|
-
<img
|
|
24
|
-
class="pf-v6-c-avatar pf-m-bordered"
|
|
25
|
-
alt="Avatar image bordered"
|
|
26
|
-
src="/assets/images/img_avatar-rhds.svg"
|
|
27
|
-
/>
|
|
9
|
+
### Basic usage
|
|
28
10
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
### Small
|
|
11
|
+
Avatars can be created using either an `<img>` element with an image source, or a `<div>` element with custom content.
|
|
32
12
|
|
|
33
13
|
```html
|
|
34
14
|
<img
|
|
35
|
-
class="pf-v6-c-avatar
|
|
36
|
-
alt="
|
|
37
|
-
src="/assets/images/
|
|
38
|
-
/>
|
|
39
|
-
<img
|
|
40
|
-
class="pf-v6-c-avatar pf-m-sm"
|
|
41
|
-
alt="Avatar image small"
|
|
42
|
-
src="/assets/images/img_avatar-rhds.svg"
|
|
43
|
-
/>
|
|
44
|
-
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
### Medium
|
|
48
|
-
|
|
49
|
-
```html
|
|
50
|
-
<img
|
|
51
|
-
class="pf-v6-c-avatar pf-m-md"
|
|
52
|
-
alt="Avatar image medium"
|
|
53
|
-
src="/assets/images/img_avatar-light.svg"
|
|
54
|
-
/>
|
|
55
|
-
<img
|
|
56
|
-
class="pf-v6-c-avatar pf-m-md"
|
|
57
|
-
alt="Avatar image medium"
|
|
58
|
-
src="/assets/images/img_avatar-rhds.svg"
|
|
59
|
-
/>
|
|
60
|
-
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
### Large
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
<img
|
|
67
|
-
class="pf-v6-c-avatar pf-m-lg"
|
|
68
|
-
alt="Avatar image large"
|
|
69
|
-
src="/assets/images/img_avatar-light.svg"
|
|
70
|
-
/>
|
|
71
|
-
<img
|
|
72
|
-
class="pf-v6-c-avatar pf-m-lg"
|
|
73
|
-
alt="Avatar image large"
|
|
74
|
-
src="/assets/images/img_avatar-rhds.svg"
|
|
75
|
-
/>
|
|
76
|
-
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Extra large
|
|
80
|
-
|
|
81
|
-
```html
|
|
82
|
-
<img
|
|
83
|
-
class="pf-v6-c-avatar pf-m-xl"
|
|
84
|
-
alt="Avatar image extra large"
|
|
85
|
-
src="/assets/images/img_avatar-light.svg"
|
|
86
|
-
/>
|
|
87
|
-
<img
|
|
88
|
-
class="pf-v6-c-avatar pf-m-xl"
|
|
89
|
-
alt="Avatar image extra large"
|
|
90
|
-
src="/assets/images/img_avatar-rhds.svg"
|
|
15
|
+
class="pf-v6-c-avatar"
|
|
16
|
+
alt="Basic avatar with image"
|
|
17
|
+
src="/assets/images/pf-logo-avatar.jpg"
|
|
91
18
|
/>
|
|
19
|
+
<div
|
|
20
|
+
class="pf-v6-c-avatar"
|
|
21
|
+
role="img"
|
|
22
|
+
aria-label="Basic avatar with custom content"
|
|
23
|
+
>
|
|
24
|
+
<svg
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
width="48"
|
|
27
|
+
height="48"
|
|
28
|
+
viewBox="0 0 48 48"
|
|
29
|
+
fill="none"
|
|
30
|
+
>
|
|
31
|
+
<g>
|
|
32
|
+
<rect width="48" height="48" fill="#147878" />
|
|
33
|
+
<rect x="36" y="42" width="6" height="6" fill="#004D4D" />
|
|
34
|
+
<rect x="6" y="42" width="6" height="6" fill="#004D4D" />
|
|
35
|
+
<rect x="12" y="36" width="24" height="6" fill="#004D4D" />
|
|
36
|
+
<rect x="18" y="30" width="12" height="6" fill="#004D4D" />
|
|
37
|
+
<rect
|
|
38
|
+
width="6"
|
|
39
|
+
height="24"
|
|
40
|
+
transform="matrix(-1 0 0 1 48 12)"
|
|
41
|
+
fill="#004D4D"
|
|
42
|
+
/>
|
|
43
|
+
<rect
|
|
44
|
+
width="6"
|
|
45
|
+
height="6"
|
|
46
|
+
transform="matrix(-1 0 0 1 42 30)"
|
|
47
|
+
fill="#004D4D"
|
|
48
|
+
/>
|
|
49
|
+
<rect
|
|
50
|
+
width="6"
|
|
51
|
+
height="6"
|
|
52
|
+
transform="matrix(-1 0 0 1 36 24)"
|
|
53
|
+
fill="#004D4D"
|
|
54
|
+
/>
|
|
55
|
+
<rect
|
|
56
|
+
width="6"
|
|
57
|
+
height="6"
|
|
58
|
+
transform="matrix(-1 0 0 1 42 18)"
|
|
59
|
+
fill="#004D4D"
|
|
60
|
+
/>
|
|
61
|
+
<rect
|
|
62
|
+
width="6"
|
|
63
|
+
height="6"
|
|
64
|
+
transform="matrix(-1 0 0 1 36 12)"
|
|
65
|
+
fill="#004D4D"
|
|
66
|
+
/>
|
|
67
|
+
<rect
|
|
68
|
+
width="6"
|
|
69
|
+
height="6"
|
|
70
|
+
transform="matrix(-1 0 0 1 42 6)"
|
|
71
|
+
fill="#004D4D"
|
|
72
|
+
/>
|
|
73
|
+
<rect x="18" width="12" height="12" fill="#004D4D" />
|
|
74
|
+
<rect x="6" y="30" width="6" height="6" fill="#004D4D" />
|
|
75
|
+
<rect x="12" y="24" width="6" height="6" fill="#004D4D" />
|
|
76
|
+
<rect x="6" y="18" width="6" height="6" fill="#004D4D" />
|
|
77
|
+
<rect x="12" y="12" width="6" height="6" fill="#004D4D" />
|
|
78
|
+
<rect x="6" y="6" width="6" height="6" fill="#004D4D" />
|
|
79
|
+
<rect y="12" width="6" height="24" fill="#004D4D" />
|
|
80
|
+
</g>
|
|
81
|
+
</svg>
|
|
82
|
+
</div>
|
|
92
83
|
|
|
93
84
|
```
|
|
94
85
|
|
|
95
|
-
###
|
|
86
|
+
### Color modifiers
|
|
96
87
|
|
|
97
|
-
|
|
88
|
+
Color modifiers add visual interest and automatically include a border. The available colors are: "red", "orangered", "orange", "yellow", "green", "teal", "blue", "purple", and "gray".
|
|
98
89
|
|
|
99
90
|
```html
|
|
100
91
|
<div
|
|
101
|
-
class="pf-v6-c-avatar pf-m-
|
|
92
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful"
|
|
102
93
|
role="img"
|
|
103
|
-
aria-label="Red avatar
|
|
94
|
+
aria-label="Red avatar "
|
|
104
95
|
>
|
|
105
96
|
<svg
|
|
106
97
|
aria-hidden="true"
|
|
@@ -120,9 +111,9 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
120
111
|
</svg>
|
|
121
112
|
</div>
|
|
122
113
|
<div
|
|
123
|
-
class="pf-v6-c-avatar pf-m-
|
|
114
|
+
class="pf-v6-c-avatar pf-m-orangered pf-m-colorful"
|
|
124
115
|
role="img"
|
|
125
|
-
aria-label="Orange-red avatar
|
|
116
|
+
aria-label="Orange-red avatar "
|
|
126
117
|
>
|
|
127
118
|
<svg
|
|
128
119
|
aria-hidden="true"
|
|
@@ -142,9 +133,9 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
142
133
|
</svg>
|
|
143
134
|
</div>
|
|
144
135
|
<div
|
|
145
|
-
class="pf-v6-c-avatar pf-m-
|
|
136
|
+
class="pf-v6-c-avatar pf-m-orange pf-m-colorful"
|
|
146
137
|
role="img"
|
|
147
|
-
aria-label="Orange avatar
|
|
138
|
+
aria-label="Orange avatar "
|
|
148
139
|
>
|
|
149
140
|
<svg
|
|
150
141
|
aria-hidden="true"
|
|
@@ -164,9 +155,9 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
164
155
|
</svg>
|
|
165
156
|
</div>
|
|
166
157
|
<div
|
|
167
|
-
class="pf-v6-c-avatar pf-m-
|
|
158
|
+
class="pf-v6-c-avatar pf-m-yellow pf-m-colorful"
|
|
168
159
|
role="img"
|
|
169
|
-
aria-label="Yellow avatar
|
|
160
|
+
aria-label="Yellow avatar "
|
|
170
161
|
>
|
|
171
162
|
<svg
|
|
172
163
|
aria-hidden="true"
|
|
@@ -186,9 +177,9 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
186
177
|
</svg>
|
|
187
178
|
</div>
|
|
188
179
|
<div
|
|
189
|
-
class="pf-v6-c-avatar pf-m-
|
|
180
|
+
class="pf-v6-c-avatar pf-m-green pf-m-colorful"
|
|
190
181
|
role="img"
|
|
191
|
-
aria-label="Green avatar
|
|
182
|
+
aria-label="Green avatar "
|
|
192
183
|
>
|
|
193
184
|
<svg
|
|
194
185
|
aria-hidden="true"
|
|
@@ -208,9 +199,9 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
208
199
|
</svg>
|
|
209
200
|
</div>
|
|
210
201
|
<div
|
|
211
|
-
class="pf-v6-c-avatar pf-m-
|
|
202
|
+
class="pf-v6-c-avatar pf-m-teal pf-m-colorful"
|
|
212
203
|
role="img"
|
|
213
|
-
aria-label="Teal avatar
|
|
204
|
+
aria-label="Teal avatar "
|
|
214
205
|
>
|
|
215
206
|
<svg
|
|
216
207
|
aria-hidden="true"
|
|
@@ -230,9 +221,9 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
230
221
|
</svg>
|
|
231
222
|
</div>
|
|
232
223
|
<div
|
|
233
|
-
class="pf-v6-c-avatar pf-m-
|
|
224
|
+
class="pf-v6-c-avatar pf-m-blue pf-m-colorful"
|
|
234
225
|
role="img"
|
|
235
|
-
aria-label="Blue avatar
|
|
226
|
+
aria-label="Blue avatar "
|
|
236
227
|
>
|
|
237
228
|
<svg
|
|
238
229
|
aria-hidden="true"
|
|
@@ -252,9 +243,9 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
252
243
|
</svg>
|
|
253
244
|
</div>
|
|
254
245
|
<div
|
|
255
|
-
class="pf-v6-c-avatar pf-m-
|
|
246
|
+
class="pf-v6-c-avatar pf-m-purple pf-m-colorful"
|
|
256
247
|
role="img"
|
|
257
|
-
aria-label="Purple avatar
|
|
248
|
+
aria-label="Purple avatar "
|
|
258
249
|
>
|
|
259
250
|
<svg
|
|
260
251
|
aria-hidden="true"
|
|
@@ -274,9 +265,9 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
274
265
|
</svg>
|
|
275
266
|
</div>
|
|
276
267
|
<div
|
|
277
|
-
class="pf-v6-c-avatar pf-m-
|
|
268
|
+
class="pf-v6-c-avatar pf-m-gray pf-m-colorful"
|
|
278
269
|
role="img"
|
|
279
|
-
aria-label="Gray avatar
|
|
270
|
+
aria-label="Gray avatar "
|
|
280
271
|
>
|
|
281
272
|
<svg
|
|
282
273
|
aria-hidden="true"
|
|
@@ -298,71 +289,141 @@ Use a color modifier to add visual interest to the default avatar icon.
|
|
|
298
289
|
|
|
299
290
|
```
|
|
300
291
|
|
|
301
|
-
###
|
|
292
|
+
### With initials
|
|
302
293
|
|
|
303
|
-
|
|
294
|
+
Display a user's initials in the avatar. It's recommended to pass only a single initial to ensure the text fits inside of the avatar.
|
|
304
295
|
|
|
305
296
|
```html
|
|
306
297
|
<div
|
|
307
|
-
class="pf-v6-c-avatar pf-m-
|
|
298
|
+
class="pf-v6-c-avatar pf-m-bordered"
|
|
299
|
+
role="img"
|
|
300
|
+
aria-label="Avatar with initial C"
|
|
301
|
+
>
|
|
302
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
303
|
+
</div>
|
|
304
|
+
<div
|
|
305
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful"
|
|
306
|
+
role="img"
|
|
307
|
+
aria-label="Red avatar with initial C"
|
|
308
|
+
>
|
|
309
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
310
|
+
</div>
|
|
311
|
+
<div
|
|
312
|
+
class="pf-v6-c-avatar pf-m-orangered pf-m-colorful"
|
|
313
|
+
role="img"
|
|
314
|
+
aria-label="Orange-red avatar with initial C"
|
|
315
|
+
>
|
|
316
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
317
|
+
</div>
|
|
318
|
+
<div
|
|
319
|
+
class="pf-v6-c-avatar pf-m-orange pf-m-colorful"
|
|
308
320
|
role="img"
|
|
309
|
-
aria-label="
|
|
321
|
+
aria-label="Orange avatar with initial C"
|
|
310
322
|
>
|
|
311
323
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
312
324
|
</div>
|
|
313
325
|
<div
|
|
314
|
-
class="pf-v6-c-avatar pf-m-
|
|
326
|
+
class="pf-v6-c-avatar pf-m-yellow pf-m-colorful"
|
|
315
327
|
role="img"
|
|
316
|
-
aria-label="
|
|
328
|
+
aria-label="Yellow avatar with initial C"
|
|
317
329
|
>
|
|
318
330
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
319
331
|
</div>
|
|
320
332
|
<div
|
|
321
|
-
class="pf-v6-c-avatar pf-m-
|
|
333
|
+
class="pf-v6-c-avatar pf-m-green pf-m-colorful"
|
|
322
334
|
role="img"
|
|
323
|
-
aria-label="
|
|
335
|
+
aria-label="Green avatar with initial C"
|
|
324
336
|
>
|
|
325
337
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
326
338
|
</div>
|
|
327
339
|
<div
|
|
328
|
-
class="pf-v6-c-avatar pf-m-
|
|
340
|
+
class="pf-v6-c-avatar pf-m-teal pf-m-colorful"
|
|
329
341
|
role="img"
|
|
330
|
-
aria-label="
|
|
342
|
+
aria-label="Teal avatar with initial C"
|
|
331
343
|
>
|
|
332
344
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
333
345
|
</div>
|
|
334
346
|
<div
|
|
335
|
-
class="pf-v6-c-avatar pf-m-
|
|
347
|
+
class="pf-v6-c-avatar pf-m-blue pf-m-colorful"
|
|
336
348
|
role="img"
|
|
337
|
-
aria-label="
|
|
349
|
+
aria-label="Blue avatar with initial C"
|
|
338
350
|
>
|
|
339
351
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
340
352
|
</div>
|
|
341
353
|
<div
|
|
342
|
-
class="pf-v6-c-avatar pf-m-
|
|
354
|
+
class="pf-v6-c-avatar pf-m-purple pf-m-colorful"
|
|
355
|
+
role="img"
|
|
356
|
+
aria-label="Purple avatar with initial C"
|
|
357
|
+
>
|
|
358
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
359
|
+
</div>
|
|
360
|
+
<div
|
|
361
|
+
class="pf-v6-c-avatar pf-m-gray pf-m-colorful"
|
|
362
|
+
role="img"
|
|
363
|
+
aria-label="Gray avatar with initial C"
|
|
364
|
+
>
|
|
365
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
### Bordered
|
|
371
|
+
|
|
372
|
+
Use `.pf-m-bordered` to add a border to non-colorful avatars.
|
|
373
|
+
|
|
374
|
+
```html
|
|
375
|
+
<div
|
|
376
|
+
class="pf-v6-c-avatar pf-m-bordered"
|
|
377
|
+
role="img"
|
|
378
|
+
aria-label="Bordered avatar with chatbot icon"
|
|
379
|
+
>
|
|
380
|
+
<svg
|
|
381
|
+
class="pf-v6-svg"
|
|
382
|
+
fill="currentColor"
|
|
383
|
+
viewBox="0 0 32 32"
|
|
384
|
+
aria-hidden="true"
|
|
385
|
+
role="img"
|
|
386
|
+
width="1em"
|
|
387
|
+
height="1em"
|
|
388
|
+
>
|
|
389
|
+
<path
|
|
390
|
+
d="M28 12H17V9h1.75C19.44 9 20 8.44 20 7.75v-4.5C20 2.56 19.44 2 18.75 2h-5.5C12.56 2 12 2.56 12 3.25v4.5c0 .69.56 1.25 1.25 1.25H15v3H4c-1.654 0-3 1.346-3 3v12c0 1.654 1.346 3 3 3h24c1.654 0 3-1.346 3-3V15c0-1.654-1.346-3-3-3ZM14 4h4v3h-4V4Zm15 23a1 1 0 0 1-1 1H4c-.551 0-1-.448-1-1V15c0-.551.449-1 1-1h24c.552 0 1 .449 1 1v12ZM8.75 18v2a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 .75.75Zm18 0v2a.75.75 0 0 1-.75.75h-2a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 .75.75Zm-7.05 4.475a.873.873 0 0 1-.175 1.224c-1.023.77-2.242 1.176-3.525 1.176s-2.502-.406-3.526-1.176a.874.874 0 1 1 1.05-1.398c1.437 1.078 3.513 1.078 4.95 0a.871.871 0 0 1 1.225.174Z"
|
|
391
|
+
/>
|
|
392
|
+
</svg>
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
### Size variations
|
|
398
|
+
|
|
399
|
+
Avatars support small, medium (default), large, and extra large sizes.
|
|
400
|
+
|
|
401
|
+
```html
|
|
402
|
+
<div
|
|
403
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful pf-m-sm"
|
|
343
404
|
role="img"
|
|
344
|
-
aria-label="
|
|
405
|
+
aria-label="Small red avatar with initial C"
|
|
345
406
|
>
|
|
346
407
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
347
408
|
</div>
|
|
348
409
|
<div
|
|
349
|
-
class="pf-v6-c-avatar pf-m-colorful pf-m-
|
|
410
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful pf-m-md"
|
|
350
411
|
role="img"
|
|
351
|
-
aria-label="
|
|
412
|
+
aria-label="Medium red avatar with initial C"
|
|
352
413
|
>
|
|
353
414
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
354
415
|
</div>
|
|
355
416
|
<div
|
|
356
|
-
class="pf-v6-c-avatar pf-m-colorful pf-m-
|
|
417
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful pf-m-lg"
|
|
357
418
|
role="img"
|
|
358
|
-
aria-label="
|
|
419
|
+
aria-label="Large red avatar with initial C"
|
|
359
420
|
>
|
|
360
421
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
361
422
|
</div>
|
|
362
423
|
<div
|
|
363
|
-
class="pf-v6-c-avatar pf-m-colorful pf-m-
|
|
424
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful pf-m-xl"
|
|
364
425
|
role="img"
|
|
365
|
-
aria-label="
|
|
426
|
+
aria-label="Extra large red avatar with initial C"
|
|
366
427
|
>
|
|
367
428
|
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
368
429
|
</div>
|
|
@@ -389,13 +450,13 @@ The avatar component provides a default SVG icon. If an image is used it should
|
|
|
389
450
|
| Class | Applied to | Outcome |
|
|
390
451
|
| -- | -- | -- |
|
|
391
452
|
| `.pf-v6-c-avatar` | `<img>`, `<div>` | Initiates an avatar. **Required** |
|
|
392
|
-
| `.pf-v6-c-avatar--colorful` | `.pf-v6-c-avatar` | Modifies an avatar to use colorful styling with a border. |
|
|
393
453
|
| `.pf-v6-c-avatar__initials` | `<span>` | Contains the user's initials in a colorful avatar. |
|
|
394
454
|
| `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
|
|
395
455
|
| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
396
456
|
| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). **Note:** This is the default size. |
|
|
397
457
|
| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
398
458
|
| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
459
|
+
| `.pf-m-colorful` | `.pf-v6-c-avatar` | Modifies an avatar to use colorful styling with a border. |
|
|
399
460
|
| `.pf-m-red` | `.pf-v6-c-avatar` | Modifies avatar for red styling. |
|
|
400
461
|
| `.pf-m-orangered` | `.pf-v6-c-avatar` | Modifies avatar for orangered styling. |
|
|
401
462
|
| `.pf-m-orange` | `.pf-v6-c-avatar` | Modifies avatar for orange styling. |
|
|
@@ -1110,11 +1110,24 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
1110
1110
|
```html
|
|
1111
1111
|
<button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
|
|
1112
1112
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1113
|
-
<img
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1113
|
+
<div class="pf-v6-c-avatar pf-m-sm" role="img" aria-hidden="true">
|
|
1114
|
+
<svg
|
|
1115
|
+
aria-hidden="true"
|
|
1116
|
+
data-name="Layer 1"
|
|
1117
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1118
|
+
version="1.1"
|
|
1119
|
+
viewBox="0 0 36 36"
|
|
1120
|
+
>
|
|
1121
|
+
<path
|
|
1122
|
+
fill="currentColor"
|
|
1123
|
+
d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
|
|
1124
|
+
/>
|
|
1125
|
+
<path
|
|
1126
|
+
fill="currentColor"
|
|
1127
|
+
d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
|
|
1128
|
+
/>
|
|
1129
|
+
</svg>
|
|
1130
|
+
</div>
|
|
1118
1131
|
</span>
|
|
1119
1132
|
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
1120
1133
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -1143,11 +1156,24 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
1143
1156
|
aria-expanded="true"
|
|
1144
1157
|
>
|
|
1145
1158
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1146
|
-
<img
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1159
|
+
<div class="pf-v6-c-avatar pf-m-sm" role="img" aria-hidden="true">
|
|
1160
|
+
<svg
|
|
1161
|
+
aria-hidden="true"
|
|
1162
|
+
data-name="Layer 1"
|
|
1163
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1164
|
+
version="1.1"
|
|
1165
|
+
viewBox="0 0 36 36"
|
|
1166
|
+
>
|
|
1167
|
+
<path
|
|
1168
|
+
fill="currentColor"
|
|
1169
|
+
d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
|
|
1170
|
+
/>
|
|
1171
|
+
<path
|
|
1172
|
+
fill="currentColor"
|
|
1173
|
+
d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
|
|
1174
|
+
/>
|
|
1175
|
+
</svg>
|
|
1176
|
+
</div>
|
|
1151
1177
|
</span>
|
|
1152
1178
|
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
1153
1179
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -1177,11 +1203,24 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
1177
1203
|
disabled
|
|
1178
1204
|
>
|
|
1179
1205
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1180
|
-
<img
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1206
|
+
<div class="pf-v6-c-avatar pf-m-sm" role="img" aria-hidden="true">
|
|
1207
|
+
<svg
|
|
1208
|
+
aria-hidden="true"
|
|
1209
|
+
data-name="Layer 1"
|
|
1210
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1211
|
+
version="1.1"
|
|
1212
|
+
viewBox="0 0 36 36"
|
|
1213
|
+
>
|
|
1214
|
+
<path
|
|
1215
|
+
fill="currentColor"
|
|
1216
|
+
d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
|
|
1217
|
+
/>
|
|
1218
|
+
<path
|
|
1219
|
+
fill="currentColor"
|
|
1220
|
+
d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
|
|
1221
|
+
/>
|
|
1222
|
+
</svg>
|
|
1223
|
+
</div>
|
|
1185
1224
|
</span>
|
|
1186
1225
|
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
1187
1226
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -444,11 +444,24 @@ This demo populates the main Compass section with a card view, which is one of t
|
|
|
444
444
|
aria-expanded="false"
|
|
445
445
|
>
|
|
446
446
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
447
|
-
<img
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
447
|
+
<div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
|
|
448
|
+
<svg
|
|
449
|
+
aria-hidden="true"
|
|
450
|
+
data-name="Layer 1"
|
|
451
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
452
|
+
version="1.1"
|
|
453
|
+
viewBox="0 0 36 36"
|
|
454
|
+
>
|
|
455
|
+
<path
|
|
456
|
+
fill="currentColor"
|
|
457
|
+
d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
|
|
458
|
+
/>
|
|
459
|
+
<path
|
|
460
|
+
fill="currentColor"
|
|
461
|
+
d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
|
|
462
|
+
/>
|
|
463
|
+
</svg>
|
|
464
|
+
</div>
|
|
452
465
|
</span>
|
|
453
466
|
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
454
467
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -2095,11 +2108,24 @@ This demo populates the main Compass section with a dashboard, which is often us
|
|
|
2095
2108
|
aria-expanded="false"
|
|
2096
2109
|
>
|
|
2097
2110
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
2098
|
-
<img
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2111
|
+
<div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
|
|
2112
|
+
<svg
|
|
2113
|
+
aria-hidden="true"
|
|
2114
|
+
data-name="Layer 1"
|
|
2115
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2116
|
+
version="1.1"
|
|
2117
|
+
viewBox="0 0 36 36"
|
|
2118
|
+
>
|
|
2119
|
+
<path
|
|
2120
|
+
fill="currentColor"
|
|
2121
|
+
d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
|
|
2122
|
+
/>
|
|
2123
|
+
<path
|
|
2124
|
+
fill="currentColor"
|
|
2125
|
+
d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
|
|
2126
|
+
/>
|
|
2127
|
+
</svg>
|
|
2128
|
+
</div>
|
|
2103
2129
|
</span>
|
|
2104
2130
|
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
2105
2131
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -4031,11 +4057,24 @@ Without a glass panel component wrapping all of the content, there is no rounded
|
|
|
4031
4057
|
aria-expanded="false"
|
|
4032
4058
|
>
|
|
4033
4059
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
4034
|
-
<img
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
4060
|
+
<div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
|
|
4061
|
+
<svg
|
|
4062
|
+
aria-hidden="true"
|
|
4063
|
+
data-name="Layer 1"
|
|
4064
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4065
|
+
version="1.1"
|
|
4066
|
+
viewBox="0 0 36 36"
|
|
4067
|
+
>
|
|
4068
|
+
<path
|
|
4069
|
+
fill="currentColor"
|
|
4070
|
+
d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
|
|
4071
|
+
/>
|
|
4072
|
+
<path
|
|
4073
|
+
fill="currentColor"
|
|
4074
|
+
d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
|
|
4075
|
+
/>
|
|
4076
|
+
</svg>
|
|
4077
|
+
</div>
|
|
4039
4078
|
</span>
|
|
4040
4079
|
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
4041
4080
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -6628,11 +6667,28 @@ This demo showcases how you can position a side-panel drawer on top of the other
|
|
|
6628
6667
|
aria-expanded="false"
|
|
6629
6668
|
>
|
|
6630
6669
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
6631
|
-
<
|
|
6670
|
+
<div
|
|
6632
6671
|
class="pf-v6-c-avatar pf-m-md"
|
|
6633
|
-
|
|
6634
|
-
|
|
6635
|
-
|
|
6672
|
+
role="img"
|
|
6673
|
+
aria-hidden="true"
|
|
6674
|
+
>
|
|
6675
|
+
<svg
|
|
6676
|
+
aria-hidden="true"
|
|
6677
|
+
data-name="Layer 1"
|
|
6678
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
6679
|
+
version="1.1"
|
|
6680
|
+
viewBox="0 0 36 36"
|
|
6681
|
+
>
|
|
6682
|
+
<path
|
|
6683
|
+
fill="currentColor"
|
|
6684
|
+
d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
|
|
6685
|
+
/>
|
|
6686
|
+
<path
|
|
6687
|
+
fill="currentColor"
|
|
6688
|
+
d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
|
|
6689
|
+
/>
|
|
6690
|
+
</svg>
|
|
6691
|
+
</div>
|
|
6636
6692
|
</span>
|
|
6637
6693
|
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
6638
6694
|
<span class="pf-v6-c-menu-toggle__controls">
|