Logo
The Logo component is used to render an nib brand logo on screen.
Brands
This component looks to the ThemeProvider to know which brand logo is rendered. As such, it must be used inside our Theme component.
Installation
npm install @nib-components/logo
Usage
import Logo from '@nib-components/logo';
Interactive demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | string | small | The size (height) of the logo. The small value varies across brands as per the minimum height specified in the respective brand guidelines. medium (48px) and large (64px) sizes are consistent across brands. Must be one of 'small', 'medium' or 'large'. |
invert | boolean | false | Is the logo to be used on a dark background? Try setting this to true. |
Color
Preference should be given to use the default color. Though if required, our logo can be rendered as white for use on darker backgrounds (green or black), through the use of the invert prop.
Padding
The padding around the logo should, at a minimum, be at least as thick as the width of 'i' in the nib logo. If using a reversed logo (white), a minimum 10px padding on all sides of the logo should be included.
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.