Text

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

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--grey

.-text--muted

.-text--secondary

.-text--light

<!-- For light backgrounds -->
<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--grey">.-text--grey</p>
<p class="-text--muted">.-text--muted</p>
<!-- For dark backgrounds -->
<p class="-text--secondary">.-text--secondary</p>
<p class="-text--light">.-text--light</p>

Responsiveness

Sizes

Text utility classes can be defined using the format -text[-{breakpoint}]--{size}.

{breakpoint}

Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.

blank - leave blank to apply text to all breakpoints.
sm - use to apply text to sm and larger breakpoints.
md - use to apply text to md and larger breakpoints.
lg - use to apply text to lg and larger breakpoints.
xl - use to apply text to xl breakpoints.

{size}

small - use to set small the text
smaller - use to set smaller the text
large - use to set large the text
larger - use to set larger the text

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-md--large"></p>
<p class="-text-xl--smaller"></p>
<p class="-text-lg--larger"></p>

Line heights

Line height sizes can be defined using the format -lh[-{breakpoint}]--{size}.

{breakpoint}

blank - leave blank to apply text to all breakpoints.
sm - use to apply line-height to sm and larger breakpoints.
md - use to apply line-height to md and larger breakpoints.
lg - use to apply line-height to lg and larger breakpoints.
xl - use to apply line-height to xl breakpoints.

{size}

0 - use to set line-height and set to 0
1 - use to set line-height to $base-unit * 1
2 - use to set line-height to $base-unit * 2
3 - use to set line-height to $base-unit * 3
4 - use to set line-height to $base-unit * 4
5 - use to set line-height to $base-unit * 5
6 - use to set line-height to $base-unit * 6
7 - use to set line-height to $base-unit * 7
8 - use to set line-height to $base-unit * 8
9 - use to set line-height to $base-unit * 9

-lh-md--2

-lh-lg--4

-lh-sm--5

-lh-xl--7

<p class="-text -lh-md--2">-lh-md--2</p>
<p class="-text -lh-lg--4">-lh-lg--4</p>
<p class="-text -lh-sm--5">-lh-sm--5</p>
<p class="-text -lh-xl--7">-lh-xl--7</p>

Text alignment

Text utility classes can be align using the format -text[-{breakpoint}]--{alignment}.

{breakpoint}

blank - leave blank to apply alignment to all breakpoints.
sm - use to apply alignment to sm and larger breakpoints.
md - use to apply alignment to md and larger breakpoints.
lg - use to apply alignment to lg and larger breakpoints.
xl - use to apply alignment to xl breakpoints.

{alignment}

justify - use to set justify the text
center - use to set center the text
left - use to set left the text
right - use to set right the text

This text will render as justified from md and larger breakpoints

This text will render as left aligned from lg and larger breakpoints

This text will render as center aligned from sm and larger breakpoints

This text will render as right aligned from xl and larger breakpoints

<p class="-text-md--justify">This text will render as justified from md and larger breakpoints</p>
<p class="-text-lg--left">This text will render as left aligned from lg and larger breakpoints</p>
<p class="-text-sm--center">This text will render as center aligned from sm and larger breakpoints</p>
<p class="-text-xl--right">This text will render as right aligned from xl and larger breakpoints</p>

Text

Text size

Base

Large

Larger

Small

Smaller

Text line height

Text alignment

Text transform

Text weight

Text wrapping

Text colors

Responsiveness

Sizes

{breakpoint}

{size}

Line heights

{breakpoint}

{size}

Text alignment

{breakpoint}

{alignment}