About modal

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

Examples

Basic

Without product name

Complex user positioned content

Props

AboutModal

*required
Name	Type	Default	Description
brandImageAltrequired	string		The alternate text of the brand image
brandImageSrcrequired	string		The URL of the image for the brand
childrenrequired	React.ReactNode		Content rendered inside the about modal
appendTo	HTMLElement \| (() => HTMLElement)		The parent container to append the modal to. Defaults to document.body
aria-label	string		Aria label for the about modal. This should be used when no productName prop is provided
backgroundImageSrc	string		The URL or file path of the image for the background
className	string		Additional classes added to the about modal
closeButtonAriaLabel	string		Set aria label to the close button
disableFocusTrap	boolean		Flag to disable focus trap
hasNoContentContainer	boolean	false	Prevents the about modal from rendering content inside a container; allows for more flexible layouts
isOpen	boolean	false	Flag to show the about modal
onClose	(event: React.MouseEvent \| MouseEvent \| KeyboardEvent) => void	(_e): any => undefined	A callback for when the close button is clicked
productName	string		Product name
trademark	string		Trademark information

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

View source on GitHub