ComboStrap UI - Text

text is a typographic component that permits to style one or several paragraph at once.

Since version 1.4

<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 the userstyle stylesheet.
• 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, …)

<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.

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

• Output:

A text that looks like an heading level 1

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.

text-align 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 text-align="start">
This line of text is at the **start** of a paragraph (left for a left-to-right language)
</text>
<text text-align="center">
This line of text is **centered** inside the paragraph block.
</text>
<text text-align="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)

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>