HomeStarbucks Pattern Library

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

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