Text
For text we support sizes, alignment, typography and colors classes.
| Class | Effect | Example |
|---|---|---|
superscript |
Simulates text superscript | heading in super |
ttl |
text transform lowercase | ALL IS IN LOWERCASE |
ttu |
text transform uppercase | all is in uppercase |
ttc |
text transform capitalize | this gets converted to capitalize |
ttn |
remove text transform | NO Transformation IS applied |
tw |
Forces light color | White text no matter what |
tb |
Forces dark color | Dark text no matter what |
Alignment
| Class | Effect | Example |
|---|---|---|
ta-l |
Alignment of text left | Left aligned |
ta-r |
Right aligned text | Right aligned |
ta-c |
Centered text | Centered |
ta-j |
Justified text | In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. Resize the browser window to see how the value "justify" works. |
ws-nw |
No wrap for text | No wrap at all cost |
Typography
| Class | Effect | Example |
|---|---|---|
normal |
font-weight: normal |
normal text |
b |
font-weight: bold |
bold text |
fw1 |
font-weight: 100 |
text sample |
fw2 |
font-weight: 200 |
text sample |
fw3 |
font-weight: 300 |
text sample |
fw4 |
font-weight: 400 |
text sample |
fw5 |
font-weight: 500 |
text sample |
fw6 |
font-weight: 600 |
text sample |
fw7 |
font-weight: 700 |
text sample |
fw8 |
font-weight: 800 |
text sample |
fw9 |
font-weight: 900 |
text sample |
As mentioned at Typography - Modular Scale we do not exact pixels for font size. This is due to different font sizes for each end device (tv, phone, tablet).
| Class | Effect | Example |
|---|---|---|
fs10 |
Set the font-size property to size ms(10) |
Size 10 |
fs9 |
Set the font-size property to size ms(9) |
Size 9 |
fs8 |
Set the font-size property to size ms(8) |
Size 8 |
fs7 |
Set the font-size property to size ms(7) |
Size 7 |
fs6 |
Set the font-size property to size ms(6) |
Size 6 |
fs5 |
Set the font-size property to size ms(5) |
Size 5 |
fs4 |
Set the font-size property to size ms(4) |
Size 4 |
fs3 |
Set the font-size property to size ms(3) |
Size 3 |
fs2 |
Set the font-size property to size ms(2) |
Size 2 |
fs1 |
Set the font-size property to size ms(1) |
Size 1 |
fs0 |
Set the font-size property to size ms(0) |
Size 0 |
fs-1 |
Set the font-size property to size ms(-1) |
Size -1 |
fs-2 |
Set the font-size property to size ms(-2) |
Size -2 |
fs-3 |
Set the font-size property to size ms(-3) |
Size -3 |
Additional classes
| Class | Effect |
|---|---|
text-ov-enable |
When the text reaches the specific width (that needs to be set separately) it is cut and ends with three dots |
text-ov-disable |
Disables the functionality of text-ov-enable |
word-break |
Breaks the texts and moves a part of it to the new row. It requires some width to be set. |
minw5ch |
Sets the minimum width to 5 characters |
minw10ch |
Sets the minimum width to 10 characters |
minw15ch |
Sets the minimum width to 15 characters |
minw20ch |
Sets the minimum width to 20 characters |
minw30ch |
Sets the minimum width to 30 characters |
maxw100ch |
Sets the maximum width to 100 characters |
maxw200ch |
Sets the maximum width to 200 characters |