Paragraph

For large blocks of text with multiple lines of wrapping.

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

Examples

Sizes

Three text sizes are available using the size prop.

Paragraph - large - Lorem ipsum dolor sit amet adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph - normal - Lorem ipsum dolor sit amet adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph - small - Lorem ipsum dolor sit amet adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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


const Example: React.FC = props => {
  return (
    <React.Fragment>
      <P size={P.sizes.large}>
        <strong>Paragraph - large</strong> - Lorem ipsum dolor sit amet
        adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut
        aliquip ex ea commodo consequat. Lorem <em>ipsum dolor sit</em> amet
        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua.
      </P>


      <P size={P.sizes.normal}>
        <strong>Paragraph - normal</strong> - Lorem ipsum dolor sit amet
        adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut
        aliquip ex ea commodo consequat. Lorem <em>ipsum dolor sit</em> amet
        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua.
      </P>


      <P size={P.sizes.small}>
        <strong>Paragraph - small</strong> - Lorem ipsum dolor sit amet
        adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut
        aliquip ex ea commodo consequat. Lorem <em>ipsum dolor sit</em> amet
        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua.
      </P>
    </React.Fragment>
  )
}


export default Example

Colors

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

Paragraph - primary - Lorem ipsum dolor sit amet adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph - secondary - Lorem ipsum dolor sit amet adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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


const Example: React.FC = props => {
  return (
    <React.Fragment>
      <P color={P.colors.primary}>
        <strong>Paragraph - primary</strong> - Lorem ipsum dolor sit amet
        adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut
        aliquip ex ea commodo consequat. Lorem <em>ipsum dolor sit</em> amet
        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua.
      </P>


      <P color={P.colors.secondary}>
        <strong>Paragraph - secondary</strong> - Lorem ipsum dolor sit amet
        adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut
        aliquip ex ea commodo consequat. Lorem <em>ipsum dolor sit</em> amet
        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua.
      </P>
    </React.Fragment>
  )
}


export default Example

Props

Name
Type
Description
Default
size
small | medium | large
Text size (from P.sizes)medium
color
primary | secondary
Text color (from P.colors)primary
childrenReact.ReactNode