Avatar

An avatar is a visual representation of a user, which can contain an image or placeholder graphic.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-avatar	--pf-v6-c-avatar--BorderColor	transparent
	.pf-v6-c-avatar	--pf-v6-c-avatar--BorderWidth	0
	.pf-v6-c-avatar	--pf-v6-c-avatar--BorderRadius	999px
--pf-v6-c-avatar--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-avatar	--pf-v6-c-avatar--Width	2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--Height	2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--FontSize	calc(2.25rem / 1.414)
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-sm--Width	1.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-sm--Height	1.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-sm--FontSize	calc(1.5rem / 1.414)
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-md--Width	2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-md--Height	2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-md--FontSize	calc(2.25rem / 1.414)
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-lg--Width	4.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-lg--Height	4.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-lg--FontSize	calc(4.5rem / 1.414)
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-xl--Width	8rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-xl--Height	8rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-xl--FontSize	calc(8rem / 1.414)
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-bordered--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-avatar--m-bordered--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-bordered--BorderWidth	1px
--pf-v6-c-avatar--m-bordered--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-colorful--BorderWidth	1px
--pf-v6-c-avatar--m-colorful--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-gray--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-avatar--m-gray--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-gray--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-gray--Color --pf-t--global--icon--color--nonstatus--on-gray--hover --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-gray--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-avatar--m-gray--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-red--BackgroundColor	(In light theme) #fbc5c5
--pf-v6-c-avatar--m-red--BackgroundColor --pf-t--global--color--nonstatus--red--default --pf-t--global--color--nonstatus--red--100 --pf-t--color--red--20 #fbc5c5
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-red--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-red--Color --pf-t--global--icon--color--nonstatus--on-red--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-red--BorderColor	(In light theme) #f9a8a8
--pf-v6-c-avatar--m-red--BorderColor --pf-t--global--border--color--nonstatus--red--default --pf-t--global--color--nonstatus--red--200 --pf-t--color--red--30 #f9a8a8
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-orangered--BackgroundColor	(In light theme) #fbbea8
--pf-v6-c-avatar--m-orangered--BackgroundColor --pf-t--global--color--nonstatus--orangered--default --pf-t--global--color--nonstatus--orangered--100 --pf-t--color--red-orange--20 #fbbea8
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-orangered--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-orangered--Color --pf-t--global--icon--color--nonstatus--on-orangered--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-orangered--BorderColor	(In light theme) #f89b78
--pf-v6-c-avatar--m-orangered--BorderColor --pf-t--global--border--color--nonstatus--orangered--default --pf-t--global--color--nonstatus--orangered--200 --pf-t--color--red-orange--30 #f89b78
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-orange--BackgroundColor	(In light theme) #fccb8f
--pf-v6-c-avatar--m-orange--BackgroundColor --pf-t--global--color--nonstatus--orange--default --pf-t--global--color--nonstatus--orange--100 --pf-t--color--orange--20 #fccb8f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-orange--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-orange--Color --pf-t--global--icon--color--nonstatus--on-orange--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-orange--BorderColor	(In light theme) #f8ae54
--pf-v6-c-avatar--m-orange--BorderColor --pf-t--global--border--color--nonstatus--orange--default --pf-t--global--color--nonstatus--orange--200 --pf-t--color--orange--30 #f8ae54
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-yellow--BackgroundColor	(In light theme) #ffe072
--pf-v6-c-avatar--m-yellow--BackgroundColor --pf-t--global--color--nonstatus--yellow--default --pf-t--global--color--nonstatus--yellow--100 --pf-t--color--yellow--20 #ffe072
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-yellow--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-yellow--Color --pf-t--global--icon--color--nonstatus--on-yellow--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-yellow--BorderColor	(In light theme) #ffcc17
--pf-v6-c-avatar--m-yellow--BorderColor --pf-t--global--border--color--nonstatus--yellow--default --pf-t--global--color--nonstatus--yellow--200 --pf-t--color--yellow--30 #ffcc17
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-green--BackgroundColor	(In light theme) #d1f1bb
--pf-v6-c-avatar--m-green--BackgroundColor --pf-t--global--color--nonstatus--green--default --pf-t--global--color--nonstatus--green--100 --pf-t--color--green--20 #d1f1bb
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-green--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-green--Color --pf-t--global--icon--color--nonstatus--on-green--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-green--BorderColor	(In light theme) #afdc8f
--pf-v6-c-avatar--m-green--BorderColor --pf-t--global--border--color--nonstatus--green--default --pf-t--global--color--nonstatus--green--200 --pf-t--color--green--30 #afdc8f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-teal--BackgroundColor	(In light theme) #b9e5e5
--pf-v6-c-avatar--m-teal--BackgroundColor --pf-t--global--color--nonstatus--teal--default --pf-t--global--color--nonstatus--teal--100 --pf-t--color--teal--20 #b9e5e5
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-teal--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-teal--Color --pf-t--global--icon--color--nonstatus--on-teal--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-teal--BorderColor	(In light theme) #9ad8d8
--pf-v6-c-avatar--m-teal--BorderColor --pf-t--global--border--color--nonstatus--teal--default --pf-t--global--color--nonstatus--teal--200 --pf-t--color--teal--30 #9ad8d8
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-blue--BackgroundColor	(In light theme) #b9dafc
--pf-v6-c-avatar--m-blue--BackgroundColor --pf-t--global--color--nonstatus--blue--default --pf-t--global--color--nonstatus--blue--100 --pf-t--color--blue--20 #b9dafc
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-blue--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-blue--Color --pf-t--global--icon--color--nonstatus--on-blue--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-blue--BorderColor	(In light theme) #92c5f9
--pf-v6-c-avatar--m-blue--BorderColor --pf-t--global--border--color--nonstatus--blue--default --pf-t--global--color--nonstatus--blue--200 --pf-t--color--blue--30 #92c5f9
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-purple--BackgroundColor	(In light theme) #d0c5f4
--pf-v6-c-avatar--m-purple--BackgroundColor --pf-t--global--color--nonstatus--purple--default --pf-t--global--color--nonstatus--purple--100 --pf-t--color--purple--20 #d0c5f4
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-purple--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--m-purple--Color --pf-t--global--icon--color--nonstatus--on-purple--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-purple--BorderColor	(In light theme) #b6a6e9
--pf-v6-c-avatar--m-purple--BorderColor --pf-t--global--border--color--nonstatus--purple--default --pf-t--global--color--nonstatus--purple--200 --pf-t--color--purple--30 #b6a6e9
	.pf-v6-c-avatar	--pf-v6-c-avatar__initials--FontSize	1rem
--pf-v6-c-avatar__initials--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-avatar	--pf-v6-c-avatar__initials--FontWeight	600
--pf-v6-c-avatar__initials--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-sm__initials--FontSize	0.75rem
--pf-v6-c-avatar--m-sm__initials--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-sm__initials--FontWeight	600
--pf-v6-c-avatar--m-sm__initials--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-lg__initials--FontSize	1.5rem
--pf-v6-c-avatar--m-lg__initials--FontSize --pf-t--global--font--size--2xl --pf-t--global--font--size--600 1.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-lg__initials--FontWeight	800
--pf-v6-c-avatar--m-lg__initials--FontWeight --pf-t--global--font--weight--heading--bold --pf-t--global--font--weight--400 800
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-lg__initials--FontFamily	"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
--pf-v6-c-avatar--m-lg__initials--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-xl__initials--FontSize	2.25rem
--pf-v6-c-avatar--m-xl__initials--FontSize --pf-t--global--font--size--4xl --pf-t--global--font--size--800 2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-xl__initials--FontWeight	600
--pf-v6-c-avatar--m-xl__initials--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 600
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-xl__initials--FontFamily	"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
--pf-v6-c-avatar--m-xl__initials--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-gray__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-gray__initials--Color --pf-t--global--text--color--nonstatus--on-gray--hover --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-red__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-red__initials--Color --pf-t--global--text--color--nonstatus--on-red--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-orangered__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-orangered__initials--Color --pf-t--global--text--color--nonstatus--on-orangered--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-orange__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-orange__initials--Color --pf-t--global--text--color--nonstatus--on-orange--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-yellow__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-yellow__initials--Color --pf-t--global--text--color--nonstatus--on-yellow--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-green__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-green__initials--Color --pf-t--global--text--color--nonstatus--on-green--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-teal__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-teal__initials--Color --pf-t--global--text--color--nonstatus--on-teal--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-blue__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-blue__initials--Color --pf-t--global--text--color--nonstatus--on-blue--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-purple__initials--Color	(In light theme) #151515
--pf-v6-c-avatar--m-purple__initials--Color --pf-t--global--text--color--nonstatus--on-purple--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-bordered	--pf-v6-c-avatar--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-bordered--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-avatar.pf-m-bordered	--pf-v6-c-avatar--BorderWidth	1px
--pf-v6-c-avatar--BorderWidth --pf-v6-c-avatar--m-bordered--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-avatar.pf-m-sm	--pf-v6-c-avatar--Width	1.5rem
--pf-v6-c-avatar--Width --pf-v6-c-avatar--m-sm--Width 1.5rem
	.pf-v6-c-avatar.pf-m-sm	--pf-v6-c-avatar--Height	1.5rem
--pf-v6-c-avatar--Height --pf-v6-c-avatar--m-sm--Height 1.5rem
	.pf-v6-c-avatar.pf-m-sm	--pf-v6-c-avatar--FontSize	calc(1.5rem / 1.414)
--pf-v6-c-avatar--FontSize --pf-v6-c-avatar--m-sm--FontSize calc(1.5rem / 1.414)
	.pf-v6-c-avatar.pf-m-sm	--pf-v6-c-avatar__initials--FontSize	0.75rem
--pf-v6-c-avatar__initials--FontSize --pf-v6-c-avatar--m-sm__initials--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-avatar.pf-m-sm	--pf-v6-c-avatar__initials--FontWeight	600
--pf-v6-c-avatar__initials--FontWeight --pf-v6-c-avatar--m-sm__initials--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-avatar.pf-m-md	--pf-v6-c-avatar--Width	2.25rem
--pf-v6-c-avatar--Width --pf-v6-c-avatar--m-md--Width 2.25rem
	.pf-v6-c-avatar.pf-m-md	--pf-v6-c-avatar--Height	2.25rem
--pf-v6-c-avatar--Height --pf-v6-c-avatar--m-md--Height 2.25rem
	.pf-v6-c-avatar.pf-m-lg	--pf-v6-c-avatar--Width	4.5rem
--pf-v6-c-avatar--Width --pf-v6-c-avatar--m-lg--Width 4.5rem
	.pf-v6-c-avatar.pf-m-lg	--pf-v6-c-avatar--Height	4.5rem
--pf-v6-c-avatar--Height --pf-v6-c-avatar--m-lg--Height 4.5rem
	.pf-v6-c-avatar.pf-m-lg	--pf-v6-c-avatar--FontSize	calc(4.5rem / 1.414)
--pf-v6-c-avatar--FontSize --pf-v6-c-avatar--m-lg--FontSize calc(4.5rem / 1.414)
	.pf-v6-c-avatar.pf-m-lg	--pf-v6-c-avatar__initials--FontSize	1.5rem
--pf-v6-c-avatar__initials--FontSize --pf-v6-c-avatar--m-lg__initials--FontSize --pf-t--global--font--size--2xl --pf-t--global--font--size--600 1.5rem
	.pf-v6-c-avatar.pf-m-lg	--pf-v6-c-avatar__initials--FontWeight	800
--pf-v6-c-avatar__initials--FontWeight --pf-v6-c-avatar--m-lg__initials--FontWeight --pf-t--global--font--weight--heading--bold --pf-t--global--font--weight--400 800
	.pf-v6-c-avatar.pf-m-lg	--pf-v6-c-avatar__initials--FontFamily	"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
--pf-v6-c-avatar__initials--FontFamily --pf-v6-c-avatar--m-lg__initials--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
	.pf-v6-c-avatar.pf-m-xl	--pf-v6-c-avatar--Width	8rem
--pf-v6-c-avatar--Width --pf-v6-c-avatar--m-xl--Width 8rem
	.pf-v6-c-avatar.pf-m-xl	--pf-v6-c-avatar--Height	8rem
--pf-v6-c-avatar--Height --pf-v6-c-avatar--m-xl--Height 8rem
	.pf-v6-c-avatar.pf-m-xl	--pf-v6-c-avatar--FontSize	calc(8rem / 1.414)
--pf-v6-c-avatar--FontSize --pf-v6-c-avatar--m-xl--FontSize calc(8rem / 1.414)
	.pf-v6-c-avatar.pf-m-xl	--pf-v6-c-avatar__initials--FontSize	2.25rem
--pf-v6-c-avatar__initials--FontSize --pf-v6-c-avatar--m-xl__initials--FontSize --pf-t--global--font--size--4xl --pf-t--global--font--size--800 2.25rem
	.pf-v6-c-avatar.pf-m-xl	--pf-v6-c-avatar__initials--FontWeight	600
--pf-v6-c-avatar__initials--FontWeight --pf-v6-c-avatar--m-xl__initials--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 600
	.pf-v6-c-avatar.pf-m-xl	--pf-v6-c-avatar__initials--FontFamily	"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
--pf-v6-c-avatar__initials--FontFamily --pf-v6-c-avatar--m-xl__initials--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
	.pf-v6-c-avatar.pf-m-colorful	--pf-v6-c-avatar--BorderWidth	1px
--pf-v6-c-avatar--BorderWidth --pf-v6-c-avatar--m-colorful--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-avatar.pf-m-red	--pf-v6-c-avatar--BackgroundColor	(In light theme) #fbc5c5
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-red--BackgroundColor --pf-t--global--color--nonstatus--red--default --pf-t--global--color--nonstatus--red--100 --pf-t--color--red--20 #fbc5c5
	.pf-v6-c-avatar.pf-m-red	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-red--Color --pf-t--global--icon--color--nonstatus--on-red--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-red	--pf-v6-c-avatar--BorderColor	(In light theme) #f9a8a8
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-red--BorderColor --pf-t--global--border--color--nonstatus--red--default --pf-t--global--color--nonstatus--red--200 --pf-t--color--red--30 #f9a8a8
	.pf-v6-c-avatar.pf-m-red	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-red__initials--Color --pf-t--global--text--color--nonstatus--on-red--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-orangered	--pf-v6-c-avatar--BackgroundColor	(In light theme) #fbbea8
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-orangered--BackgroundColor --pf-t--global--color--nonstatus--orangered--default --pf-t--global--color--nonstatus--orangered--100 --pf-t--color--red-orange--20 #fbbea8
	.pf-v6-c-avatar.pf-m-orangered	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-orangered--Color --pf-t--global--icon--color--nonstatus--on-orangered--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-orangered	--pf-v6-c-avatar--BorderColor	(In light theme) #f89b78
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-orangered--BorderColor --pf-t--global--border--color--nonstatus--orangered--default --pf-t--global--color--nonstatus--orangered--200 --pf-t--color--red-orange--30 #f89b78
	.pf-v6-c-avatar.pf-m-orangered	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-orangered__initials--Color --pf-t--global--text--color--nonstatus--on-orangered--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-orange	--pf-v6-c-avatar--BackgroundColor	(In light theme) #fccb8f
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-orange--BackgroundColor --pf-t--global--color--nonstatus--orange--default --pf-t--global--color--nonstatus--orange--100 --pf-t--color--orange--20 #fccb8f
	.pf-v6-c-avatar.pf-m-orange	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-orange--Color --pf-t--global--icon--color--nonstatus--on-orange--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-orange	--pf-v6-c-avatar--BorderColor	(In light theme) #f8ae54
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-orange--BorderColor --pf-t--global--border--color--nonstatus--orange--default --pf-t--global--color--nonstatus--orange--200 --pf-t--color--orange--30 #f8ae54
	.pf-v6-c-avatar.pf-m-orange	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-orange__initials--Color --pf-t--global--text--color--nonstatus--on-orange--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-yellow	--pf-v6-c-avatar--BackgroundColor	(In light theme) #ffe072
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-yellow--BackgroundColor --pf-t--global--color--nonstatus--yellow--default --pf-t--global--color--nonstatus--yellow--100 --pf-t--color--yellow--20 #ffe072
	.pf-v6-c-avatar.pf-m-yellow	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-yellow--Color --pf-t--global--icon--color--nonstatus--on-yellow--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-yellow	--pf-v6-c-avatar--BorderColor	(In light theme) #ffcc17
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-yellow--BorderColor --pf-t--global--border--color--nonstatus--yellow--default --pf-t--global--color--nonstatus--yellow--200 --pf-t--color--yellow--30 #ffcc17
	.pf-v6-c-avatar.pf-m-yellow	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-yellow__initials--Color --pf-t--global--text--color--nonstatus--on-yellow--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-green	--pf-v6-c-avatar--BackgroundColor	(In light theme) #d1f1bb
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-green--BackgroundColor --pf-t--global--color--nonstatus--green--default --pf-t--global--color--nonstatus--green--100 --pf-t--color--green--20 #d1f1bb
	.pf-v6-c-avatar.pf-m-green	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-green--Color --pf-t--global--icon--color--nonstatus--on-green--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-green	--pf-v6-c-avatar--BorderColor	(In light theme) #afdc8f
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-green--BorderColor --pf-t--global--border--color--nonstatus--green--default --pf-t--global--color--nonstatus--green--200 --pf-t--color--green--30 #afdc8f
	.pf-v6-c-avatar.pf-m-green	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-green__initials--Color --pf-t--global--text--color--nonstatus--on-green--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-teal	--pf-v6-c-avatar--BackgroundColor	(In light theme) #b9e5e5
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-teal--BackgroundColor --pf-t--global--color--nonstatus--teal--default --pf-t--global--color--nonstatus--teal--100 --pf-t--color--teal--20 #b9e5e5
	.pf-v6-c-avatar.pf-m-teal	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-teal--Color --pf-t--global--icon--color--nonstatus--on-teal--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-teal	--pf-v6-c-avatar--BorderColor	(In light theme) #9ad8d8
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-teal--BorderColor --pf-t--global--border--color--nonstatus--teal--default --pf-t--global--color--nonstatus--teal--200 --pf-t--color--teal--30 #9ad8d8
	.pf-v6-c-avatar.pf-m-teal	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-teal__initials--Color --pf-t--global--text--color--nonstatus--on-teal--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-blue	--pf-v6-c-avatar--BackgroundColor	(In light theme) #b9dafc
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-blue--BackgroundColor --pf-t--global--color--nonstatus--blue--default --pf-t--global--color--nonstatus--blue--100 --pf-t--color--blue--20 #b9dafc
	.pf-v6-c-avatar.pf-m-blue	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-blue--Color --pf-t--global--icon--color--nonstatus--on-blue--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-blue	--pf-v6-c-avatar--BorderColor	(In light theme) #92c5f9
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-blue--BorderColor --pf-t--global--border--color--nonstatus--blue--default --pf-t--global--color--nonstatus--blue--200 --pf-t--color--blue--30 #92c5f9
	.pf-v6-c-avatar.pf-m-blue	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-blue__initials--Color --pf-t--global--text--color--nonstatus--on-blue--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-purple	--pf-v6-c-avatar--BackgroundColor	(In light theme) #d0c5f4
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-purple--BackgroundColor --pf-t--global--color--nonstatus--purple--default --pf-t--global--color--nonstatus--purple--100 --pf-t--color--purple--20 #d0c5f4
	.pf-v6-c-avatar.pf-m-purple	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-purple--Color --pf-t--global--icon--color--nonstatus--on-purple--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-purple	--pf-v6-c-avatar--BorderColor	(In light theme) #b6a6e9
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-purple--BorderColor --pf-t--global--border--color--nonstatus--purple--default --pf-t--global--color--nonstatus--purple--200 --pf-t--color--purple--30 #b6a6e9
	.pf-v6-c-avatar.pf-m-purple	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-purple__initials--Color --pf-t--global--text--color--nonstatus--on-purple--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-avatar.pf-m-gray	--pf-v6-c-avatar--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-avatar--BackgroundColor --pf-v6-c-avatar--m-gray--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-avatar.pf-m-gray	--pf-v6-c-avatar--Color	(In light theme) #1f1f1f
--pf-v6-c-avatar--Color --pf-v6-c-avatar--m-gray--Color --pf-t--global--icon--color--nonstatus--on-gray--hover --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-avatar.pf-m-gray	--pf-v6-c-avatar--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-gray--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-avatar.pf-m-gray	--pf-v6-c-avatar__initials--Color	(In light theme) #151515
--pf-v6-c-avatar__initials--Color --pf-v6-c-avatar--m-gray__initials--Color --pf-t--global--text--color--nonstatus--on-gray--hover --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515