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>
);