Text

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Text alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Text wrapping and overflow

Wrap text with a .nsw-text-wrap class.

This text should wrap.

Prevent text from wrapping with a .nsw-text-nowrap class.

This text should overflow the parent.

Word break

Prevent long strings of text from breaking your components’ layout by using .nsw-text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.

Class	Properties
`nsw-overflow-break`	overflow-wrap: break-word;
`nsw-word-break-normal`	word-break: normal;
`nsw-word-break-break-all`	word-break: break-all;
`nsw-word-break-keep-all`	word-break: keep-all;

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Text transform

Transform text with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.

Font weight and italics

Quickly change the font-weight or font-style of text with these utilities.

Bold text.

Normal weight text.

Italic text.

Text color

Control the text color of an element using the nsw-text--{color} utilities.

Class	Hover Class	Description
nsw-text--dark	hover:nsw-text--dark	Applies nsw-text--dark `var(--nsw-text-dark)` to element
nsw-text--light	hover:nsw-text--light	Applies nsw-text--light `var(--nsw-text-light)` to element
nsw-text--brand-dark	hover:nsw-text--brand-dark	Applies nsw-text--brand-dark `var(--nsw-brand-dark)` to element
nsw-text--brand-light	hover:nsw-text--brand-light	Applies nsw-text--brand-light `var(--nsw-brand-light)` to element
nsw-text--black	hover:nsw-text--black	Applies nsw-text--black `var(--nsw-black)` to element
nsw-text--white	hover:nsw-text--white	Applies nsw-text--white `var(--nsw-white)` to element
nsw-text--off-white	hover:nsw-text--off-white	Applies nsw-text--off-white `var(--nsw-off-white)` to element
nsw-text--grey-01	hover:nsw-text--grey-01	Applies nsw-text--grey-01 `var(--nsw-grey-01)` to element
nsw-text--grey-02	hover:nsw-text--grey-02	Applies nsw-text--grey-02 `var(--nsw-grey-02)` to element
nsw-text--grey-03	hover:nsw-text--grey-03	Applies nsw-text--grey-03 `var(--nsw-grey-03)` to element
nsw-text--grey-04	hover:nsw-text--grey-04	Applies nsw-text--grey-04 `var(--nsw-grey-04)` to element

.nsw-text--dark

.nsw-text--brand-dark

.nsw-text--black

.nsw-text--grey-01

.nsw-text--grey-02

.nsw-text--light

.nsw-text--brand-light

.nsw-text--white

.nsw-text--off-white

.nsw-text--grey-03

.nsw-text--grey-04