Skip to content
PatternFly logo

About modal

Examples

Basic

Basic screenshot

Documentation

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-c-about-modal-box__strapline
<p>
Initiates a modal box strapline cell.

CSS variables

.pf-c-about-modal-box--pf-global--Color--100
#fff
.pf-c-about-modal-box--pf-global--Color--200
#f0f0f0
.pf-c-about-modal-box--pf-global--BorderColor--100
#b8bbbe
.pf-c-about-modal-box--pf-global--primary-color--100
#73bcf7
.pf-c-about-modal-box--pf-global--link--Color
#2b9af3
.pf-c-about-modal-box--pf-global--link--Color--hover
#2b9af3
.pf-c-about-modal-box--pf-global--BackgroundColor--100
#151515
.pf-c-about-modal-box--pf-c-about-modal-box--BackgroundColor
#030303
.pf-c-about-modal-box--pf-c-about-modal-box--BoxShadow
0 0 100px 0 rgba(255, 255, 255, .05)
.pf-c-about-modal-box--pf-c-about-modal-box--ZIndex
500
.pf-c-about-modal-box--pf-c-about-modal-box--Height
100%
.pf-c-about-modal-box--pf-c-about-modal-box--lg--Height
47.625rem
.pf-c-about-modal-box--pf-c-about-modal-box--lg--MaxHeight
calc(100% - 2rem)
.pf-c-about-modal-box--pf-c-about-modal-box--Width
100vw
.pf-c-about-modal-box--pf-c-about-modal-box--lg--Width
calc(100% - (4rem * 2))
.pf-c-about-modal-box--pf-c-about-modal-box--lg--MaxWidth
77rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingTop
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingTop
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingBottom
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--PaddingLeft
4rem
.pf-c-about-modal-box--pf-c-about-modal-box--sm--grid-template-columns
5fr 1fr
.pf-c-about-modal-box--pf-c-about-modal-box--lg--grid-template-columns
1fr .6fr
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingLeft
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__brand--sm--PaddingBottom
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--ZIndex
600
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--PaddingBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--sm--PaddingBottom
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--sm--PaddingRight
0
.pf-c-about-modal-box--pf-c-about-modal-box__close--lg--PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--Color
#151515
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--FontSize
1.25rem
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--BorderRadius
30em
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--Width
calc(1.25rem * 2)
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--Height
calc(1.25rem * 2)
.pf-c-about-modal-box--pf-c-about-modal-box__close--c-button--BackgroundColor
#030303
.pf-c-about-modal-box--pf-c-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--BackgroundImage
url("../../assets/images/[email protected]")
.pf-c-about-modal-box--pf-c-about-modal-box__hero--sm--BackgroundPosition
top left
.pf-c-about-modal-box--pf-c-about-modal-box__hero--sm--BackgroundSize
cover
.pf-c-about-modal-box--pf-c-about-modal-box__brand-image--Height
2.5rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--PaddingRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--PaddingBottom
0.5rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--PaddingLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--sm--PaddingRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__header--sm--PaddingLeft
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--PaddingTop
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--FontSize
0.875rem
.pf-c-about-modal-box--pf-c-about-modal-box__strapline--sm--PaddingTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginTop
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginRight
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginBottom
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--MarginLeft
2rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginTop
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginRight
4rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginBottom
3rem
.pf-c-about-modal-box--pf-c-about-modal-box__content--sm--MarginLeft
4rem
.pf-c-about-modal-box .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-about-modal-box .pf-c-button--pf-c-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--BackgroundColor
rgba(3, 3, 3, 0.4)

View source on GitHub