Paragraph

Primitive typographic component meant to display text blocks, defaults to <p>.

import { Paragraph } from 'theme-ui'

<Paragraph>Hello World!</Paragraph>
<Paragraph variant="block">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc elit,
  feugiat ut velit eget, pellentesque accumsan libero. Duis interdum ante sed
  ipsum imperdiet congue nec non mauris. Quisque ac ultricies nunc. Sed nisi
  diam, suscipit eu laoreet a, bibendum nec mauris. Aliquam tristique rhoncus
  ipsum scelerisque egestas. Maecenas rhoncus malesuada mauris, vel porta ex
  tincidunt non. Duis ac sapien in felis fermentum tristique. Nam a erat
  faucibus, varius magna ac, interdum tortor. Aenean quis varius mi, nec
  molestie neque. In dignissim diam in velit pharetra cursus. Integer gravida,
  arcu non sagittis iaculis, justo leo facilisis augue, consequat mollis risus
  erat quis velit. In turpis nibh, ornare ut facilisis id, dignissim non enim.
  Fusce maximus elit sit amet dolor aliquet, et tristique elit eleifend. Aenean
  ornare tortor sem, at sollicitudin ipsum scelerisque a.
</Paragraph>
<Paragraph as="small" sx={{ fontStyle: 'italic' }}>Something a bit less important</Paragraph>
<Paragraph>Hello World!</Paragraph>
<Paragraph variant="block">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc elit,
  feugiat ut velit eget, pellentesque accumsan libero. Duis interdum ante sed
  ipsum imperdiet congue nec non mauris. Quisque ac ultricies nunc. Sed nisi
  diam, suscipit eu laoreet a, bibendum nec mauris. Aliquam tristique rhoncus
  ipsum scelerisque egestas. Maecenas rhoncus malesuada mauris, vel porta ex
  tincidunt non. Duis ac sapien in felis fermentum tristique. Nam a erat
  faucibus, varius magna ac, interdum tortor. Aenean quis varius mi, nec
  molestie neque. In dignissim diam in velit pharetra cursus. Integer gravida,
  arcu non sagittis iaculis, justo leo facilisis augue, consequat mollis risus
  erat quis velit. In turpis nibh, ornare ut facilisis id, dignissim non enim.
  Fusce maximus elit sit amet dolor aliquet, et tristique elit eleifend. Aenean
  ornare tortor sem, at sollicitudin ipsum scelerisque a.
</Paragraph>
<Paragraph as="small" sx={{ fontStyle: 'italic' }}>Something a bit less important</Paragraph>

Use the as prop to set the correct HTML element independent from styling.

Variants

Text style variants can be defined in the theme.text object. The Paragraph component uses theme.text.paragraph as its default variant style.

// example theme variants
{
  text: {
    block: {
      variant: 'paragraph',
      my: 2,
      textAlign: 'justify',
      textAlignLast: 'start',
      textJustify: 'auto',
    },
  }
}