Typography

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

Design & API Documentation

DEMO Typography

Patterns library

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