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

<div>
  <p className='text-xxs mb3 size6of12'>
    This is xxs text. <span className='text-bold'>This is xxs bold text.</span>
  </p>
  <p className='text-xs mb3'>
    This is xs text. <span className='text-bold'>This is xs bold text.</span>
  </p>
  <p className='text-sm mb3'>
    This is sm text. <span className='text-bold'>This is sm bold text.</span>
  </p>
  <p className='text-md mb3'>
    This is md text, not normally used for copy but rather for navigation items.
  </p>
  <p className='text-lg mb3'>
    This is lg text. <span className='text-bold'>This is lg bold text.</span>
  </p>
  <p className='text-xl mb3'>
    This is xl text. <span className='text-bold'>This is xl bold text.</span>
  </p>
  <p className='text-xxl mb3'>
    This is xxl text. <span className='text-bold'>This is xxl bold text.</span>
  </p>
  <p className='text-xxxl mb3'>
    This is xxxl text. <span className='text-bold'>This is xxxl bold text.</span>
  </p>
</div>

<div>
  <p className='text-xxs mb3 size6of12'>
    This is xxs text. <span className='text-bold'>This is xxs bold text.</span>
  </p>
  <p className='text-xs mb3'>
    This is xs text. <span className='text-bold'>This is xs bold text.</span>
  </p>
  <p className='text-sm mb3'>
    This is sm text. <span className='text-bold'>This is sm bold text.</span>
  </p>
  <p className='text-md mb3'>
    This is md text, not normally used for copy but rather for navigation items.
  </p>
  <p className='text-lg mb3'>
    This is lg text. <span className='text-bold'>This is lg bold text.</span>
  </p>
  <p className='text-xl mb3'>
    This is xl text. <span className='text-bold'>This is xl bold text.</span>
  </p>
  <p className='text-xxl mb3'>
    This is xxl text. <span className='text-bold'>This is xxl bold text.</span>
  </p>
  <p className='text-xxxl mb3'>
    This is xxxl text. <span className='text-bold'>This is xxxl bold text.</span>
  </p>
</div>

<div>
  <p className='mb4'><span className='text-upper'>Uppercase text</span>: use sparingly!</p>
  <Heading tagName='h2' size='xxs' className='text-upper text-bold'>Bold upper heading</Heading>
</div>

<div>
  <p className='mb4'><span className='text-upper'>Uppercase text</span>: use sparingly!</p>
  <Heading tagName='h2' size='xxs' className='text-upper text-bold'>Bold upper heading</Heading>
</div>

<div>
  <p className='mb4'>Add underlines to text <span className='text-underline'>as needed</span>.</p>
  <a href='https://www.starbucks.com' className='text-noUnderline'>Link with no underline</a>
</div>

<div>
  <p className='mb4'>Add underlines to text <span className='text-underline'>as needed</span>.</p>
  <a href='https://www.starbucks.com' className='text-noUnderline'>Link with no underline</a>
</div>

<div>
  <p className='mb4'>Increase letter spacing to text for <span className='letterSpacing-loose'>relaxed spacing</span>,
  Or, even <span className='letterSpacing-looser'>looser spacing</span>.</p>
</div>

<div>
  <p className='mb4'>Increase letter spacing to text for <span className='letterSpacing-loose'>relaxed spacing</span>,
  Or, even <span className='letterSpacing-looser'>looser spacing</span>.</p>
</div>

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

<div>
  <p className='whiteSpace-noWrap pb3'>
    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.
  </p>
  <p className='whiteSpace-normal pb3'>
    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.
  </p>
  <p className='whiteSpace-truncate'>
    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.
  </p>
</div>

<div>
  <p className='whiteSpace-noWrap pb3'>
    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.
  </p>
  <p className='whiteSpace-normal pb3'>
    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.
  </p>
  <p className='whiteSpace-truncate'>
    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.
  </p>
</div>

<div className='whiteSpace-noWrap grid--compactGutter'>
  <div className='gridItem size5of12'>
    <div className='bg-black20' style={ { height: 100 } }></div>
  </div>
  <div className='gridItem size5of12'>
    <div className='bg-black20' style={ { height: 100 } }></div>
  </div>
  <div className='gridItem size5of12'>
    <div className='bg-black20' style={ { height: 100 } }></div>
  </div>
</div>

<div className='whiteSpace-noWrap grid--compactGutter'>
  <div className='gridItem size5of12'>
    <div className='bg-black20' style={ { height: 100 } }></div>
  </div>
  <div className='gridItem size5of12'>
    <div className='bg-black20' style={ { height: 100 } }></div>
  </div>
  <div className='gridItem size5of12'>
    <div className='bg-black20' style={ { height: 100 } }></div>
  </div>
</div>