HomeStarbucks Pattern Library

Text Styling

A set of presentational classes for expressing text styling.



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.


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


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


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


White space

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


.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