Text

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.

<p class="-text--xl">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--lg">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--md">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--sm">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--xs">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--2xs">The quick brown fox jumps over the lazy dog.</p>

Text headings

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

<p class="-text--h1">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h2">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h3">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h4">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h5">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h6">The quick brown fox jumps over the lazy dog.</p>

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.

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

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

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

<p class="-text--no-decoration">This text will render with no decoration</p>
<p class="-text--underline">This text will render with an underline</p>
<p class="-text--line-through">This text will render with a line through</p>

Text transform

Change text transform to lowercase, uppercase, or capitalize.

<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--capitalize">This text will render as capitalize</p>
<p class="-text--no-transform">This text will render with no transform</p>

Text weight

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

<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--semi-bold">This text will render as semi-bold</p>
<p class="-text--bold">This text will render as bold</p>
<p class="-text--bolder">This text will render as bolder</p>
<p class="-text--boldest">This text will render as boldest</p>

Text wrapping

Prevent text wrapping with nowrap or control overflow with truncate.

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

Brand

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

<!-- For light backgrounds -->
<p class="-text--body">-text--body</p>
<p class="-text--primary">-text--primary</p>
<!-- For dark backgrounds -->
<p class="-text--secondary">-text--secondary</p>
<p class="-text--light">-text--light</p>

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.

<p class="-text--success">-text--success</p>
<p class="-text--info">-text--info</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--navy">-text--navy</p>
<p class="-text--orange">-text--orange</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 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 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}

• 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

<p class="-text-md--lg"></p>
<p class="-text-xl--xs"></p>
<p class="-text-lg--xl"></p>

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

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

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

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