Import
import { DisplayText } from '@contentful/f36-components';// orimport { DisplayText } from '@contentful/f36-typography';
Examples
Basic
Margins
Forma 36 typography components provide a way to set their own margins. By default DisplayText
component has a margin bottom (spacingL
or spacingXl
depending on size
property).
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
as
property
We provide you with as
property, to allow you to set the tag of the DisplayText
component to another tag than h2
.
Composition
Props (API reference)
Open in StorybookName | Type | Default |
---|---|---|
as | HTML Tag or React Component (e.g. div, span, etc) | |
children | ReactNode | |
className | string CSS class to be appended to the root element | |
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 | |
size | "default" "large" | |
testId | string A [data-test-id] attribute used for testing purposes |