Farmblocks-Text

React components for displaying text. See Storybook

Usage

You can combine the text props to create a full customizable text page.

import React from "react";
import { render } from "react-dom";

import Text from "@crave/farmblocks-text";
import { fontSizes, fontTypes } from "@crave/farmblocks-theme";

const App = () => (
  <div>
    <Text fontWeight="title" size={fontSizes.HUGE} type={fontTypes.FEATURED}>
      Content title
    </Text>

    <Text size={fontSizes.LARGE} type={fontTypes.NEUTRAL} lineHeight={2.5}>
      This is a normal text that can be used as a subtitle
    </Text>

    <Text
      paragraph
      size={fontSizes.MEDIUM}
      type={fontTypes.NORMAL}
      align="justify"
    >
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries.
    </Text>
  </div>
);

render(<App />, document.getElementById("root"));

This code will render this:

API

See it in the source

Also see the predefined font sizes and types available on farmblocks-theme package

License

MIT