Text

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

Text size #

Text size supports the following sizes: -text--2xs, -text--xs, -text--sm, -text--md, -text--lg, and -text--xl. The default size is -text--md.

SizeExample
-text--xl
Font-size:
18px (1.125rem)
Line-height:
28px (1.75rem)

The quick brown fox jumps over the lazy dog.

-text--lg
Font-size:
16px (1rem)
Line-height:
24px (1.5rem)

The quick brown fox jumps over the lazy dog.

-text--md
Font-size:
14px (0.875rem)
Line-height:
24px (1.5rem)

The quick brown fox jumps over the lazy dog.

-text--sm
Font-size:
13px (0.8125rem)
Line-height:
20px (1.25rem)

The quick brown fox jumps over the lazy dog.

-text--xs
Font-size:
12px (0.75rem)
Line-height:
16px (1rem)

The quick brown fox jumps over the lazy dog.

-text--2xs
Font-size:
11px (0.6875rem)
Line-height:
16px (1rem)

The quick brown fox jumps over the lazy dog.

Text headings #

Use classes -text--h1 through -text--h6 to match Chi's default heading sizes.

SizeExample
-text--h1
Font-size:
48px (3rem)
Line-height:
64px (4rem)

The quick brown fox jumps over the lazy dog.

-text--h2
Font-size:
32px (2rem)
Line-height:
48px (3rem)

The quick brown fox jumps over the lazy dog.

-text--h3
Font-size:
24px (1.5rem)
Line-height:
32px (2rem)

The quick brown fox jumps over the lazy dog.

-text--h4
Font-size:
18px (1.125rem)
Line-height:
32px (2rem)

The quick brown fox jumps over the lazy dog.

-text--h5
Font-size:
16px (1rem)
Line-height:
24px (1.5rem)

The quick brown fox jumps over the lazy dog.

-text--h6
Font-size:
14px (0.875rem)
Line-height:
24px (1.5rem)

The quick brown fox jumps over the lazy dog.

Text line height #

Use shorthand utility classes to control an element's 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

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

Text decoration #

Change text decoration to no-decoration, underline, or line-through.

This text will render with no decoration

This text will render with an underline

This text will render with a line through

Text transform #

Change text transform to lowercase, uppercase, or capitalize.

This text will render as lowercase

This text will render as uppercase

This text will render as capitalize

This text will convert UPPERCASE TEXT to lowercase and capitalize the first letter

This text will render as italic

This text will render with no transform

Text weight #

Change text weight to thin, normal, semi-bold, bold, bolder, or boldest.

This text will render as thin

This text will render as normal

This text will render as semi-bold

This text will render as bold

This text will render as bolder

This text will render as boldest

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

Text colors #

Change text colors with contextual classes.

Brand #

Brand text colors reinforce Lumen's brand. Use primary and secondary as accents and body and light as neutrals.

-text--body

-text--primary

-text--secondary

-text--light

Semantic #

Use semantic text colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, yellow (warning) for needs attention, and grey (muted) for neutral. Semantic colors should never be used for decorative purposes.

-text--success

-text--info

-text--danger

-text--warning

-text--muted

Brand complimentary #

More text colors that can be used to compliment the primary brand palette.

-text--navy

-text--orange

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 breakpoints will also modify larger ones unless another class overrides this behaviour.

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

{size} #

  • xs - use to apply an x-small size to text
  • sm - use to apply an small size to text
  • md - use to apply an medium size to text
  • lg - use to apply an large size to text
  • xl - use to apply an x-large size to text
  • h6 - use to apply an h6 size to text
  • h5 - use to apply an h5 size to text
  • h4 - use to apply an h4 size to text
  • h3 - use to apply an h3 size to text
  • h2 - use to apply an h2 size to text
  • h1 - use to apply an h1 size to 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.

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.

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.

Line heights #

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

{breakpoint} #

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

  • 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

Text alignment #

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

{breakpoint} #

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

  • 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