Avatar

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

Examples

Basic usage

Avatars can be created using either an <img> element with an image source, or a <div> element with custom content.

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

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.

Bordered

Use .pf-m-bordered to add a border to non-colorful avatars.

Size variations

Avatars support small, medium (default), large, and extra large sizes.

Documentation

Overview

The avatar component provides a default SVG icon. If an image is used it should be 36px by 36px.

Accessibility

Attribute	Applied to	Outcome
`alt`	`.pf-v6-c-avatar`	The alt attribute describes the appearance and function of the avatar image. Required for image avatars
`role="img"`	`.pf-v6-c-avatar`	Indicates the element represents an image. Required for colorful avatars
`aria-label`	`.pf-v6-c-avatar`	Provides an accessible name for the avatar. Required for colorful avatars
`aria-hidden="true"`	`.pf-v6-c-avatar__initials`, `<svg>`	Hides decorative content from screen readers when the container has `aria-label`.

Usage

Class	Applied to	Outcome
`.pf-v6-c-avatar`	`<img>`, `<div>`	Initiates an avatar. Required
`.pf-v6-c-avatar__initials`	`<span>`	Contains the user's initials in a colorful avatar.
`.pf-m-bordered`	`.pf-v6-c-avatar`	Modifies an avatar to have a border.
`.pf-m-sm{-on-[breakpoint]}`	`.pf-v6-c-avatar`	Modifies an avatar to be small on an optional breakpoint.
`.pf-m-md{-on-[breakpoint]}`	`.pf-v6-c-avatar`	Modifies an avatar to be medium on an optional breakpoint. Note: This is the default size.
`.pf-m-lg{-on-[breakpoint]}`	`.pf-v6-c-avatar`	Modifies an avatar to be large on an optional breakpoint.
`.pf-m-xl{-on-[breakpoint]}`	`.pf-v6-c-avatar`	Modifies an avatar to be extra large on an optional breakpoint.
`.pf-m-colorful`	`.pf-v6-c-avatar`	Modifies an avatar to use colorful styling with a border.
`.pf-m-red`	`.pf-v6-c-avatar`	Modifies avatar for red styling.
`.pf-m-orangered`	`.pf-v6-c-avatar`	Modifies avatar for orangered styling.
`.pf-m-orange`	`.pf-v6-c-avatar`	Modifies avatar for orange styling.
`.pf-m-yellow`	`.pf-v6-c-avatar`	Modifies avatar for yellow styling.
`.pf-m-green`	`.pf-v6-c-avatar`	Modifies avatar for green styling.
`.pf-m-teal`	`.pf-v6-c-avatar`	Modifies avatar for teal styling.
`.pf-m-blue`	`.pf-v6-c-avatar`	Modifies avatar for blue styling.
`.pf-m-purple`	`.pf-v6-c-avatar`	Modifies avatar for purple styling.
`.pf-m-gray`	`.pf-v6-c-avatar`	Modifies avatar for gray styling.

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