Examples
Basic
Product name + brand image + description-list body + trademark + strapline. Opened via a custom event scoped to the
modal's id so multiple modals can share a page without bleed.
Without product name
When productName is omitted, the dialog declares
aria-label for AT context instead of aria-labelledby. Use
when the brand image alone identifies the product.
Complex content
noContentContainer=true skips the default body wrapper so you can custom-position content
with PF layouts. Useful for marketing/launch screens where the description-list shape doesn't fit.
Documentation
About modal props
Parameters accepted by
{#include components/feedback/about-modal ... /}. Model mode: pass
aboutModal=<AboutModal> built in Java instead — the Java tab on each example
shows the builder. Open the modal by dispatching open-about-modal-{id} on the
window.
| Name | Type | Default | Description |
|---|---|---|---|
* id
|
String | — |
Used as the open-event suffix (open-about-modal-{id}) and the heading
aria-labelledby target. Must be unique on the page.
|
* brandImageSrc
|
String | — | URL of the product logo/brand image rendered at the top of the dialog. |
* brandImageAlt
|
String | — | Alt text for the brand image. Required by PF for AT. |
productName
|
String | — |
Title rendered as <h1>. When omitted,
ariaLabel becomes required.
|
ariaLabel
|
String | — |
Sets aria-label on the dialog when no
productName heading is rendered.
|
backgroundImage
|
String (URL) | — |
Sets the --pf-v6-c-about-modal-box--BackgroundImage CSS variable for a
decorative background.
|
closeButtonAriaLabel
|
String |
"Close dialog"
|
Aria-label for the X close button. |
noContentContainer
|
boolean |
false
|
Skip the default pf-v6-c-about-modal-box__content wrapper — the
content slot owns its own layout. PF React's
hasNoContentContainer.
|
slot content
|
Qute block | — | The dialog body. Typically a description-list of version/license/etc. metadata. |
slot trademark
|
Qute block | — | Legal/trademark notices rendered above the strapline. |
slot strapline
|
Qute block | — | Copyright line at the bottom of the dialog. |
Divergence from PF React. No isOpen /
onClose — we use a dispatched window event (open-about-modal-{id}) to open and Alpine local state to close. Multiple modals on a page coexist because each event name is id-scoped.
noContentContainer mirrors hasNoContentContainer;
backgroundImage is our shorter name for
backgroundImageSrc.
Usage
About-modal vs. modal. Use about-modal only for product-identity dialogs — name, version, copyright. For any modal with form fields, primary/secondary actions, or content beyond metadata, use Modal instead. About-modal has no footer-action slot and a fixed brand area.
Open the modal. Dispatch a window event with the modal's id as suffix:
@click="$dispatch('open-about-modal-{your-id}')". The id-scoped naming lets
multiple about-modals coexist on a page without their listeners colliding.
Accessibility. When productName is set, the dialog uses
aria-labelledby pointing at the heading. When it's not, you must set
ariaLabel — otherwise screen readers have no name for the dialog. Focus is trapped on
open and released on close; Escape closes; backdrop-click closes.
Custom content layouts. The default __content wrapper handles the
common description-list shape. For marketing/launch screens with non-tabular content, set
noContentContainer=true and supply the full content layout yourself — see the Complex
content example for the structure.