About modal

The about modal displays information about an application like product version number(s), as well as any appropriate legal text. Related design guidelines: About modal

Examples Props CSS Variables

Examples

Basic

Without product name

Complex user positioned content

Custom background image

Props

AboutModal properties
Name	Type	Required	Default	Description
children	React.ReactNode	Yes		Content rendered inside the about modal
className	string	No	''	Additional classes added to the about modal
isOpen	boolean	No	false	Flag to show the about modal
onClose	() => void	No	(): any => undefined	A callback for when the close button is clicked
productName	string	No	''	Product name
trademark	string	No	''	Trademark information
brandImageSrc	string	Yes		The URL of the image for the brand
brandImageAlt	string	Yes		The alternate text of the brand image
backgroundImageSrc	string	No	''	The URL of the image for the background
noAboutModalBoxContentContainer	boolean	No	false	Prevents the about modal from rendering content inside a container; allows for more flexible layouts
appendTo	HTMLElement \| (() => HTMLElement)	No	null	The parent container to append the modal to. Defaults to document.body
closeButtonAriaLabel	string	No		Set aria label to the close button

CSS Variables


	.pf-c-about-modal-box	--pf-global--Color--100	#fff
--pf-global--Color--100 --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box	--pf-global--Color--200	#f0f0f0
--pf-global--Color--200 --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-about-modal-box	--pf-global--BorderColor--100	#b8bbbe
--pf-global--BorderColor--100 --pf-global--BorderColor--light-100 $pf-global--BorderColor--light-100 $pf-color-black-400 #b8bbbe
	.pf-c-about-modal-box	--pf-global--primary-color--100	#73bcf7
--pf-global--primary-color--100 --pf-global--primary-color--light-100 $pf-global--primary-color--light-100 $pf-color-blue-200 #73bcf7
	.pf-c-about-modal-box	--pf-global--link--Color	#73bcf7
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-about-modal-box	--pf-global--link--Color--hover	#73bcf7
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-about-modal-box	--pf-global--BackgroundColor--100	#151515
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-about-modal-box	--pf-c-about-modal-box--BackgroundColor	#030303
--pf-c-about-modal-box--BackgroundColor --pf-global--palette--black-1000 $pf-color-black-1000 #030303
	.pf-c-about-modal-box	--pf-c-about-modal-box--BoxShadow	0 0 100px 0 rgba(255, 255, 255, .05)
	.pf-c-about-modal-box	--pf-c-about-modal-box--ZIndex	500
--pf-c-about-modal-box--ZIndex --pf-global--ZIndex--xl $pf-global--ZIndex--xl 500
	.pf-c-about-modal-box	--pf-c-about-modal-box--Height	100%
	.pf-c-about-modal-box	--pf-c-about-modal-box--lg--Height	47.625rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--lg--MaxHeight	calc(100% - 2rem)
--pf-c-about-modal-box--lg--MaxHeight calc(100% - --pf-global--spacer--xl) calc(100% - $pf-global--spacer--xl) calc(100% - pf-size-prem(32px)) calc(100% - 2rem)
	.pf-c-about-modal-box	--pf-c-about-modal-box--Width	100vw
	.pf-c-about-modal-box	--pf-c-about-modal-box--lg--Width	calc(100% - (4rem * 2))
--pf-c-about-modal-box--lg--Width calc(100% - (--pf-global--spacer--3xl * 2)) calc(100% - ($pf-global--spacer--3xl * 2)) calc(100% - (pf-size-prem(64px) * 2)) calc(100% - (4rem * 2))
	.pf-c-about-modal-box	--pf-c-about-modal-box--lg--MaxWidth	77rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--PaddingTop	2rem
--pf-c-about-modal-box--PaddingTop --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--PaddingRight	2rem
--pf-c-about-modal-box--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--PaddingBottom	2rem
--pf-c-about-modal-box--PaddingBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--PaddingLeft	2rem
--pf-c-about-modal-box--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--sm--PaddingTop	4rem
--pf-c-about-modal-box--sm--PaddingTop --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--sm--PaddingRight	4rem
--pf-c-about-modal-box--sm--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--sm--PaddingBottom	4rem
--pf-c-about-modal-box--sm--PaddingBottom --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--sm--PaddingLeft	4rem
--pf-c-about-modal-box--sm--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box--sm--grid-template-columns	5fr 1fr
	.pf-c-about-modal-box	--pf-c-about-modal-box--lg--grid-template-columns	1fr .6fr
	.pf-c-about-modal-box	--pf-c-about-modal-box__brand--PaddingTop	3rem
--pf-c-about-modal-box__brand--PaddingTop --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__brand--PaddingRight	2rem
--pf-c-about-modal-box__brand--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__brand--PaddingLeft	2rem
--pf-c-about-modal-box__brand--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__brand--PaddingBottom	2rem
--pf-c-about-modal-box__brand--PaddingBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__brand--sm--PaddingRight	4rem
--pf-c-about-modal-box__brand--sm--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__brand--sm--PaddingLeft	4rem
--pf-c-about-modal-box__brand--sm--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__brand--sm--PaddingBottom	4rem
--pf-c-about-modal-box__brand--sm--PaddingBottom --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--ZIndex	600
--pf-c-about-modal-box__close--ZIndex --pf-global--ZIndex--2xl $pf-global--ZIndex--2xl 600
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--PaddingTop	3rem
--pf-c-about-modal-box__close--PaddingTop --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--PaddingRight	2rem
--pf-c-about-modal-box__close--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--PaddingBottom	2rem
--pf-c-about-modal-box__close--PaddingBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--sm--PaddingBottom	4rem
--pf-c-about-modal-box__close--sm--PaddingBottom --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--sm--PaddingRight	0
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--lg--PaddingRight	4rem
--pf-c-about-modal-box__close--lg--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--c-button--Color	#151515
--pf-c-about-modal-box__close--c-button--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--c-button--FontSize	1.25rem
--pf-c-about-modal-box__close--c-button--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--c-button--BorderRadius	30em
--pf-c-about-modal-box__close--c-button--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--c-button--Width	calc(1.25rem * 2)
--pf-c-about-modal-box__close--c-button--Width calc(--pf-c-about-modal-box__close--c-button--FontSize * 2) calc(--pf-global--FontSize--xl * 2) calc($pf-global--FontSize--xl * 2) calc(pf-font-prem(20px) * 2) calc(1.25rem * 2)
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--c-button--Height	calc(1.25rem * 2)
--pf-c-about-modal-box__close--c-button--Height calc(--pf-c-about-modal-box__close--c-button--FontSize * 2) calc(--pf-global--FontSize--xl * 2) calc($pf-global--FontSize--xl * 2) calc(pf-font-prem(20px) * 2) calc(1.25rem * 2)
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--c-button--BackgroundColor	#030303
--pf-c-about-modal-box__close--c-button--BackgroundColor --pf-global--palette--black-1000 $pf-color-black-1000 #030303
	.pf-c-about-modal-box	--pf-c-about-modal-box__close--c-button--hover--BackgroundColor	rgba(3, 3, 3, 0.4)
	.pf-c-about-modal-box	--pf-c-about-modal-box__hero--sm--BackgroundImage	url("../../assets/images/pfbg_992@2x.jpg")
	.pf-c-about-modal-box	--pf-c-about-modal-box__hero--sm--BackgroundPosition	top left
	.pf-c-about-modal-box	--pf-c-about-modal-box__hero--sm--BackgroundSize	cover
	.pf-c-about-modal-box	--pf-c-about-modal-box__brand-image--Height	2.5rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__header--PaddingRight	2rem
--pf-c-about-modal-box__header--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__header--PaddingBottom	0.5rem
--pf-c-about-modal-box__header--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__header--PaddingLeft	2rem
--pf-c-about-modal-box__header--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__header--sm--PaddingRight	4rem
--pf-c-about-modal-box__header--sm--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__header--sm--PaddingLeft	4rem
--pf-c-about-modal-box__header--sm--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__strapline--PaddingTop	2rem
--pf-c-about-modal-box__strapline--PaddingTop --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__strapline--FontSize	0.875rem
--pf-c-about-modal-box__strapline--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__strapline--sm--PaddingTop	3rem
--pf-c-about-modal-box__strapline--sm--PaddingTop --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__content--MarginTop	2rem
--pf-c-about-modal-box__content--MarginTop --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__content--MarginRight	2rem
--pf-c-about-modal-box__content--MarginRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__content--MarginBottom	2rem
--pf-c-about-modal-box__content--MarginBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__content--MarginLeft	2rem
--pf-c-about-modal-box__content--MarginLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__content--sm--MarginTop	3rem
--pf-c-about-modal-box__content--sm--MarginTop --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__content--sm--MarginRight	4rem
--pf-c-about-modal-box__content--sm--MarginRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__content--sm--MarginBottom	3rem
--pf-c-about-modal-box__content--sm--MarginBottom --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-about-modal-box	--pf-c-about-modal-box__content--sm--MarginLeft	4rem
--pf-c-about-modal-box__content--sm--MarginLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-about-modal-box .pf-c-card	--pf-c-card--BackgroundColor	rgba(#030303, .32)
--pf-c-card--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-primary--Color	#06c
--pf-c-button--m-primary--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-primary--hover--Color	#06c
--pf-c-button--m-primary--hover--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-primary--focus--Color	#06c
--pf-c-button--m-primary--focus--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-primary--active--Color	#06c
--pf-c-button--m-primary--active--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-primary--BackgroundColor	#fff
--pf-c-button--m-primary--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-primary--hover--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-primary--focus--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-primary--active--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-secondary--Color	#fff
--pf-c-button--m-secondary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-secondary--hover--Color	#fff
--pf-c-button--m-secondary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-secondary--focus--Color	#fff
--pf-c-button--m-secondary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-secondary--active--Color	#fff
--pf-c-button--m-secondary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-secondary--BorderColor	#fff
--pf-c-button--m-secondary--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-secondary--hover--BorderColor	#fff
--pf-c-button--m-secondary--hover--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-secondary--focus--BorderColor	#fff
--pf-c-button--m-secondary--focus--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box .pf-c-button	--pf-c-button--m-secondary--active--BorderColor	#fff
--pf-c-button--m-secondary--active--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-about-modal-box__close .pf-c-button:hover	--pf-c-about-modal-box__close--c-button--BackgroundColor	rgba(3, 3, 3, 0.4)
--pf-c-about-modal-box__close--c-button--BackgroundColor --pf-c-about-modal-box__close--c-button--hover--BackgroundColor rgba(3, 3, 3, 0.4)