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) | null | The parent container to append the modal to. Defaults to document.body |
| backgroundImageSrc | string | '' | The URL 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 | |
| isOpen | boolean | false | Flag to show the about modal |
| noAboutModalBoxContentContainer | boolean | false | Prevents the about modal from rendering content inside a container; allows for more flexible layouts |
| onClose | () => void | (): any => undefined | A callback for when the close button is clicked |
| productName | string | '' | Product name |
| trademark | string | '' | Trademark information |
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/pfbg_992@2x.jpg") | |
| .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
