Skip to content
PatternFly

About modal

Examples

Basic

Basic screenshot

Documentation

In order to add a background image, set the --pf-v5-c-about-modal-box--BackgroundImage CSS variable to the path of the image. For example: --pf-v5-c-about-modal-box--BackgroundImage: url(custom/path/image.jpg);

Accessibility

Attribute
Applies to
Outcome
aria-label="Close Dialog"
.pf-v5-c-modal-box__close .pf-v5-c-button
Provides an accessible name for the close button as it uses an icon instead of text. Required

Usage

Class
Applied to
Outcome
.pf-v5-c-about-modal-box
<div>, <article>
Initiates a modal box.
.pf-v5-c-about-modal-box__brand
<div>
Initiates a modal box brand cell.
.pf-v5-c-about-modal-box__brand-image
<img>
Initiates a modal box brand image.
.pf-v5-c-about-modal-box__close
<div>
Initiates a modal box close cell.
.pf-v5-c-about-modal-box__header
<div>, <header>
Initiates a modal box header cell.
.pf-v5-c-about-modal-box__content
<div>
Initiates a modal box content cell.
.pf-v5-c-about-modal-box__body
<div>
Initiates a modal box body cell.
.pf-v5-c-about-modal-box__strapline
<p>
Initiates a modal box strapline cell.
--pf-v5-c-about-modal-box--BackgroundImage
.pf-v5-c-about-modal-box
Sets the background image for the about modal.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-about-modal-box--pf-v5-global--Color--100
#fff
.pf-v5-c-about-modal-box--pf-v5-global--Color--200
#f0f0f0
.pf-v5-c-about-modal-box--pf-v5-global--BorderColor--100
#b8bbbe
.pf-v5-c-about-modal-box--pf-v5-global--primary-color--100
#73bcf7
.pf-v5-c-about-modal-box--pf-v5-global--link--Color
#2b9af3
.pf-v5-c-about-modal-box--pf-v5-global--link--Color--hover
#2b9af3
.pf-v5-c-about-modal-box--pf-v5-global--BackgroundColor--100
#151515
.pf-v5-c-about-modal-box--pf-v5-global--icon--Color--light
#f0f0f0
.pf-v5-c-about-modal-box--pf-v5-global--icon--Color--dark
#fff
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--BackgroundImage
none
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--BackgroundColor
#030303
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--BackgroundPosition
bottom right
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--BackgroundSize--min-width
200px
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--BackgroundSize--width
60%
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--BackgroundSize--max-width
600px
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--BackgroundSize
clamp(200px, 60%, 600px)
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--Height
100%
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--lg--Height
47.625rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--Width
100%
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--sm--GridTemplateColumns
5fr 1fr
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--lg--GridTemplateColumns
1fr .6fr
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__brand--PaddingTop
3rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__brand--PaddingRight
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__brand--PaddingLeft
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__brand--PaddingBottom
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__brand--sm--PaddingRight
4rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__brand--sm--PaddingLeft
4rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__brand--sm--PaddingBottom
4rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--ZIndex
600
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--PaddingTop
3rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--PaddingRight
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--PaddingBottom
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--sm--PaddingBottom
4rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--lg--PaddingRight
4rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--c-button--Color
#151515
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--c-button--FontSize
1.25rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--c-button--BorderRadius
30em
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--c-button--Width
calc(1.25rem * 2)
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--c-button--Height
calc(1.25rem * 2)
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--c-button--BackgroundColor
#030303
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor
rgba(3, 3, 3, 0.4)
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__brand-image--Height
2.5rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__header--PaddingRight
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__header--PaddingBottom
0.5rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__header--PaddingLeft
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__header--sm--PaddingRight
4rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__header--sm--PaddingLeft
4rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__strapline--PaddingTop
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__strapline--FontSize
0.875rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__strapline--sm--PaddingTop
3rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__content--MarginTop
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__content--MarginRight
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__content--MarginBottom
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__content--MarginLeft
2rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__content--sm--MarginTop
3rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__content--sm--MarginRight
4rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__content--sm--MarginBottom
3rem
.pf-v5-c-about-modal-box--pf-v5-c-about-modal-box__content--sm--MarginLeft
4rem
.pf-v5-c-about-modal-box .pf-v5-c-button--pf-v5-c-button--m-primary--BackgroundColor
#06c
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box--pf-v5-c-about-modal-box--BackgroundPosition
bottom left
.pf-v5-c-about-modal-box__close .pf-v5-c-button.pf-m-plain:hover--pf-v5-c-about-modal-box__close--c-button--BackgroundColor
rgba(3, 3, 3, 0.4)

View source on GitHub