Skip to Content
Patternfly Logo

About modal box

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

ExamplesDocumentationCSS Variables

Examples

Documentation

Accessibility

AttributeApplies toOutcome
role="dialog".pf-c-about-modal-boxIdentifies the element that serves as the modal container. Required
aria-labelledby="[id value of element describing modal]".pf-c-about-modal-boxGives the modal an accessible name by referring to the element that provides the dialog title. Required when adequate titling element is present
aria-label="[title of modal]".pf-c-about-modal-boxGives the modal an accessible name. Required when adequate titling element is not present
aria-describedby="[id value of applicable content]".pf-c-about-modal-boxGives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal.
aria-modal="true".pf-c-modal-boxTells assistive technologies that the windows underneath the current modal are not available for interaction. Required
aria-label="Close Dialog".pf-c-modal-box__close .pf-c-buttonProvides an accessible name for the close button as it uses an icon instead of text. Required
aria-hidden="true"Parent element containing the page contents when the modal is open.Hides main contents of the page from screen readers. The element with .pf-c-modal-box must not be a descendent of the element with aria-hidden="true". For more info see trapping focus Required

Usage

ClassApplied toOutcome
.pf-c-about-modal-box<div>, <article>Initiates a modal box.
.pf-c-about-modal-box__brand<div>Initiates a modal box brand cell.
.pf-c-about-modal-box__brand-image<img>Initiates a modal box brand image.
.pf-c-about-modal-box__close<div>Initiates a modal box close cell.
.pf-c-about-modal-box__header<div>, <header>Initiates a modal box header cell.
.pf-c-about-modal-box__hero<div>Initiates a modal box hero cell.
.pf-c-about-modal-box__content<div>Initiates a modal box content cell.
.pf-c-about-modal-box__body<div>Initiates a modal box body cell.
.pf-c-about-modal-box__strapline<p>Initiates a modal box strapline cell.

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
#f0f0f0
.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
#f0f0f0
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor
#f0f0f0
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--active--BackgroundColorc_button_m_primary_active_BackgroundColor
#f0f0f0
.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.pf-m-plain:hover--pf-c-about-modal-box__close--c-button--BackgroundColorc_about_modal_box__close_c_button_BackgroundColor
rgba(3, 3, 3, 0.4)