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--100global_Color_100
#fff
.pf-c-about-modal-box--pf-global--Color--200global_Color_200
#ededed
.pf-c-about-modal-box--pf-global--BorderColor--100global_BorderColor_100
#b8bbbe
.pf-c-about-modal-box--pf-global--primary-color--100global_primary_color_100
#73bcf7
.pf-c-about-modal-box--pf-global--link--Colorglobal_link_Color
#73bcf7
.pf-c-about-modal-box--pf-global--link--Color--hoverglobal_link_Color_hover
#73bcf7
.pf-c-about-modal-box--pf-global--BackgroundColor--100global_BackgroundColor_100
#151515
.pf-c-about-modal-box--pf-c-about-modal-box--BackgroundColorc_about_modal_box_BackgroundColor
#030303
.pf-c-about-modal-box--pf-c-about-modal-box--BoxShadowc_about_modal_box_BoxShadow
0 0 100px 0 rgba(255, 255, 255, .05)
.pf-c-about-modal-box--pf-c-about-modal-box--ZIndexc_about_modal_box_ZIndex
500
.pf-c-about-modal-box--pf-c-about-modal-box--Heightc_about_modal_box_Height
100%
.pf-c-about-modal-box--pf-c-about-modal-box--lg--Heightc_about_modal_box_lg_Height
47.625rem
.pf-c-about-modal-box--pf-c-about-modal-box--lg--MaxHeightc_about_modal_box_lg_MaxHeight
calc(100% - 2rem)
.pf-c-about-modal-box--pf-c-about-modal-box--Widthc_about_modal_box_Width
100vw
.pf-c-about-modal-box--pf-c-about-modal-box--lg--Widthc_about_modal_box_lg_Width
calc(100% - (4rem * 2))
.pf-c-about-modal-box--pf-c-about-modal-box--lg--MaxWidthc_about_modal_box_lg_MaxWidth
77rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingTopc_about_modal_box_PaddingTop
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingRightc_about_modal_box_PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingBottomc_about_modal_box_PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingLeftc_about_modal_box_PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingTopc_about_modal_box_sm_PaddingTop
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingRightc_about_modal_box_sm_PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingBottomc_about_modal_box_sm_PaddingBottom
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingLeftc_about_modal_box_sm_PaddingLeft
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--grid-template-columnsc_about_modal_box_sm_grid_template_columns
5fr 1fr
.pf-c-about-modal-box--pf-c-about-modal-box--lg--grid-template-columnsc_about_modal_box_lg_grid_template_columns
1fr .6fr
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingTopc_about_modal_box__brand_PaddingTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingRightc_about_modal_box__brand_PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingLeftc_about_modal_box__brand_PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingBottomc_about_modal_box__brand_PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingRightc_about_modal_box__brand_sm_PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingLeftc_about_modal_box__brand_sm_PaddingLeft
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingBottomc_about_modal_box__brand_sm_PaddingBottom
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--ZIndexc_about_modal_box__close_ZIndex
600
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingTopc_about_modal_box__close_PaddingTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingRightc_about_modal_box__close_PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingBottomc_about_modal_box__close_PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--sm--PaddingBottomc_about_modal_box__close_sm_PaddingBottom
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--sm--PaddingRightc_about_modal_box__close_sm_PaddingRight
0
.pf-c-about-modal-box--pf-c-about-modal-box__close--lg--PaddingRightc_about_modal_box__close_lg_PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--Colorc_about_modal_box__close_c_button_Color
#151515
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--FontSizec_about_modal_box__close_c_button_FontSize
1.25rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--BorderRadiusc_about_modal_box__close_c_button_BorderRadius
30em
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--Widthc_about_modal_box__close_c_button_Width
calc(1.25rem * 2)
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--Heightc_about_modal_box__close_c_button_Height
calc(1.25rem * 2)
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--BackgroundColorc_about_modal_box__close_c_button_BackgroundColor
#030303
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--hover--BackgroundColorc_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--BackgroundImagec_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--BackgroundPositionc_about_modal_box__hero_sm_BackgroundPosition
top left
.pf-c-about-modal-box--pf-c-about-modal-box__hero--sm--BackgroundSizec_about_modal_box__hero_sm_BackgroundSize
cover
.pf-c-about-modal-box--pf-c-about-modal-box__brand-image--Heightc_about_modal_box__brand_image_Height
2.5rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--PaddingRightc_about_modal_box__header_PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--PaddingBottomc_about_modal_box__header_PaddingBottom
0.5rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--PaddingLeftc_about_modal_box__header_PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--sm--PaddingRightc_about_modal_box__header_sm_PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--sm--PaddingLeftc_about_modal_box__header_sm_PaddingLeft
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--PaddingTopc_about_modal_box__strapline_PaddingTop
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--FontSizec_about_modal_box__strapline_FontSize
0.875rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--sm--PaddingTopc_about_modal_box__strapline_sm_PaddingTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginTopc_about_modal_box__content_MarginTop
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginRightc_about_modal_box__content_MarginRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginBottomc_about_modal_box__content_MarginBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginLeftc_about_modal_box__content_MarginLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginTopc_about_modal_box__content_sm_MarginTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginRightc_about_modal_box__content_sm_MarginRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginBottomc_about_modal_box__content_sm_MarginBottom
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginLeftc_about_modal_box__content_sm_MarginLeft
4rem
.pf-c-about-modal-box .pf-c-card--pf-c-card--BackgroundColorc_card_BackgroundColor
rgba(#030303, .32)
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--Colorc_button_m_primary_Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--hover--Colorc_button_m_primary_hover_Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--focus--Colorc_button_m_primary_focus_Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--active--Colorc_button_m_primary_active_Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--BackgroundColorc_button_m_primary_BackgroundColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--hover--BackgroundColorc_button_m_primary_hover_BackgroundColor
#ededed
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor
#ededed
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--active--BackgroundColorc_button_m_primary_active_BackgroundColor
#ededed
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--Colorc_button_m_secondary_Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--hover--Colorc_button_m_secondary_hover_Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--focus--Colorc_button_m_secondary_focus_Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--active--Colorc_button_m_secondary_active_Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--BorderColorc_button_m_secondary_BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--hover--BorderColorc_button_m_secondary_hover_BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--focus--BorderColorc_button_m_secondary_focus_BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--active--BorderColorc_button_m_secondary_active_BorderColor
#fff
.pf-c-about-modal-box__close .pf-c-button:hover--pf-c-about-modal-box__close--c-button--BackgroundColorc_about_modal_box__close_c_button_BackgroundColor
rgba(3, 3, 3, 0.4)