@patternfly/patternfly 6.6.0-prerelease.7 → 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/img_avatar-rhds.svg +22 -0
- package/assets/images/pf-logo-avatar.jpg +0 -0
- package/components/Avatar/avatar.css +144 -0
- package/components/Avatar/avatar.scss +161 -0
- package/components/_index.css +144 -0
- package/docs/components/Avatar/examples/Avatar.css +6 -0
- package/docs/components/Avatar/examples/Avatar.md +414 -40
- 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 +144 -0
- package/patternfly.css +144 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -2,71 +2,431 @@
|
|
|
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
|
|
11
|
-
class="pf-v6-c-avatar"
|
|
12
|
-
alt="Avatar image"
|
|
13
|
-
src="/assets/images/img_avatar-light.svg"
|
|
14
|
-
/>
|
|
9
|
+
### Basic usage
|
|
15
10
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
### Bordered
|
|
11
|
+
Avatars can be created using either an `<img>` element with an image source, or a `<div>` element with custom content.
|
|
19
12
|
|
|
20
13
|
```html
|
|
21
14
|
<img
|
|
22
|
-
class="pf-v6-c-avatar
|
|
23
|
-
alt="
|
|
24
|
-
src="/assets/images/
|
|
15
|
+
class="pf-v6-c-avatar"
|
|
16
|
+
alt="Basic avatar with image"
|
|
17
|
+
src="/assets/images/pf-logo-avatar.jpg"
|
|
25
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>
|
|
26
83
|
|
|
27
84
|
```
|
|
28
85
|
|
|
29
|
-
###
|
|
86
|
+
### Color modifiers
|
|
87
|
+
|
|
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".
|
|
30
89
|
|
|
31
90
|
```html
|
|
32
|
-
<
|
|
33
|
-
class="pf-v6-c-avatar pf-m-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
91
|
+
<div
|
|
92
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful"
|
|
93
|
+
role="img"
|
|
94
|
+
aria-label="Red avatar "
|
|
95
|
+
>
|
|
96
|
+
<svg
|
|
97
|
+
aria-hidden="true"
|
|
98
|
+
data-name="Layer 1"
|
|
99
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
100
|
+
version="1.1"
|
|
101
|
+
viewBox="0 0 36 36"
|
|
102
|
+
>
|
|
103
|
+
<path
|
|
104
|
+
fill="currentColor"
|
|
105
|
+
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"
|
|
106
|
+
/>
|
|
107
|
+
<path
|
|
108
|
+
fill="currentColor"
|
|
109
|
+
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"
|
|
110
|
+
/>
|
|
111
|
+
</svg>
|
|
112
|
+
</div>
|
|
113
|
+
<div
|
|
114
|
+
class="pf-v6-c-avatar pf-m-orangered pf-m-colorful"
|
|
115
|
+
role="img"
|
|
116
|
+
aria-label="Orange-red avatar "
|
|
117
|
+
>
|
|
118
|
+
<svg
|
|
119
|
+
aria-hidden="true"
|
|
120
|
+
data-name="Layer 1"
|
|
121
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
122
|
+
version="1.1"
|
|
123
|
+
viewBox="0 0 36 36"
|
|
124
|
+
>
|
|
125
|
+
<path
|
|
126
|
+
fill="currentColor"
|
|
127
|
+
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"
|
|
128
|
+
/>
|
|
129
|
+
<path
|
|
130
|
+
fill="currentColor"
|
|
131
|
+
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"
|
|
132
|
+
/>
|
|
133
|
+
</svg>
|
|
134
|
+
</div>
|
|
135
|
+
<div
|
|
136
|
+
class="pf-v6-c-avatar pf-m-orange pf-m-colorful"
|
|
137
|
+
role="img"
|
|
138
|
+
aria-label="Orange avatar "
|
|
139
|
+
>
|
|
140
|
+
<svg
|
|
141
|
+
aria-hidden="true"
|
|
142
|
+
data-name="Layer 1"
|
|
143
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
144
|
+
version="1.1"
|
|
145
|
+
viewBox="0 0 36 36"
|
|
146
|
+
>
|
|
147
|
+
<path
|
|
148
|
+
fill="currentColor"
|
|
149
|
+
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"
|
|
150
|
+
/>
|
|
151
|
+
<path
|
|
152
|
+
fill="currentColor"
|
|
153
|
+
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"
|
|
154
|
+
/>
|
|
155
|
+
</svg>
|
|
156
|
+
</div>
|
|
157
|
+
<div
|
|
158
|
+
class="pf-v6-c-avatar pf-m-yellow pf-m-colorful"
|
|
159
|
+
role="img"
|
|
160
|
+
aria-label="Yellow avatar "
|
|
161
|
+
>
|
|
162
|
+
<svg
|
|
163
|
+
aria-hidden="true"
|
|
164
|
+
data-name="Layer 1"
|
|
165
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
166
|
+
version="1.1"
|
|
167
|
+
viewBox="0 0 36 36"
|
|
168
|
+
>
|
|
169
|
+
<path
|
|
170
|
+
fill="currentColor"
|
|
171
|
+
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"
|
|
172
|
+
/>
|
|
173
|
+
<path
|
|
174
|
+
fill="currentColor"
|
|
175
|
+
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"
|
|
176
|
+
/>
|
|
177
|
+
</svg>
|
|
178
|
+
</div>
|
|
179
|
+
<div
|
|
180
|
+
class="pf-v6-c-avatar pf-m-green pf-m-colorful"
|
|
181
|
+
role="img"
|
|
182
|
+
aria-label="Green avatar "
|
|
183
|
+
>
|
|
184
|
+
<svg
|
|
185
|
+
aria-hidden="true"
|
|
186
|
+
data-name="Layer 1"
|
|
187
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
188
|
+
version="1.1"
|
|
189
|
+
viewBox="0 0 36 36"
|
|
190
|
+
>
|
|
191
|
+
<path
|
|
192
|
+
fill="currentColor"
|
|
193
|
+
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"
|
|
194
|
+
/>
|
|
195
|
+
<path
|
|
196
|
+
fill="currentColor"
|
|
197
|
+
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"
|
|
198
|
+
/>
|
|
199
|
+
</svg>
|
|
200
|
+
</div>
|
|
201
|
+
<div
|
|
202
|
+
class="pf-v6-c-avatar pf-m-teal pf-m-colorful"
|
|
203
|
+
role="img"
|
|
204
|
+
aria-label="Teal avatar "
|
|
205
|
+
>
|
|
206
|
+
<svg
|
|
207
|
+
aria-hidden="true"
|
|
208
|
+
data-name="Layer 1"
|
|
209
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
210
|
+
version="1.1"
|
|
211
|
+
viewBox="0 0 36 36"
|
|
212
|
+
>
|
|
213
|
+
<path
|
|
214
|
+
fill="currentColor"
|
|
215
|
+
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"
|
|
216
|
+
/>
|
|
217
|
+
<path
|
|
218
|
+
fill="currentColor"
|
|
219
|
+
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"
|
|
220
|
+
/>
|
|
221
|
+
</svg>
|
|
222
|
+
</div>
|
|
223
|
+
<div
|
|
224
|
+
class="pf-v6-c-avatar pf-m-blue pf-m-colorful"
|
|
225
|
+
role="img"
|
|
226
|
+
aria-label="Blue avatar "
|
|
227
|
+
>
|
|
228
|
+
<svg
|
|
229
|
+
aria-hidden="true"
|
|
230
|
+
data-name="Layer 1"
|
|
231
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
232
|
+
version="1.1"
|
|
233
|
+
viewBox="0 0 36 36"
|
|
234
|
+
>
|
|
235
|
+
<path
|
|
236
|
+
fill="currentColor"
|
|
237
|
+
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"
|
|
238
|
+
/>
|
|
239
|
+
<path
|
|
240
|
+
fill="currentColor"
|
|
241
|
+
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"
|
|
242
|
+
/>
|
|
243
|
+
</svg>
|
|
244
|
+
</div>
|
|
245
|
+
<div
|
|
246
|
+
class="pf-v6-c-avatar pf-m-purple pf-m-colorful"
|
|
247
|
+
role="img"
|
|
248
|
+
aria-label="Purple avatar "
|
|
249
|
+
>
|
|
250
|
+
<svg
|
|
251
|
+
aria-hidden="true"
|
|
252
|
+
data-name="Layer 1"
|
|
253
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
254
|
+
version="1.1"
|
|
255
|
+
viewBox="0 0 36 36"
|
|
256
|
+
>
|
|
257
|
+
<path
|
|
258
|
+
fill="currentColor"
|
|
259
|
+
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"
|
|
260
|
+
/>
|
|
261
|
+
<path
|
|
262
|
+
fill="currentColor"
|
|
263
|
+
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"
|
|
264
|
+
/>
|
|
265
|
+
</svg>
|
|
266
|
+
</div>
|
|
267
|
+
<div
|
|
268
|
+
class="pf-v6-c-avatar pf-m-gray pf-m-colorful"
|
|
269
|
+
role="img"
|
|
270
|
+
aria-label="Gray avatar "
|
|
271
|
+
>
|
|
272
|
+
<svg
|
|
273
|
+
aria-hidden="true"
|
|
274
|
+
data-name="Layer 1"
|
|
275
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
276
|
+
version="1.1"
|
|
277
|
+
viewBox="0 0 36 36"
|
|
278
|
+
>
|
|
279
|
+
<path
|
|
280
|
+
fill="currentColor"
|
|
281
|
+
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"
|
|
282
|
+
/>
|
|
283
|
+
<path
|
|
284
|
+
fill="currentColor"
|
|
285
|
+
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"
|
|
286
|
+
/>
|
|
287
|
+
</svg>
|
|
288
|
+
</div>
|
|
37
289
|
|
|
38
290
|
```
|
|
39
291
|
|
|
40
|
-
###
|
|
292
|
+
### With initials
|
|
293
|
+
|
|
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.
|
|
41
295
|
|
|
42
296
|
```html
|
|
43
|
-
<
|
|
44
|
-
class="pf-v6-c-avatar pf-m-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
297
|
+
<div
|
|
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"
|
|
320
|
+
role="img"
|
|
321
|
+
aria-label="Orange avatar with initial C"
|
|
322
|
+
>
|
|
323
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
324
|
+
</div>
|
|
325
|
+
<div
|
|
326
|
+
class="pf-v6-c-avatar pf-m-yellow pf-m-colorful"
|
|
327
|
+
role="img"
|
|
328
|
+
aria-label="Yellow avatar with initial C"
|
|
329
|
+
>
|
|
330
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
331
|
+
</div>
|
|
332
|
+
<div
|
|
333
|
+
class="pf-v6-c-avatar pf-m-green pf-m-colorful"
|
|
334
|
+
role="img"
|
|
335
|
+
aria-label="Green avatar with initial C"
|
|
336
|
+
>
|
|
337
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
338
|
+
</div>
|
|
339
|
+
<div
|
|
340
|
+
class="pf-v6-c-avatar pf-m-teal pf-m-colorful"
|
|
341
|
+
role="img"
|
|
342
|
+
aria-label="Teal avatar with initial C"
|
|
343
|
+
>
|
|
344
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
345
|
+
</div>
|
|
346
|
+
<div
|
|
347
|
+
class="pf-v6-c-avatar pf-m-blue pf-m-colorful"
|
|
348
|
+
role="img"
|
|
349
|
+
aria-label="Blue avatar with initial C"
|
|
350
|
+
>
|
|
351
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
352
|
+
</div>
|
|
353
|
+
<div
|
|
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>
|
|
48
367
|
|
|
49
368
|
```
|
|
50
369
|
|
|
51
|
-
###
|
|
370
|
+
### Bordered
|
|
371
|
+
|
|
372
|
+
Use `.pf-m-bordered` to add a border to non-colorful avatars.
|
|
52
373
|
|
|
53
374
|
```html
|
|
54
|
-
<
|
|
55
|
-
class="pf-v6-c-avatar pf-m-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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>
|
|
59
394
|
|
|
60
395
|
```
|
|
61
396
|
|
|
62
|
-
###
|
|
397
|
+
### Size variations
|
|
398
|
+
|
|
399
|
+
Avatars support small, medium (default), large, and extra large sizes.
|
|
63
400
|
|
|
64
401
|
```html
|
|
65
|
-
<
|
|
66
|
-
class="pf-v6-c-avatar pf-m-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
402
|
+
<div
|
|
403
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful pf-m-sm"
|
|
404
|
+
role="img"
|
|
405
|
+
aria-label="Small red avatar with initial C"
|
|
406
|
+
>
|
|
407
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
408
|
+
</div>
|
|
409
|
+
<div
|
|
410
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful pf-m-md"
|
|
411
|
+
role="img"
|
|
412
|
+
aria-label="Medium red avatar with initial C"
|
|
413
|
+
>
|
|
414
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
415
|
+
</div>
|
|
416
|
+
<div
|
|
417
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful pf-m-lg"
|
|
418
|
+
role="img"
|
|
419
|
+
aria-label="Large red avatar with initial C"
|
|
420
|
+
>
|
|
421
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
422
|
+
</div>
|
|
423
|
+
<div
|
|
424
|
+
class="pf-v6-c-avatar pf-m-red pf-m-colorful pf-m-xl"
|
|
425
|
+
role="img"
|
|
426
|
+
aria-label="Extra large red avatar with initial C"
|
|
427
|
+
>
|
|
428
|
+
<span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
|
|
429
|
+
</div>
|
|
70
430
|
|
|
71
431
|
```
|
|
72
432
|
|
|
@@ -80,15 +440,29 @@ The avatar component provides a default SVG icon. If an image is used it should
|
|
|
80
440
|
|
|
81
441
|
| Attribute | Applied to | Outcome |
|
|
82
442
|
| -- | -- | -- |
|
|
83
|
-
| `alt` | `.pf-v6-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
|
|
443
|
+
| `alt` | `.pf-v6-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required for image avatars** |
|
|
444
|
+
| `role="img"` | `.pf-v6-c-avatar` | Indicates the element represents an image. **Required for colorful avatars** |
|
|
445
|
+
| `aria-label` | `.pf-v6-c-avatar` | Provides an accessible name for the avatar. **Required for colorful avatars** |
|
|
446
|
+
| `aria-hidden="true"` | `.pf-v6-c-avatar__initials`, `<svg>` | Hides decorative content from screen readers when the container has `aria-label`. |
|
|
84
447
|
|
|
85
448
|
### Usage
|
|
86
449
|
|
|
87
450
|
| Class | Applied to | Outcome |
|
|
88
451
|
| -- | -- | -- |
|
|
89
|
-
| `.pf-v6-c-avatar` | `<img>` | Initiates an avatar
|
|
452
|
+
| `.pf-v6-c-avatar` | `<img>`, `<div>` | Initiates an avatar. **Required** |
|
|
453
|
+
| `.pf-v6-c-avatar__initials` | `<span>` | Contains the user's initials in a colorful avatar. |
|
|
90
454
|
| `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
|
|
91
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). |
|
|
92
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. |
|
|
93
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). |
|
|
94
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. |
|
|
460
|
+
| `.pf-m-red` | `.pf-v6-c-avatar` | Modifies avatar for red styling. |
|
|
461
|
+
| `.pf-m-orangered` | `.pf-v6-c-avatar` | Modifies avatar for orangered styling. |
|
|
462
|
+
| `.pf-m-orange` | `.pf-v6-c-avatar` | Modifies avatar for orange styling. |
|
|
463
|
+
| `.pf-m-yellow` | `.pf-v6-c-avatar` | Modifies avatar for yellow styling. |
|
|
464
|
+
| `.pf-m-green` | `.pf-v6-c-avatar` | Modifies avatar for green styling. |
|
|
465
|
+
| `.pf-m-teal` | `.pf-v6-c-avatar` | Modifies avatar for teal styling. |
|
|
466
|
+
| `.pf-m-blue` | `.pf-v6-c-avatar` | Modifies avatar for blue styling. |
|
|
467
|
+
| `.pf-m-purple` | `.pf-v6-c-avatar` | Modifies avatar for purple styling. |
|
|
468
|
+
| `.pf-m-gray` | `.pf-v6-c-avatar` | Modifies avatar for gray 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">
|