Starbucks React Pattern Library

Heading

Notes

A component for marking up page headings. Provide the component a tagName appropriate for the current document outline, and a standardized size. Additional visual styling can be accomplished by passing in text-* utility classes.

By separating the visual style and HTML element of heading elements, we can ensure that pages have appropriate, accessible document outlines without having to worry about changing visuals.

For more information, see Managing Typography on Large Apps and Abandoning Global Heading Styles.

Props

childrennode
classNamestring
elementReffunc
sizeoneOf('xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs')
These map to standard text-* utility classes. An alternative to the size prop is to specify a text-* className, but headings will likely evolve to include refined letter-spacing and line-height per size, so it's best to stick with the size props.
tagNameany*
The HTML tagName or React component to be rendered. This should almost always be an h1–h6 element that forms a correct document outline.

Heading Size XL

<Heading tagName='h1' size='xl'>
  The quick brown fox ordered a triple whip mocha Frappuccino.
</Heading>

<Heading tagName='h1' size='xl'>
  The quick brown fox ordered a triple whip mocha Frappuccino.
</Heading>

Heading Size XL details

SizeheadingSizeXl
REM3.1 (31px)

Heading Size Lg

<Heading tagName='h2' size='lg' className='font-bold'>
  The quick brown fox ordered a triple whip mocha Frappuccino.
</Heading>

<Heading tagName='h2' size='lg' className='font-bold'>
  The quick brown fox ordered a triple whip mocha Frappuccino.
</Heading>

Heading Size Lg details

SizeheadingSizeLg
REM2.6 (26px)
ModifiersBold

Heading Size Md

<Heading tagName='h3' size='md'>
  The quick brown fox ordered a triple whip
  mocha Frappuccino with an extra shot.
</Heading>

<Heading tagName='h3' size='md'>
  The quick brown fox ordered a triple whip
  mocha Frappuccino with an extra shot.
</Heading>

Heading Size Md details

SizeheadingSizeMd
REM2.2 (22px)

Heading Size Sm

<Heading tagName='h4' size='sm'>
  The quick brown fox ordered a triple whip
  mocha Frappuccino with an extra shot.
</Heading>

<Heading tagName='h4' size='sm'>
  The quick brown fox ordered a triple whip
  mocha Frappuccino with an extra shot.
</Heading>

Heading Size Sm details

SizeheadingSizeSm
REM1.9 (19px)

Heading Size Xs

<Heading tagName='h4' size='xs' className='font-bold'>
  The quick brown fox ordered a triple whip
  mocha Frappuccino with an extra shot and
  a tall iced Americano with room.
</Heading>

<Heading tagName='h4' size='xs' className='font-bold'>
  The quick brown fox ordered a triple whip
  mocha Frappuccino with an extra shot and
  a tall iced Americano with room.
</Heading>

Heading Size Xs details

SizeheadingSizeXs
REM1.7 (17px)
ModifiersBold

Heading Size Xxs

<Heading tagName='h4' size='xxs' className='text-upper text-bold'>
  The quick brown fox ordered a triple whip
  mocha Frappuccino with an extra shot and
  a tall iced Americano with room.
</Heading>

<Heading tagName='h4' size='xxs' className='text-upper text-bold'>
  The quick brown fox ordered a triple whip
  mocha Frappuccino with an extra shot and
  a tall iced Americano with room.
</Heading>

Heading Size Xxs details

SizeheadingSizeXxs
REM1.4 (14px)
ModifiersUppercase & Bold

FormHeading

Notes

A pre-stylized component for form headings that reacts to themes. Provide the component a tagName appropriate for the current document outline. Additional visual styling can be accomplished by passing in font-* utility classes.

Any additional props will be passed through to the component.

Props

childrennode
classNamestring
tagNamestring['h2']
The HTML tagName or React component to be rendered. This should almost always be an h1–h6 element that forms a correct document outline.

Default

<FormHeading tagName="h3">
  The quick brown fox ordered a triple whip mocha Frappuccino.
</FormHeading>

<FormHeading tagName="h3">
  The quick brown fox ordered a triple whip mocha Frappuccino.
</FormHeading>

Themed Form Headings

<React.Fragment>

  <ThemeContext.Provider value={ themes.default }>
    <div className="p3">
      <FormHeading tagName="h3">
        This is a default-themed form heading.
      </FormHeading>
    </div>
  </ThemeContext.Provider>


  <ThemeContext.Provider value={ themes.dark }>
    <div className="bg-houseGreen p3">
      <FormHeading tagName="h3">
        This is a dark-themed form heading.
      </FormHeading>
    </div>
  </ThemeContext.Provider>
  
</React.Fragment>

<React.Fragment>

  <ThemeContext.Provider value={ themes.default }>
    <div className="p3">
      <FormHeading tagName="h3">
        This is a default-themed form heading.
      </FormHeading>
    </div>
  </ThemeContext.Provider>


  <ThemeContext.Provider value={ themes.dark }>
    <div className="bg-houseGreen p3">
      <FormHeading tagName="h3">
        This is a dark-themed form heading.
      </FormHeading>
    </div>
  </ThemeContext.Provider>
  
</React.Fragment>