About modal

An about modal displays information about an application, like product version numbers and any appropriate legal text.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--BackgroundImage	none
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-about-modal-box--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--BackgroundSize--min-width	200px
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--BackgroundSize--width	60%
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--BackgroundSize--max-width	600px
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--BackgroundSize	clamp(200px, 60%, 600px)
--pf-v6-c-about-modal-box--BackgroundSize clamp(--pf-v6-c-about-modal-box--BackgroundSize--min-width, --pf-v6-c-about-modal-box--BackgroundSize--width, --pf-v6-c-about-modal-box--BackgroundSize--max-width) clamp(200px, 60%, 600px)
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--Height	100%
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--lg--Height	47.625rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--Width	100%
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--sm--GridTemplateColumns	5fr 1fr
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--lg--GridTemplateColumns	1fr .6fr
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__brand--PaddingBlockStart	3rem
--pf-v6-c-about-modal-box__brand--PaddingBlockStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__brand--PaddingInlineEnd	2rem
--pf-v6-c-about-modal-box__brand--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__brand--PaddingInlineStart	2rem
--pf-v6-c-about-modal-box__brand--PaddingInlineStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__brand--PaddingBlockEnd	2rem
--pf-v6-c-about-modal-box__brand--PaddingBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd	4rem
--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart	4rem
--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd	4rem
--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__close--ZIndex	600
--pf-v6-c-about-modal-box__close--ZIndex --pf-t--global--z-index--2xl --pf-t--global--z-index--600 600
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__close--PaddingBlockStart	3rem
--pf-v6-c-about-modal-box__close--PaddingBlockStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__close--PaddingInlineEnd	2rem
--pf-v6-c-about-modal-box__close--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__close--PaddingBlockEnd	2rem
--pf-v6-c-about-modal-box__close--PaddingBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd	4rem
--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd	4rem
--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__close--c-button--FontSize	1rem
--pf-v6-c-about-modal-box__close--c-button--FontSize --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__brand-image--Height	2.3125rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__header--PaddingInlineEnd	2rem
--pf-v6-c-about-modal-box__header--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__header--PaddingBlockEnd	0.5rem
--pf-v6-c-about-modal-box__header--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__header--PaddingInlineStart	2rem
--pf-v6-c-about-modal-box__header--PaddingInlineStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd	4rem
--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart	4rem
--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__strapline--PaddingBlockStart	2rem
--pf-v6-c-about-modal-box__strapline--PaddingBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__strapline--FontSize	0.75rem
--pf-v6-c-about-modal-box__strapline--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-about-modal-box	--pf-v6-c-about-modal-box__strapline--Color	(In light theme) #4d4d4d
--pf-v6-c-about-modal-box__strapline--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart	3rem
--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__content--MarginBlockStart	2rem
--pf-v6-c-about-modal-box__content--MarginBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__content--MarginInlineEnd	2rem
--pf-v6-c-about-modal-box__content--MarginInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__content--MarginBlockEnd	2rem
--pf-v6-c-about-modal-box__content--MarginBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__content--MarginInlineStart	2rem
--pf-v6-c-about-modal-box__content--MarginInlineStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__content--sm--MarginBlockStart	3rem
--pf-v6-c-about-modal-box__content--sm--MarginBlockStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd	4rem
--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd	3rem
--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box__content--sm--MarginInlineStart	4rem
--pf-v6-c-about-modal-box__content--sm--MarginInlineStart --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--BackgroundPosition	bottom right
	:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box	--pf-v6-c-about-modal-box--BackgroundPosition	bottom left