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.
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.
Props
Brand
| Name | Type | Default | Description |
|---|---|---|---|
| altrequired | string | Attribute that specifies the alt text of a <img> Brand. For a <picture> Brand this specifies the fallback <img> alt text. | |
| children | React.ReactNode | Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. | |
| className | string | '' | 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. | |
| src | string | '' | 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. |