HTML

Modal box

ExamplesDocumentationCSS Variables

Examples

Basic

Small

Large

Without header

Documentation

Overiew

A modal box is a generic rectangular container that can be used to build modals. A modal box can have three sections: header, body, and footer. Header or body is required. If no .pf-c-title is used, aria-label="[title of modal]" must be provided for .pf-c-modal-box.

Accessibility

AttributeApplies toOutcome
role="dialog".pf-c-modal-boxIdentifies the element that serves as the modal container. Required
aria-labelledby="[id value of .pf-c-title]".pf-c-modal-boxGives the modal an accessible name by referring to the element that provides the dialog title. Required when .pf-c-title is present
aria-label="[title of modal]".pf-c-modal-boxGives the modal an accessible name. Required when .pf-c-title is not present
aria-describedby="[id value of applicable content]".pf-c-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".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 modal is openHides 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

ClassAppliedOutcome
.pf-c-modal-box<div>Initiates a modal box. Required
.pf-c-button.pf-m-plain<button>Initiates a modal box close button. Required
.pf-c-title<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Initiates a title. Always use it with a modifier class.
.pf-c-modal-box__body<div>Initiates a modal box body. A modal box body is required if there is no modal box header.
.pf-c-modal-box__footer<footer>Initiates a modal box footer.
.pf-m-sm.pf-c-modal-boxModifies for a small modal box width.
.pf-m-lg.pf-c-modal-boxModifies for a large modal box width.
.pf-m-align-left.pf-c-modal-box__foterModifies for buttons in footer to be left aligned. Required

CSS Variables

--pf-c-modal-box__footer__c-button--first-of-type--MarginLeftc_modal_box__footer__c_button_first_of_type_MarginLeft
0
--pf-c-modal-box__footer--c-button--MarginRightc_modal_box__footer_c_button_MarginRight
1rem
--pf-c-modal-box__footer--c-button--sm--MarginRightc_modal_box__footer_c_button_sm_MarginRight
calc(1rem/2)
--pf-c-modal-box__footer--MarginTopc_modal_box__footer_MarginTop
2rem
--pf-c-modal-box--BackgroundColorc_modal_box_BackgroundColor
#fff
--pf-c-modal-box--body--MinHeightc_modal_box_body_MinHeight
calc(1rem*1.5)
--pf-c-modal-box--BorderColorc_modal_box_BorderColor
transparent
--pf-c-modal-box--BorderSizec_modal_box_BorderSize
1px
--pf-c-modal-box--BoxShadowc_modal_box_BoxShadow
0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,0.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,0.12)
--pf-c-modal-box--c-button--Rightc_modal_box_c_button_Right
1rem
--pf-c-modal-box--c-button--sibling--MarginRightc_modal_box_c_button_sibling_MarginRight
2rem
--pf-c-modal-box--c-button--Topc_modal_box_c_button_Top
calc(2rem - 0.375rem + 0.0625rem)
--pf-c-modal-box--c-title--body--MarginTopc_modal_box_c_title_body_MarginTop
1.5rem
--pf-c-modal-box--m-lg--lg--MaxWidthc_modal_box_m_lg_lg_MaxWidth
70rem
--pf-c-modal-box--m-sm--sm--MaxWidthc_modal_box_m_sm_sm_MaxWidth
35rem
--pf-c-modal-box--MaxHeightc_modal_box_MaxHeight
calc(100vh - 3rem)
--pf-c-modal-box--MaxWidthc_modal_box_MaxWidth
calc(100% - 2rem)
--pf-c-modal-box--PaddingBottomc_modal_box_PaddingBottom
2rem
--pf-c-modal-box--PaddingLeftc_modal_box_PaddingLeft
2rem
--pf-c-modal-box--PaddingRightc_modal_box_PaddingRight
2rem
--pf-c-modal-box--PaddingTopc_modal_box_PaddingTop
2rem
--pf-c-modal-box--Widthc_modal_box_Width
100%
--pf-c-modal-box--ZIndexc_modal_box_ZIndex
500