Paragraph

Paragraph component is rendered as <p> and with default bottom margin of spacingM (1rem) applied. It is one of the most commonly used typography components.

Import

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

Examples

Basic

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

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

Open in Playground
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>
  );
}
Hide source

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:

Open in Playground
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>
  );
}
Hide source

Props (API reference)

• Name

  children(required)

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  isTruncated

  false

  true
• Name

  margin

  Description

  sets margin to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginBottom

  Description

  sets margin-bottom to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginLeft

  Description

  sets margin-left to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginRight

  Description

  sets margin-right to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginTop

  Description

  sets margin-top to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-paragraph