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

Custom background image

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)	null	The parent container to append the modal to. Defaults to document.body
backgroundImageSrc	string	''	The URL 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
isOpen	boolean	false	Flag to show the about modal
noAboutModalBoxContentContainer	boolean	false	Prevents the about modal from rendering content inside a container; allows for more flexible layouts
onClose	() => void	(): any => undefined	A callback for when the close button is clicked
productName	string	''	Product name
trademark	string	''	Trademark information

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	#2b9af3
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-about-modal-box	--pf-global--link--Color--hover	#2b9af3
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.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.pf-m-plain: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)

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines