Typography
Import
import { VKTypography } from "@vivakits/react-components";Variant
The Typography component comes with 7 different variants that you can change using the variant prop.
h1
h2
h3
h4
h5
h6
paragraph
Color
The Typography component comes with 8 different colors that you can change using the color prop.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Size
The Typography component comes with different size that you can change using the size prop.
Actions speak louder than words.
Actions speak louder than words.
Actions speak louder than words.
Actions speak louder than words.
Actions speak louder than words.
Actions speak louder than words.
Actions speak louder than words.
Decoration
The Typography component comes with different decorations and decoration colors that you can change using the decoration and decorationColor prop.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Spacing and Breaks
The Typography component comes with word breaks and word spacings that you can change using the wordBreak and wordSpacing prop.
Word Break
The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
Word Spacing
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| variant | h1h2h3h4h5h6paragraph | Changes typography size | paragraph |
| color | defaultprimarysecondarysuccessdangerwarningdarklight | Changes typography color | default |
| size | xssmbasemdlgxl2xl | Changes Text size | - |
| decoration | noneunderlineoverlinelineThrough | Changes decoration on typography text | none |
| decorationColor | defaultprimarysecondarysuccessdangerwarningdarklight | Changes decoration color on typography text | default |
| weight | default100200300400500600700800900 | Changes font weight on typography text | default |
| fontFamily | sansSerifserifmono | Changes font family on typography text | - |
| overflow | nonetruncateellipsisclip | Changes overflow on typography text | none |
| wordSpacing | tighttighternormalwidewiderwidest | Controls word spacing in typography text | normal |
| align | startendleftrightjustifycenter | Changes alignment on typography text | left |
| wordBreak | defaultnormalwordsallkeep | Controls word breaks in typography text | default |