Typography

Kodhus provides following types to be used within your web pages.

Headings

Following are the standard 6 headings styled using Kodhus library.

Kodhus Heading 1

Kodhus Heading 2

Kodhus Heading 3

Kodhus Heading 4

Kodhus Heading 5
Kodhus Heading 6

You can either use default Html heading tags (h1, h2, .., h6) or use the following component based version:

import { Heading } from 'kodhus-ui-react';

<Heading size='h1'>Kodhus Heading 1</Heading>
<Heading size='h2'>Kodhus Heading 2</Heading>
<Heading size='h3'>Kodhus Heading 3</Heading>
<Heading size='h4'>Kodhus Heading 4</Heading>
<Heading size='h5'>Kodhus Heading 5</Heading>
<Heading size='h6'>Kodhus Heading 6</Heading>

The output of this will be following:

Blockquote

Blockquotes automatically get styles as following:

Note: If you prefer not to put styles in the <head> of your page, including this style in your primary stylesheet will still help with element flickering since your CSS will likely load before your JavaScript.


Emphy

This is a text that is bigger than normal and is to highlight a point.

import { Emphy } from 'kodhus-ui-react';

<Emphy>This is a text that is bigger than normal and is to highlight a point.</Emphy>