itext: applies typographic effect to characters or words

Undraw Add Content Re Vgqa


itext is a typographic component that permits to applies typographic effects to one or more characters / words.


<itext attributes></itext>


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



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


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.

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Recommended Pages
Undraw My Documents
ComboStrap - Font Size Typographic Attribute

How to set the font-size with the font-size attribute
Undraw My Documents
ComboStrap - Text color

How to change the color of a text with the text-color attribue
Undraw My Documents
ComboStrap - Text component - Apply text typographic effects

The text component lets you apply text typographic effects on one ore more paragraph.
Tooltip Illustration
ComboStrap UI - Tooltip

A Tooltip displays informative text when users hover over, focus on, or tap an element.
Undraw Add Content Re Vgqa
ComboStrap UI Inline components

Inline components are used inside a paragraph (ie in a line).
Undraw My Documents
How to set the Boldness (Font Weight / Strong)

boldness is a typographic effect that sets the font weight. It defines the width of a character outlines relative to its height. It's also known as strongness.
Undraw My Documents
How to underline words in ComboStrap

This article shows you the underline syntax
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Undraw Add Content Re Vgqa
Typographic effect and attributes in ComboStrap

How to add typographic effect to your text

Task Runner