Miss any of our Open RFC calls?Watch the recordings here! »

This package has been deprecated

Author message:

This component is deprecated, please migrate to @rei/cedar


1.0.3 • Public • Published


For the most up-to-date information, see headings and paragraphs in REI Cedar Docs.


tag string 'p'
name type default

Sets valid HTML element tag

modifier string N/A
name type default

Modifies the style variant for this component. Possible values: { ‘body’ | ‘display’ | ‘display-static’ | ‘heading-large’ | ‘heading-large-static’ | ‘heading-medium’ | ‘heading-medium-static’ | ‘heading-small’ | ‘heading-small-static’ | ‘subheading' }


Set the innerHTML for cdr-text. This includes text and html markup.


Resources are available within the cdr-text package:

Name Type Description
@rei/cdr-text Node module package Import the component into your project

To incorporate the required assets for a component, use the following steps:

1. Install using NPM

Install the cdrText package using npm in your terminal:


    npm i -s @rei/cdr-text

2. Import dependencies


// import your required css.
import "@rei/cdr-assets/dist/cdr-core.css";
import "@rei/cdr-assets/dist/cdr-fonts.css";

3. Add component to a template


    For long-form content like expert advice articles or co-op journal entries.
import { CdrText } from '@rei/cdr-text';
export default {
  components: {

Heading 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
  • Style to the modifier prop

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. For example, you can style an <a> tag in a multi-level navigation as a heading.

      Heading-large linked

This will result in the following HTML:

  <cdr-text modifier="body">
   <a class=”heading-small” href=”http://www.rei.com”>Heading-small linked</a>

CdrText modifiers can be nested within semantic headings. The below modifier for subheading is nested in the <h2> tag.

    I'm a heading
      And I'm a visual subheading

This will result in the following HTML:

    I’m a heading
      <span class=”subheading”>
          And I’m a visual subheading

Responsive headings

  • Heading modifiers (without the “-static” ending) are responsive
  • To disable resizing at breakpoints use static variants (ending with “-static”)
    I should not change size at breakpoint

Heading levels

When using actual heading elements via the tag property, nest headings by their level:

  • Most important heading has the level 1 (<h1>) and the least important heading level 6 (<h6>)
  • Headings with an equal or higher level start a new section
  • Headings with a lower level start new subsections that are part of the higher level section

Skipping heading levels can be confusing and should be avoided where possible:

  • Avoid following an <h2> tag by an <h4> tag
  • If an <h4> tag closes a previous section, follow with a <h2> tag to open the next section

Exception for fixed page sections

In fixed sections of the page (e.g. sidebars), heading levels should not change depending on the heading levels in other areas of the page. Consistency across pages is required throughout the REI digital properties as explained on the Navigation Design Principles Confluence page.

Paragraph Usage

By default the cdrText component renders as a paragraph, this default paragraph is intended for most standard use cases.

    This is a standard paragraph, intended for non long form copy usage.

When rendering long form copy add the body modifier.

  <cdr-text modifier="body">
    This paragraph is intended for long form copy usage.  

Define custom tags by applying a specific cdr-text style with modifiers to it.

    This span now renders as a long form copy paragraph that displays inline.




npm i @rei/cdr-text

DownloadsWeekly Downloads






Unpacked Size

14.8 kB

Total Files


Last publish


  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar