Skip to content
Patternfly Logo

About modal

Examples

Basic

Without product name

Complex user positioned content

Custom background image

Props

AboutModal

*required
NameTypeDefaultDescription
brandImageAltrequiredstringThe alternate text of the brand image
brandImageSrcrequiredstringThe URL of the image for the brand
childrenrequiredReact.ReactNodeContent rendered inside the about modal
appendToHTMLElement | (() => HTMLElement)nullThe parent container to append the modal to. Defaults to document.body
backgroundImageSrcstring''The URL of the image for the background
classNamestring''Additional classes added to the about modal
closeButtonAriaLabelstringSet aria label to the close button
disableFocusTrapbooleanFlag to disable focus trap
isOpenbooleanfalseFlag to show the about modal
noAboutModalBoxContentContainerbooleanfalsePrevents the about modal from rendering content inside a container; allows for more flexible layouts
onClose() => void(): any => undefinedA callback for when the close button is clicked
productNamestring''Product name
trademarkstring''Trademark information

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
#2b9af3
.pf-c-about-modal-box--pf-global--link--Color--hover
#2b9af3
.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)

View source on GitHub