> 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/storytelling/jumbo-text.md).

# Jumbo text

Add oversized decorative or promotional text with responsive sizing, typography, animation, color, and spacing controls.

The **Jumbo text** block adds an oversized word, phrase, or short message to a compatible section or container. Use it for bold campaign moments, editorial accents, collection labels, launch announcements, or decorative brand text that needs to feel larger and more expressive than a normal Heading block.

### 1. What you can do

* Add a large text statement, label, or decorative word
* Align the text left, center, or right
* Size the text by pixel height or by percentage width
* Set separate size controls for mobile
* Choose font family, line height, letter spacing, font weight, case, and text color
* Add Blur reveal or Reveal text animation
* Add margin around the block, with separate mobile spacing if needed

### 2. How to add a Jumbo text block

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

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

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

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

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

Type the text you want to display.
{% endstep %}

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

Control the size, typography, animation, and spacing.
{% endstep %}

{% step %}
**Preview the result**

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

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

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

{% hint style="info" %}
**Tip:** Use Jumbo text for short copy. One word or a very short phrase usually creates the strongest visual impact and is easier to keep readable on mobile.
{% endhint %}

### 3. Block settings

Use these settings to write the oversized text, control its responsive scale, style it with theme typography options, choose an optional animation, and add spacing around it.

<details>

<summary>Content</summary>

Content settings control the text customers see and how it sits inside the available space.

<table><thead><tr><th width="109.70703125">Setting</th><th width="109.9296875">Options</th><th width="463.453125">What it does</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Text area</td><td>Adds the visible text shown on the storefront. Use short words, campaign labels, or brief promotional phrases that can stay legible at a large size.</td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td>Aligns the Jumbo text inside its available area. Use centered alignment for hero-style statements, left alignment for editorial layouts, and right alignment when the block needs to balance nearby imagery or content.</td></tr></tbody></table>

</details>

<details>

<summary>Size</summary>

Size controls determine how large the Jumbo text appears on desktop and, when enabled, on mobile. Choose a pixel height when you want a specific display size, or a percentage width when the text should scale with the parent container.

<table data-search="false"><thead><tr><th width="95.97265625">Setting</th><th width="115.21875">Options</th><th width="470.83203125">What it does</th></tr></thead><tbody><tr><td><strong>Unit</strong></td><td><ul><li>Pixel</li><li>Percent</li></ul></td><td><ul><li><strong>Pixel</strong> lets you set the text size with an exact height.</li><li><strong>Percent</strong> lets you set the text size relative to the available width.</li></ul></td></tr><tr><td><strong>Height</strong></td><td>16-320px</td><td><em>Available when <strong>Unit</strong> is set to <strong>Pixel</strong></em>. Sets the desktop height of the Jumbo text. Use larger values for hero or banner moments and smaller values when the text sits inside a compact group.</td></tr><tr><td><strong>Width</strong></td><td>10-100%</td><td><em>Available when <strong>Unit</strong> is set to <strong>Percent</strong></em>. Sets the desktop width used to scale the Jumbo text within the parent area.</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 unit and size controls specifically for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

Style controls set the Jumbo text's typography and color. These settings work the same way as typography controls in [**Theme settings > Typography**](/arctos-theme/theme-settings/typography.md), so use the theme settings page to understand your store-wide font roles, then use this block only when this one oversized text block needs a specific treatment.

<table><thead><tr><th width="120.4921875">Setting</th><th width="158.0078125">Options</th><th width="404.265625">What it does</th></tr></thead><tbody><tr><td><strong>Custom typography controls</strong></td><td>Font family, line height, letter spacing, font weight, and case</td><td>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.</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 Jumbo text color using color tokens calculated from the heading and body colors in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>. Choose the option that matches the role of the Jumbo text in the surrounding content.</td></tr></tbody></table>

{% hint style="info" %}
**Tip:** Preview long words carefully on mobile. Oversized type can become powerful fast, but it can also wrap awkwardly if the size, letter spacing, or word length is too ambitious.
{% endhint %}

</details>

<details>

<summary>Animation</summary>

Animation controls how the Jumbo text appears when customers reach it on the page.

<table><thead><tr><th width="104.4921875">Setting</th><th width="135.40234375">Options</th><th width="442.515625">What it does</th></tr></thead><tbody><tr><td><strong>Text animation</strong></td><td><ul><li>None</li><li>Blur reveal</li><li>Reveal</li></ul></td><td><ul><li><strong>None</strong> shows the text without an entrance animation.</li><li><strong>Blur reveal</strong> reveals the text with a softened motion effect.</li><li><strong>Reveal</strong> reveals the text with a cleaner entrance effect.</li></ul></td></tr><tr><td><strong>Repeat animation</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li><strong>On</strong> lets the reveal effect replay instead of only appearing once. <em>Available when <strong>Text animation</strong> is not set to <strong>None</strong>.</em></li><li><strong>Off</strong> plays the entrance effect once, keeping the page calmer after the text has appeared.</li></ul></td></tr></tbody></table>

{% hint style="info" %}
Use animation as emphasis, not as the message itself. The text should still make sense and feel complete if a customer scrolls quickly or views the page on a device where motion is reduced.
{% endhint %}

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="376.3671875">What it does</th></tr></thead><tbody><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the block to separate it from neighboring blocks.</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.</td></tr></tbody></table>

</details>