Paragraph

For displaying multiple lines of text.

Examples

Paragraph (large, 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 (large, 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.

Paragraph (normal, 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 (normal, 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 (small, 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.

Paragraph (small, 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 size={P.sizes.large} color={P.colors.primary}>
Paragraph (large, primary) Lorem ipsum dolor sit amet adipisicing elit,
<strong>sed do eiusmod tempor incididunt</strong> 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.large} color={P.colors.secondary}>
Paragraph (large, secondary) Lorem ipsum dolor sit amet adipisicing
elit,
<strong>sed do eiusmod tempor incididunt</strong> 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} color={P.colors.primary}>
Paragraph (normal, primary) Lorem ipsum dolor sit amet adipisicing elit,
<strong>sed do eiusmod tempor incididunt</strong> 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} color={P.colors.secondary}>
Paragraph (normal, primary) Lorem ipsum dolor sit amet adipisicing elit,
<strong>sed do eiusmod tempor incididunt</strong> 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} color={P.colors.primary}>
Paragraph (small, secondary) Lorem ipsum dolor sit amet adipisicing
elit,
<strong>sed do eiusmod tempor incididunt</strong> 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} color={P.colors.secondary}>
Paragraph (small, secondary) Lorem ipsum dolor sit amet adipisicing
elit,
<strong>sed do eiusmod tempor incididunt</strong> 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
children
React.ReactNode