Examples
Documentation
In order to add a background image, set the --pf-v6-c-about-modal-box--BackgroundImage CSS variable to the path of the image. For example: --pf-v6-c-about-modal-box--BackgroundImage: url(custom/path/image.jpg);
Accessibility
Attribute | Applies to | Outcome |
|---|---|---|
aria-label="Close Dialog" | .pf-v6-c-modal-box__close .pf-v6-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-v6-c-about-modal-box | <div>, <article> | Initiates a modal box. |
.pf-v6-c-about-modal-box__brand | <div> | Initiates a modal box brand cell. |
.pf-v6-c-about-modal-box__brand-image | <img> | Initiates a modal box brand image. |
.pf-v6-c-about-modal-box__close | <div> | Initiates a modal box close cell. |
.pf-v6-c-about-modal-box__header | <div>, <header> | Initiates a modal box header cell. |
.pf-v6-c-about-modal-box__content | <div> | Initiates a modal box content cell. |
.pf-v6-c-about-modal-box__body | <div> | Initiates a modal box body cell. |
.pf-v6-c-about-modal-box__strapline | <p> | Initiates a modal box strapline cell. |
--pf-v6-c-about-modal-box--BackgroundImage | .pf-v6-c-about-modal-box | Sets the background image for the about modal. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--BackgroundImage | none | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--BackgroundSize--min-width | 200px | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--BackgroundSize--width | 60% | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--BackgroundSize--max-width | 600px | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--BackgroundSize | clamp(200px, 60%, 600px) | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--Height | 100% | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--lg--Height | 47.625rem | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--Width | 100% | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--sm--GridTemplateColumns | 5fr 1fr | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--lg--GridTemplateColumns | 1fr .6fr | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__brand--PaddingBlockStart | 3rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__brand--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__brand--PaddingInlineStart | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__brand--PaddingBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__close--ZIndex | 600 | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__close--PaddingBlockStart | 3rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__close--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__close--PaddingBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__close--c-button--FontSize | 1rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__brand-image--Height | 2.3125rem | ||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__header--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__header--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__header--PaddingInlineStart | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__strapline--PaddingBlockStart | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__strapline--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__strapline--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart | 3rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__content--MarginBlockStart | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__content--MarginInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__content--MarginBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__content--MarginInlineStart | 2rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__content--sm--MarginBlockStart | 3rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd | 3rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box__content--sm--MarginInlineStart | 4rem | ||
| ||||
| .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--BackgroundPosition | bottom right | ||
| :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box | --pf-v6-c-about-modal-box--BackgroundPosition | bottom left | ||
