Logo
The Logo component is used to render an nib brand logo on screen.
Brands
The default export from this package looks to the ThemeProvider to know which brand logo to render. As such, it must be used inside our Theme component.
Installation
npm install @nib-components/logo
Usage
There are two primary ways to use the Logo
component, depending on your application's branding requirements.
Named imports
Import a Specific Logo (Recommended for Single/fewer Brand Apps). If your application targets a single/fewer brands, you can import that logo directly. This approach helps reduce bundle size and it is the recommended approach.
import NibLogo from '@nib-components/logo/nib';
Or if you support a few brands:
import NibLogo from '@nib-components/logo/nib';import GuLogo from '@nib-components/logo/gu';import ImanLogo from '@nib-components/logo/iman';import {useContext} from 'react';import {ThemeContext} from 'styled-components';const Logo = () => {const theme = useContext(ThemeContext);switch (theme.id) {case 'gu':return <GuLogo />;case 'iman':return <ImanLogo />;default:return <NibLogo />;}};
Note: If you're using a named import, it won't be mode-aware by default. You'll need to explicitly set the desired
color
andvariation
to match your application's requirements.
Default import
For applications that support multiple brands or themes, use the default Logo component. It dynamically renders the correct logo based on the current theme or context.
import Logo from '@nib-components/logo';
Interactive demo
<Logo size="small" />
Props
Prop | Type | Default | Description |
---|---|---|---|
size | string | small | Sets the size (height) of the logo. Must be one of 'small' , 'medium' or 'large' . Width is calculated programmatically, according to a set aspect ratio. Height values are set via design-tokens, and according to respective brand guidelines. |
variation | string | Overrides the default logo variation set by design-tokens. Available options vary per brand, shown in the table below. If the selected variation does not exist for a given brand, it will revert to the default value set by design-tokens. | |
color | string | Overrides the default color variation set by design-tokens. Available options vary per brand, shown in the table below. If the selected variation does not exist for a given brand, it will revert to the default value set by design-tokens. |
Supported color & variation
Brand | Variation | Color |
---|---|---|
aami | default | monoLight, default |
aanz | default | onBrand, default |
apia | default | monoLight, default |
australianSeniors | default | onDark, default |
cota | default | onBrand, default |
edi | default | onBrand, default |
foundation | default, stacked | default, brightGreen |
gu | default | onDark, default |
iman | default | onDark, default |
ing | default | onBrand, default |
nib | default | default, brightGreen |
nsi | default | onDark, default |
priceline | default | onBrand, default |
qantas | default, reduced | onDark, default |
real | default | onDark, default |
suncorp | default | onDark, default |
tid | default | onBrand, onDark, default |
worldNomads | default, stacked, sanchez | onDark, default |
orbitProtect | default | onDark, default |
Related content
This page is for information about our Logo component and its usage. For general information about branding at nib as well as downloadable logo packs for print and screen, please see the Logos page.