> 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/heading.md).

# Heading

Add a configurable heading with responsive width, alignment, text style, text color, and spacing controls.

The **Heading** block adds a title or short message anywhere a compatible section or container accepts basic blocks. Use it for section titles, campaign headlines, editorial callouts, banner messages, and any short text that needs clear visual hierarchy.

### 1. What you can do

* Add a short heading with optional inline emphasis
* Choose the heading tag for page structure and SEO
* Set the heading width and text alignment for desktop and mobile
* Apply a text style from [Theme settings > Typography](/arctos-theme/theme-settings/typography.md)
* Use custom typography when one heading needs a unique style
* Choose a text color
* Add margin around the block, with separate mobile spacing if needed

### 2. How to add a Heading block

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

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

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

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

{% step %}
**Enter the heading text**

Type the heading text into the field.
{% endstep %}

{% step %}
**Choose the heading tag**

Pick the heading tag that matches the page structure.
{% endstep %}

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

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

{% step %}
**Preview the heading**

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

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

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

{% hint style="info" %}
Use one **H1** per page when possible. For most section titles, **H2** or **H3** is the better choice because it keeps the page structure clear for search engines and assistive technologies.
{% endhint %}

### 3. Block settings

Use these settings to write the heading, control its semantic heading level, size and align the block, choose its typography treatment, and adjust spacing around it.

<details>

<summary>Content</summary>

Content settings control the visible heading text and the heading level used in the page structure.

<table><thead><tr><th width="121.50390625">Setting</th><th width="133.55859375">Options</th><th width="483.28125">What it does</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Inline rich text</td><td>Adds the text customers see on the storefront. Keep it short and specific so customers can quickly understand what the surrounding content is about.</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 heading are styled. When set to <strong>Standard</strong> (default), 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>. When set to <strong>None</strong>, emphasized words display as standard italics.</td></tr><tr><td><strong>Heading tag</strong></td><td><ul><li>h1–h6</li><li>p</li></ul></td><td>Chooses the structural level for the heading. Use heading tags to describe the page hierarchy, not only to change the visual size. Choose <strong>p</strong> when the text should look like a heading but should not create a new page heading level.</td></tr></tbody></table>

</details>

<details>

<summary>Layout</summary>

Layout controls define how wide the Heading block is and how the text sits inside that width. Use these settings when a heading needs to align with nearby blocks, stay narrow for readability, or fill the available container.

<table><thead><tr><th width="110.12109375">Setting</th><th width="180.171875">Options</th><th width="392.1953125">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 heading only as wide as its text needs.</li><li><strong>Fill</strong> stretches the heading 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 heading text inside the block width. Use centered text for short hero or promotional headings, and left alignment for longer or editorial headings.</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 long headings, use **Fill** or a custom percent width so the text wraps predictably. Very narrow custom widths can create awkward one-word lines on mobile.
{% endhint %}

</details>

<details>

<summary>Style</summary>

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

<table data-search="false"><thead><tr><th width="120.25390625">Setting</th><th width="170.11328125">Options</th><th width="392.7578125">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>Custom</li></ul></td><td><p>Sets the 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 the style that matches its heading tag, or choose a named style when you want a different visual size without changing the page structure.</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 options calculated from the heading and body colors in <a href="/pages/1b5ffa40c2962e0b91c4af81ede33af2f4c7d020#id-2.1.-general">Theme settings > Colors</a>. Choose the option that matches the role of the heading in the surrounding content.</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** controls visual style, while **Heading tag** controls page structure. For example, a section title can use an **H2** heading tag while visually using the **Heading 3** style.
{% endhint %}

</details>

<details>

<summary>Spacing</summary>

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

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="376.16796875">When to use</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 heading 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>