Examples
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 column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-about-modal-box | --pf-v5-global--Color--100 | #fff | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-about-modal-box | --pf-v5-global--Color--200 | #f0f0f0 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--light-200 $pf-v5-global--Color--light-200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-about-modal-box | --pf-v5-global--BorderColor--100 | #b8bbbe | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--light-100 $pf-v5-global--BorderColor--light-100 $pf-v5-color-black-400 #b8bbbe | ||||
| .pf-v5-c-about-modal-box | --pf-v5-global--primary-color--100 | #73bcf7 | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--light-100 $pf-v5-global--primary-color--light-100 $pf-v5-color-blue-200 #73bcf7 | ||||
| .pf-v5-c-about-modal-box | --pf-v5-global--link--Color | #2b9af3 | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--light $pf-v5-global--link--Color--light $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-about-modal-box | --pf-v5-global--link--Color--hover | #2b9af3 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--light $pf-v5-global--link--Color--light $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-about-modal-box | --pf-v5-global--BackgroundColor--100 | #151515 | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-about-modal-box | --pf-v5-global--icon--Color--light | #f0f0f0 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--light $pf-v5-global--icon--Color--light--light $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-about-modal-box | --pf-v5-global--icon--Color--dark | #fff | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--light $pf-v5-global--icon--Color--dark--light $pf-v5-color-white #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--BackgroundColor --pf-v5-global--palette--black-1000 $pf-v5-color-black-1000 #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--BackgroundSize clamp(--pf-v5-c-about-modal-box--BackgroundSize--min-width, --pf-v5-c-about-modal-box--BackgroundSize--width, --pf-v5-c-about-modal-box--BackgroundSize--max-width) 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__brand--PaddingTop --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__brand--PaddingRight | 2rem | ||
--pf-v5-c-about-modal-box__brand--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__brand--PaddingLeft | 2rem | ||
--pf-v5-c-about-modal-box__brand--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__brand--PaddingBottom | 2rem | ||
--pf-v5-c-about-modal-box__brand--PaddingBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__brand--sm--PaddingRight | 4rem | ||
--pf-v5-c-about-modal-box__brand--sm--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__brand--sm--PaddingLeft | 4rem | ||
--pf-v5-c-about-modal-box__brand--sm--PaddingLeft --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__brand--sm--PaddingBottom | 4rem | ||
--pf-v5-c-about-modal-box__brand--sm--PaddingBottom --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__close--ZIndex | 600 | ||
--pf-v5-c-about-modal-box__close--ZIndex --pf-v5-global--ZIndex--2xl $pf-v5-global--ZIndex--2xl 600 | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__close--PaddingTop | 3rem | ||
--pf-v5-c-about-modal-box__close--PaddingTop --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__close--PaddingRight | 2rem | ||
--pf-v5-c-about-modal-box__close--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__close--PaddingBottom | 2rem | ||
--pf-v5-c-about-modal-box__close--PaddingBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__close--sm--PaddingBottom | 4rem | ||
--pf-v5-c-about-modal-box__close--sm--PaddingBottom --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__close--lg--PaddingRight | 4rem | ||
--pf-v5-c-about-modal-box__close--lg--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__close--c-button--Color | #151515 | ||
--pf-v5-c-about-modal-box__close--c-button--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #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__close--c-button--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 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__close--c-button--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 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__close--c-button--Width calc(--pf-v5-c-about-modal-box__close--c-button--FontSize * 2) calc(--pf-v5-global--FontSize--xl * 2) calc($pf-v5-global--FontSize--xl * 2) calc(pf-font-prem(20px) * 2) 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__close--c-button--Height calc(--pf-v5-c-about-modal-box__close--c-button--FontSize * 2) calc(--pf-v5-global--FontSize--xl * 2) calc($pf-v5-global--FontSize--xl * 2) calc(pf-font-prem(20px) * 2) 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__close--c-button--BackgroundColor --pf-v5-global--palette--black-1000 $pf-v5-color-black-1000 #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__header--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__header--PaddingBottom | 0.5rem | ||
--pf-v5-c-about-modal-box__header--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__header--PaddingLeft | 2rem | ||
--pf-v5-c-about-modal-box__header--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__header--sm--PaddingRight | 4rem | ||
--pf-v5-c-about-modal-box__header--sm--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__header--sm--PaddingLeft | 4rem | ||
--pf-v5-c-about-modal-box__header--sm--PaddingLeft --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__strapline--PaddingTop | 2rem | ||
--pf-v5-c-about-modal-box__strapline--PaddingTop --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__strapline--FontSize | 0.875rem | ||
--pf-v5-c-about-modal-box__strapline--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__strapline--sm--PaddingTop | 3rem | ||
--pf-v5-c-about-modal-box__strapline--sm--PaddingTop --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__content--MarginTop | 2rem | ||
--pf-v5-c-about-modal-box__content--MarginTop --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__content--MarginRight | 2rem | ||
--pf-v5-c-about-modal-box__content--MarginRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__content--MarginBottom | 2rem | ||
--pf-v5-c-about-modal-box__content--MarginBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__content--MarginLeft | 2rem | ||
--pf-v5-c-about-modal-box__content--MarginLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__content--sm--MarginTop | 3rem | ||
--pf-v5-c-about-modal-box__content--sm--MarginTop --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__content--sm--MarginRight | 4rem | ||
--pf-v5-c-about-modal-box__content--sm--MarginRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__content--sm--MarginBottom | 3rem | ||
--pf-v5-c-about-modal-box__content--sm--MarginBottom --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-about-modal-box | --pf-v5-c-about-modal-box__content--sm--MarginLeft | 4rem | ||
--pf-v5-c-about-modal-box__content--sm--MarginLeft --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-about-modal-box .pf-v5-c-button | --pf-v5-c-button--m-primary--BackgroundColor | #06c | ||
--pf-v5-c-button--m-primary--BackgroundColor --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #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) | ||
--pf-v5-c-about-modal-box__close--c-button--BackgroundColor --pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor rgba(3, 3, 3, 0.4) | ||||
View source on GitHub
