@bnnvara/typography/README.md

Typography for BNNVARA

# Typography

The typography package is based on the EXO-BNNVARA font. It contains styles for heading, subtitles and text.

## Design & API Documentation

[DEMO Typography](https://patterns.bnnvara.nl/selectedKind=1.%20Atoms%7CTypography&selectedStory=Heading%20styles?selectedKind=1.%20Atoms%7CTypography&selectedStory=Heading)

[Patterns library](https://patterns.bnnvara.nl)

## Installation

```npm install @bnnvara/typography --save```

## Basic Usage

```import { Heading, Subtitle, Text } from '@bnnvara/typography';``` 

# HTML Structure

**Heading** 
```
<Heading
  element="h1"
  variant="one"
>Title example</Heading>
```

**Subtitle**
```
<Subtitle>Suspendisse potenti. Nam facilisis mi quis</Subtitle>
```

**Text** 
```
<Text><p>Suspendisse potenti.</p></Text>
``` 

## Variants

# Heading

Heading takes care of the headings on the site.

### Props
|Name|Type|Props|Required|
|--- |--- |--- |---|
|variant|String|one, two, three, four, five, six, brand, copyright.|Required|
|element|String|h1, h2, h3, h4, h5, h6 |required|
|children|String|any input, must be a React node.|Required|
|color|String|"white" or "black" |Required|


# Subtitle

Subtitles are used for the styling of subtitles

### Props
|Name|Type|Props|Required|
|--- |--- |--- |---|
|children|String|any input, must be a React node.|Required|

# Text

Text is used for the styling of paragraphs. 

|Name|Type|Props|Required|
|--- |--- |--- |---|
|children|String|any input, must be a React node.||
|bold|Boo|Renders the text in bold.||