About modal

An about modal displays information about an application like product version number(s), as well as 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-v5-c-about-modal-box	--pf-v5-global--Color--100	#fff
--pf-v5-global--Color--100 --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff
	.pf-v5-c-about-modal-box	--pf-v5-global--Color--200	#f0f0f0
--pf-v5-global--Color--200 --pf-v5-global--Color--light-200 $pf-v5-global--Color--light-200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-about-modal-box	--pf-v5-global--BorderColor--100	#b8bbbe
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--light-100 $pf-v5-global--BorderColor--light-100 $pf-v5-color-black-400 #b8bbbe
	.pf-v5-c-about-modal-box	--pf-v5-global--primary-color--100	#73bcf7
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--light-100 $pf-v5-global--primary-color--light-100 $pf-v5-color-blue-200 #73bcf7
	.pf-v5-c-about-modal-box	--pf-v5-global--link--Color	#2b9af3
--pf-v5-global--link--Color --pf-v5-global--link--Color--light $pf-v5-global--link--Color--light $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3
	.pf-v5-c-about-modal-box	--pf-v5-global--link--Color--hover	#2b9af3
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--light $pf-v5-global--link--Color--light $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3
	.pf-v5-c-about-modal-box	--pf-v5-global--BackgroundColor--100	#151515
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515
	.pf-v5-c-about-modal-box	--pf-v5-global--icon--Color--light	#f0f0f0
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--light $pf-v5-global--icon--Color--light--light $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-about-modal-box	--pf-v5-global--icon--Color--dark	#fff
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--light $pf-v5-global--icon--Color--dark--light $pf-v5-color-white #fff
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--BackgroundImage	none
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--BackgroundColor	#030303
--pf-v5-c-about-modal-box--BackgroundColor --pf-v5-global--palette--black-1000 $pf-v5-color-black-1000 #030303
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--BackgroundPosition	bottom right
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--BackgroundSize--min-width	200px
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--BackgroundSize--width	60%
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--BackgroundSize--max-width	600px
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--BackgroundSize	clamp(200px, 60%, 600px)
--pf-v5-c-about-modal-box--BackgroundSize clamp(--pf-v5-c-about-modal-box--BackgroundSize--min-width, --pf-v5-c-about-modal-box--BackgroundSize--width, --pf-v5-c-about-modal-box--BackgroundSize--max-width) clamp(200px, 60%, 600px)
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--Height	100%
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--lg--Height	47.625rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--Width	100%
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--sm--GridTemplateColumns	5fr 1fr
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--lg--GridTemplateColumns	1fr .6fr
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__brand--PaddingTop	3rem
--pf-v5-c-about-modal-box__brand--PaddingTop --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__brand--PaddingRight	2rem
--pf-v5-c-about-modal-box__brand--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__brand--PaddingLeft	2rem
--pf-v5-c-about-modal-box__brand--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__brand--PaddingBottom	2rem
--pf-v5-c-about-modal-box__brand--PaddingBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__brand--sm--PaddingRight	4rem
--pf-v5-c-about-modal-box__brand--sm--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__brand--sm--PaddingLeft	4rem
--pf-v5-c-about-modal-box__brand--sm--PaddingLeft --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__brand--sm--PaddingBottom	4rem
--pf-v5-c-about-modal-box__brand--sm--PaddingBottom --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--ZIndex	600
--pf-v5-c-about-modal-box__close--ZIndex --pf-v5-global--ZIndex--2xl $pf-v5-global--ZIndex--2xl 600
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--PaddingTop	3rem
--pf-v5-c-about-modal-box__close--PaddingTop --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--PaddingRight	2rem
--pf-v5-c-about-modal-box__close--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--PaddingBottom	2rem
--pf-v5-c-about-modal-box__close--PaddingBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--sm--PaddingBottom	4rem
--pf-v5-c-about-modal-box__close--sm--PaddingBottom --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--lg--PaddingRight	4rem
--pf-v5-c-about-modal-box__close--lg--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--c-button--Color	#151515
--pf-v5-c-about-modal-box__close--c-button--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--c-button--FontSize	1.25rem
--pf-v5-c-about-modal-box__close--c-button--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--c-button--BorderRadius	30em
--pf-v5-c-about-modal-box__close--c-button--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--c-button--Width	calc(1.25rem * 2)
--pf-v5-c-about-modal-box__close--c-button--Width calc(--pf-v5-c-about-modal-box__close--c-button--FontSize * 2) calc(--pf-v5-global--FontSize--xl * 2) calc($pf-v5-global--FontSize--xl * 2) calc(pf-font-prem(20px) * 2) calc(1.25rem * 2)
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--c-button--Height	calc(1.25rem * 2)
--pf-v5-c-about-modal-box__close--c-button--Height calc(--pf-v5-c-about-modal-box__close--c-button--FontSize * 2) calc(--pf-v5-global--FontSize--xl * 2) calc($pf-v5-global--FontSize--xl * 2) calc(pf-font-prem(20px) * 2) calc(1.25rem * 2)
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--c-button--BackgroundColor	#030303
--pf-v5-c-about-modal-box__close--c-button--BackgroundColor --pf-v5-global--palette--black-1000 $pf-v5-color-black-1000 #030303
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor	rgba(3, 3, 3, 0.4)
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__brand-image--Height	2.5rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__header--PaddingRight	2rem
--pf-v5-c-about-modal-box__header--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__header--PaddingBottom	0.5rem
--pf-v5-c-about-modal-box__header--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__header--PaddingLeft	2rem
--pf-v5-c-about-modal-box__header--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__header--sm--PaddingRight	4rem
--pf-v5-c-about-modal-box__header--sm--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__header--sm--PaddingLeft	4rem
--pf-v5-c-about-modal-box__header--sm--PaddingLeft --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__strapline--PaddingTop	2rem
--pf-v5-c-about-modal-box__strapline--PaddingTop --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__strapline--FontSize	0.875rem
--pf-v5-c-about-modal-box__strapline--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__strapline--sm--PaddingTop	3rem
--pf-v5-c-about-modal-box__strapline--sm--PaddingTop --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__content--MarginTop	2rem
--pf-v5-c-about-modal-box__content--MarginTop --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__content--MarginRight	2rem
--pf-v5-c-about-modal-box__content--MarginRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__content--MarginBottom	2rem
--pf-v5-c-about-modal-box__content--MarginBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__content--MarginLeft	2rem
--pf-v5-c-about-modal-box__content--MarginLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__content--sm--MarginTop	3rem
--pf-v5-c-about-modal-box__content--sm--MarginTop --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__content--sm--MarginRight	4rem
--pf-v5-c-about-modal-box__content--sm--MarginRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__content--sm--MarginBottom	3rem
--pf-v5-c-about-modal-box__content--sm--MarginBottom --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box__content--sm--MarginLeft	4rem
--pf-v5-c-about-modal-box__content--sm--MarginLeft --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-v5-c-about-modal-box .pf-v5-c-button	--pf-v5-c-button--m-primary--BackgroundColor	#06c
--pf-v5-c-button--m-primary--BackgroundColor --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c
	:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box	--pf-v5-c-about-modal-box--BackgroundPosition	bottom left
	.pf-v5-c-about-modal-box__close .pf-v5-c-button.pf-m-plain:hover	--pf-v5-c-about-modal-box__close--c-button--BackgroundColor	rgba(3, 3, 3, 0.4)
--pf-v5-c-about-modal-box__close--c-button--BackgroundColor --pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor rgba(3, 3, 3, 0.4)

View source on GitHub