Typography components and recipes

Koval UI offers a suite of components designed to ensure typography consistency and harmony across various text elements, including paragraphs, headers, lists, numbers, and tables.

Create a clean text flow

Paragraph

The Paragraph (P) component provides a uniform style based on the HTMLParagraphElement.

Import name

import {P} from 'koval-ui';

Demo

Headers

Koval UI supports six header sizes, from H1 to H6, allowing for flexible and consistent heading structures.

Import name

import {H1, H2, H3, H4, H5, H6} from 'koval-ui';

Demo

Inline elements

Koval UI provides consistent styling for various HTML inline elements, such as a, small, sup and so on.

Import names

import {A, Strong, Sup, Sub, Small, B, Mark, Ins, I, Em, Del, Kbd, Code, S} from 'koval-ui';

Demo

Lists

Three types of list formatting are available:

• Ordered lists (Ol)
• Unordered Lists (Ul)
• Description Lists (Dl)

Import name and example

Each component is implemented as wrapper for HTMLLIElements.

import {Ol, Ul, Dl} from 'koval-ui';
 
const Ordered = () => (
    <Ol>
        <li>Ordered item 1</li>
        <li>Ordered item 2</li>
        <li>Ordered item 3</li>
    </Ol>
);
 
const Unordered = () => (
    <Ul>
        <li>Unordered item 1</li>
        <li>Unordered item 2</li>
        <li>Unordered item 3</li>
    </Ul>
);
 
const Description = () => (
    <Ul>
        <dt>Item title 1</dt>
        <dd>Item description 1</dd>
        <dt>Item title 2</dt>
        <dd>Item description 2</dd>
        <dt>Item title 3</dt>
        <dd>Item description 3</dd>
    </Ul>
);

Demo

Table

A basic Table component is available, serving as a wrapper for standard HTML table elements such as tr, td, and others.

Import name

import {Table} from 'koval-ui';

Demo