docs:content:itext

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.

Table of Contents