Typography
Font size, weight, alignment, decoration, casing and line height, all controlled from the builder.
Font size
| Utility | Generated CSS |
|---|---|
TextXs() |
font-size: 0.75rem |
TextSm() |
font-size: 0.875rem |
TextBase() |
font-size: 1rem |
TextLg() |
font-size: 1.125rem |
TextXl() |
font-size: 1.25rem |
Text2Xl() |
font-size: 1.5rem |
Text3Xl() |
font-size: 1.875rem |
text-xs (0.75rem)
text-sm (0.875rem)
text-base (1rem)
text-lg (1.125rem)
text-xl (1.25rem)
text-2xl (1.5rem)
text-3xl (1.875rem)
<p class="@Css.TextXs()">text-xs</p>
<p class="@Css.Text3Xl()">text-3xl</p>Font weight and style
| Utility | Generated CSS |
|---|---|
FontThin() |
font-weight: 100 |
FontNormal() |
font-weight: 400 |
FontBold() |
font-weight: 700 |
Italic() |
font-style: italic |
NotItalic() |
font-style: normal |
Thin weight
Normal weight
Bold weight
Italic
Not italic
<p class="@Css.FontThin()">Thin weight</p>
<p class="@Css.FontBold()">Bold weight</p>
<p class="@Css.Italic()">Italic</p>Alignment and decoration
| Utility | Generated CSS |
|---|---|
TextLeft() |
text-align: left |
TextCenter() |
text-align: center |
TextRight() |
text-align: right |
Underline() |
text-decoration-line: underline |
NoUnderline() |
text-decoration-line: none |
Left aligned
Center aligned
Right aligned
Underlined and not underlined
<p class="@Css.TextCenter()">Center aligned</p>
<p class="@Css.TextRight()">Right aligned</p>
<p><span class="@Css.Underline()">Underlined</span></p>Casing and whitespace
| Utility | Generated CSS |
|---|---|
Uppercase() |
text-transform: uppercase |
Lowercase() |
text-transform: lowercase |
Capitalize() |
text-transform: capitalize |
WhitespaceNoWrap() |
white-space: nowrap |
uppercase text
LOWERCASE TEXT
capitalize each word
this line will not wrap no matter how long it becomes in the container
<p class="@Css.Uppercase()">uppercase text</p>
<p class="@Css.Capitalize()">capitalize each word</p>
<p class="@Css.WhitespaceNoWrap()">will not wrap</p>Line height
Leading(n) uses the spacing scale for
line-height: Leading(6)
is 1.5rem.
Css.TextSm().Leading(6);
// class: text-sm leading-6
// CSS: .leading-6 { line-height: 1.5rem }Continue with borders and effects.