Chi Documentation

Text

Use text utility classes to control sizing, color, alignment and more.

Text size

Base

14px (0.875rem) font size with 24px (1.5rem) line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.

<p class="-text"></p>

Large

16px (1rem) font size with 24px (1.5rem) line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.

<p class="-text--large"></p>

Larger

18px (1.125rem) font size with 28px (1.75rem) line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.

<p class="-text--larger"></p>

Small

13px (0.8125rem) font size with 20px (1.25rem) line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.

<p class="-text--small"></p>

Smaller

12px (0.75rem) font size with 20px (1.25rem) line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.

<p class="-text--smaller"></p>

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.

-lh--1

-lh--2

-lh--3

-lh--4

-lh--5

-lh--6

-lh--7

-lh--8

-lh--9

<p class="-text -lh--1">-lh--1</p>
<p class="-text -lh--2">-lh--2</p>
<p class="-text -lh--3">-lh--3</p>
<p class="-text -lh--4">-lh--4</p>
<p class="-text -lh--5">-lh--5</p>
<p class="-text -lh--6">-lh--6</p>
<p class="-text -lh--7">-lh--7</p>
<p class="-text -lh--8">-lh--8</p>
<p class="-text -lh--9">-lh--9</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="-text--justify">This text will render as justified</p>
<p class="-text--left">This text will render as left aligned</p>
<p class="-text--center">This text will render as center aligned</p>
<p class="-text--right">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="-text--lowercase">This text will render as lowercase</p>
<p class="-text--uppercase">This text will render as uppercase</p>
<p class="-text--capitalized">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="-text--thin">This text will render as thin</p>
<p class="-text--normal">This text will render as normal</p>
<p class="-text--bold">This text will render as bold</p>
<p class="-text--bolder">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="-text--nowrap">This text will render without wrapping</p>
<p class="-text--truncate">This text will truncate with an ellipsis</p>

Text colors

Change text colors with contextual classes.

.-text--body

.-text--primary

.-text--success

.-text--warning

.-text--danger

.-text--muted

.-text--secondary-alt

.-text--secondary

.-text--white

<p class="-text--body">.-text--body</p>
<p class="-text--primary">.-text--primary</p>
<p class="-text--success">.-text--success</p>
<p class="-text--warning">.-text--warning</p>
<p class="-text--danger">.-text--danger</p>
<p class="-text--muted">.-text--muted</p>
<p class="-text--secondary-alt">.-text--secondary-alt</p>
<p class="-text--secondary">.-text--secondary</p>
<p class="-text--white">.-text--white</p>