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.ReactNode
classNamestring''
isOpenbooleanfalse
onClose() => void(): any => undefined
productNamestring''
trademarkstring''
brandImageSrcstring
brandImageAltstring
backgroundImageSrcstring''
noAboutModalBoxContentContainerbooleanfalse
appendToHTMLElement | (() => HTMLElement)null as HTMLElement

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