TPDS

Typography

Use the typography elements directly. They are all responsive by default and will ensure typographic consistency.

Paragraphs


PNano

The quick brown fox jumps over the lazy dog


PTiny

The quick brown fox jumps over the lazy dog


PSmall

The quick brown fox jumps over the lazy dog


P

The quick brown fox jumps over the lazy dog


PLarge

The quick brown fox jumps over the lazy dog



Code for the examples above:

1import {
2  PNano,
3  PTiny,
4  PSmall,
5  P,
6  PLarge
7} from '@tempoplatform/tpds/elements/typography'
8
9<PNano>The quick brown fox jumps over the lazy dog</PNano>
10<PTiny>The quick brown fox jumps over the lazy dog</PTiny>
11<PSmall>The quick brown fox jumps over the lazy dog</PSmall>
12<P>The quick brown fox jumps over the lazy dog</P>
13<PLarge>The quick brown fox jumps over the lazy dog</PLarge>


Headlines


H6

The quick brown fox jumps over the lazy dog

H5

The quick brown fox jumps over the lazy dog

H4

The quick brown fox jumps over the lazy dog


H3

The quick brown fox jumps over the lazy dog


H2

The quick brown fox jumps over the lazy dog


H1

The quick brown fox jumps over the lazy dog



Code for the examples above:

1import {
2  H6,
3  H5,
4  H4,
5  H3,
6  H2,
7  H1
8} from '@tempoplatform/tpds/elements/typography'
9
10<H6>The quick brown fox jumps over the lazy dog</H6>
11<H5>The quick brown fox jumps over the lazy dog</H5>
12<H4>The quick brown fox jumps over the lazy dog</H4>
13<H3>The quick brown fox jumps over the lazy dog</H3>
14<H2>The quick brown fox jumps over the lazy dog</H2>
15<H1>The quick brown fox jumps over the lazy dog</H1>


Form Labels


Typography elements for forms


FormLabelNano

The quick brown fox jumps over the lazy dog


FormLabelTiny

The quick brown fox jumps over the lazy dog


FormLabelSmall

The quick brown fox jumps over the lazy dog


FormLabel

The quick brown fox jumps over the lazy dog



Code for the examples above:

1import {
2  FormLabelNano,
3  FormLabelTiny,
4  FormLabelSmall,
5  FormLabel
6} from '@tempoplatform/tpds/elements/typography'
7
8<FormLabelNano>The quick brown fox jumps over the lazy dog</FormLabelNano>
9<FormLabelTiny>The quick brown fox jumps over the lazy dog</FormLabelTiny>
10<FormLabelSmall>The quick brown fox jumps over the lazy dog</FormLabelSmall>
11<FormLabel>The quick brown fox jumps over the lazy dog</FormLabel>