Table of Contents

About

text is a typographic component that permits styling one or several paragraphs at once.

Syntax

<text type>
First paragraph

Second paragraph
</text>

where:

  • type can take the values:
    • lead: It makes a paragraph stand out by setting a bigger font-size and weight
    • h1 to h6: when you want to match the font styling of a heading.
    • custom class that you have created in your theme.
  • line-spacing sets the space between the lines of a paragraph.
  • color can take all color values and the specific text colors:
    • body: the color of the body
    • muted : light gray
    • black-50 : 50 black
    • white-50 : 50 white
  • or any typographic attributes (font size, font weight, …)

Example

Lead

<text lead>
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</text>

**versus:**

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

versus:

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading style

<text h1>
A text that looks like an heading level 1
</text>
  • Output:

A text that looks like an heading level 1

Line-Spacing

line-spacing is a styling attribute that lets you define the height between each line inside a paragraph.

Example: 

<text line-spacing="xs" width="40rem">
**Extra-small line space**. This is a long paragraph written to show how the line-height of an element is affected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</text>
<text line-spacing="sm" width="40rem">
**Small line space**. This is a long paragraph written to show how the line-height of an element is affected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</text>
<text line-spacing="md" width="40rem">
**Medium line space**. This is a long paragraph written to show how the line-height of an element is affected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</text>
<text line-spacing="lg" width="40rem">
**Large line space**. This is a long paragraph written to show how the line-height of an element is affected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</text>
  • Output:

Extra-small line space. This is a long paragraph written to show how the line-height of an element is affected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small line space. This is a long paragraph written to show how the line-height of an element is affected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Medium line space. This is a long paragraph written to show how the line-height of an element is affected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Large line space. This is a long paragraph written to show how the line-height of an element is affected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If you want to add space between component, you should use the spacing attribute

Text-Align

text alignment lets you define where the line of text will be located inside the paragraph. A paragraph is a block and takes by default all the available width

Example: 

<text align="text-start">
This line of text is at the **start** of a paragraph (left for a left-to-right language)
</text>
<text align="text-center">
This line of text is **centered** inside the paragraph block.
</text>
<text align="text-end">
This line of text is at the **end** of a paragraph (right for a left-to-right language)
</text>
  • Output:

This line of text is at the start of a paragraph (left for a left-to-right language)

This line of text is centered inside the paragraph block.

This line of text is at the end of a paragraph (right for a left-to-right language)

Text alignment can also be screen conditional.

Color

This example shows the color values specific to the text and itext component 

<box width="fit" spacing="p-3">
    <text color="body">Text with the body color.</text>
    <text color="muted">Text with the muted color.</text>
    <text color="black-50">Text with the black-50 color.</text>
    <text color="white-50" background-color="black">Text with the white-50 color.</text>
</box>

Text with the body color.

Text with the muted color.

Text with the black-50 color.

Text with the white-50 color.