ComboStrap UI - Text

About

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

Since version 1.4

Syntax

<text type>
First paragraph

Second paragraph
</text>

where:

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

Text alignment can also be screen conditional.

For all information about this attribute, see the dedicated page: ComboStrap Styling - Text Align Attribute

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.

Powered by ComboStrap