TypographyText styles and formatting system.

H1

Heading 1

import { H1 } from '@/components/Typography';
export function Example() {  return <H1>Heading 1</H1>;}

H2

Heading 2

import { H2 } from '@/components/Typography';
export function Example() {  return <H2>Heading 2</H2>;}

H3

Heading 3

import { H3 } from '@/components/Typography';
export function Example() {  return <H3>Heading 3</H3>;}

H4

Heading 4

import { H4 } from '@/components/Typography';
export function Example() {  return <H4>Heading 4</H4>;}

H5
Heading 5
import { H5 } from '@/components/Typography';
export function Example() {  return <H5>Heading 5</H5>;}

H6
Heading 6
import { H6 } from '@/components/Typography';
export function Example() {  return <H6>Heading 6</H6>;}

SubTitle

HeadingSubTitle

import { SubTitle } from '@/components/Typography';
export function Example() {  return <H1>    Heading    <SubTitle>SubTitle</SubTitle>  </H1>;}

P

Lorem ipsum dolor sit amet consectetur adipiscing elit. Donec vel sapien eget nunc efficitur efficitur. Sed at ligula a enim efficitur convallis. Suspendisse potenti. In hac habitasse platea dictumst. Curabitur ac odio sed nisl convallis commodo. Donec in nunc a enim efficitur efficitur. Sed at ligula a enim efficitur convallis. Suspendisse potenti. In hac habitasse platea dictumst. Curabitur ac odio sed nisl convallis commodo.

import { P } from '@/components/Typography';
export function Example() {  return <P>    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </P>;}

Blockquote
Lorem ipsum dolor sit amet consectetur adipiscing elit. Donec vel sapien eget nunc efficitur efficitur. Sed at ligula a enim efficitur convallis. Suspendisse potenti. In hac habitasse platea dictumst. Curabitur ac odio sed nisl convallis commodo. Donec in nunc a enim efficitur efficitur. Sed at ligula a enim efficitur convallis. Suspendisse potenti. In hac habitasse platea dictumst. Curabitur ac odio sed nisl convallis commodo.
import { Blockquote } from '@/components/Typography';
export function Example() {  return <Blockquote>    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </Blockquote>;}

Sup

cm2

import { P, Sup } from '@/components/Typography';
export function Example() {  return <P>    cm    <Sup>2</Sup>  </P>;}

Sub

CO2

import { P, Sub } from '@/components/Typography';
export function Example() {  return <P>    CO    <Sub>2</Sub>  </P>;}