Avatar

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

Examples

Basic usage

Pass in the src property to apply an image for the avatar, or pass children for custom content such as icons or svg elements.

Color modifiers

Color modifiers add visual interest and automatically include a border. The available colors are: "red," "orangered," "orange," "yellow," "green," "teal," "blue," "purple," and "gray".

With initials

An avatar can display initials by using the initials property. It's recommended to pass only a single initial to ensure the text fits inside of the avatar.

Bordered

A border can be applied by passing the isBordered property to a non-colorful avatar.

Size variations

An avatar can be rendered at different sizes by passing the size property. The available sizes are: "sm," "md" (the default size), "lg," and "xl".

Props

Avatar

*required
Name	Type	Default	Description
altrequired	string		Specifies the alternate text of the image for the avatar. Will instead set the aria-label when using children or initials; to hide the avatar from assistive technologies when passing children or initials, pass an empty string to the alt prop.
children	React.ReactNode		Content rendered inside the avatar, such as custom svgs or icons.
className	string		Additional classes added to the avatar.
color	'red' \| 'orangered' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'purple' \| 'gray'		Color of the avatar.
initials	string		Initials of the avatar.
isBordered	boolean		Flag to indicate the avatar should have a border.
size	'sm' \| 'md' \| 'lg' \| 'xl'		Size variant of avatar.
src	string	''	Specifies the URL of the image for the avatar.

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

Edit this page on GitHub