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.

Text wrap style

Make line endings more even and avoid single-word last lines (orphans) using .nsw-text-wrap-pretty for general text that is not centred and .nsw-text-wrap-balance for short, centre-aligned headings or lead copy.

Default wrapping

Pretty wrapping keeps headings calm and even for users now.

Pretty wrapping

Pretty wrapping keeps headings calm and even for users now.

Default wrapping (centred)

Balanced wrapping is best for short, centred headings and hero-style intros.

Balanced wrapping

Balanced wrapping is best for short, centred headings and hero-style intros.

Browser support: text-wrap is a progressive enhancement. Browsers that do not support pretty or balance will ignore the value and use default wrapping.

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