@placardi/logo

Placardi logo is the face of our brand. It was designed to be simpe, concise and memorable.

Installation

npm i @placardi/logo

Dependencies

• react
• styled-components

Usage

Basic usage

In order to use Placardi logo in an application, simply import it from @placardi/logo and use it as any regular component.

import React, { FC } from 'react';
import Logo from '@placardi/logo';

const App: FC = () => (
  <header>
    <Logo />
  </header>
)

export default App;

Minimal logo variant

In orer to use the minimal version of the logo, pass a minimal prop to the logo component. This will render the logo as only a brand glyph.

import React, { FC } from 'react';
import Logo from '@placardi/logo';

const App: FC = () => (
  <header>
    <Logo minimal />
  </header>
)

export default App;

Changing logo height

Logo height, and therefore overall size can be customised by providing it a height prop. It takes in a value for height in pixels. Note that the minimum allowed height is 30px, which is also the default height.

import React, { FC } from 'react';
import Logo from '@placardi/logo';

const App: FC = () => (
  <header>
    <Logo height={50} />
  </header>
)

export default App;

Logo on dark background

Placardi logo can be used on a dark background. In order to make sure logo text is still visible, it is important to render the light version of the logo by passing a light prop to Logo component.

import React, { FC } from 'react';
import Logo from '@placardi/logo';

const App: FC = () => (
  <header>
    <Logo light />
  </header>
)

export default App;