> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/basic/text.md).

# Text

Add rich text content with responsive width, alignment, text style, text color, and spacing controls.

The **Text** block adds supporting copy, descriptions, labels, or short rich text content anywhere a compatible section or container accepts basic blocks. Use it below headings, beside images, inside banners, or in layout groups when you need customer-facing explanation that is easier to scan than a long paragraph.

### 1. What you can do

* Add rich text with basic formatting and inline emphasis
* Set the text width and alignment for desktop and mobile
* Apply a text style from [Theme settings > Typography](/arctos-theme/theme-settings/typography.md)
* Use custom typography when one text block needs a unique treatment
* Choose a text color calculated from theme colors
* Add margin around the block, with separate mobile spacing if needed

### 2. How to add a Text block

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a text block**

Click **Add block**, then select **Text**.
{% endstep %}

{% step %}
**Enter your text**

Type your text content into the field.
{% endstep %}

{% step %}
**Adjust the settings**

Set layout, typography, color, and spacing.
{% endstep %}

{% step %}
**Preview the text**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

Use these settings to write the text, control its line length and alignment, choose its typography treatment, and adjust spacing around it.

<details>

<summary>Content</summary>

Content settings control the text customers read on the storefront.

<table><thead><tr><th width="99.859375">Setting</th><th width="119.7890625">Options</th><th width="463.01953125">What it does</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Rich text</td><td>Adds the text content shown on the storefront. Use it for descriptions, supporting paragraphs, short notes, labels, or formatted copy with inline links and emphasis.</td></tr><tr><td><strong>Highlight style</strong></td><td><ul><li>None</li><li>Standard</li></ul></td><td>Controls how highlighted words inside the text are styled. When set to <strong>None</strong> (default), emphasized words display as standard italics. When set to <strong>Standard</strong>, text formatted with italic/emphasis (<code>&#x3C;em></code>) applies the theme highlight typography from <a href="/arctos-theme/theme-settings/typography.md">Theme settings > Typography > Highlight</a>.</td></tr></tbody></table>

</details>

<details>

<summary>Layout</summary>

Layout controls define how wide the Text block is and how the copy sits inside that width. Use these settings to create comfortable line lengths, align text with nearby blocks, or make short text behave like a compact label.

<table><thead><tr><th width="110.12109375">Setting</th><th width="118.23046875">Options</th><th width="453.85546875">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong> makes the text only as wide as its content needs (default).</li><li><strong>Fill</strong> stretches the text to fill the available width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Text alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td><p>Aligns the text inside the block width. Use centered text for short hero or promotional callouts, and left alignment for longer or editorial paragraphs.</p><p><em>Only available when <strong>Width</strong> is set to <strong>Fill</strong> or <strong>Custom</strong>.</em></p></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate width, unit, custom width, and text alignment specifically for mobile screens.</td></tr></tbody></table>

{% hint style="info" %}
**Tip:** For readable paragraph text, avoid overly wide line lengths. A custom pixel width can keep long copy comfortable to read inside large desktop sections.
{% endhint %}

</details>

<details>

<summary>Style</summary>

Style controls the text's typography and color. These settings reuse the same typography system as **Theme settings > Typography**, so use the theme settings page to define your store-wide text styles, then use this block only when the individual text block needs a specific treatment.

<table><thead><tr><th width="125.08203125">Setting</th><th width="167.07421875">Options</th><th width="390.42578125">What it does</th></tr></thead><tbody><tr><td><strong>Text style</strong></td><td><ul><li>Default</li><li>Display</li><li>H1–H6</li><li>Paragraph</li><li>Eyebrow text</li><li>Description</li><li>Label</li><li>Custom</li></ul></td><td><p>Sets the text's visual font style using a predefined combination of font family, size, weight, line height, letter spacing, and case from <a href="/arctos-theme/theme-settings/typography.md">Theme settings > Typography</a>.</p><p>Choose <strong>Default</strong> to let the block follow its natural text style, or choose a named style when the text needs to look like an eyebrow text, paragraph, description, label, or larger display line.</p></td></tr><tr><td><strong>Custom typography controls</strong></td><td>Font family, font size, line height, letter spacing, font weight, and case</td><td><p>These controls work the same way as typography controls in <a href="/arctos-theme/theme-settings/typography.md">Theme settings > Typography</a>, so use Typography for the full explanation of each setting.</p><p><em>Only available when <strong>Text style</strong> is set to <strong>Custom</strong>.</em></p></td></tr><tr><td><strong>Text color</strong></td><td><ul><li>Strong</li><li>Base</li><li>Light</li><li>Subtle</li></ul></td><td>Sets the text color using theme color tokens. Defaults to <strong>Paragraph</strong> (Base). <em>Only visible when <strong>Text style</strong> is not set to <strong>Default</strong>.</em></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a separate text style for mobile.</td></tr></tbody></table>

{% hint style="info" %}
**Text style** changes how the text looks, not what the text means structurally. For main titles and section hierarchy, use the [Heading](/arctos-theme/blocks/basic/heading.md) block.
{% endhint %}

</details>

<details>

<summary>Spacing</summary>

Spacing controls add room around the Text block so it sits cleanly with nearby headings, buttons, images, or container edges.

<table><thead><tr><th width="113.93359375">Setting</th><th width="131.58203125">Options</th><th width="437.08984375">What it does</th></tr></thead><tbody><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Sets the spacing around the text block to separate it from neighboring blocks, with individual top, bottom, left, and right controls.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate margin values for mobile. <em>Only available when <strong>Margin</strong> is On.</em></td></tr></tbody></table>

</details>