Import
import { Text } from '@contentful/f36-components';
import { 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, and
publishing industries for previewing layouts and visual mockups.
</Text>
);
}