HTML

About modal box

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.
.pf-m-hover.pf-c-about-modal-box__close .pf-c-button.pf-m-actionForces display of the hover state of the button. This state is primarily for demonstration purposes and would not normally be used in lieu of the :hover pseudo-class.

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/[email protected])
--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