React

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.ReactNodeContent rendered inside the about modal
classNamestring''Additional classes added to the about modal
isOpenbooleanfalseFlag to show the about modal
onClose() => void(): any => undefinedA callback for when the close button is clicked
productNamestring''Product name
trademarkstring''Trademark information
brandImageSrcstringThe URL of the image for the brand
brandImageAltstringThe alternate text of the brand image
backgroundImageSrcstring''The URL of the image for the background
noAboutModalBoxContentContainerbooleanfalsePrevents the about modal from rendering content inside a container; allows for more flexible layouts
appendToHTMLElement | (() => HTMLElement)null as HTMLElementThe parent container to append the modal to. Defaults to document.body

CSS Variables

--pf-c-about-modal-box__brand-image--Heightc_about_modal_box__brand_image_Height
2.5rem
--pf-c-about-modal-box__brand--PaddingBottomc_about_modal_box__brand_PaddingBottom
2rem
--pf-c-about-modal-box__brand--PaddingLeftc_about_modal_box__brand_PaddingLeft
2rem
--pf-c-about-modal-box__brand--PaddingRightc_about_modal_box__brand_PaddingRight
2rem
--pf-c-about-modal-box__brand--PaddingTopc_about_modal_box__brand_PaddingTop
3rem
--pf-c-about-modal-box__brand--sm--PaddingBottomc_about_modal_box__brand_sm_PaddingBottom
4rem
--pf-c-about-modal-box__brand--sm--PaddingLeftc_about_modal_box__brand_sm_PaddingLeft
4rem
--pf-c-about-modal-box__brand--sm--PaddingRightc_about_modal_box__brand_sm_PaddingRight
4rem
--pf-c-about-modal-box__close--c-button--BackgroundColorc_about_modal_box__close_c_button_BackgroundColor
rgba(3,3,3,0.4)
--pf-c-about-modal-box__close--c-button--BorderRadiusc_about_modal_box__close_c_button_BorderRadius
30em
--pf-c-about-modal-box__close--c-button--Colorc_about_modal_box__close_c_button_Color
#151515
--pf-c-about-modal-box__close--c-button--FontSizec_about_modal_box__close_c_button_FontSize
1.25rem
--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__close--c-button--hover--BackgroundColorc_about_modal_box__close_c_button_hover_BackgroundColor
rgba(3,3,3,0.4)
--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__close--lg--PaddingRightc_about_modal_box__close_lg_PaddingRight
4rem
--pf-c-about-modal-box__close--PaddingBottomc_about_modal_box__close_PaddingBottom
2rem
--pf-c-about-modal-box__close--PaddingRightc_about_modal_box__close_PaddingRight
2rem
--pf-c-about-modal-box__close--PaddingTopc_about_modal_box__close_PaddingTop
3rem
--pf-c-about-modal-box__close--sm--PaddingBottomc_about_modal_box__close_sm_PaddingBottom
4rem
--pf-c-about-modal-box__close--sm--PaddingRightc_about_modal_box__close_sm_PaddingRight
0
--pf-c-about-modal-box__close--ZIndexc_about_modal_box__close_ZIndex
600
--pf-c-about-modal-box__content--MarginBottomc_about_modal_box__content_MarginBottom
2rem
--pf-c-about-modal-box__content--MarginLeftc_about_modal_box__content_MarginLeft
2rem
--pf-c-about-modal-box__content--MarginRightc_about_modal_box__content_MarginRight
2rem
--pf-c-about-modal-box__content--MarginTopc_about_modal_box__content_MarginTop
2rem
--pf-c-about-modal-box__content--sm--MarginBottomc_about_modal_box__content_sm_MarginBottom
3rem
--pf-c-about-modal-box__content--sm--MarginLeftc_about_modal_box__content_sm_MarginLeft
4rem
--pf-c-about-modal-box__content--sm--MarginRightc_about_modal_box__content_sm_MarginRight
4rem
--pf-c-about-modal-box__content--sm--MarginTopc_about_modal_box__content_sm_MarginTop
3rem
--pf-c-about-modal-box__header--PaddingBottomc_about_modal_box__header_PaddingBottom
0.5rem
--pf-c-about-modal-box__header--PaddingLeftc_about_modal_box__header_PaddingLeft
2rem
--pf-c-about-modal-box__header--PaddingRightc_about_modal_box__header_PaddingRight
2rem
--pf-c-about-modal-box__header--sm--PaddingLeftc_about_modal_box__header_sm_PaddingLeft
4rem
--pf-c-about-modal-box__header--sm--PaddingRightc_about_modal_box__header_sm_PaddingRight
4rem
--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__hero--sm--BackgroundPositionc_about_modal_box__hero_sm_BackgroundPosition
top left
--pf-c-about-modal-box__hero--sm--BackgroundSizec_about_modal_box__hero_sm_BackgroundSize
cover
--pf-c-about-modal-box__strapline--FontSizec_about_modal_box__strapline_FontSize
0.875rem
--pf-c-about-modal-box__strapline--PaddingTopc_about_modal_box__strapline_PaddingTop
2rem
--pf-c-about-modal-box__strapline--sm--PaddingTopc_about_modal_box__strapline_sm_PaddingTop
3rem
--pf-c-about-modal-box--BackgroundColorc_about_modal_box_BackgroundColor
#030303
--pf-c-about-modal-box--BoxShadowc_about_modal_box_BoxShadow
0 0 100px 0 hsla(0,0%,100%,0.05)
--pf-c-about-modal-box--Heightc_about_modal_box_Height
100%
--pf-c-about-modal-box--lg--grid-template-columnsc_about_modal_box_lg_grid_template_columns
1fr .6fr
--pf-c-about-modal-box--lg--Heightc_about_modal_box_lg_Height
47.625rem
--pf-c-about-modal-box--lg--MaxHeightc_about_modal_box_lg_MaxHeight
calc(100% - 2rem)
--pf-c-about-modal-box--lg--MaxWidthc_about_modal_box_lg_MaxWidth
77rem
--pf-c-about-modal-box--lg--Widthc_about_modal_box_lg_Width
calc(100% - 4rem*2)
--pf-c-about-modal-box--PaddingBottomc_about_modal_box_PaddingBottom
2rem
--pf-c-about-modal-box--PaddingLeftc_about_modal_box_PaddingLeft
2rem
--pf-c-about-modal-box--PaddingRightc_about_modal_box_PaddingRight
2rem
--pf-c-about-modal-box--PaddingTopc_about_modal_box_PaddingTop
2rem
--pf-c-about-modal-box--sm--grid-template-columnsc_about_modal_box_sm_grid_template_columns
5fr 1fr
--pf-c-about-modal-box--sm--PaddingBottomc_about_modal_box_sm_PaddingBottom
4rem
--pf-c-about-modal-box--sm--PaddingLeftc_about_modal_box_sm_PaddingLeft
4rem
--pf-c-about-modal-box--sm--PaddingRightc_about_modal_box_sm_PaddingRight
4rem
--pf-c-about-modal-box--sm--PaddingTopc_about_modal_box_sm_PaddingTop
4rem
--pf-c-about-modal-box--Widthc_about_modal_box_Width
100vw
--pf-c-about-modal-box--ZIndexc_about_modal_box_ZIndex
500