Typography
The typography package is based on the EXO-BNNVARA font. It contains styles for heading, subtitles and text.
Design & API Documentation
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. |