Paragraph

Import

import { Paragraph } from '@contentful/f36-components';
// or
import { Paragraph } from '@contentful/f36-typography';

Examples

Basic

Hide code
function ParagraphExample() {
  return <Paragraph>I love Forma 36 design system.</Paragraph>;
}
function ParagraphExample() {
  return <Paragraph>I love Forma 36 design system.</Paragraph>;
}
Open in Playground

Margins

By default Paragraph component has a margin bottom of spacingM (1rem). You can override the default margin bottom by specifying it explicitly on the component level by marginBottom="none" or any other value from our spacing options

Hide code
function ParagraphSpacingExample() {
  return (
    <Flex flexDirection="column">
      <Paragraph marginBottom="none">I love Forma 36 design system.</Paragraph>
      <Paragraph marginBottom="spacingXl">
        I love Forma 36 design system.
      </Paragraph>
      <Paragraph marginTop="spacingS">I love Forma 36 design system.</Paragraph>
    </Flex>
  );
}
function ParagraphSpacingExample() {
  return (
    <Flex flexDirection="column">
      <Paragraph marginBottom="none">I love Forma 36 design system.</Paragraph>
      <Paragraph marginBottom="spacingXl">
        I love Forma 36 design system.
      </Paragraph>
      <Paragraph marginTop="spacingS">I love Forma 36 design system.</Paragraph>
    </Flex>
  );
}
Open in Playground

Truncated text

Sometimes you might have to truncate the text in the Paragraph component, so we provide the prop especially for that. Under the hood, what it does is add overflow: hidden and set text-overflow to ellipsis. Have a look at the example below:

Hide code
function ParagraphTruncatedExample() {
  return (
    <Flex style={{ maxWidth: '200px' }}>
      <Paragraph isTruncated>
        I love Forma 36 design system, I love Forma 36 design system, I love
        Forma 36 design system
      </Paragraph>
    </Flex>
  );
}
function ParagraphTruncatedExample() {
  return (
    <Flex style={{ maxWidth: '200px' }}>
      <Paragraph isTruncated>
        I love Forma 36 design system, I love Forma 36 design system, I love
        Forma 36 design system
      </Paragraph>
    </Flex>
  );
}
Open in Playground

Density support

This component supports multiple densities thanks to the useDensity hook and automatically adjusts its styling for each density (when wrapped with the DensityProvider).