About
itext is a typographic component that permits to applies typographic effects to one or more characters / words.
- It's an inline component. Therefore, it can be used in a line and will not create a new line.
- If you want to applies the typographic attributes on a paragraph, you should use the text component.
Syntax
<itext attributes></itext>
where:
- attributes are any typographic attributes
Note that the color attribute 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
Example
Boldness
With boldness:
- Input
This text is a <itext boldness="black">black text</itext>
- Output:
This text is a black text
First letter
With the font-size attribute
- Input:
<itext font-size="h1" bold>T</itext>he first letter has the same size than the first heading
- Output:
The first letter has the same size than the first heading
Color
This example shows the color values specific to the itext and text component
<itext color="body">Text with the body color.</itext>
<itext color="muted">Text with the muted color.</itext>
<itext color="black-50">Text with the black-50 color.</itext>
<itext color="white-50" background-color="black">Text with the white-50 color.</itext>
Text with the body color. Text with the muted color. Text with the black-50 color. Text with the white-50 color.