Live demo — this example is server-driven; run the showcase locally for the interactive version.

Brand

The product logo — typically pinned to the masthead. Renders an <img> by default, or a <picture> with one or more <source> elements for responsive layouts. Width and height are driven by PF's CSS custom properties so the logo can be re-sized without re-exporting the asset.

Examples

Basic

The default brand img — natural size of the source SVG. No CSS custom properties applied.

With width

Pass width to set --pf-v6-c-brand--Width. Height auto-scales to preserve aspect ratio.

With height

Pass height to set --pf-v6-c-brand--Height. Use this on a masthead with a fixed-height bar.

Responsive

Pass picture=true to switch from <img> to <picture>, then inject one or more <source> via the sources slot. Smaller viewports get the fallback src; larger viewports get the matching srcset.

Documentation

Brand props

Parameters accepted by {#include components/data-display/brand ... /}. Model mode: pass brand=<Brand> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Default	Description
* `id`	String	—	DOM id on the brand element.
* `src`	String (URL)	—	Logo URL. With `picture=true`, this is the fallback used when no <source> matches.
* `alt`	String	—	Accessible name — usually the product name. Required by PF and by accessibility rules.
`width`	String (CSS length)	—	Sets `--pf-v6-c-brand--Width` on the element style. Height auto-scales to preserve aspect ratio.
`height`	String (CSS length)	—	Sets `--pf-v6-c-brand--Height`. Pair with a fixed-height nav bar.
`picture`	boolean	`false`	Switch to a `<picture>` element with a `pf-m-picture` modifier and a `sources` slot for breakpoint-specific assets.
slot `sources`	Qute block	—	Only used with `picture=true`. Place one or more `<source>` elements with their own `media` / `srcset` attributes.

Divergence from PF React. We skip className (React-specific). PF React exposes heights / widths as breakpoint maps; we leave responsive sizing to plain CSS — set --pf-v6-c-brand--Width / --pf-v6-c-brand--Height in your own stylesheet under media queries. picture=true + the sources slot replaces PF React's children escape hatch.

Usage

One brand per page. The brand is a wayfinding anchor — repeat instances are confusing. Use it in the masthead, login page, and not much else.

SVG over raster. The default /web/images/quarkus-pha-logo.svg is vector — it scales to any size without blurring. Reserve PNGs for cases where the logo is genuinely raster-based.

Responsive logos. Many products ship two logo variants — a full lockup for wide layouts and an icon-only version for narrow ones. Use picture=true + a <source media="(min-width: 768px)" srcset="..."> to switch at the breakpoint.

Wrap in a link. If clicking the brand should navigate to the home page, wrap the include in an <a href="/">. PF doesn't bake this in — the brand itself is just the image.

Edit brand.html on GitHub