HTML

About modal box

ExamplesDocumentationCSS Variables

Examples

About modal box

This Preview can only be accessed in full page mode.
Copied to clipboard

Documentation

Overview

About modal layout.

Accessibility

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

Class Applied To Outcome
.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-m-hover .pf-c-about-modal-box__close .pf-c-button.pf-m-action Forces 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--BackgroundColorc_about_modal_box_BackgroundColor#030303
--pf-c-about-modal-box--BoxShadowc_about_modal_box_BoxShadow0 0 100px 0 hsla(0,0%,100%,.05)
--pf-c-about-modal-box--Heightc_about_modal_box_Height100%
--pf-c-about-modal-box--PaddingBottomc_about_modal_box_PaddingBottom2rem
--pf-c-about-modal-box--PaddingLeftc_about_modal_box_PaddingLeft2rem
--pf-c-about-modal-box--PaddingRightc_about_modal_box_PaddingRight2rem
--pf-c-about-modal-box--PaddingTopc_about_modal_box_PaddingTop2rem
--pf-c-about-modal-box--Widthc_about_modal_box_Width100vw
--pf-c-about-modal-box--ZIndexc_about_modal_box_ZIndex600
--pf-c-about-modal-box__brand--PaddingBottomc_about_modal_box__brand_PaddingBottom2rem
--pf-c-about-modal-box__brand--PaddingLeftc_about_modal_box__brand_PaddingLeft2rem
--pf-c-about-modal-box__brand--PaddingRightc_about_modal_box__brand_PaddingRight2rem
--pf-c-about-modal-box__brand--PaddingTopc_about_modal_box__brand_PaddingTop3rem
--pf-c-about-modal-box__brand-image--Heightc_about_modal_box__brand_image_Height2.5rem
--pf-c-about-modal-box__brand--sm--PaddingBottomc_about_modal_box__brand_sm_PaddingBottom4rem
--pf-c-about-modal-box__brand--sm--PaddingLeftc_about_modal_box__brand_sm_PaddingLeft4rem
--pf-c-about-modal-box__brand--sm--PaddingRightc_about_modal_box__brand_sm_PaddingRight4rem
--pf-c-about-modal-box__close--PaddingBottomc_about_modal_box__close_PaddingBottom2rem
--pf-c-about-modal-box__close--PaddingRightc_about_modal_box__close_PaddingRight2rem
--pf-c-about-modal-box__close--PaddingTopc_about_modal_box__close_PaddingTop3rem
--pf-c-about-modal-box__close--ZIndexc_about_modal_box__close_ZIndex600
--pf-c-about-modal-box__close--c-button--BackgroundColorc_about_modal_box__close_c_button_BackgroundColorrgba(3,3,3,.4)
--pf-c-about-modal-box__close--c-button--BorderRadiusc_about_modal_box__close_c_button_BorderRadius30em
--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_FontSize1.3125rem
--pf-c-about-modal-box__close--c-button--Heightc_about_modal_box__close_c_button_Heightcalc(1.3125rem * 2)
--pf-c-about-modal-box__close--c-button--Widthc_about_modal_box__close_c_button_Widthcalc(1.3125rem * 2)
--pf-c-about-modal-box__close--c-button--hover--BackgroundColorc_about_modal_box__close_c_button_hover_BackgroundColorrgba(3,3,3,.4)
--pf-c-about-modal-box__close--lg--PaddingRightc_about_modal_box__close_lg_PaddingRight4rem
--pf-c-about-modal-box__close--sm--PaddingBottomc_about_modal_box__close_sm_PaddingBottom4rem
--pf-c-about-modal-box__close--sm--PaddingRightc_about_modal_box__close_sm_PaddingRight0
--pf-c-about-modal-box__content--MarginBottomc_about_modal_box__content_MarginBottom2rem
--pf-c-about-modal-box__content--MarginLeftc_about_modal_box__content_MarginLeft2rem
--pf-c-about-modal-box__content--MarginRightc_about_modal_box__content_MarginRight2rem
--pf-c-about-modal-box__content--MarginTopc_about_modal_box__content_MarginTop2rem
--pf-c-about-modal-box__content--sm--MarginBottomc_about_modal_box__content_sm_MarginBottom3rem
--pf-c-about-modal-box__content--sm--MarginLeftc_about_modal_box__content_sm_MarginLeft4rem
--pf-c-about-modal-box__content--sm--MarginRightc_about_modal_box__content_sm_MarginRight4rem
--pf-c-about-modal-box__content--sm--MarginTopc_about_modal_box__content_sm_MarginTop3rem
--pf-c-about-modal-box__header--PaddingBottomc_about_modal_box__header_PaddingBottom0.5rem
--pf-c-about-modal-box__header--PaddingLeftc_about_modal_box__header_PaddingLeft2rem
--pf-c-about-modal-box__header--PaddingRightc_about_modal_box__header_PaddingRight2rem
--pf-c-about-modal-box__header--sm--PaddingLeftc_about_modal_box__header_sm_PaddingLeft4rem
--pf-c-about-modal-box__header--sm--PaddingRightc_about_modal_box__header_sm_PaddingRight4rem
--pf-c-about-modal-box__hero--sm--BackgroundImagec_about_modal_box__hero_sm_BackgroundImageurl(assets/images/pfbg_992@2x.jpg)
--pf-c-about-modal-box__hero--sm--BackgroundPositionc_about_modal_box__hero_sm_BackgroundPositiontop left
--pf-c-about-modal-box__hero--sm--BackgroundSizec_about_modal_box__hero_sm_BackgroundSizecover
--pf-c-about-modal-box__strapline--PaddingTopc_about_modal_box__strapline_PaddingTop2rem
--pf-c-about-modal-box__strapline--sm--PaddingTopc_about_modal_box__strapline_sm_PaddingTop3rem
--pf-c-about-modal-box--lg--Heightc_about_modal_box_lg_Height47.625rem
--pf-c-about-modal-box--lg--MaxHeightc_about_modal_box_lg_MaxHeightcalc(100% - 2rem)
--pf-c-about-modal-box--lg--MaxWidthc_about_modal_box_lg_MaxWidth77rem
--pf-c-about-modal-box--lg--Widthc_about_modal_box_lg_Widthcalc(100% - (4rem * 2))
--pf-c-about-modal-box--lg--grid-template-columnsc_about_modal_box_lg_grid_template_columns1fr .6fr
--pf-c-about-modal-box--sm--PaddingBottomc_about_modal_box_sm_PaddingBottom4rem
--pf-c-about-modal-box--sm--PaddingLeftc_about_modal_box_sm_PaddingLeft4rem
--pf-c-about-modal-box--sm--PaddingRightc_about_modal_box_sm_PaddingRight4rem
--pf-c-about-modal-box--sm--PaddingTopc_about_modal_box_sm_PaddingTop4rem
--pf-c-about-modal-box--sm--grid-template-columnsc_about_modal_box_sm_grid_template_columns5fr 1fr