Typography
Use our different classes to change your typography.
The typography classes are made to let you custom the most possible your text.
Font size classes
The font-size classes allow you to change the font size of any text.
The classes are named .font-s1 | .font-s2 | ... | .font-s12
font-s1
font-s2
font-s3
font-s4
font-s5
font-s6
From 1 to 12...Headings
This is a H1
This is a H2
This is a H3
This is a H4
This is a H5
This is a H6
Heading classes
The heading classes allow you to create fake headers on any text.
The classes are named as the headings so :
.h1 | .h2 | ... | .h6
Text alignment
| Class name | Description |
|---|---|
.text-left |
Align text to the left. |
.text-center |
Align text to the center. |
.text-right |
Align text to the right. |
.text-justify |
Justify text all over the rows. |
Font weight
The font weight classes help you to change the weight of any text.
The classes are .font-w{weight} where the weight value can be :
100 | 200 | 300 | ... | 900
This is a .font-w400 text
This is a .font-w600 text
Line height
You have 3 ways to use the line-height classes :
- You can use the
.lh-normalto get a normal line-height. -
You can use the basic way
.lh-{value}where value can be :
1, 2 ... 6
-
But you can use the way with the
remunit.lh-rem-{value}where value can be :
1, 2 ... 5
Word break
The word break classes help you to change the sentence cut behavior.
| Class name | Description |
|---|---|
.wb-normal |
Normal word-break behaviour. |
.wb-break-all |
Allows word-break on all characters. |
.wb-keep-all |
Same as the word-break normal but not for Chinese, Japan and Korean. |
.wb-break-word |
Same as word-break normal combined with overflow-wrap: anywhere . |
.wb-unset |
Unset the property. |