PatternFly

Brand

A brand is used to place a product logotype on a screen.

Examples

Basic

Patternfly Logo

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.

Fallback patternfly default logo

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.

View source on GitHub