Skip to main content

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

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

Properties​

Name
Description
  • brand
    stringBrand identifier
  • className
    stringAdditional CSS classes to be applied
  • link
    IlinkConfiguration for linking the Logo
  • variant
    "dark" | "light"Logo variant (optional: "dark" or "light")
  • scale
    numberScale factor for the logo
  • id
    stringHTML id attribute for the component
  • isTesting
    booleanInternal testing flag (not a user-provided prop)

CSS Variables​