Skip to Content
Patternfly Logo

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

ExamplesPropsCSS Variables

Examples

Basic

Without product name

Complex user positioned content

Custom background image

Props

AboutModal properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered inside the about modal
classNamestringNo''Additional classes added to the about modal
isOpenbooleanNofalseFlag to show the about modal
onClose() => voidNo(): any => undefinedA callback for when the close button is clicked
productNamestringNo''Product name
trademarkstringNo''Trademark information
brandImageSrcstringYesThe URL of the image for the brand
brandImageAltstringYesThe alternate text of the brand image
backgroundImageSrcstringNo''The URL of the image for the background
noAboutModalBoxContentContainerbooleanNofalsePrevents the about modal from rendering content inside a container; allows for more flexible layouts
appendToHTMLElement | (() => HTMLElement)NonullThe parent container to append the modal to. Defaults to document.body
closeButtonAriaLabelstringNoSet aria label to the close button

CSS Variables

.pf-c-about-modal-box--pf-global--Color--100
#fff
.pf-c-about-modal-box--pf-global--Color--200
#f0f0f0
.pf-c-about-modal-box--pf-global--BorderColor--100
#b8bbbe
.pf-c-about-modal-box--pf-global--primary-color--100
#73bcf7
.pf-c-about-modal-box--pf-global--link--Color
#73bcf7
.pf-c-about-modal-box--pf-global--link--Color--hover
#73bcf7
.pf-c-about-modal-box--pf-global--BackgroundColor--100
#151515
.pf-c-about-modal-box--pf-c-about-modal-box--BackgroundColor
#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--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--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--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--pf-c-about-modal-box--PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingTop
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingBottom
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingLeft
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--pf-c-about-modal-box__brand--PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingLeft
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingBottom
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--ZIndex
600
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--sm--PaddingBottom
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--pf-c-about-modal-box__close--c-button--Color
#151515
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--FontSize
1.25rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--BorderRadius
30em
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--Width
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--pf-c-about-modal-box__close--c-button--BackgroundColor
#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--pf-c-about-modal-box__header--PaddingBottom
0.5rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--sm--PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--sm--PaddingLeft
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--PaddingTop
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--FontSize
0.875rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--sm--PaddingTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginTop
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginBottom
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginLeft
4rem
.pf-c-about-modal-box .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#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)