Text Styling

A set of presentational classes for expressing text styling.

.text-xxs
.text-xs
.text-sm
.text-md
.text-lg
.text-xl
.text-xxl
.text-xxxl
.text-bold
.text-normal
.text-upper
.text-underline
.text-noUnderline
.letterSpacing-loose
.letterSpacing-looser
.lineHeight-normal

Size

Body copy (i.e. text that is not a heading) will typically use one of three sizing classes: text-xxs, text-xs, text-sm.text-md is commonly reserved for prominent links. Larger classes are used by the Heading component, but are still available to avoid semantic mismatches.

The body tag itself uses the equivalent of text-xs, so that size will be inherited by default.

Weight

Bold text can be displayed with the class text-bold.

Casing

Uppercase text can be displayed via the class text-upper. This class applies a bit of letter-spacing as well.

Underlines

Underlines can be added with text-underline. To remove underlines (as from links that inherit from global styling), use text-noUnderline.

Letter spacing

Letter spacing can be increased with letterSpacing-loose, orletterSpacing-looser.

Text Styling Examples

Notes

This is xxs text. This is xxs bold text.

This is xs text. This is xs bold text.

This is sm text. This is sm bold text.

This is md text, not normally used for copy but rather for navigation items.

This is lg text. This is lg bold text.

This is xl text. This is xl bold text.

This is xxl text. This is xxl bold text.

This is xxxl text. This is xxxl bold text.

Uppercase text: use sparingly!

Bold upper heading

Add underlines to text as needed.

Link with no underline

Increase letter spacing to text for relaxed spacing, Or, even looser spacing.

White space

A set of presentational classes for controlling line length and wrapping.

.whiteSpace-noWrap
.whiteSpace-normal
.whiteSpace-truncate

.whiteSpace-noWrap forces inline elements to stay on one line, regardless of the size of their parent. Note this is typcially applied to text, but affects inline-block elements as well and is the basis of horizontal scrolling carousels.

.whiteSpace-normal is the default; it's normally only needed to reset white-space handling for a child whose parent is set to 'whiteSpace-noWrap'.

.whiteSpace-truncate is similar to 'noWrap': prevents line wrapping, but also prevents overflowing a parent. An ellipsis is set to indicate the text has been truncated.

White Space Examples

Notes

The Double Ristretto Venti Half-Soy Nonfat Decaf Organic Chocolate Brownie Iced Vanilla Double-Shot Gingerbread Frappuccino Extra Hot With Whipped Cream Upside Down Double Blended, One Sweet'N Low and One Nutrasweet.

The Double Ristretto Venti Half-Soy Nonfat Decaf Organic Chocolate Brownie Iced Vanilla Double-Shot Gingerbread Frappuccino Extra Hot With Whipped Cream Upside Down Double Blended, One Sweet'N Low and One Nutrasweet.

The Double Ristretto Venti Half-Soy Nonfat Decaf Organic Chocolate Brownie Iced Vanilla Double-Shot Gingerbread Frappuccino Extra Hot With Whipped Cream Upside Down Double Blended, One Sweet'N Low and One Nutrasweet.