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

Simple about modal

Copied to clipboard

About modal without product name

Copied to clipboard

About modal with more complex user-positioned content

Copied to clipboard

About modal with custom background image

Copied to clipboard

Props

AboutModal props

The AboutModal component accepts the following props.

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

CSS variables

--pf-c-about-modal-box--BackgroundColorc_about_modal_box_BackgroundColor#030303
--pf-c-about-modal-box--BoxShadowc_about_modal_box_BoxShadow0 0 100px 0 hsla(0,0%,100%,.05)
--pf-c-about-modal-box--Heightc_about_modal_box_Height100%
--pf-c-about-modal-box--PaddingBottomc_about_modal_box_PaddingBottom2rem
--pf-c-about-modal-box--PaddingLeftc_about_modal_box_PaddingLeft2rem
--pf-c-about-modal-box--PaddingRightc_about_modal_box_PaddingRight2rem
--pf-c-about-modal-box--PaddingTopc_about_modal_box_PaddingTop2rem
--pf-c-about-modal-box--Widthc_about_modal_box_Width100vw
--pf-c-about-modal-box--ZIndexc_about_modal_box_ZIndex500
--pf-c-about-modal-box__brand--PaddingBottomc_about_modal_box__brand_PaddingBottom2rem
--pf-c-about-modal-box__brand--PaddingLeftc_about_modal_box__brand_PaddingLeft2rem
--pf-c-about-modal-box__brand--PaddingRightc_about_modal_box__brand_PaddingRight2rem
--pf-c-about-modal-box__brand--PaddingTopc_about_modal_box__brand_PaddingTop3rem
--pf-c-about-modal-box__brand-image--Heightc_about_modal_box__brand_image_Height2.5rem
--pf-c-about-modal-box__brand--sm--PaddingBottomc_about_modal_box__brand_sm_PaddingBottom4rem
--pf-c-about-modal-box__brand--sm--PaddingLeftc_about_modal_box__brand_sm_PaddingLeft4rem
--pf-c-about-modal-box__brand--sm--PaddingRightc_about_modal_box__brand_sm_PaddingRight4rem
--pf-c-about-modal-box__close--PaddingBottomc_about_modal_box__close_PaddingBottom2rem
--pf-c-about-modal-box__close--PaddingRightc_about_modal_box__close_PaddingRight2rem
--pf-c-about-modal-box__close--PaddingTopc_about_modal_box__close_PaddingTop3rem
--pf-c-about-modal-box__close--ZIndexc_about_modal_box__close_ZIndex600
--pf-c-about-modal-box__close--c-button--BackgroundColorc_about_modal_box__close_c_button_BackgroundColorrgba(3,3,3,.4)
--pf-c-about-modal-box__close--c-button--BorderRadiusc_about_modal_box__close_c_button_BorderRadius30em
--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_FontSize1.25rem
--pf-c-about-modal-box__close--c-button--Heightc_about_modal_box__close_c_button_Heightcalc(1.25rem * 2)
--pf-c-about-modal-box__close--c-button--Widthc_about_modal_box__close_c_button_Widthcalc(1.25rem * 2)
--pf-c-about-modal-box__close--c-button--hover--BackgroundColorc_about_modal_box__close_c_button_hover_BackgroundColorrgba(3,3,3,.4)
--pf-c-about-modal-box__close--lg--PaddingRightc_about_modal_box__close_lg_PaddingRight4rem
--pf-c-about-modal-box__close--sm--PaddingBottomc_about_modal_box__close_sm_PaddingBottom4rem
--pf-c-about-modal-box__close--sm--PaddingRightc_about_modal_box__close_sm_PaddingRight0
--pf-c-about-modal-box__content--MarginBottomc_about_modal_box__content_MarginBottom2rem
--pf-c-about-modal-box__content--MarginLeftc_about_modal_box__content_MarginLeft2rem
--pf-c-about-modal-box__content--MarginRightc_about_modal_box__content_MarginRight2rem
--pf-c-about-modal-box__content--MarginTopc_about_modal_box__content_MarginTop2rem
--pf-c-about-modal-box__content--sm--MarginBottomc_about_modal_box__content_sm_MarginBottom3rem
--pf-c-about-modal-box__content--sm--MarginLeftc_about_modal_box__content_sm_MarginLeft4rem
--pf-c-about-modal-box__content--sm--MarginRightc_about_modal_box__content_sm_MarginRight4rem
--pf-c-about-modal-box__content--sm--MarginTopc_about_modal_box__content_sm_MarginTop3rem
--pf-c-about-modal-box__header--PaddingBottomc_about_modal_box__header_PaddingBottom0.5rem
--pf-c-about-modal-box__header--PaddingLeftc_about_modal_box__header_PaddingLeft2rem
--pf-c-about-modal-box__header--PaddingRightc_about_modal_box__header_PaddingRight2rem
--pf-c-about-modal-box__header--sm--PaddingLeftc_about_modal_box__header_sm_PaddingLeft4rem
--pf-c-about-modal-box__header--sm--PaddingRightc_about_modal_box__header_sm_PaddingRight4rem
--pf-c-about-modal-box__hero--sm--BackgroundImagec_about_modal_box__hero_sm_BackgroundImageurl(assets/images/pfbg_992@2x.jpg)
--pf-c-about-modal-box__hero--sm--BackgroundPositionc_about_modal_box__hero_sm_BackgroundPositiontop left
--pf-c-about-modal-box__hero--sm--BackgroundSizec_about_modal_box__hero_sm_BackgroundSizecover
--pf-c-about-modal-box__strapline--FontSizec_about_modal_box__strapline_FontSize0.875rem
--pf-c-about-modal-box__strapline--PaddingTopc_about_modal_box__strapline_PaddingTop2rem
--pf-c-about-modal-box__strapline--sm--PaddingTopc_about_modal_box__strapline_sm_PaddingTop3rem
--pf-c-about-modal-box--lg--Heightc_about_modal_box_lg_Height47.625rem
--pf-c-about-modal-box--lg--MaxHeightc_about_modal_box_lg_MaxHeightcalc(100% - 2rem)
--pf-c-about-modal-box--lg--MaxWidthc_about_modal_box_lg_MaxWidth77rem
--pf-c-about-modal-box--lg--Widthc_about_modal_box_lg_Widthcalc(100% - (4rem * 2))
--pf-c-about-modal-box--lg--grid-template-columnsc_about_modal_box_lg_grid_template_columns1fr .6fr
--pf-c-about-modal-box--sm--PaddingBottomc_about_modal_box_sm_PaddingBottom4rem
--pf-c-about-modal-box--sm--PaddingLeftc_about_modal_box_sm_PaddingLeft4rem
--pf-c-about-modal-box--sm--PaddingRightc_about_modal_box_sm_PaddingRight4rem
--pf-c-about-modal-box--sm--PaddingTopc_about_modal_box_sm_PaddingTop4rem
--pf-c-about-modal-box--sm--grid-template-columnsc_about_modal_box_sm_grid_template_columns5fr 1fr