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

Props

AboutModal Props

The AboutModal component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodeContent rendered inside the about modal
classNamestring''Additional classes added to the about modal
isOpenboolfalseFlag to show the about modal
onClosefunc() => 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
logoImageSrcstring''The URL of the image for the logo
logoImageAltcustom''The alternate text of the logo image
noAboutModalBoxContentContainerboolfalsePrevents the about modal from rendering content inside a container; allows for more flexible layouts
anyAdditional props are passed and spread to the modal content container <div>

AboutModalBox Props

The AboutModalBox component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodecontent rendered inside the AboutModelBox.
classNamestring''additional classes added to the AboutModalBox
aria-labelledbystringid to use for About Modal Box aria-labelledby attribute
aria-describedbystringid to use for About Modal Box aria-describedby attribute
anyAdditional props are spread to the container <div>

AboutModalBoxContent Props

The AboutModalBoxContent component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodecontent rendered inside the AboutModalBoxContent
classNamestring''additional classes added to the AboutModalBoxContent
idstringid to use for About Modal Box aria described by
trademarkstringThe Trademark info for the product
anyAdditional props are spread to the container <div>

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_ZIndex600
--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.3125rem
--pf-c-about-modal-box__close--c-button--Heightc_about_modal_box__close_c_button_Heightcalc(1.3125rem * 2)
--pf-c-about-modal-box__close--c-button--Widthc_about_modal_box__close_c_button_Widthcalc(1.3125rem * 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--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