You must first invent the universe
Typography is a core building block of every web application.
This goes with a semantics-first approach, because header hierarchy and text nesting have implications on accessibility. The visual style can be configured through props.
Elements
Type.H1
Type.H2
Type.H3
Type.H4
Type.H5
Type.H6
Type.Text
Type.Inline
Specifying size
size | example |
|---|---|
| h100 | The quick brown fox jumps over the lazy dog |
| h200 | The quick brown fox jumps over the lazy dog |
| h300 | The quick brown fox jumps over the lazy dog |
| h400 | The quick brown fox jumps over the lazy dog |
| h500 | The quick brown fox jumps over the lazy dog |
| h600 | The quick brown fox jumps over the lazy dog |
| h700 | The quick brown fox jumps over the lazy dog |
| h800 | The quick brown fox jumps over the lazy dog |
Styling text
style | example |
|---|---|
| light | The quick brown fox jumps over the lazy dog |
| semibold | The quick brown fox jumps over the lazy dog |
| regular | The quick brown fox jumps over the lazy dog |
| bold | The quick brown fox jumps over the lazy dog |
Use Type.Inline to style text inline. It inherits the parent font size by default, so you don't have to repeat the size prop. You can still opt to override the font size.
Lorem ipsum dolor sit sit amet consectetur, adipisicing elit.
Specifying spacing
Use props to set margin and paddings.
prop | description |
|---|---|
| vertical and horizontal margins |
| top margin |
| bottom margin |
| left margin |
| right margin |
| vertical margins |
| horizontal margins |
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