Heading

Heading is used to create various levels of typographic hierarchies.

Install
npm install @pluralsight/ps-design-system-text
Import
import { Heading } from '@pluralsight/ps-design-system-text'

Examples

Sizes

Seven text sizes are available using the size prop. Use with the <h.../> tag that is best suited for the semantic structure of the page.

import { Heading } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <React.Fragment>
      <Heading size={Heading.sizes.xLarge}>
        <h1>Heading xLarge</h1>
      </Heading>

      <Heading size={Heading.sizes.large}>
        <h2>Heading large</h2>
      </Heading>

      <Heading size={Heading.sizes.medium}>
        <h3>Heading medium</h3>
      </Heading>

      <Heading size={Heading.sizes.small}>
        <h4>Heading small</h4>
      </Heading>

      <Heading size={Heading.sizes.xSmall}>
        <h5>Heading xSmall</h5>
      </Heading>

      <Heading size={Heading.sizes.xXSmall}>
        <h6>Heading xXSmall</h6>
      </Heading>

      <Heading size={Heading.sizes.xXXSmall}>
        <h6>Heading xXXSmall</h6>
      </Heading>
    </React.Fragment>
  )
}

export default Example

Colors

Text color can be set to Primary (high contrast) or Secondary (medium contrast) using the color prop.

import { Heading } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <React.Fragment>
      <Heading color={Heading.colors.primary}>
        <h1>Primary</h1>
      </Heading>

      <Heading color={Heading.colors.secondary}>
        <h1>Secondary</h1>
      </Heading>
    </React.Fragment>
  )
}

export default Example

Props

Name	Type	Description	Default
`size`	`xXXSmall \| xXSmall \| xSmall \| small \| medium \| large \| xLarge`	size of heading (from Heading.sizes)	`large`
`color`	`primary \| secondary`	colorof label (from Heading.colors)	`primary`