Typo

A pure CSS component

Anatomy

The Typo component is used as a base for font managment and basic html tags used in all components

Heading 1

Heading 2

Heading 3

Heading 4

This is a paragraph to demonstrate the base font size and line height. It should look readable and well-spaced. This is some small text.

<h1>Heading 1</h1>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <p>This is a paragraph to demonstrate the base font size and line height. It should look readable and
                  well-spaced.
                  <small>This is some small text.</small>
                  </p>

Templates

Typo components is available in the followng templates

Corex template

Default corex templates. It provides the global, semantic and components tokens

CSS Tailwind Design Tokens
Modex template

Based on Corex default template, it adds dark and light mode option to the tokens

CSS Tailwind Design Tokens
Themex template

Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.

CSS Tailwind Design Tokens

Tree View