@chantelle/heading

The Heading component of the Chantelle Pattern Library

Usage no npm install needed!

<script type="module">
  import chantelleHeading from 'https://cdn.skypack.dev/@chantelle/heading';
</script>

README

Heading

Installation

yarn add @chantelle/heading

Usage

First, include the CSS in your HTML:

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

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

 import '@chantelle/heading/dist/styles.css';

React Component

import Heading from '@chantelle/heading';

ReactDOM.render(
  <Heading>Example Heading</Heading>,
  container
);

CSS API

To use the Heading component, add the .pl-heading to h1/h2/h3/h4/h5/h5 or span element to apply the styles.

Appearances

<a class="pl-heading pl-heading--headline">Headline</a>
<a class="pl-heading pl-heading--title">Title</a>