@chantelle/pl-text-container
v1.1.3
Published
The TextContainer component of the Chantelle Pattern Library
Downloads
11
Readme
TextContainer
Use
TextContainer
controls the spacing between children elements in a standardized way.
Installation
yarn add @chantelle/pl-text-container
Usage
First, include the CSS in your HTML:
<link rel="stylesheet" href="node_modules/@chantelle/pl-text-container/build/css/main.css">
Note: you can import the CSS directly into your project if your bundler supports it:
import '@chantelle/pl-text-container/build/css/main.css';
React Component
import { TextContainer } from '@chantelle/pl-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>