Text

With the <Text> component you can easily add different HTML paragraph elements. It should be used when you want to write long text paragraphs.

You can add properties like align, color or fontSize to the <Text>. You also have the opportunity to add sizes and custom variants to the component.

Import


import { Text } from '@marigold/components';

AppearanceTable

Property	Type	Description
`variant`	`bold \| muted`	The available variants of this component.
`size`	`-`	The available sizes of this component.

Props

Property	Type	Default	Description
`align`	`"left" \| "cenetr" \| "right"`	`none`	Aligns the text.
`color`	`string`	`currentColor`	Set the text color.
`cursor`	`string`	`text`	Set the cursor for the text element.
`fontSize`	`"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl"`	`none`	Set the font size for the text element.
`weight`	`"thin" \| "extralight" \| "light" \| "normal" \| "medium" \| "semibold" \| "bold" \| "extrabold" \| "black"`	`none`	Set the font weight for the text element.
`fontStyle`	`"italic" \| "normal"`	`none`	Set the font style for the text element.

Examples

Default paragraph Text

Here you can see a typical text section.

Preview

Code

Colored Text

This <Text> element has the property color with it.

Preview

Code