Chi Documentation
Text
Use text utility classes to control sizing, color, alignment and more.
Examples
Text line height
Use shorthand utility classes to control an elements line-height. Line height sizes are equal to $base-unit * {size}
and illustrated in green in the example below.
.-lh1
.-lh2
.-lh3
.-lh4
.-lh5
.-lh6
.-lh7
.-lh8
.-lh9
<p class="-text -lh1">.-lh1</p>
<p class="-text -lh2">.-lh2</p>
<p class="-text -lh3">.-lh3</p>
<p class="-text -lh4">.-lh4</p>
<p class="-text -lh5">.-lh5</p>
<p class="-text -lh6">.-lh6</p>
<p class="-text -lh7">.-lh7</p>
<p class="-text -lh8">.-lh8</p>
<p class="-text -lh9">.-lh9</p>Text alignment
Change text alignment to justified, left, center, or right.
This text will render as justified
This text will render as left aligned
This text will render as center aligned
This text will render as right aligned
<p class="-textJustify">This text will render as justified</p>
<p class="-textLeft">This text will render as left aligned</p>
<p class="-textCenter">This text will render as center aligned</p>
<p class="-textRight">This text will render as right aligned</p>Text transform
Change text transform to lowercase, uppercase, or capitalized.
This text will render as lowercase
This text will render as uppercase
This text will render as capitalized
<p class="-textLowercase">This text will render as lowercase</p>
<p class="-textUppercase">This text will render as uppercase</p>
<p class="-textCapitalized">This text will render as capitalized</p>Text weight
Change text weight to thin, normal, bold, or bolder.
This text will render as thin
This text will render as normal
This text will render as bold
This text will render as bolder
<p class="-textThin">This text will render as thin</p>
<p class="-textNormal">This text will render as normal</p>
<p class="-textBold">This text will render as bold</p>
<p class="-textBolder">This text will render as bolder</p>Text wrapping
Prevent text wrapping with nowrap or control overflow with truncate.
This text will render without wrapping
This text will truncate with an ellipsis
<p class="-textNoWrap">This text will render without wrapping</p>
<p class="-textTruncate">This text will truncate with an ellipsis</p>Text colors
Change text colors with contextual classes.
.-textBrand
.-textSuccess
.-textWarning
.-textDanger
.-textInfo
.-textInverse
<p class="-textBrand">.-textBrand</p>
<p class="-textSuccess">.-textSuccess</p>
<p class="-textWarning">.-textWarning</p>
<p class="-textDanger">.-textDanger</p>
<p class="-textInfo">.-textInfo</p>
<p class="-textInverse">.-textInverse</p>