Heading

Heading is used to create various levels of typographic hierarchies.

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.

Heading xLarge

Heading large

Heading medium

Heading small

Heading xSmall
Heading xXSmall
Heading xXXSmall
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.

Primary

Secondary

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

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-text
  • Import
    import { Heading } from '@pluralsight/ps-design-system-text'
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