# TextContainer

## Use

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


## Installation

```bash
yarn add @chantelle/text-container
```

## Usage

First, include the CSS in your HTML:

```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:

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

### React Component

```jsx
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.

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