Logo
Used to define and position brand/product logo inside a Header.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { Logo } from '@iag/chroma-react-ui.components';
Accessibility
Accessibility documentation
(opens in new window)Variants
Default
Inherits the brand from the BrandProvider
Dark
For use on light coloured backgrounds
Light
For use on dark coloured backgrounds
Sizing
Default Logo sizing:
- Desktop: undefinedpx x undefinedpx
- Mobile: undefinedpx x undefinedpx
Scale Logo
Logos can be resized to meet the requirements of it’s environment. Pass in a decimal value as per the transform:scale() css specifications to alter the size of the Logo, the transform-origin is set to 0.
Appearance
Brand Specific
Use the brand
prop to define which logo to render. In this example the logo is hardcoded to the nrma
brand
Linked Logo
Properties
Name
Description
- brandstringBrand identifier
- classNamestringAdditional CSS classes to be applied
- linkIlinkConfiguration for linking the Logo
- variant"dark" | "light"Logo variant (optional: "dark" or "light")
- scalenumberScale factor for the logo
- idstringHTML id attribute for the component
- isTestingbooleanInternal testing flag (not a user-provided prop)