TextContainer

Use

TextContainer controls the spacing between children elements in a standardized way.

Installation

yarn add @chantelle/text-container

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/text-container/dist/styles.css">

Note: you can import the CSS directly into your project if your bundler supports it:

 import '@chantelle/text-container/dist/styles.css';

React Component

import { TextContainer } from '@chantelle/text-container';

ReactDOM.render(
  <TextContainer>
    <Heading>Headline</Heading>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
  </TextContainer>,
  container
);

CSS API

To use the TextContainer component, add the .pl-textContainer to any element to apply the styles.

<div class="pl-textContainer"></div>
<div class="pl-textContainer pl-textContainer--loose"></div>