| Variant | Font size | DOM tag | Styling |
|---|---|---|---|
primary | 14px | span | |
secondary | 13px | span | Opaque font color |
h1 | 17px | h1 | Semi-bold |
h2 | 16px | h2 | Semi-bold |
h3 | 15px | h3 | Semi-bold |
h4 | 14px | h4 | Semi-bold |
h5 | 13px | h5 | Semi-bold |
h6 | 12px | h6 | Semi-bold |
Text
core package4.0.1
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The Text component uses the Open Sans font family with a variety of sizes and styles.
Usage
The Text component takes a range of variants that correlate to various font sizes. Find more about the variants in the table below.
Text can also be styled to reflect status. This will change the color of the Text. The secondary variant also has a more opaque font color than the rest.
Examples
Related components
Properties
| Name | Description | Default | Type |
|---|---|---|---|
children* | Text content. | | ReactNode |
as | HTML tag or React Component to render the component as. | | ElementType |
className | Additional CSS classes. | | string |
forwardedAs | HTML tag or React Component to finally render the component as. | | ElementType |
ref | Ref for the wrapping element. | | Ref<HTMLHeadingElement |HTMLSpanElement> |
status | Render text with semantic color based on a status. | | 'error' |'success' |'warning' |
variant | Typographical sizes and styles. | 'primary' | HeadingTag |'primary' |'secondary' |