ComboStrap UI - Text
Table of Contents
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:
- 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.
-
- 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-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.