---
title: "Text element: write your page content"
description: "Add a paragraph, a heading or any plain text; Text is the most-used block for writing your page content."
url: https://docs.vivlab.com/en/editor/menu/text
---

# Text

The **Text** element displays a paragraph, a heading or any other simple textual content. It's the most-used block for writing the content of a page.

## Edit the content

The text is edited **directly on the canvas**: double-click on it to activate the text editor with formatting options (bold, italic, link, heading, list, alignment…). Select a portion of text to bring up the floating toolbar.

Click outside the block to leave edit mode.

<DocsScreenshot name="editor-text-toolbar" alt="The toolbar for text selected on the canvas." caption="The toolbar for text selected on the canvas." :width="702" :height="60" />

## Side panel settings

The side panel exposes the [style panel](https://docs.vivlab.com/en/editor/style/index.md), completed with an **Icon** subsection. There you configure:

- The [text style](https://docs.vivlab.com/en/editor/style/text.md): font, size, alignment, color, case, line height, letter spacing, weight.
- The [background](https://docs.vivlab.com/en/editor/style/background.md), [borders](https://docs.vivlab.com/en/editor/style/border.md), [shadow](https://docs.vivlab.com/en/editor/style/box-shadow.md) and [inner margins](https://docs.vivlab.com/en/editor/style/padding.md) of the block.
- The [vertical alignment](https://docs.vivlab.com/en/editor/style/align.md) of the content inside the block.
- The [animations](https://docs.vivlab.com/en/editor/style/transition.md) on appearance.

The text style applied here **takes precedence** over inline formatting (bold, italic). If you only want to edit a portion of text, use the text editor with formatting options on the canvas rather than the style panel.

## Icon

The **Icon** subsection, placed right after the text settings, adds an icon beside, above or below the text. Click **Add** to pick it, then adjust:

- **Placement**: **Icon position** (**Before the text**, **After the text**, **Above the text**, **Below the text**), vertical position (icon on the same line) or horizontal position (icon above/below), and **Space from the text**.
- **Colors**: **Icon color** and **Background color**. As soon as a background is set, two extra sliders appear: **Background rounding** and **Space around the icon**.

The **Edit** button and the trash icon let you change or remove the icon.