# 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';// orimport { Paragraph } from '@contentful/f36-typography';`

## Examples

### Basic

```function ParagraphExample() {
return <Paragraph>I love Forma 36 design system.</Paragraph>;
}function ParagraphExample() {  return <Paragraph>I love Forma 36 design system.</Paragraph>;}
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}

/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}

.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
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

```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>  );}
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}

/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}

.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
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:

```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>  );}
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}

/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}

.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
Open in Playground```

## Props (API reference)

Open in Storybook

### Default

children
required
ReactNode

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

isTruncated
false
true

isWordBreak
false
true

margin
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin to one of the corresponding spacing tokens

marginBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-left to one of the corresponding spacing tokens

marginRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-right to one of the corresponding spacing tokens

marginTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-top to one of the corresponding spacing tokens

testId
string

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

cf-ui-paragraph