HTML

ExamplesDocumentationCSS variables

Examples

Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard

Documentation

Overview

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

Attribute Applies to Outcome
role="dialog" .pf-c-modal-box Identifies the element that serves as the modal container. Required
aria-labelledby="[id value of .pf-c-title]" .pf-c-modal-box Gives 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-box Gives the modal an accessible name. Required when .pf-c-title is not present
aria-describedby="[id value of applicable content]" .pf-c-modal-box Gives 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-box Tells 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-button Provides 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 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

Class Applied Outcome
.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-box Modifies for a small modal box width.
.pf-m-lg .pf-c-modal-box Modifies for a large modal box width.
.pf-m-align-left .pf-c-modal-box__foter Modifies for buttons in footer to be left aligned. Required

CSS variables

--pf-c-modal-box--BackgroundColorc_modal_box_BackgroundColor#fff
--pf-c-modal-box--BorderColorc_modal_box_BorderColortransparent
--pf-c-modal-box--BorderSizec_modal_box_BorderSize1px
--pf-c-modal-box--BoxShadowc_modal_box_BoxShadow0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,.12)
--pf-c-modal-box--MaxHeightc_modal_box_MaxHeightcalc(100vh - 3rem)
--pf-c-modal-box--MaxWidthc_modal_box_MaxWidthcalc(100% - 2rem)
--pf-c-modal-box--PaddingBottomc_modal_box_PaddingBottom2rem
--pf-c-modal-box--PaddingLeftc_modal_box_PaddingLeft2rem
--pf-c-modal-box--PaddingRightc_modal_box_PaddingRight2rem
--pf-c-modal-box--PaddingTopc_modal_box_PaddingTop2rem
--pf-c-modal-box--Widthc_modal_box_Width100%
--pf-c-modal-box--ZIndexc_modal_box_ZIndex500
--pf-c-modal-box__footer--MarginTopc_modal_box__footer_MarginTop2rem
--pf-c-modal-box__footer__c-button--first-of-type--MarginLeftc_modal_box__footer__c_button_first_of_type_MarginLeft0
--pf-c-modal-box__footer--c-button--MarginRightc_modal_box__footer_c_button_MarginRight1rem
--pf-c-modal-box__footer--c-button--sm--MarginRightc_modal_box__footer_c_button_sm_MarginRightcalc(1rem / 2)
--pf-c-modal-box--body--MinHeightc_modal_box_body_MinHeightcalc(1rem * 1.5)
--pf-c-modal-box--c-button--Rightc_modal_box_c_button_Right1rem
--pf-c-modal-box--c-button--Topc_modal_box_c_button_Topcalc(2rem - 0.375rem + 0.0625rem)
--pf-c-modal-box--c-button--sibling--MarginRightc_modal_box_c_button_sibling_MarginRight2rem
--pf-c-modal-box--c-title--body--MarginTopc_modal_box_c_title_body_MarginTop1.5rem
--pf-c-modal-box--m-lg--lg--MaxWidthc_modal_box_m_lg_lg_MaxWidth70rem
--pf-c-modal-box--m-sm--sm--MaxWidthc_modal_box_m_sm_sm_MaxWidth35rem