Paragraph

For displaying multiple lines of 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

Usage & types

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