Import
import { Text } from '@contentful/f36-components';//orimport { Text } from '@contentful/f36-typography';
Examples
function TextBasicExample() {return <Text>I love Forma 36 design system.</Text>;}
You can pass all basic font related parameters as properties of the component.
Changing the font size
To increase the font size of the text, you can pass the fontSize
property. Notice, that by default Text
component has no margins.
function TextFontSizeExample() {return (<Stack flexDirection="column"><Text fontSize="fontSize4Xl" lineHeight="lineHeight4Xl">(4xl) I love Forma 36 design system.</Text><Text fontSize="fontSize3Xl" lineHeight="lineHeight3Xl">(3xl) I love Forma 36 design system.</Text><Text fontSize="fontSize2Xl" lineHeight="lineHeight2Xl">(2xl) I love Forma 36 design system.</Text><Text fontSize="fontSizeXl" lineHeight="lineHeightXl">(xl) I love Forma 36 design system.</Text><Text fontSize="fontSizeL" lineHeight="lineHeightL">(l) I love Forma 36 design system.</Text><Text fontSize="fontSizeM" lineHeight="lineHeightM">(m) I love Forma 36 design system.</Text><Text fontSize="fontSizeS" lineHeight="lineHeightS">(s) I love Forma 36 design system.</Text></Stack>);}
Changing the font color
To increase the font color of the text, you can pass the fontColor
properties. You can use only colors allowed by Forma 36 color palette.
function TextColorsExample() {return (<Stack flexDirection="column"><Text fontColor="blue500">I love Forma 36 design system.</Text><Text fontColor="red500">I love Forma 36 design system.</Text><Text fontColor="gray900">I love Forma 36 design system.</Text></Stack>);}
as
property
To override the element that gets rendered, pass the as
property.
function TextPolymorphicExample() {return (<Stack flexDirection="column"><Text marginBottom="spacingM" as="i">Italic</Text><Text marginBottom="spacingM" as="u">Underline</Text><Text marginBottom="spacingM" as="del">Deleted</Text><Text marginBottom="spacingM" as="s">Strike Through</Text></Stack>);}
Truncated
function TextTruncateExample() {return (<Text isTruncated as="div">Lorem ipsum is placeholder text commonly used in the graphic, print, andpublishing industries for previewing layouts and visual mockups.</Text>);}
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 | |
fontColor | "blue100" "blue200" "blue300" "blue400" "blue500" "blue600" "blue700" "blue800" "blue900" "gray100" "gray200" "gray300" "gray400" "gray500" "gray600" "gray700" "gray800" "gray900" "green100" "green200" "green300" "green400" "green500" "green600" "green700" "green800" "green900" "orange100" "orange200" "orange300" "orange400" "orange500" "orange600" "orange700" "orange800" "orange900" "purple100" "purple200" "purple300" "purple400" "purple500" "purple600" "purple700" "purple800" "purple900" "red100" "red200" "red300" "red400" "red500" "red600" "red700" "red800" "red900" "colorPrimary" "colorPositive" "colorNegative" "colorWarning" "colorWhite" "yellow100" "yellow200" "yellow300" "yellow400" "yellow500" "yellow600" "yellow700" "yellow800" "yellow900" | |
fontSize | "fontSize4Xl" "fontSize3Xl" "fontSize2Xl" "fontSizeXl" "fontSizeXlHigh" "fontSizeL" "fontSizeLHigh" "fontSizeM" "fontSizeMHigh" "fontSizeS" "fontSizeSHigh" | |
fontStack | "fontStackPrimary" "fontStackMonospace" | |
fontWeight | "fontWeightNormal" "fontWeightMedium" "fontWeightDemiBold" | |
isTruncated | false true | |
isWordBreak | false true | |
letterSpacing | "letterSpacingDefault" "letterSpacingWide" | |
lineHeight | "lineHeightDefault" "lineHeightCondensed" "lineHeight4Xl" "lineHeight3Xl" "lineHeight2Xl" "lineHeightXl" "lineHeightXlHigh" "lineHeightL" "lineHeightLHigh" "lineHeightM" "lineHeightMHigh" "lineHeightS" "lineHeightSHigh" | |
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 |