This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Paragraph

Paragraph component is rendered as <p> and with default bottom margin of 16px (spacingM) 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';

Code examples

You can override the default margin bottom by specifying it explicitly.

Props

NameRequiredDefaultTypeDescription
isTruncated
false
true
marginSpacingsets margin to one of the corresponding spacing tokens
marginBottomSpacingsets margin-bottom to one of the corresponding spacing tokens
marginLeftSpacingsets margin-left to one of the corresponding spacing tokens
marginRightSpacingsets margin-right to one of the corresponding spacing tokens
marginTopSpacingsets margin-top to one of the corresponding spacing tokens
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-paragraphstringA [data-test-id] attribute used for testing purposes