@alpsfinance/brand

🎉 AlpsFinance Brand Resources

Find all our Brand Resources under the logo folder.

For development use in React applications, you can install @alpsfinance/brand:

# NPM
npm i @alpsfinance/brand

# Yarn
yarn @alpsfinance/brand

and check out all the documentation in our Storybook.

Built with 💙 by Alps Finance.

Table of Contents

• ⚙️ Components
  • <Logo />
    • Base Logo
    • Circle Logo
    • Rounded Logo
    • Square Logo
  • <LogoWithText />
• 📜 License

⚙️ Components

<Logo />

Render variety of Alps Logo as a React Component.

Props:

• variant: variants of Alps Logo, comprised of 4 enums (BASE, CIRCLE, ROUNDED, SQUARE)
• type: type of the variants style for the Alps Logo, for BASE only 1 to 4 is available, others 1 to 12. If larger number is inputted, then it will render Logo with the largest number type.

Note: To see the different types of Alps Logo accordingly to its variant, check out our Storybook

1. Base Logo

import { Logo, AlpsLogoVariant } from "@alpsfinance/brand";

const Component = () => {
    return (
        <Logo variant={AlpsLogoVariant.BASE} type={1}>
    );
};

2. Circle Logo

import { Logo, AlpsLogoVariant } from "@alpsfinance/brand";

const Component = () => {
    return (
        <Logo variant={AlpsLogoVariant.CIRCLE} type={1}>
    );
};

3. Rounded Logo

import { Logo, AlpsLogoVariant } from "@alpsfinance/brand";

const Component = () => {
    return (
        <Logo variant={AlpsLogoVariant.ROUNDED} type={1}>
    );
};

4. Square Logo

import { Logo, AlpsLogoVariant } from "@alpsfinance/brand";

const Component = () => {
    return (
        <Logo variant={AlpsLogoVariant.SQUARE} type={1}>
    );
};

<LogoWithText />

Coming soon.

📜 License

Creative Commons Zero v1.0 Universal