Brand

A brand is a visual representation of a product—typically its logo.

Examples

The brand component does not have any built-in theme support. If a brand should be dynamically styled, you must manually set up the necessary logic on your own.

These examples adjust styling when the PatternFly website is toggled between the light and dark theme.

Basic

Patternfly
Patternfly

Responsive

Passing <source> elements as children to Brand will change the component from an <img> to a <picture> element. The src and alt properties should still be passed to populate the fallback img of the brand.

Patternfly
Patternfly

Props

Brand

*required
NameTypeDefaultDescription
altrequiredstringAttribute that specifies the alt text of a <img> Brand. For a <picture> Brand this specifies the fallback <img> alt text.
childrenReact.ReactNodeTransforms the Brand into a <picture> element from an <img> element. Container for <source> child elements.
classNamestring''Additional classes added to the either type of Brand.
heights{ default?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }Heights at various breakpoints for a <picture> Brand.
srcstring''Attribute that specifies the URL of a <img> Brand. For a <picture> Brand this specifies the fallback <img> URL.
widths{ default?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }Widths at various breakpoints for a <picture> Brand.