@happyfresh/typography

Typography

Typography packages contains Heading, span (as subtile) and paragraph. Subtitle and paragraph has two types while Heading is consists of H1, H2, H3, H4, H5, H6

Installation

yarn add @happyfresh/typography

Usage

import React from 'react';
import { typography} from './src/index';

const { H1, H2, H3, H4, H5, H6, P, Subtitle } = typography;

export const TypographyBasic = () => (
  <React.Fragment>
    <H1>
      Heading 1
    </H1>
    <H2>
      Heading 2
    </H2>
    <H3>
      Heading 3
    </H3>
    <H4>
      Heading 4
    </H4>
    <H5>
      Heading 5
    </H5>
    <H6>
      Heading 6
    </H6>
    <Subtitle kind='primary'>
      Subtitle 1 (primary) 
    </Subtitle>
    <Subtitle kind='secondary'>
      Subtitle 2 (secondary)
    </Subtitle>
    <P kind='primary'>
      Paragraph 1 (primary)
    </P>
    <P kind='secondary'>
      Paragraph 2 (secondary)
    </P>
  </React.Fragment>
);