Examples
Props
AboutModal
| Name | Type | Default | Description |
|---|---|---|---|
| brandImageAltrequired | string | The alternate text of the brand image | |
| brandImageSrcrequired | string | The URL of the image for the brand | |
| childrenrequired | React.ReactNode | Content rendered inside the about modal | |
| appendTo | HTMLElement | (() => HTMLElement) | The parent container to append the modal to. Defaults to document.body | |
| aria-label | string | Aria label for the about modal. This should be used when no productName prop is provided | |
| backgroundImageSrc | string | The URL or file path of the image for the background | |
| className | string | Additional classes added to the about modal | |
| closeButtonAriaLabel | string | Set aria label to the close button | |
| disableFocusTrap | boolean | Flag to disable focus trap | |
| hasNoContentContainer | boolean | false | Prevents the about modal from rendering content inside a container; allows for more flexible layouts |
| isOpen | boolean | false | Flag to show the about modal |
| onClose | (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void | (_e): any => undefined | A callback for when the close button is clicked |
| productName | string | Product name | |
| trademark | string | Trademark information |
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 | ||