This is a core component for displaying text and should be preferred for all typography

Using predefined headings

Use these heading shortcuts to create Text-components with the preset-property set to the corresponding heading.

Heading 1

Heading 2

Heading 3

Heading 4

Also a heading 4

Using the mark-property for highlighting text

If the string value entered in the mark-property is found within the Text-component it will be highlighted with a yellow backgroundcolor

Here is some text showing how the mark-property is used

Render the Text-component as other than a div

The Text component is by default rendered as a div-element, but that can be changed using the as-property

This text will be rendered within a p-tag

Size, Weight and Color

Here is an example of setting the size, weight and color

This is a bolder red text of size 4