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.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Colored Text
This <Text> element has the property color with it.
Pink is awesome!