Components/

Text

CdrText

Text container used for any text element such as paragraphs, headings, and lists. Establishes vertical spacing and optimizes the reading experience

# Overview

The CdrText component is a simple wrapper for text elements. Using the CdrText component ensures your text elements inherit the default styling from the Cedar CSS reset. Styling can be applied by either using the modifier property in conjunction with the text utility classes, or by applying a custom CSS class which uses one of the text mixins from cdr-tokens.

Note that the text utility file (distributed as @rei/cedar/dist/style/text.css and @rei/cedar/dist/style/cdr-text.css) is over 100kb in size. Usage of the text utility classes and CdrText modifier property may impact the bundle size and performance of your application. For projects that are customer facing or which have performance constraints should not load the text utility file or cdr-text CSS file and instead apply text styling using the text mixins from cdr-tokens. Code samples on this page include examples of both the modifier/utility and text mixin usage.

# Headings

A heading helps users to identify and create a hierarchical structure within a page. Headings are typically the largest text on the screen and should be short and include important information. Cedar headings include a serif and a sans-serif option.

# Serif

Serif headings, set in REI Stuart, work best in larger sizes (cdr-text-heading-serif-600 and above). However, it’s also available for areas where space is limited but an important distinction or callout needs to be made, such as a card title or aligning to marketing collateral.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-heading-class">
    When you gear up, we give back
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-serif-1200;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Serif Strong

Serif strong headings, set in REI Stuart with a greater font weight than serif, work best in larger sizes (cdr-text-heading-serif-strong-600 and above). It’s recommended to use serif strong headings very minimally throughout the page and should generally be reserved for important page titles, in cases where type overlays an image, or in situations where additional emphasis is needed.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-heading-class">
    When you gear up, we give back
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-serif-strong-1200;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Sans

Sans headings, set in Graphik, should play a supporting role to serif headings. Sans headings work best in smaller sizes (cdr-text-heading-serif-strong-600 and below). Sans headings are not recommended for page titles or other prominent placements. Instead, use serif or serif strong headings.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-heading-class">
    When you gear up, we give back
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-sans-600;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Use When

Creating a hierarchical structure of information on a page

# Don’t Use When

Tagging as a semantic heading when an element only needs to be highlighted or emphasized within your content. Instead, use a sizing modifier for this component
Showcasing long form content. Instead, use body

# The Basics

When using this component with semantic headings from <h1> to <h6>, typographic styles set up a visual hierarchy created within CSS that helps to establish the order of importance
Identify headings at the beginning of a section
Position headings at, or near, the top of a section
Minimize text overlaid on images and multicolored background, which can degrade legibility. If text is overlaid on an image:
- Ensure an accessible contrast between text and the background
- Implement image text with proper HTML markup and use CSS to embed any special fonts
- Consider using heading-serif-strong styles

# Do / Don’t

create a semantic heading structure — Do use heading levels to define hierarchical information.

Don't use semantic tags for display styles — Don't use heading tags for visual results. Instead use our text styles.

Do use utility or body styles for descriptive or utilitarian purposes.

Don't use heading styles in areas that aren’t headlines. Instead, consider body or utility styles.

# Content

Be specific. Provide facts or information that pique user interest. Avoid broad and generic headings
Start heading titles with strong and familiar keywords to increase scannability
Ensure the heading works out of page context, such as search results, social media streams, blog posts, and news feeds
- Start with most descriptive word. For example, instead of “Preparation for floods”, use “Flood preparation”
- Avoid duplicating headings (e.g. "More Details")
Omit needless words. Be clear and concise
Limit heading length for improved scale across variable container widths
Headings must:
- Start with a capital letter
- Capitalize proper nouns
- Use sentence case
- Left-align multi-line headings

# Responsive Headings

Cedar does not offer pre-styled responsive headings. Instead, construct responsive headings by defining a heading style for specific breakpoints. For instance, if the heading style is cdr-text-heading-serif-900 @lg, @md, and @sm sizes, set the heading style to cdr-text-heading-serif-800 at the @xs size. This helps to create optimal readability, spacing, and proportions for various breakpoint sizes. An examples in practice:

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-heading-class">
    When you gear up, we give back
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-serif-900;
    @include cdr-xs-mq-only {
      @include cdr-text-heading-serif-800;
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Resources

WebAIM: Semantic Structure

# Subheadings

Subheadings give support or add meaning to a heading, and are intended to be paired with headings. Never position a subheading on a page without pairing it with a heading style. Because subheadings are supportive, they should always be smaller in size than the heading they reinforce.

# Sans

Sans-serif subheadings are set in Graphik. They are intended to be paired with serif or serif strong headings. Pairing a sans subheading with a sans heading is also acceptable.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-subheading-class">
    When you gear up, we give back
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-subheading-class {
    @include cdr-text-subheading-serif-600;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Heading and Subheading Combinations

Heading and subheading combinations should have the appropriate contrast and hierarchy. Headings should always be larger than the accompanying subheading.

Serif headings should only accompanied by sans subheadings.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-heading-class">
    When you gear up, we give back>
    <cdr-text class="custom-subheading-class">
      Treat yourself to sweet gear
    </cdr-text>
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-serif-strong-900;
  }

  .custom-subheading-class {
    @include cdr-text-subheading-sans-500;
    padding-top: $cdr-space-one-and-a-half-x;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Sans headings also work best with sans subheadings.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-heading-class">
    When you gear up, we give back>
    <cdr-text class="custom-subheading-class">
      Treat yourself to sweet gear
    </cdr-text>
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-sans-600;
  }

  .custom-subheading-class {
    @include cdr-text-subheading-sans-300;
    padding-top: $cdr-space-one-x;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Do / Don’t

Don't use subheading as a primary heading or section heading.

Do use paragraph or span tags for subheadings.

# Body

Body styles work best for long-form copy like articles, customer reviews, or legal messages. Body styles have a generous line height and wider letter spacing for optimal reading. For tighter, more compact styles, use utility styles.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-body-class">
    Cross-country skiing (sometimes called classic skiing) encompasses several styles, from touring or racing on groomed ski tracks to gliding through deep backcountry snow.
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-body-class {
    @include cdr-text-body-500;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Strong

Body strong is also intended for long-form copy but should be used minimally. Use body strong styles when emphasizing a subset of copy and never for the entire length of copy.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-body-class">
    Cross-country skiing (sometimes called classic skiing) encompasses several styles, from touring or racing on groomed ski tracks to gliding through deep backcountry snow.
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-body-class {
    @include cdr-text-body-strong-500;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Use When

Displaying articles for long-form content, such as Expert Advice articles or Co-op Journal entries
Displaying member or legal messages, such as on the PDP
Displaying product descriptions
Displaying customer reviews, such as on the PDP

# Don't Use When

Displaying form inputs. Instead, use Inputs
Listing product features. Instead, use Lists

# The Basics

Body styles should be used for:
- Legal messages
- Shipping messages
- Customer reviews
- Product, class, event, or trip descriptions
- Editorial copy
- Long articles
Max-width for paragraph containers is 634px or line length should not exceed 75 characters per line
Use standard (dark) text colors on light backgrounds for article text

# Content

Use adjacent text, a definition list, a glossary, or other method to supplement words that are ambiguous
Abbreviations:
- Follow REI Copy Guidelines for dates, time, dimensions, measurements, electrical units, and geographic reference
- Expand abbreviations by explaining the definition the first time it is used
- Use the <abbr> element, or link to a definition or glossary
For ease of reading, readability level should be about Grade 7. To test the body text, use the Hemingway Editor.
When possible, write the first sentence as an introduction to the paragraph. With screen readers, users can jump from paragraph to paragraph, listening to the first sentence or two before moving on to the next paragraph

# Applying Strong to Body Styles

Body styles include a set of strong options: cdr-text-body-strong-500, cdr-text-body-strong-400, and cdr-text-body-strong-300. However, there might be times when a set of words within a sentence needs to be bold. In those cases, use the generic cdr-text-strong. The set of strong options have a lighter font weight than the generic cdr-text-strong.

# Do / Don’t

Don't allow text to span beyond the max-width for paragraphs.

# Resources

Article: Which Are More Legible: Serif or Sans Serif Typefaces?
WebAIM Article: Evaluating Cognitive Web Accessibility

# Utility

Utility styles are used to communicate functionality or descriptive information. Shorter content is a good candidate for the more condensed and compact utility styling. Utility styles should not be replaced with headings. While headings help group and categorize content, utility styles help to label elements or give users information on how to take action. Cedar utility styles are available in both serif and sans serif options. Additionally, each utility style has a strong option.

By default, text within a cdr-container will display as cdr-text-utility-300.

# Serif

Utility serif styles should be used when additional brand emphasis is needed.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-utility-class">
    Mon–Fri, 7am–5pm PT
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-utility-class {
    @include cdr-text-utility-serif-800;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Serif Strong

Utility serif strong styles should be used when additional emphasis is needed over utility serif.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-utility-class">
    Mon–Fri, 7am–5pm PT
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-utility-class {
    @include cdr-text-utility-serif-strong-800;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Sans

Utility sans styles typically make up the majority of utility styles used on a given page.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-utility-class">
    Mon–Fri, 7am–5pm PT
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-utility-class {
    @include cdr-text-utility-sans-800;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Sans Strong

Utility sans styles should be used when additional emphasis is needed.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-utility-class">
    Mon–Fri, 7am–5pm PT
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-utility-class {
    @include cdr-text-utility-sans-strong-800;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Do / don’t

Do use utility styles for more functional elements.

Don't use headings in place of utility styles.

Don't use utility styles for long-form content.

# Eyebrow

Eyebrows introduce a topic or show how an item is categorized. Content tags or certain label styles are two examples. Eyebrow text styles should not be used as headings or used for brand names.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-eyebrow-class">
    Mon–Fri, 7am–5pm PT
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-eyebrow-class {
    @include cdr-text-eyebrow-100;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11

# Do / don’t

Do use eyebrows for categories or groupings.

# Italic and Strong Generic Classes

In addition to the specific type options listed above, we have provided two generic styles. These emphasis styles will extend other type styles allowing you to make text italic or more bold.

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-body-class">
    REI Co-op’s Trailsmith line was featured in  
    <cdr-text
    tag="em"
    class="custom-italic-class">
    Field & Stream’s
    </cdr-text>
    “10 Best Pants for Working Outside”
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-body-class {
    @include cdr-text-body-300;
  }
  .custom-italic-class {
    @include cdr-text-italic;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Primary Secondary

View on GitHub

View on CodeSandbox

<template>
  <cdr-text class="custom-body-class">
    This trip is rated as
    <cdr-text
    tag="strong"
    class="custom-strong-class">
    Vigorous [4]
    </cdr-text>.
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-body-class {
    @include cdr-text-body-300;
  }
  .custom-strong-class {
    @include cdr-text-strong;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Accessibility

# Headings

To ensure that usage of this component complies with accessibility guidelines:

Use h1-h6 to identify headings (<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>)
Headings are used to label page regions
- Use the aria-label attribute to associate headings with their page region, as described in the label page regions tutorial
Subheadings are not semantic headings. Subheadings may be visually styled as a heading, but will not be navigable using a screen reader
Assistive technologies skim the structure of a page:
- Allow users to navigate to or skip over sections through the use of heading levels
- Avoid skipping heading levels (e.g., <h2> to <h4> )

This component has compliance with WCAG SC 2.1.1 guidelines by:

Defining semantic heading levels with the ability to assign predefined visual heading styles to each level

# Paragraphs

To ensure that usage of this component complies with accessibility guidelines:

Text container does not exceed 634px or line length does not exceed more than 75 characters
Minimize use of reversed-out body copy (light copy on a dark background) because it’s harder to read
When possible, use the first sentence as an introduction to the paragraph. With screen readers, users can listen to the first sentence and then jump to the next paragraph
Break long pages into shorter sections by organizing content into well-defined groups or chunks

This component has compliance with following WebAIM’s accessibility guidelines:

WCAG SC 1.4.8: Visual presentation: Cedar Design System text component provides for spacing for:
- Within paragraphs, line spacing is at least 1.5 times font height

# Implementation

To work as intended, tokens, utility classes, and component require both cdr-reset.css and access to the REI brand fonts. For more information on how to access these resources, visit the Developer getting started guide.

The global text default cdr-text-default is defined in each of the available cdr-container classes as well as the Cedar reset. Ensure that all content is contained in one of the available container classes.

The Cedar text css selectors provide no spacing values other than letter-spacing and line-height.

For proper spacing between blocks of text, use the Cedar spacing options.

The Cedar text options can be utilized by your application using the token mixins, utility classes or through the cdr-text component.

# Text Token Mixins

Cedar uses design tokens to store typographic attributes that represent the fundamental decisions of Cedar’s visual language.

For more information about design tokens and a complete list of tokens available in Cedar, visit the Design Tokens overview.

# Utility Classes

cdr-text styles are available as a standalone css classes for users unable or preferring not to add custom styles to their applications, and who are unable to use the cdr-text vue.js component. Note that the text utility class file is over 100kb in size and may impact the performance of your application. Using the text token mixins will allow you to bundle only the text styles used in your application.

For more information on importing these styles and how to use them, visit the Developer getting started guide.

# Usage

The cdr-text root class sets all value pairs to inherit. When using these classes, ensure at least the parent class assigns the cdr-text root style.

The utility classes have two dashes between cdr-text and its modifier body-300.

<p class=”cdr-text cdr-text--body-300”>
  My body 300 text
    <em class=”cdr-text--italic”>is</em>
  amazing
</p>

1
2
3
4
5

# Component API

tag

name

string

type

'p'

default

Sets valid HTML element tag.

modifier

name

string

type

N/A

default

Modifies the style variant for this component. see below tables for list of options.

# Slots

Find more information about using Slots in the article Getting Started as a Developer.

default

name

Set the innerHTML for CdrText content. This includes text and html markup.

# Usage

The CdrText component allows for styling any HTML element with available text styles. Visual style and semantic meaning are managed independently by providing:

Element to the tag prop
Applying styling by either using the modifier prop and a utility class, or with a custom CSS class and a text mixin

This method decouples the semantic meaning of a heading level from the visual representation.

With this decoupling, you can style other markup to look like a heading that semantically isn’t a heading.

When creating page headers, apply the correct semantic tag.

<cdr-text
  tag="h1"
  modifier="heading-700 heading-800@sm heading-800@md heading-800@lg"
 >
    A navigable semantic heading
</cdr-text>

1
2
3
4
5
6

<template>
  <cdr-text tag="h1" class="custom-heading-class">
    A navigable semantic heading
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-700;
    @include cdr-sm-mq {
      <!-- `cdr-sm-mq` mixin applies styling at small breakpoint and above -->
      @include cdr-text-heading-800;
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Note that heading styles do not always need to be paired with heading tags. Heading tags should be used for accessibility purposes to describe the page hierarchy.

<cdr-text
  modifier="heading-700 heading-800@sm heading-800@md heading-800@lg"
 >
    Text styled as a heading for display only
</cdr-text>

1
2
3
4
5

<template>
  <cdr-text class="custom-heading-class">
    Text styled as a heading for display only
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-700;
    @include cdr-sm-mq {
      <!-- `cdr-sm-mq` mixin applies styling at small breakpoint and above -->
      @include cdr-text-heading-800;
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

CdrText components can be extended with other Cedar or custom classes.

<cdr-text
    class="
      cdr-mb-space-one-x"
    modifier="
      body-300”
>
This paragraph is adding a bottom margin to provide space between it and the paragraph below
</cdr-text>

1
2
3
4
5
6
7
8

<template>
  <cdr-text class="custom-body-class">
    This paragraph is adding a bottom margin to provide space between it and the paragraph below
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
  .custom-body-class {
    @include cdr-text-body-300;
    marign-bottom: $cdr-space-one-x;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12

# Text Responsiveness

Text modifiers accept any of the supported Cedar breakpoints. For more information on how breakpoints work on components, visit the Responsive Layout article.

# Text Options

Heading Serif

UI toolkit	Token	Utility class	Component Modifier
heading-serif-200	cdr-text-heading-serif-200	cdr-text--heading-serif-200	heading-serif-200
heading-serif-300	cdr-text-heading-serif-300	cdr-text--heading-serif-300	heading-serif-300
heading-serif-400	cdr-text-heading-serif-400	cdr-text--heading-serif-400	heading-serif-400
heading-serif-500	cdr-text-heading-serif-500	cdr-text--heading-serif-500	heading-serif-500
heading-serif-600	cdr-text-heading-serif-600	cdr-text--heading-serif-600	heading-serif-600
heading-serif-700	cdr-text-heading-serif-700	cdr-text--heading-serif-700	heading-serif-700
heading-serif-800	cdr-text-heading-serif-800	cdr-text--heading-serif-800	heading-serif-800
heading-serif-900	cdr-text-heading-serif-900	cdr-text--heading-serif-900	heading-serif-900
heading-serif-1100	cdr-text-heading-serif-1100	cdr-text--heading-serif-1100	heading-serif-1100
heading-serif-1200	cdr-text-heading-serif-1200	cdr-text--heading-serif-1200	heading-serif-1200

Heading Serif Strong

UI toolkit	Token	Utility class	Component Modifier
heading-serif-strong-600	cdr-text-heading-serif-strong-600	cdr-text--heading-serif-strong-600	heading-serif-strong-600
heading-serif-strong-700	cdr-text-heading-serif-strong-700	cdr-text--heading-serif-strong-700	heading-serif-strong-700
heading-serif-strong-800	cdr-text-heading-serif-strong-800	cdr-text--heading-serif-strong-800	heading-serif-strong-800
heading-serif-strong-900	cdr-text-heading-serif-strong-900	cdr-text--heading-serif-strong-900	heading-serif-strong-900
heading-serif-strong-1100	cdr-text-heading-serif-strong-1100	cdr-text--heading-serif-strong-1100	heading-serif-strong-1100
heading-serif-strong-1200	cdr-text-heading-serif-strong-1200	cdr-text--heading-serif-strong-1200	heading-serif-strong-1200

Heading Sans

UI toolkit	Token	Utility class	Component Modifier
heading-sans-200	cdr-text-heading-sans-200	cdr-text--heading-sans-200	heading-sans-200
heading-sans-300	cdr-text-heading-sans-300	cdr-text--heading-sans-300	heading-sans-300
heading-sans-400	cdr-text-heading-sans-400	cdr-text--heading-sans-400	heading-sans-400
heading-sans-500	cdr-text-heading-sans-500	cdr-text--heading-sans-500	heading-sans-500
heading-sans-600	cdr-text-heading-sans-600	cdr-text--heading-sans-600	heading-sans-600

Subheading Sans

UI toolkit	Token	Utility class	Component Modifier
subheading-sans-300	cdr-text-subheading-sans-300	cdr-text--subheading-sans-300	subheading-sans-300
subheading-sans-400	cdr-text-subheading-sans-400	cdr-text--subheading-sans-400	subheading-sans-400
subheading-sans-500	cdr-text-subheading-sans-500	cdr-text--subheading-sans-500	subheading-sans-500
subheading-sans-600	cdr-text-subheading-sans-600	cdr-text--subheading-sans-600	subheading-sans-600

Eyebrow

UI toolkit	Token	Utility class	Component Modifier
eyebrow-100	cdr-text-eyebrow-100	cdr-text--eyebrow-100	eyebrow-100

Body

UI toolkit	Token	Utility class	Component Modifier
body-300	cdr-text-body-300	cdr-text--body-300	body-300
body-400	cdr-text-body-400	cdr-text--body-400	body-400
body-500	cdr-text-body-500	cdr-text--body-500	body-500

Body Strong

UI toolkit	Token	Utility class	Component Modifier
body-strong-300	cdr-text-body-strong-300	cdr-text--body-strong-300	body-strong-300
body-strong-400	cdr-text-body-strong-400	cdr-text--body-strong-400	body-strong-400
body-strong-500	cdr-text-body-strong-500	cdr-text--body-strong-500	body-strong-500

Utility Sans

UI toolkit	Token	Utility class	Component Modifier
utility-sans-100	cdr-text-utility-sans-100	cdr-text--utility-sans-100	utility-sans-100
utility-sans-200	cdr-text-utility-sans-200	cdr-text--utility-sans-200	utility-sans-200
utility-sans-300	cdr-text-utility-sans-300	cdr-text--utility-sans-300	utility-sans-300
utility-sans-400	cdr-text-utility-sans-400	cdr-text--utility-sans-400	utility-sans-400
utility-sans-500	cdr-text-utility-sans-500	cdr-text--utility-sans-500	utility-sans-500
utility-sans-600	cdr-text-utility-sans-600	cdr-text--utility-sans-600	utility-sans-600
utility-sans-700	cdr-text-utility-sans-700	cdr-text--utility-sans-700	utility-sans-700
utility-sans-800	cdr-text-utility-sans-800	cdr-text--utility-sans-800	utility-sans-800

Utility Sans Strong

UI toolkit	Token	Utility class	Component Modifier
utility-sans-strong-100	cdr-text-utility-sans-strong-100	cdr-text--utility-sans-strong-100	utility-sans-strong-100
utility-sans-strong-200	cdr-text-utility-sans-strong-200	cdr-text--utility-sans-strong-200	utility-sans-strong-200
utility-sans-strong-300	cdr-text-utility-sans-strong-300	cdr-text--utility-sans-strong-300	utility-sans-strong-300
utility-sans-strong-400	cdr-text-utility-sans-strong-400	cdr-text--utility-sans-strong-400	utility-sans-strong-400
utility-sans-strong-500	cdr-text-utility-sans-strong-500	cdr-text--utility-sans-strong-500	utility-sans-strong-500
utility-sans-strong-600	cdr-text-utility-sans-strong-600	cdr-text--utility-sans-strong-600	utility-sans-strong-600
utility-sans-strong-700	cdr-text-utility-sans-strong-700	cdr-text--utility-sans-strong-700	utility-sans-strong-700
utility-sans-strong-800	cdr-text-utility-sans-strong-800	cdr-text--utility-sans-strong-800	utility-sans-strong-800

Utility Serif

UI toolkit	Token	Utility class	Component Modifier
utility-serif-200	cdr-text-utility-serif-200	cdr-text--utility-serif-200	utility-serif-200
utility-serif-300	cdr-text-utility-serif-300	cdr-text--utility-serif-300	utility-serif-300
utility-serif-400	cdr-text-utility-serif-400	cdr-text--utility-serif-400	utility-serif-400
utility-serif-500	cdr-text-utility-serif-500	cdr-text--utility-serif-500	utility-serif-500
utility-serif-600	cdr-text-utility-serif-600	cdr-text--utility-serif-600	utility-serif-600
utility-serif-700	cdr-text-utility-serif-700	cdr-text--utility-serif-700	utility-serif-700
utility-serif-800	cdr-text-utility-serif-800	cdr-text--utility-serif-800	utility-serif-800

Utility Serif Strong

UI toolkit	Token	Utility class	Component Modifier
utility-serif-strong-200	cdr-text-utility-serif-strong-200	cdr-text--utility-serif-strong-200	utility-serif-strong-200
utility-serif-strong-300	cdr-text-utility-serif-strong-300	cdr-text--utility-serif-strong-300	utility-serif-strong-300
utility-serif-strong-400	cdr-text-utility-serif-strong-400	cdr-text--utility-serif-strong-400	utility-serif-strong-400
utility-serif-strong-500	cdr-text-utility-serif-strong-500	cdr-text--utility-serif-strong-500	utility-serif-strong-500
utility-serif-strong-600	cdr-text-utility-serif-strong-600	cdr-text--utility-serif-strong-600	utility-serif-strong-600
utility-serif-strong-700	cdr-text-utility-serif-strong-700	cdr-text--utility-serif-strong-700	utility-serif-strong-700
utility-serif-strong-800	cdr-text-utility-serif-strong-800	cdr-text--utility-serif-strong-800	utility-serif-strong-800

Helpers

UI toolkit	Token	Utility class	Component Modifier
italic	N/A	cdr-text--italic	italic
strong	N/A	cdr-text--strong	strong

Native Mobile App Tokens

Headings

Android: Display 1

iOS: Large Title

Suggested Usage: Frequently used as the largest title for phone apps and can be used for page titles for larger devices.

font-size	34.00sp
line-height	40.00dp
font-family	Graphic-App-Medium.ttf

Android: Title 1

iOS: Title 1

Suggested Usage: Content titles, level 1.

font-size	28.00sp
line-height	36.00dp
font-family	Stuart-App-Semibold.otf

Android: Title 2

iOS: Title 2

Suggested Usage: Content titles, product names, level 2.

font-size	26.00sp
line-height	32.00dp
font-family	Stuart-App-Semibold.otf

Android: Title 3

iOS: Title 3

Suggested Usage: Content titles, product names, product prices, level 3.

font-size	21.00sp
line-height	28.00dp
font-family	Stuart-App-Semibold.otf

Android: Headline

iOS: Headline

Suggested Usage: Heading primarily used with body copy, list items, table headers.

font-size	17.00sp
line-height	24.00dp
font-family	Graphic-App-Medium.ttf

Android: Subhead

iOS: Subhead

Suggested Usage: Subheading primarily used with body copy.

font-size	15.00sp
line-height	20.00dp
font-family	Graphic-App-Medium.ttf

Body

Android: Body 1

iOS: Body

Suggested Usage: Default for body content.

font-size	15.00sp
line-height	20.00dp
font-family	Graphic-App-Regular.ttf

Android: Body 2

iOS: Footnote

Suggested Usage: Secondary text intended for informational and supplemental body content.

font-size	12.00sp
line-height	20.00dp
font-family	Graphic-App-Regular.ttf

Android: Caption 1

iOS: Caption 1

Suggested Usage: Tertiary text, also intended for informational and supplemental body content. Also used for bottom action bar text for larger devices.

font-size	12.00sp
line-height	16.00dp
font-family	Graphic-App-Regular.ttf

Android: Caption 2

iOS: Caption 2

Suggested Usage: Smallest text size, use sparingly or for bottom tab bar text.

font-size	11.00sp
line-height	16.00dp
font-family	Graphic-App-Regular.ttf

Buttons

Android: Button

iOS: N/A

Suggested Usage: Button text has a thicker weight than body copy.

font-size	15.00sp
line-height	24.00dp
font-family	Graphic-App-Medium.ttf